/* ══════════════════════════════════════════════════════════════
   KreaGlobe — vocabulaire d'animation et de profondeur
   Se lit avec motion.js. Tout est en transform/opacity :
   rien ne provoque de recalcul de mise en page pendant le scroll.
   ══════════════════════════════════════════════════════════════ */

/* ── entrées ──────────────────────────────────────────────── */
[data-anim]{opacity:0;transition:opacity .95s var(--ease),transform .95s var(--ease);will-change:transform,opacity}
[data-anim="rise"]  {transform:translate3d(0,34px,0)}
[data-anim="fall"]  {transform:translate3d(0,-26px,0)}
[data-anim="left"]  {transform:translate3d(-38px,0,0)}
[data-anim="right"] {transform:translate3d(38px,0,0)}
[data-anim="scale"] {transform:scale(.94)}
[data-anim="fade"]  {transform:none}
[data-anim="mask"]  {opacity:1;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
[data-anim].in{opacity:1;transform:none;clip-path:inset(0 0 0 0);will-change:auto}

/* décalage manuel */
[data-delay="80"] {transition-delay:.08s}
[data-delay="160"]{transition-delay:.16s}
[data-delay="240"]{transition-delay:.24s}
[data-delay="320"]{transition-delay:.32s}
[data-delay="400"]{transition-delay:.4s}

/* enfants décalés automatiquement (data-stagger) */
[data-stagger]>*{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-stagger]>.in{opacity:1;transform:none}

/* ── titres révélés mot par mot ───────────────────────────── */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
[data-split] .wi{display:inline-block;transform:translate3d(0,110%,0);
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
[data-split].in .wi{transform:none}

/* ── barre qui se remplit ─────────────────────────────────── */
[data-bar]{--fill:0%}
[data-bar]>i,[data-bar] .fill{width:var(--fill);transition:width 1.3s cubic-bezier(.16,1,.3,1)}

/* ══════════════════════════════════════════════════════════════
   PROFONDEUR — 3D en CSS pur, aucun octet supplémentaire
   ══════════════════════════════════════════════════════════════ */

/* scène : donne une perspective à ses enfants */
.scene{perspective:1200px;perspective-origin:50% 50%}
.scene-far{perspective:2000px}

/* carte qui s'incline vers le curseur */
[data-tilt]{--rx:0deg;--ry:0deg;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .5s var(--ease)}
[data-tilt]:hover{transition:transform .12s linear}
/* les enfants peuvent se détacher du plan de la carte */
[data-tilt] .lift-1{transform:translateZ(26px)}
[data-tilt] .lift-2{transform:translateZ(48px)}
[data-tilt] .lift-3{transform:translateZ(74px)}

/* parallaxe pilotée par --p (0 → 1 pendant la traversée) */
[data-scrub]{--p:.5}
.par{transform:translate3d(0,calc((var(--p) - .5) * var(--amp,90px) * -1),0)}
.par-slow{--amp:46px}
.par-fast{--amp:150px}
.par-x{transform:translate3d(calc((var(--p) - .5) * var(--amp,90px)),0,0)}
.par-rot{transform:rotate(calc((var(--p) - .5) * var(--deg,26deg)))}
.par-scale{transform:scale(calc(1 + (var(--p) - .5) * var(--z,.16)))}
.par-z{transform:translate3d(0,0,calc((var(--p) - .5) * var(--depth,120px)))}

/* ── ORBE — volume éclairé + anneaux en orbite, tout en CSS ──
   Trois mouvements se composent : la rotation pilotée par le scroll
   (sur .orb), une rotation propre qui ne s'arrête jamais (.orb-spin),
   et une respiration verticale. La propriété `translate` est utilisée
   pour le flottement afin de ne pas entrer en conflit avec transform. */
.orb-wrap{position:relative;display:grid;place-items:center}
.orb{position:relative;width:var(--s,180px);height:var(--s,180px);
  transform-style:preserve-3d;
  transform:rotateX(-18deg) rotateY(calc(var(--p,.5) * 300deg));
  animation:orbBob 7.5s ease-in-out infinite}
.orb-spin{position:absolute;inset:0;transform-style:preserve-3d;
  animation:orbSpin 34s linear infinite}
@keyframes orbBob{0%,100%{translate:0 -8px}50%{translate:0 8px}}
@keyframes orbSpin{to{transform:rotateY(360deg)}}

/* le solide */
.prism{position:absolute;inset:0;transform-style:preserve-3d}
.prism .f{position:absolute;inset:0;display:grid;place-items:center;
  border-radius:3px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* éclairage : chaque face porte sa propre valeur, ce qui suffit à
     faire lire un volume plutôt qu'un empilement de rectangles */
  background:
    linear-gradient(155deg,
      color-mix(in srgb,var(--pf-hi,#74E55C) calc(var(--lum,40) * 1%),var(--pf-lo,#0B0D0C)),
      color-mix(in srgb,var(--pf-hi,#74E55C) calc(var(--lum,40) * .35%),var(--pf-lo,#0B0D0C)) 82%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pf-hi,#74E55C) 55%,transparent),
             inset 0 0 0 1px color-mix(in srgb,var(--pf-hi,#74E55C) 20%,transparent)}
.prism .f-1{--lum:34;transform:translateZ(calc(var(--s,180px) / 2))}
.prism .f-2{--lum:24;transform:rotateY(90deg)  translateZ(calc(var(--s,180px) / 2))}
.prism .f-3{--lum:16;transform:rotateY(180deg) translateZ(calc(var(--s,180px) / 2))}
.prism .f-4{--lum:20;transform:rotateY(-90deg) translateZ(calc(var(--s,180px) / 2))}
.prism .f-5{--lum:52;transform:rotateX(90deg)  translateZ(calc(var(--s,180px) / 2))}
.prism .f-6{--lum:10;transform:rotateX(-90deg) translateZ(calc(var(--s,180px) / 2))}

/* les anneaux : rappel direct de la marque, deux plans différents */
.ring{position:absolute;left:50%;top:50%;width:var(--rs);height:var(--rs);
  margin:calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2);
  border-radius:50%;border:1.5px solid color-mix(in srgb,var(--pf-hi,#74E55C) 52%,transparent);
  transform-style:preserve-3d;pointer-events:none}
.ring::after{content:"";position:absolute;top:-4.5px;left:50%;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:var(--pf-hi,#74E55C);
  box-shadow:0 0 14px var(--pf-hi,#74E55C)}
.ring-1{--rs:calc(var(--s,180px) * 1.85);animation:ringA 22s linear infinite}
.ring-2{--rs:calc(var(--s,180px) * 2.3);border-style:dashed;
  border-color:color-mix(in srgb,var(--pf-hi,#74E55C) 34%,transparent);
  animation:ringB 32s linear infinite reverse}
@keyframes ringA{from{transform:rotateX(76deg) rotateZ(0deg)}to{transform:rotateX(76deg) rotateZ(360deg)}}
@keyframes ringB{from{transform:rotateX(24deg) rotateY(62deg) rotateZ(0deg)}
                 to{transform:rotateX(24deg) rotateY(62deg) rotateZ(360deg)}}

/* ombre de contact : ancre l'objet au sol */
.orb-floor{position:absolute;left:50%;bottom:calc(var(--s,180px) * -.42);
  width:calc(var(--s,180px) * 1.5);height:calc(var(--s,180px) * .3);
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pf-hi,#74E55C) 26%,transparent),transparent 74%);
  filter:blur(12px);animation:orbFloor 7.5s ease-in-out infinite}
@keyframes orbFloor{0%,100%{opacity:.5;transform:translateX(-50%) scale(.92)}
                    50%{opacity:.8;transform:translateX(-50%) scale(1.06)}}

/* ── pile de cartes en 3D, qui s'ouvre en éventail ────────── */
.deck{position:relative;transform-style:preserve-3d}
.deck>*{transform-origin:50% 100%}
.deck-1{transform:translate3d(0,calc(var(--p,.5) * -26px),0) rotate(calc((var(--p,.5) - .5) * -9deg))}
.deck-2{transform:translate3d(0,calc(var(--p,.5) * -13px),0) rotate(calc((var(--p,.5) - .5) * -3deg))}
.deck-3{transform:rotate(calc((var(--p,.5) - .5) * 3deg))}

/* ── section épinglée ─────────────────────────────────────────
   Attention : ne jamais poser overflow:hidden sur un [data-pin].
   Cela en fait un conteneur de défilement et .pin-stage cesse de
   coller à la fenêtre. Le découpage se fait dans .pin-stage. */
[data-pin]{--p:0;position:relative;overflow:visible!important}
.pin-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  align-content:center;overflow:hidden}

/* ── moins de mouvement : tout se fige, rien ne disparaît ── */
@media(prefers-reduced-motion:reduce){
  [data-anim],[data-stagger]>*{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-split] .wi{transform:none!important}
  .par,.par-x,.par-rot,.par-scale,.par-z,.deck>*{transform:none!important}
  .orb{transform:rotateX(-18deg) rotateY(28deg)!important}
  .orb-spin,.ring-1,.ring-2,.orb-floor,.orb{animation:none!important}
  .pin-stage{position:static;height:auto}
}
/* filet sans JS */
.no-js [data-anim],.no-js [data-stagger]>*{opacity:1;transform:none;clip-path:none}

/* ══════════════════════════════════════════════════════════════
   RAFFINEMENTS D'INTERACTION
   ══════════════════════════════════════════════════════════════ */

/* boutons magnétiques : le déplacement s'ajoute au survol existant */
.btn,.btn-nav,.side-go{--mx:0px;--my:0px}
.btn:hover,.btn-nav:hover,.side-go{translate:var(--mx) var(--my)}
.btn,.btn-nav,.side-go{transition:translate .45s var(--ease),
  transform .4s var(--ease),background .3s,color .3s,box-shadow .4s var(--ease)}
.btn:hover,.btn-nav:hover{transition-duration:.15s,.4s,.3s,.3s,.4s}

/* barre de progression de lecture, sous la navigation */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:950;pointer-events:none;
  background:transparent}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--r,0));
  background:linear-gradient(90deg,var(--sapin-l),var(--vif));
  transition:transform .12s linear}

/* la navigation s'efface vers le haut en descendant */
.nav{transition:background .4s var(--ease),border-color .4s var(--ease),
  backdrop-filter .4s,transform .45s var(--ease),opacity .35s}
.nav.is-hidden{transform:translateY(-115%);opacity:0}
.nav.is-open{transform:none;opacity:1}

/* transition entre les pages */
.page-veil{position:fixed;inset:0;z-index:2000;pointer-events:none;
  background:var(--ink);opacity:0;transition:opacity .32s ease}
body.page-out .page-veil{opacity:1}
body.u-light .page-veil{background:var(--blanc)}
/* entrée : le contenu monte très légèrement */
body.page-in main,body.page-in>header,body.page-in>section{animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* survol de lien : le soulignement se dessine depuis la gauche */
.link-a{position:relative;border-bottom-color:transparent}
.link-a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(.28);transform-origin:left;
  transition:transform .45s var(--ease)}
.link-a:hover::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .btn,.btn-nav,.side-go{translate:none!important}
  .nav.is-hidden{transform:none;opacity:1}
  .page-veil{display:none}
  body.page-in main,body.page-in>header,body.page-in>section{animation:none}
}