/* ============================================================
   PREMIUM SKIN KIT — moteur d'effets commun (theme-agnostic)
   Les couleurs viennent des variables --skin-* definies par
   chaque variante dans son :root. Tout est gele sous
   prefers-reduced-motion.
   ============================================================ */

/* ---- Tokens par defaut (surchargeables par variante) ---- */
:root{
  --skin-accent:#c8a24a;
  --skin-accent-2:#e7c878;
  --skin-bg:#0d0d0f;
  --skin-card:rgba(255,255,255,.04);
  --skin-line:rgba(255,255,255,.12);
  --skin-text:#f2efe9;
  --skin-shadow:0 10px 40px rgba(0,0,0,.35);
  --skin-radius:16px;
  --skin-ease:cubic-bezier(.22,1,.36,1);
}

/* ---- Scroll progress ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--skin-accent),var(--skin-accent-2));
  box-shadow:0 0 12px var(--skin-accent);transition:width .1s linear}

/* ---- Grain texture ---- */
body::after{content:'';position:fixed;inset:0;z-index:1500;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px}

/* ---- Scrollbar + selection + focus ---- */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--skin-accent);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::selection{background:var(--skin-accent);color:#fff}
:focus-visible{outline:2px solid var(--skin-accent);outline-offset:3px;border-radius:4px}

/* ---- Boutons premium ---- */
.btn-primary,.btn-accent{position:relative;overflow:hidden;isolation:isolate;
  will-change:transform;transition:transform .35s var(--skin-ease),box-shadow .35s var(--skin-ease)}
.btn-primary::after,.btn-accent::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--skin-ease)}
.btn-primary:hover,.btn-accent:hover{transform:translateY(-3px);
  box-shadow:0 12px 32px -8px var(--skin-accent)}
.btn-primary:hover::after,.btn-accent:hover::after{transform:translateX(120%)}

/* ---- Lien fleche (2de action) ---- */
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;
  color:var(--skin-text);position:relative}
.link-arrow svg,.link-arrow .arr{transition:transform .35s var(--skin-ease)}
.link-arrow:hover svg,.link-arrow:hover .arr{transform:translateX(5px)}
.link-arrow::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;
  background:var(--skin-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--skin-ease)}
.link-arrow:hover::after{transform:scaleX(1)}

/* ---- Cards : ombre multi-couche + tilt + spotlight ---- */
.card-soft{position:relative;border:1px solid var(--skin-line);border-radius:var(--skin-radius);
  background:var(--skin-card);
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 6px 16px rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.14);
  transition:transform .3s var(--skin-ease),box-shadow .3s var(--skin-ease);
  transform-style:preserve-3d;will-change:transform}
.card-soft::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--skin-accent) 18%,transparent),transparent 60%)}
.card-soft:hover{box-shadow:0 2px 4px rgba(0,0,0,.12),0 12px 28px rgba(0,0,0,.18),0 30px 60px rgba(0,0,0,.22)}
.card-soft:hover::before{opacity:1}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--skin-ease),transform .8s var(--skin-ease)}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ---- Image reveal clip ---- */
.img-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--skin-ease)}
.reveal.in .img-reveal,.img-reveal.in{clip-path:inset(0 0 0 0)}

/* ---- Parallax ---- */
.parallax-soft{will-change:transform}

/* ---- Texte accent shimmer + soulignement trace ---- */
.text-shimmer{background:linear-gradient(100deg,var(--skin-accent) 20%,var(--skin-accent-2) 40%,var(--skin-accent) 60%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:shimmer 5s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.draw-line{position:relative;display:inline-block}
.draw-line svg{position:absolute;left:0;bottom:-.18em;width:100%;height:.4em;overflow:visible}
.draw-line svg path{stroke:var(--skin-accent);stroke-width:3;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.reveal.in .draw-line svg path,.draw-line.in svg path{animation:draw 1s var(--skin-ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- Label filet anime ---- */
.label-line{display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--skin-accent)}
.label-line::before{content:'';width:34px;height:1px;background:var(--skin-accent);
  transform-origin:left;animation:lineGrow 1s var(--skin-ease) both}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- Aurora hero (mesh ondulant + orbes + blobs organiques) ---- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora::before{content:'';position:absolute;inset:-20%;
  background:
    radial-gradient(40% 50% at 20% 30%,color-mix(in srgb,var(--skin-accent) 35%,transparent),transparent 60%),
    radial-gradient(45% 45% at 80% 20%,color-mix(in srgb,var(--skin-accent-2) 30%,transparent),transparent 60%),
    radial-gradient(50% 50% at 60% 80%,color-mix(in srgb,var(--skin-accent) 25%,transparent),transparent 60%);
  filter:blur(40px);animation:auroraMove 22s ease-in-out infinite alternate}
@keyframes auroraMove{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-2%,-3%,0) scale(1.04)}}
.orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.5;pointer-events:none;
  animation:floatOrb 18s ease-in-out infinite}
.blob{position:absolute;pointer-events:none;opacity:.35;filter:blur(30px);
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background:var(--skin-accent);animation:blobDrift 26s ease-in-out infinite}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
@keyframes blobDrift{0%,100%{transform:translate(0,0) rotate(0);border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
  50%{transform:translate(-30px,20px) rotate(18deg);border-radius:58% 42% 37% 63% / 56% 59% 41% 44%}}

/* ---- Vagues entre sections ---- */
.wave-bob{display:block;width:100%;height:60px}
.wave-bob path{animation:waveBob 8s ease-in-out infinite}
@keyframes waveBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---- Pastilles icones SVG ---- */
.icon-chip{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:color-mix(in srgb,var(--skin-accent) 14%,transparent);
  border:1px solid var(--skin-line);color:var(--skin-accent)}
.icon-chip svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- Watermark numero de section ---- */
.section-num{position:absolute;font-weight:800;line-height:1;opacity:.05;
  font-size:clamp(7rem,18vw,16rem);pointer-events:none;user-select:none;z-index:0}

/* ---- 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}

/* ============================================================
   REDUCED MOTION — tout gele
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .img-reveal{clip-path:none!important}
  .text-shimmer{animation:none!important}
  .draw-line svg path{stroke-dashoffset:0!important}
  .aurora::before,.orb,.blob,.wave-bob path{animation:none!important}
  .scroll-progress{display:none}
}