/* =========================================================
   PREMIUM EXPERIENCE LAYER — Mission Kiteboarding
   Progressive enhancement only. If premium.js / CDN libs fail,
   the baseline site is untouched. Loaded AFTER style.css.
   ========================================================= */

/* -- Lenis smooth scroll (only active when JS adds .lenis) -- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* -- Custom cursor (fine-pointer devices only, added by JS) -- */
.mk-cursor-dot,.mk-cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .3s}
.mk-cursor-dot{width:6px;height:6px;background:var(--yellow);will-change:transform}
.mk-cursor-ring{width:38px;height:38px;border:1px solid rgba(244,241,234,.35);
  transition:width .25s cubic-bezier(.16,.8,.3,1),height .25s cubic-bezier(.16,.8,.3,1),border-color .25s,opacity .3s,background .25s;will-change:transform}
.mk-cursor-ring.is-hover{width:60px;height:60px;border-color:var(--yellow);background:rgba(203,184,132,.06)}
.mk-cursor-dot.is-hover{opacity:0}
html.mk-has-cursor,html.mk-has-cursor *{cursor:none!important}

/* -- Scroll-aware header -- */
header{transition:transform .45s cubic-bezier(.16,.8,.3,1),background .3s,border-color .3s}
header.mk-scrolled{background:rgba(9,9,7,.9);border-color:var(--line2)}
header.mk-hidden{transform:translateY(-102%)}

/* Language switcher (FR/EN) */
.lang{display:flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.12em;margin-left:14px}
.lang::before{content:"";width:1px;height:15px;background:var(--line2);margin-right:5px}
.lang a{color:var(--muted);transition:color .2s}
.lang a:hover{color:var(--yellow)}
.lang .lang-on{color:var(--ink);font-weight:700}
@media(max-width:820px){.lang{margin-left:auto;margin-right:14px}.lang::before{display:none}}

/* Sous-titres plus gros et plus clairs (fond sombre ; les sections .paper gardent leur texte foncé via une specificite superieure) */
.page-sub{font-size:clamp(1.18rem,2vw,1.5rem);line-height:1.55;color:#d4cfc5}
.section:not(.paper) .lead,.tech .lead,.hero p.lead,.wl-head .lead,.bigcta p{font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.65;color:#cdc8be}

/* Reveal a touch richer when JS present (kept subtle) */
.rev{will-change:opacity,transform}

/* =========================================================
   HERO — wind-tunnel field + floating wing schematic
   ========================================================= */
.hero{background:var(--bg)}
.hero-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.hero-wing{position:absolute;z-index:1;top:50%;right:-3%;width:min(64vw,780px);aspect-ratio:900/540;
  transform:translate3d(0,-50%,0);background:url(/img/wing.svg) no-repeat center/contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.5));opacity:.92;will-change:transform}
.hero-wing::before{content:"";position:absolute;inset:-18% -12%;z-index:-1;
  background:radial-gradient(52% 52% at 52% 46%,rgba(203,184,132,.16),rgba(203,184,132,.05) 45%,transparent 72%)}
.hero-overlay{z-index:2;background:
   linear-gradient(90deg,rgba(9,9,7,.94),rgba(9,9,7,.6) 44%,rgba(9,9,7,.06) 100%),
   linear-gradient(0deg,rgba(9,9,7,.86),transparent 42%),
   radial-gradient(1100px 520px at 74% 30%,rgba(203,184,132,.07),transparent 62%)}
.hero-content{z-index:3}
.hero h1 .w{overflow:hidden}

/* Data strip — technical figures as graphic elements */
.hero-data{display:flex;flex-wrap:wrap;gap:0;margin-top:46px;border-top:1px solid var(--line);max-width:560px}
.hero-data .hd{padding:20px 30px 4px 0;margin-right:30px;border-right:1px solid var(--line);position:relative}
.hero-data .hd:last-child{border-right:0;margin-right:0}
.hero-data .n{display:block;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.hero-data .n i{font-style:normal;font-family:'Space Mono',monospace;font-size:.62em;color:var(--yellow);margin-left:3px;letter-spacing:0}
.hero-data .l{display:block;margin-top:9px;font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Scroll cue */
.hero-scroll{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.hero-scroll .bar{width:1px;height:44px;background:linear-gradient(var(--yellow),transparent);position:relative;overflow:hidden}
.hero-scroll .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--yellow);animation:mkfall 2.1s cubic-bezier(.7,0,.3,1) infinite}
@keyframes mkfall{0%{transform:translateY(-100%)}60%,100%{transform:translateY(300%)}}

@media(max-width:1000px){
  .hero-wing{width:78vw;right:-8%;opacity:.55}
}
@media(max-width:820px){
  .hero-wing{top:38%;opacity:.4}
  .hero-scroll{display:none}
  .hero-data .hd{padding:16px 20px 4px 0;margin-right:20px}
}

/* =========================================================
   Motion accessibility
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  .hero-scroll .bar::after{animation:none}
  header{transition:none}
}

/* =========================================================
   Titres H2 — plus grands et blanc pur (toutes pages)
   ========================================================= */
h2{color:#fff}
.tech h2,.section h2{font-size:clamp(2.8rem,6.2vw,5rem)}

/* Logo inversé : monogramme blanc sur fond noir (transparent sur header sombre) */
.logo{background:transparent;padding:0}
.logo-mark{background:#fff}