/* ==========================================================================
   Composants : boutons, liens, kickers, titres, reveals, navigation, intro
   ========================================================================== */

/* ---------- Kicker : un filet violet + un mot, en bas de casse ---------- */
.kicker{
  display:flex;align-items:center;gap:14px;
  font-size:var(--fs-small);font-weight:500;letter-spacing:0.02em;
  color:var(--muted-dark);margin-bottom:28px;
}
.s-light .kicker{color:var(--muted-light);}
.kicker-line{
  display:block;width:28px;height:1px;background:var(--vio);
  transform-origin:left center;transform:scaleX(0);
  transition:transform var(--d-slow) var(--ease-out);
}
.is-in .kicker-line,.kicker.is-in .kicker-line{transform:scaleX(1);}
.kicker-center{justify-content:center;}

/* ---------- Titres ---------- */
.s-title{
  font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-title);
  letter-spacing:var(--track-title);text-wrap:balance;
}
.s-head{margin-bottom:clamp(56px, 7vw, 96px);}
.s-head-split{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(24px, 4vw, 80px);align-items:end;
}
.s-lead{
  font-size:var(--fs-lead);line-height:1.6;font-weight:300;
  color:var(--muted-dark);max-width:38ch;
  transform:translateY(18px);opacity:0;
  transition:transform var(--d-slow) var(--ease-out) .35s, opacity var(--d-slow) var(--ease-out) .35s;
}
.s-light .s-lead{color:var(--muted-light);}
.is-in .s-lead{transform:none;opacity:1;}

/* Mots révélés (titres) : chaque mot monte de sa ligne, très légèrement flouté */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.08em;margin-bottom:-0.08em;}
[data-split] .w > span{
  display:inline-block;
  transform:translateY(110%) ;
  opacity:0;
  filter:blur(6px);
  transition:transform 1.1s var(--ease-out) calc(var(--i) * 55ms),
             opacity 0.9s var(--ease-out) calc(var(--i) * 55ms),
             filter 1.1s var(--ease-out) calc(var(--i) * 55ms);
}
.is-in [data-split] .w > span,[data-split].is-in .w > span{transform:none;opacity:1;filter:blur(0);}
html:not(.js) [data-split] .w > span,
html.reduced-motion [data-split] .w > span{transform:none;opacity:1;filter:none;}

/* Reveal générique */
[data-reveal]{--i:0;}
.rv{
  opacity:0;transform:translateY(28px);
  transition:opacity var(--d-slow) var(--ease-out) calc(var(--i) * 90ms),
             transform var(--d-slow) var(--ease-out) calc(var(--i) * 90ms);
}
.rv.is-in{opacity:1;transform:none;}
html.reduced-motion .rv{opacity:1;transform:none;}

/* ---------- Boutons ---------- */
.btn{
  --pad-y:16px;--pad-x:30px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:var(--pad-y) var(--pad-x);border-radius:999px;
  font-family:var(--font);font-size:14.5px;font-weight:600;letter-spacing:0.01em;line-height:1;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transform:translate3d(var(--mx,0px), var(--my,0px), 0);
  transition:background-color .5s var(--ease-out), border-color .5s var(--ease-out), color .5s var(--ease-out);
  will-change:transform;
  isolation:isolate;
}
.btn-label{
  display:inline-block;
  transform:translate3d(var(--ix,0px), var(--iy,0px), 0);
  transition:transform .0s;
}
.btn-sm{--pad-y:12px;--pad-x:22px;font-size:13px;}
.btn-lg{--pad-y:22px;--pad-x:40px;font-size:16px;}
.btn-primary{background:var(--vio);color:#fff;}
.btn-primary:hover{background:var(--vio-deep);}
.btn-glow{
  position:absolute;inset:-18px;border-radius:999px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--vio-rgb),0.55), transparent);
  opacity:0.35;filter:blur(18px);
  transform:scale(0.9);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.btn-primary:hover .btn-glow,.btn-primary.is-hover .btn-glow{opacity:0.8;transform:scale(1.15);}
.btn-ghost{background:transparent;color:var(--ivo);border-color:rgba(var(--ivo-rgb),0.26);}
.btn-ghost:hover{border-color:rgba(var(--ivo-rgb),0.7);}
.btn-arrow{
  position:relative;width:14px;height:14px;display:inline-block;
}
.btn-arrow::before{
  content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:currentColor;
  transform-origin:left center;transform:scaleX(0.6);
  transition:transform .6s var(--ease-out);
}
.btn-arrow::after{
  content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translate(-3px,-50%) rotate(45deg);
  transition:transform .6s var(--ease-out);
}
.btn:hover .btn-arrow::before{transform:scaleX(1);}
.btn:hover .btn-arrow::after{transform:translate(0,-50%) rotate(45deg);}

/* Lien souligné qui se dessine */
.link-line{
  position:relative;display:inline-block;
  transition:color .4s var(--ease-out), transform .6s var(--ease-out);
}
.link-line::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;transition:transform .6s var(--ease-out);
}
.link-line:hover{transform:translateX(3px);}
.link-line:hover::after{transform:scaleX(1);transform-origin:left center;}

