/* ============================================================
   Segmentation Marketing v2 — couche d'effets « fou furieux »
   ============================================================ */

/* ---------- Hero : titre éclaté lettre par lettre ---------- */
.splitme .word{ display:inline-block; white-space:nowrap; }
.splitme .ltr{ display:inline-block; will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  .fx-split .ltr{
    animation: ltrIn .9s cubic-bezier(.18,1.4,.3,1) both;
    animation-delay: calc(.12s + var(--i) * .032s);
  }
}
@keyframes ltrIn{
  from{ opacity:0; transform: translateY(.85em) rotate(10deg) scale(.55); }
}
.hero-grid{ transform-style: preserve-3d; will-change: transform; }

/* Mot géant en arrière-plan du hero */
.giant-word{
  position:absolute; left:-4vw; bottom:13%; z-index:1;
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(110px, 17vw, 270px); line-height:1;
  letter-spacing:.04em; white-space:nowrap;
  color: transparent;
  -webkit-text-stroke: 3px color-mix(in srgb, var(--coral) 42%, transparent);
  pointer-events:none; will-change: transform;
}

/* ---------- Bandeaux marquee pilotés par le scroll ---------- */
.band{
  position:relative; z-index:6; overflow:hidden;
  width:108vw; left:50%;
  padding: clamp(12px,1.8vw,22px) 0;
  transform: translateX(-50%) rotate(var(--tilt,-1.6deg));
  box-shadow: var(--shadow);
}
.band-a{ background: var(--ink); color: var(--cream); --tilt:-1.6deg; margin: clamp(-34px,-2.4vw,-20px) 0; }
.band-b{ background: var(--coral); color:#fff; --tilt:1.4deg; margin: clamp(-34px,-2.4vw,-20px) 0; }
.band-track{
  display:inline-block; white-space:nowrap;
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  text-transform: uppercase; letter-spacing:.02em;
  will-change: transform;
}

/* ---------- Chiffres géants en outline (parallax) ---------- */
.bignum{
  position:absolute; z-index:1; right:-2vw; top:8%;
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(220px, 40vh, 470px); line-height:.8;
  color: transparent;
  -webkit-text-stroke: 4px var(--bn, var(--coral));
  opacity:.18; pointer-events:none; will-change: transform;
}

/* ---------- Définition : mots peints au scroll ---------- */
.wordscrub .w{ opacity:.13; transition: opacity .35s ease; }
.wordscrub .w.on{ opacity:1; }

/* ---------- Méthode : rail horizontal sticky ---------- */
.hsec{ position:relative; height:420vh; background: var(--paper); }
.hsec-sticky{
  position:sticky; top:0; height:100vh; min-height:600px;
  display:flex; flex-direction:column; justify-content:center;
  gap: clamp(18px,3.2vh,36px); overflow:hidden;
}
.hsec-head{ width:min(var(--maxw), 90vw); margin:0 auto; }
.hrail-clip{ width:100%; }
.hrail{
  display:flex; align-items:stretch; gap: clamp(18px,2.2vw,32px);
  padding-left: max(5vw, calc((100vw - var(--maxw)) / 2));
  padding-right: 10vw;
  width:max-content; will-change: transform;
}
.hcard{
  position:relative; flex:0 0 clamp(290px, 30vw, 430px);
  background:#fff; border-radius:30px;
  padding: clamp(24px,2.6vw,40px);
  box-shadow: var(--shadow-sm);
  border-top: 10px solid var(--c);
  display:flex; flex-direction:column; gap:.5rem;
  will-change: transform;
}
.hcard .hnum{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(3.6rem, 6.4vw, 6.4rem); line-height:.85;
  color: color-mix(in srgb, var(--c) 30%, #fff);
}
.hcard h3{ margin:.4rem 0 .2rem; }
.hcard p{ margin:0; color: var(--ink-soft); }
.hcard-end{ background: var(--ink); color: var(--cream); justify-content:center; }
.hcard-end h3{ color:#fff; }
.hcard-end p{ color: rgba(255,255,255,.78); }
.hbar{
  width:min(var(--maxw), 90vw); margin:0 auto;
  height:6px; border-radius:3px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.hbar span{
  display:block; height:100%; width:0%; border-radius:3px;
  background: linear-gradient(90deg, var(--coral), var(--yellow), var(--mint), var(--ocean));
}
.hsec-hint{
  width:min(var(--maxw), 90vw); margin:0 auto;
  font-weight:800; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--ink-soft); opacity:.55;
}
@media (max-width: 760px), (prefers-reduced-motion: reduce){
  .hsec{ height:auto; }
  .hsec-sticky{ position:relative; height:auto; min-height:0; padding:80px 0; overflow:visible; }
  .hrail-clip{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
  .hcard{ flex-basis:300px; }
  .hbar, .hsec-hint{ display:none; }
}

/* ---------- Tilt 3D : reflet ---------- */
.tiltable{ position:relative; }
.tiltable::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,.55), transparent 46%);
  opacity:0; transition: opacity .3s ease; pointer-events:none;
}
.tiltable:hover::after{ opacity:.5; }
.no-glare .tiltable::after{ display:none; }

/* ---------- Curseur magnétique ---------- */
.fxc-dot, .fxc-ring{
  position:fixed; top:0; left:0; z-index:9000;
  pointer-events:none; border-radius:50%;
}
.fxc-dot{ width:10px; height:10px; margin:-5px 0 0 -5px; background: var(--coral); }
.fxc-ring{
  width:42px; height:42px; margin:-21px 0 0 -21px;
  border:2.5px solid var(--ink); opacity:.5;
  transition: width .25s ease, height .25s ease, margin .25s ease,
              background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.fxc-ring.big{
  width:76px; height:76px; margin:-38px 0 0 -38px;
  background: color-mix(in srgb, var(--yellow) 32%, transparent);
  border-color: var(--coral); opacity:.92;
}
@media (hover: none){ .fxc-dot, .fxc-ring{ display:none !important; } }

/* ---------- Skew à la vélocité ---------- */
.sk{ will-change: transform; }