:root {
  --blue: #4967ef;
  --navy: #132238;
  --lime: #e6ff3f;
  --cream: #d8e1e7;
  --coral: #ff8f80;
  --sky: #76c9f4;
  --mint: #8ce3c2;
  --watermelon: #ff6481;
}

@font-face {
  font-family: "Ka Blam";
  src: url("font/ka_blam/Ka Blam.ttf") format("truetype");
  font-display: swap;
}

body { background: linear-gradient(135deg, #c8d2da 0%, #e1e6e9 48%, #aebfcb 100%); }
.marquee, .collection, .process, .quality, footer { display: none !important; }
.announcement { display: none; }
.nav-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
.nav-wrap nav { display: none; }
.nav-actions { margin-left: auto; }
.logo span { background: var(--watermelon); }
.btn.primary { background: var(--watermelon); }
.cart-btn b, .marquee, .badge, .btn.lime { background: var(--lime); }
.cobalt { background: var(--sky); }
.coral { background: var(--coral); }
.acid { background: var(--lime); }
.lilac { background: var(--mint); }
.process { background: #6378ec; }
.steps article { background: rgba(80, 104, 224, .55); }
.kicker.light, .step-icon { color: var(--lime); }
.collection, .quality { background: linear-gradient(135deg, #d7e0e6 0%, #edf0f1 48%, #b8c7d1 100%); }

/* Les cartes sont plus petites et laissent davantage respirer la collection. */
.product-card { height: 410px; }
.mini-shirt { width: 52%; height: 48%; left: 24%; top: 18%; }
.mini-shorts { width: 49%; height: 39%; left: 25.5%; top: 22%; }

.hero {
  isolation: isolate;
  height: 100vh;
  min-height: 700px;
  background: linear-gradient(120deg, #d6dde2 0%, #bcc9d2 48%, #6f899b 100%);
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  transform: none;
}

.hero-backdrop-static,
.hero-kits-motion,
.hero-kits-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-backdrop-static,
.hero-kits-layer { object-fit: cover; object-position: center; }
.hero-kits-motion { will-change: transform; pointer-events: none; }
.hero-kits-layer { animation: kitGroupFloatStrong 4.3s cubic-bezier(.42,0,.58,1) infinite; }

.hero-backdrop,
.hero-kit,
.hero-kit-composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-kit { display: none; }

.hero-kit-one {
  clip-path: inset(27% 34% 3% 55%);
  transform-origin: 61% 58%;
  animation: kitFloatOne 4.2s cubic-bezier(.42, 0, .58, 1) infinite;
}

.hero-kit-two {
  clip-path: inset(27% 23% 3% 66%);
  transform-origin: 71% 58%;
  animation: kitFloatTwo 5s cubic-bezier(.42, 0, .58, 1) -.9s infinite;
}

.hero-kit-three {
  clip-path: inset(27% 11% 3% 78%);
  transform-origin: 83% 58%;
  animation: kitFloatThree 4.5s cubic-bezier(.42, 0, .58, 1) -1.7s infinite;
}

.hero-kit-composite {
  display: block;
  object-fit: contain;
  object-position: center;
  will-change: transform;
  transform-origin: 50% 58%;
  animation: kitGroupFloatStrong 4.3s cubic-bezier(.42, 0, .58, 1) infinite;
}

.hero-light {
  position: absolute;
  top: -20%;
  left: 40%;
  width: 28%;
  height: 140%;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
  transform: translateX(-190%) skewX(-12deg);
  animation: heroLightPass 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.hero::after {
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(225,231,235,.24) 0%, rgba(205,215,223,.08) 38%, transparent 66%);
}

.hero-content {
  position: absolute;
  inset: 0 auto 0 31%;
  width: 38%;
  padding: 105px 0 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero h1 {
  font-family: "Ka Blam", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .018em;
  line-height: .98;
  font-size: clamp(50px, 5.3vw, 88px);
  max-width: 100%;
}

.hero-tagline {
  margin: 0 0 20px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--navy);
}

.hero-cta { justify-content: center; margin-top: 32px; }
.range-button {
  min-width: 190px;
  padding: 18px 30px;
  background: var(--lime) !important;
  color: var(--navy) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 14px 35px rgba(30, 47, 60, .2);
}

@keyframes kitFloatOne {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.01deg) scale(1); }
  38% { transform: translate3d(-5px, -22px, 0) rotate(-1.15deg) scale(1.012); }
  70% { transform: translate3d(4px, -7px, 0) rotate(.65deg) scale(1.005); }
}

@keyframes kitFloatTwo {
  0%, 100% { transform: translate3d(0, -4px, 0) rotate(.01deg) scale(1); }
  45% { transform: translate3d(5px, -26px, 0) rotate(.9deg) scale(1.015); }
  76% { transform: translate3d(-3px, -10px, 0) rotate(-.55deg) scale(1.006); }
}

@keyframes kitFloatThree {
  0%, 100% { transform: translate3d(0, -2px, 0) rotate(.01deg) scale(1); }
  42% { transform: translate3d(6px, -19px, 0) rotate(1.1deg) scale(1.01); }
  73% { transform: translate3d(-4px, -8px, 0) rotate(-.7deg) scale(1.004); }
}

@keyframes heroLightPass {
  0%, 18% { transform: translateX(-190%) skewX(-12deg); opacity: 0; }
  31% { opacity: .9; }
  54%, 100% { transform: translateX(280%) skewX(-12deg); opacity: 0; }
}

@keyframes kitGroupFloatStrong {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.01deg) scale(1); }
  34% { transform: translate3d(-7px, -18px, 0) rotate(-.2deg) scale(1.008); }
  67% { transform: translate3d(7px, -7px, 0) rotate(.16deg) scale(1.004); }
}

@media (max-width: 900px) {
  .nav-wrap { height: 78px; }
  .hero-visual { inset: 0; transform: none; }
  .hero-backdrop,
  .hero-kit-composite { object-position: center; }
  .hero-kit-composite {
    animation: kitGroupFloat 5s ease-in-out infinite;
  }
  .product-card { height: 380px; }
  .hero-content { left: 22%; width: 56%; padding: 90px 0 30px; }
  .hero h1 { font-size: clamp(42px, 10vw, 66px); }
}

@keyframes kitGroupFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.006); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kit,
  .hero-kit-composite,
  .hero-light { animation: none; }
  .hero-visual { transform: none !important; }
  .hero-kits-motion { transform: none !important; }
  .hero-kits-layer { animation: none; }
}