/* ---------- Intro ---------- */
.intro{
  position:fixed;inset:0;z-index:var(--z-intro);background:var(--obs);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:34px;
  pointer-events:none;
}
html.is-intro .intro{display:flex;}
.intro-mark{width:clamp(72px, 9vw, 120px);color:var(--ivo);}
.intro-svg{width:100%;height:auto;overflow:visible;}
.intro-svg use{color:var(--ivo);}
.intro-svg path{
  transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(24%) scaleY(0.6);opacity:0;
  animation:markRise 1.3s var(--ease-out) forwards;
}
.intro-svg .mark-p1{animation-delay:.15s;}
.intro-svg .mark-p2{animation-delay:.32s;}
.intro-svg .mark-p3{animation-delay:.5s;}
@keyframes markRise{to{transform:none;opacity:1;}}
.intro-word{
  display:flex;gap:.55em;align-items:baseline;
  font-size:clamp(13px, 1.3vw, 16px);letter-spacing:0.32em;color:var(--ivo);
  opacity:0;transform:translateY(10px);
  animation:introWord 1.2s var(--ease-out) .75s forwards;
}
.intro-word span{font-weight:300;}
.intro-word b{font-weight:800;}
@keyframes introWord{to{opacity:1;transform:none;}}
.intro.is-leaving{
  transition:opacity .9s var(--ease-inout), transform 1.1s var(--ease-inout);
  opacity:0;transform:scale(1.04);
}
.intro.is-leaving .intro-mark,.intro.is-leaving .intro-word{
  transition:opacity .5s var(--ease-inout), transform .7s var(--ease-inout), filter .7s var(--ease-inout);
  opacity:0;transform:translateY(-14px);filter:blur(6px);
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding:22px var(--gutter) 0;
  transform:translate3d(0,0,0);
  transition:transform .8s var(--ease-out), padding .8s var(--ease-out);
  pointer-events:none;
}
.nav.is-hidden{transform:translate3d(0,-130%,0);}
.nav-inner{
  pointer-events:auto;
  max-width:var(--container);margin:0 auto;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 4px;border-radius:999px;
  border:1px solid transparent;
  background:rgba(var(--obs-rgb),0);
  transition:height .8s var(--ease-out), max-width .8s var(--ease-out), background-color .8s var(--ease-out),
             border-color .8s var(--ease-out), padding .8s var(--ease-out), box-shadow .8s var(--ease-out);
}
.nav.is-scrolled .nav-inner{
  height:56px;max-width:1040px;padding:0 8px 0 18px;
  background:rgba(var(--obs-rgb),0.62);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border-color:rgba(var(--ivo-rgb),0.10);
  box-shadow:0 20px 60px -30px rgba(0,0,0,0.6);
}
.nav.on-light.is-scrolled .nav-inner{background:rgba(var(--obs-rgb),0.86);border-color:rgba(var(--ivo-rgb),0.06);}
.nav-logo{display:block;padding:8px 6px;transform:translate3d(var(--mx,0px),var(--my,0px),0);}
.nav-logo img{height:30px;width:auto;} /* ≥ 32px optique en incluant le dégagement — charte ch.04 */
.nav.is-scrolled .nav-logo img{height:26px;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{
  position:relative;padding:10px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--muted-dark);
  transition:color .5s var(--ease-out);
}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;
  background:var(--vio);transform:translateX(-50%) scale(0);
  transition:transform .6s var(--ease-spring);
}
.nav-links a:hover{color:var(--ivo);}
.nav-links a.is-active{color:var(--ivo);}
.nav-links a.is-active::after{transform:translateX(-50%) scale(1);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-progress{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, var(--vio), var(--vio-2));
  transform-origin:left center;transform:scaleX(0);opacity:0;
  transition:opacity .6s var(--ease-out);
}
.nav.is-scrolled .nav-progress{opacity:.85;}
.nav-toggle{
  display:none;position:relative;width:44px;height:44px;border-radius:50%;
  background:none;border:none;cursor:pointer;
}
.nav-toggle span{
  position:absolute;left:12px;width:20px;height:1.5px;background:var(--ivo);
  transition:transform .6s var(--ease-out), width .6s var(--ease-out);
}
.nav-toggle span:nth-child(1){top:18px;}
.nav-toggle span:nth-child(2){top:25px;width:14px;}
.nav-toggle:hover span:nth-child(2){width:20px;}

/* Menu mobile : une feuille qui monte */
.mobile-menu{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--obs);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,6vw,48px) var(--gutter) clamp(32px,8vw,56px);
  clip-path:inset(0 0 100% 0 round 0 0 32px 32px);
  transition:clip-path .9s var(--ease-inout);
  visibility:hidden;
}
.mobile-menu.is-open{clip-path:inset(0 0 0 0 round 0);visibility:visible;}
.mobile-close{
  position:absolute;top:18px;right:14px;width:48px;height:48px;border-radius:50%;
  background:none;border:none;cursor:pointer;
}
.mobile-close span{position:absolute;left:14px;top:23px;width:20px;height:1.5px;background:var(--ivo);}
.mobile-close span:nth-child(1){transform:rotate(45deg);}
.mobile-close span:nth-child(2){transform:rotate(-45deg);}
.mobile-links{display:flex;flex-direction:column;gap:6px;margin-top:80px;}
.mobile-links a,.mobile-foot{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease-out) calc(.25s + var(--i) * 60ms), transform .9s var(--ease-out) calc(.25s + var(--i) * 60ms);
}
.mobile-menu.is-open .mobile-links a,.mobile-menu.is-open .mobile-foot{opacity:1;transform:none;}
.mobile-links a{font-size:clamp(34px, 9vw, 52px);font-weight:600;letter-spacing:-0.03em;color:var(--ivo);line-height:1.15;}
.mobile-foot{display:flex;flex-direction:column;gap:22px;}
.mobile-foot p{font-size:13px;color:var(--muted-dark);}
.mobile-foot .btn{align-self:flex-start;}

@media (max-width:900px){
  .nav-links,.nav-cta{display:none;}
  .nav-toggle{display:block;}
  .nav{padding-top:14px;}
  .nav.is-scrolled .nav-inner{padding-right:4px;}
}
@media (hover:none){
  .btn:hover .btn-glow{opacity:.35;transform:scale(.9);}
}