/* ============================================================
   WEGAM — Page Projets
   Feuilles independantes (large / 50 %), parallaxe douce,
   filtres par savoir-faire, fond graffiti discret.
   Palette : #0D0D0D / #F2F0EB / #fb0301 / #9A9A94.
   Photo graffiti : Nicholas Doherty / Unsplash (Unsplash License).
   ============================================================ */

@font-face {
  font-family: 'Druk Wide';
  src: url('/fonts/druck/DrukWideBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Morseo';
  src: url('/fonts/morseo/MORSEO-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Morseo';
  src: url('/fonts/morseo/MORSEO-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Les pages WebGL bloquent le scroll : on le rend natif ici. */
html:has(body.wg-work-page) {
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  background: #0d0d0d;
}

body.wg-work-page {
  height: auto !important;
  min-height: 100%;
  background: #0d0d0d;
  color: #f2f0eb;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* ---- Fond graffiti, tres discret ---- */
.wk-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0d0d0d url('/textures/graffiti.jpg') center / cover no-repeat;
  opacity: 0.09;
  filter: grayscale(1) contrast(1.05) brightness(0.5);
}

.wk-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.7);
}

/* Halos rouges sur les bords. */
body.wg-work-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 80% at -6% 38%, rgba(251, 3, 1, 0.2), rgba(251, 3, 1, 0) 62%),
    radial-gradient(45% 70% at 106% 58%, rgba(251, 3, 1, 0.14), rgba(251, 3, 1, 0) 60%);
}

.wk {
  position: relative;
}

/* ---- Hero : NOS / PROJETS ---- */
.wk-hero {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - var(--wg-bar, 152px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1rem, 3vw, 3rem);
  pointer-events: none;
}

.wk-title-wrap {
  position: relative;
  width: 100%;
  text-align: center;
}

.wk-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: 'Druk Wide', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 13.5vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.wk-title__nos {
  display: block;
  color: #fb0301;
}

.wk-title__main {
  display: block;
  color: #f2f0eb;
}

/* ---- Filtres ---- */
.wk-filter-slot {
  position: relative;
  z-index: 30;
  margin-top: -12vh;
}

.wk-filterbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1.8rem);
  padding: 18px clamp(1.2rem, 4vw, 4rem) 24px;
  background: transparent;
  transform-origin: center center;
  will-change: transform;
}

.wk-filterbar.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(
    to bottom,
    rgba(13, 13, 13, 0.95) 0%,
    rgba(13, 13, 13, 0.78) 60%,
    rgba(13, 13, 13, 0) 100%
  );
}

.wk-filter {
  position: relative;
  padding: 0.15em 0.45em;
  border: 0;
  background: none;
  color: #f2f0eb;
  font-family: 'Morseo', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: clamp(0.66rem, 1.15vw, 1.05rem);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: none;
  transition: color 0.3s ease;
}

.wk-filter sup {
  margin-left: 0.28em;
  font-size: 0.5em;
  font-weight: 600;
  color: #9a9a94;
  vertical-align: super;
}

.wk-filter:hover {
  color: #fb0301;
}

.wk-filter.is-active {
  color: #fb0301;
}

/* Charte : pas de cercle dessine, un simple filet rouge. */
.wk-filter.is-active::after {
  content: '';
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  bottom: -0.12em;
  height: 2px;
  background: #fb0301;
}

/* ---- Empilement ---- */
/* Chaque projet est une « feuille » pleine hauteur, collee en haut.
   La feuille suivante monte par-dessus : les cartes se recouvrent. */
.wk-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 2vw;
}

.wk-row {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  width: 100%;
  height: calc(100svh - var(--wg-bar, 152px));
  box-sizing: border-box;
  padding: clamp(56px, 7vh, 90px) 0 0;
}

.wk-card {
  display: block;
  flex: 0 0 auto;
  width: 88vw;
  color: inherit;
  text-decoration: none;
  transform-origin: center center;
}

.wk-card--half {
  width: 47vw;
}

.wk-frame {
  position: relative;
  padding: 10px 10px 0;
  border: 1px solid rgba(242, 240, 235, 0.18);
  border-radius: 12px;
  background: #050505;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform: rotate(var(--tilt, -1.5deg));
  transform-origin: center center;
  will-change: transform;
  transition: box-shadow 0.4s ease;
}

.wk-card:hover .wk-frame {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.62);
}

.wk-strip-top,
.wk-strip-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.34rem 0.15rem;
  font-family: 'Morseo', 'Helvetica Neue', sans-serif;
  font-size: clamp(0.42rem, 0.52vw, 0.58rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 240, 235, 0.78);
  white-space: nowrap;
}

.wk-strip-bottom {
  padding-bottom: 0.52rem;
}

.wk-strip-top span:nth-child(odd) {
  color: #fb0301;
}

.wk-media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
  height: min(calc(88vw * 9 / 16), calc(100svh - 300px));
}

.wk-card--half .wk-media {
  height: min(calc(47vw * 3 / 4), calc(100svh - 300px));
}

.wk-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.wk-card:hover .wk-media img {
  transform: scale(1.04);
}

.wk-media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.wk-name {
  position: absolute;
  left: clamp(0.8rem, 2vw, 1.8rem);
  right: clamp(0.8rem, 2vw, 1.8rem);
  bottom: clamp(0.35rem, 0.9vw, 0.9rem);
  z-index: 2;
  margin: 0;
  font-family: 'Druk Wide', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.9vw, 5.2rem);
  line-height: 0.84;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #f2f0eb;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.wk-card--half .wk-name {
  font-size: clamp(1.1rem, 2.3vw, 2.2rem);
}

.wk-cat {
  color: #fb0301;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wk-card--half .wk-strip-top,
.wk-card--half .wk-strip-bottom {
  font-size: clamp(0.34rem, 0.4vw, 0.46rem);
  letter-spacing: 0.12em;
}

.wk-side {
  position: absolute;
  top: 50%;
  z-index: 2;
  font-family: 'Morseo', 'Helvetica Neue', sans-serif;
  font-size: clamp(0.36rem, 0.42vw, 0.48rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 3, 1, 0.9);
  writing-mode: vertical-rl;
  pointer-events: none;
}

.wk-side--l {
  left: 2px;
  transform: translateY(-50%) rotate(180deg);
}

.wk-side--r {
  right: 2px;
  transform: translateY(-50%);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .wk-filterbar {
    gap: 0.65rem 1.1rem;
  }

  .wk-filter-slot {
    margin-top: -9vh;
  }
}

@media (max-width: 640px) {
  /* Mobile : pas de pile sticky, les cartes se suivent en colonne. */
  .wk-row,
  .wk-row--half {
    position: relative;
    height: auto;
    flex-direction: column;
    gap: 4vh;
    padding: 0 0 9vh;
  }

  .wk-card,
  .wk-card--half {
    width: 92vw;
  }

  .wk-card--half .wk-media,
  .wk-media {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .wk-filterbar {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wk-filterbar::-webkit-scrollbar {
    display: none;
  }

  .wk-filter {
    flex: none;
  }

  .wk-strip-top,
  .wk-strip-bottom {
    font-size: 0.4rem;
    letter-spacing: 0.12em;
  }
}