/* WebPixie — hero accueil : « carrousel de couches » (4 cartes face caméra,
   4 s chacune, cycle 16 s). Namespace .wc-*. Chargé uniquement par index.html. */

.wc-holo{position:relative;height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.wc-stack{position:relative;width:420px;height:400px;max-width:100%;}
/* halo respirant derrière la pile */
.wc-stack::before{content:"";position:absolute;left:50%;top:58%;width:420px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(173,190,26,.16),transparent 65%);filter:blur(26px);animation:wcHalo 8s ease-in-out infinite;pointer-events:none;}
@keyframes wcHalo{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
/* particules qui montent derrière les cartes */
.wc-rise{position:absolute;bottom:10%;width:5px;height:5px;border-radius:50%;background:#D6E36B;box-shadow:0 0 9px rgba(214,227,107,.9);opacity:0;animation:wcRise 5s linear infinite;pointer-events:none;}
@keyframes wcRise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-300px);opacity:0}}
/* étincelles qui scintillent autour de la scène */
.wc-tw{position:absolute;color:var(--lime-400);animation:wcTwinkle 3.4s ease-in-out infinite;pointer-events:none;z-index:2;}
@keyframes wcTwinkle{0%,100%{opacity:.2;transform:scale(.75) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(22deg)}}

.wc-card{position:absolute;left:50%;top:50%;width:400px;height:266px;margin:-133px 0 0 -200px;border-radius:20px;background:linear-gradient(170deg,#343142,#2B2936);border:1px solid rgba(173,190,26,.4);box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 0 40px rgba(173,190,26,.04);animation:wcCard 16s cubic-bezier(.45,0,.2,1) infinite;will-change:transform,opacity;}
.wc-card.c2{animation-delay:-12s;}
.wc-card.c3{animation-delay:-8s;}
.wc-card.c4{animation-delay:-4s;}
@keyframes wcCard{
  0%{transform:translateY(46px) scale(.985);opacity:1;z-index:40;border-color:rgba(194,214,59,.75);box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 54px rgba(173,190,26,.28)}
  2.6%{transform:translateY(56px) scale(1.02);z-index:40}
  5%,21%{transform:translateY(52px) scale(1);opacity:1;z-index:40;border-color:rgba(194,214,59,.75);box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 54px rgba(173,190,26,.28)}
  24.5%{transform:translateY(-56px) scale(.84);opacity:.1;z-index:4;border-color:rgba(173,190,26,.25)}
  27%,46%{transform:translateY(-138px) scale(.7);opacity:.2;z-index:10;border-color:rgba(173,190,26,.22);box-shadow:0 18px 44px rgba(0,0,0,.4)}
  52%,71%{transform:translateY(-92px) scale(.79);opacity:.34;z-index:20;border-color:rgba(173,190,26,.28)}
  77%,96%{transform:translateY(-34px) scale(.89);opacity:.58;z-index:30;border-color:rgba(173,190,26,.35)}
  100%{transform:translateY(46px) scale(.985);opacity:1;z-index:40;border-color:rgba(194,214,59,.75)}
}
/* sheen sur la carte active */
.wc-card::after{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(115deg,transparent 30%,rgba(214,227,107,.14) 48%,transparent 65%);transform:translateX(-110%);animation:wcSheen 16s linear infinite;animation-delay:inherit;pointer-events:none;}
@keyframes wcSheen{0%,2%{transform:translateX(-110%)}9%{transform:translateX(110%)}100%{transform:translateX(110%)}}
/* étincelles de bienvenue quand une carte arrive devant */
.wc-sp{position:absolute;font-size:17px;line-height:1;color:#D6E36B;text-shadow:0 0 10px rgba(214,227,107,.8);opacity:0;animation:wcSpark 16s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:inherit;pointer-events:none;}
.wc-sp.s1{top:-13px;left:-11px;}
.wc-sp.s2{top:-15px;right:26px;font-size:13px;animation-name:wcSpark2;}
.wc-sp.s3{bottom:-13px;right:-11px;animation-name:wcSpark3;}
@keyframes wcSpark{0%{opacity:0;transform:scale(.2) rotate(0deg)}1.6%{opacity:1;transform:scale(1.25) rotate(30deg) translate(-7px,-7px)}5.5%{opacity:0;transform:scale(.5) rotate(60deg) translate(-13px,-13px)}100%{opacity:0}}
@keyframes wcSpark2{0%,.8%{opacity:0;transform:scale(.2)}2.4%{opacity:1;transform:scale(1.2) rotate(-25deg) translate(5px,-8px)}6.5%{opacity:0;transform:scale(.4) rotate(-50deg) translate(9px,-15px)}100%{opacity:0}}
@keyframes wcSpark3{0%,1.2%{opacity:0;transform:scale(.2)}3%{opacity:1;transform:scale(1.3) rotate(35deg) translate(8px,8px)}7%{opacity:0;transform:scale(.5) rotate(70deg) translate(14px,14px)}100%{opacity:0}}

/* — contenus des cartes (face caméra, lisibles) — */
.wc-in{position:absolute;inset:0;overflow:hidden;border-radius:19px;}
/* design : wireframe qui se dessine */
.wc-in svg.wc-wire{position:absolute;inset:16px;}
.wc-wire .d{fill:none;stroke:#C2D63B;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:640;stroke-dashoffset:640;animation:wcDraw 6s linear infinite;}
.wc-wire .d2{animation-delay:.5s}.wc-wire .d3{animation-delay:1s}.wc-wire .d4{animation-delay:1.5s}.wc-wire .d5{animation-delay:2s}
@keyframes wcDraw{0%{stroke-dashoffset:640;opacity:1}30%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}92%{opacity:0}100%{stroke-dashoffset:640;opacity:0}}
/* composants : blocs qui s'allument */
.wc-blocks{position:absolute;inset:22px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:13px;}
.wc-blocks span{border-radius:11px;border:1px solid rgba(173,190,26,.32);background:rgba(173,190,26,.07);animation:wcBlock 4.5s ease-in-out infinite;}
.wc-blocks span:nth-child(2){animation-delay:.75s}.wc-blocks span:nth-child(3){animation-delay:1.5s}
.wc-blocks span:nth-child(4){animation-delay:2.25s}.wc-blocks span:nth-child(5){animation-delay:3s}
.wc-blocks span:nth-child(6){animation-delay:3.75s}
@keyframes wcBlock{0%,100%{background:rgba(173,190,26,.07);box-shadow:none}9%{background:rgba(173,190,26,.42);box-shadow:0 0 22px rgba(173,190,26,.5)}22%{background:rgba(173,190,26,.07);box-shadow:none}}
/* code : vraies lignes qui se tapent */
.wc-code{position:absolute;inset:20px 24px;display:flex;flex-direction:column;gap:7px;font-family:var(--font-mono,monospace);font-size:16px;font-weight:700;line-height:1.5;}
.wc-code .ln{display:block;white-space:nowrap;overflow:hidden;max-width:0;animation:wcType 8s steps(26,end) infinite;}
.wc-code .ln:nth-child(2){animation-delay:.55s}
.wc-code .ln:nth-child(3){animation-delay:1.1s}
.wc-code .ln:nth-child(4){animation-delay:1.65s}
.wc-code .ln:nth-child(5){animation-delay:2.2s}
.wc-code .ln:nth-child(6){animation-delay:2.75s}
.wc-code .ln:nth-child(7){animation-delay:3.3s}
@keyframes wcType{0%{max-width:0;opacity:1}10%{max-width:100%;opacity:1}84%{max-width:100%;opacity:1}94%{opacity:0}100%{max-width:100%;opacity:0}}
.wc-code .tg{color:#D6E36B;}
.wc-code .at{color:#fff;}
.wc-code .cm{color:rgba(255,255,255,.5);}
.wc-code .ok{color:#D6E36B;}
.wc-code .caret{display:inline-block;width:8px;height:16px;background:#D6E36B;vertical-align:-2px;animation:wcCaret .9s steps(1) infinite;}
@keyframes wcCaret{0%,100%{opacity:1}50%{opacity:0}}
/* hébergement : réseau */
.wc-net svg{position:absolute;inset:18px;}
.wc-net .lnk{stroke:rgba(173,190,26,.4);stroke-width:1.8;stroke-dasharray:5 7;fill:none;animation:wcDash 2s linear infinite;}
@keyframes wcDash{to{stroke-dashoffset:-24}}
.wc-net .nd{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lime-400);box-shadow:0 0 16px rgba(173,190,26,.8);animation:wcNode 2.8s ease-in-out infinite;}
@keyframes wcNode{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.18);opacity:1}}

/* — titre géant synchronisé — */
.wc-caps{position:relative;height:74px;width:100%;max-width:460px;margin-top:26px;}
.wc-cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;animation:wcCap 16s cubic-bezier(.45,0,.2,1) infinite;text-align:center;}
.wc-cap.c2{animation-delay:-12s;}
.wc-cap.c3{animation-delay:-8s;}
.wc-cap.c4{animation-delay:-4s;}
@keyframes wcCap{
  0%,21%{opacity:1;transform:none}
  24%,97%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:none}
}
.wc-cap .t{font-family:var(--font-display);font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--fg-on-dark);}
.wc-cap .t em{font-style:normal;color:var(--lime-400);}
.wc-cap .s{font-family:var(--font-sans);font-size:14.5px;color:var(--fg-on-dark-muted);}
/* — points d'étape : l'actif devient une jauge qui se remplit en 4 s — */
.wc-dots{display:flex;gap:9px;margin-top:14px;align-items:center;justify-content:center;}
.wc-dot{position:relative;width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;animation:wcDot 16s linear infinite;}
.wc-dot::after{content:"";position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#ADBE1A,#D6E36B);transform:translateX(-101%);animation:wcDotFill 16s linear infinite;animation-delay:inherit;}
.wc-dot.c2{animation-delay:-12s;}
.wc-dot.c3{animation-delay:-8s;}
.wc-dot.c4{animation-delay:-4s;}
@keyframes wcDot{0%,21%{width:34px}25%,96%{width:9px}100%{width:34px}}
@keyframes wcDotFill{0%{transform:translateX(-101%)}21%{transform:translateX(0)}22%,100%{transform:translateX(101%)}}

/* — chips métriques — */
.wc-chw{position:absolute;z-index:45;animation:wcChipFloat 7s ease-in-out infinite alternate;}
@keyframes wcChipFloat{from{transform:translateY(-5px)}to{transform:translateY(7px)}}
.wc-chw1{top:44px;left:-6px;}
.wc-chw2{top:96px;right:-14px;animation-delay:1.6s;}
.wc-chip{display:flex;align-items:center;gap:11px;background:rgba(48,45,61,.9);backdrop-filter:blur(6px);border:1px solid rgba(173,190,26,.4);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.45);padding:10px 15px;}
.wc-sq{width:34px;height:34px;border-radius:10px;background:rgba(173,190,26,.15);color:var(--lime-400);display:flex;align-items:center;justify-content:center;flex:none;}
.wc-big{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1;color:var(--fg-on-dark);}
.wc-big small{font-size:12px;color:var(--fg-on-dark-muted);font-weight:600;}
.wc-lab{font-family:var(--font-sans);font-size:12px;color:var(--fg-on-dark);opacity:.75;margin-top:3px;}

@media (max-width:520px){
  .wc-stack{width:320px;height:330px;}
  .wc-card{width:310px;height:206px;margin:-103px 0 0 -155px;}
  .wc-code{font-size:12.5px;inset:14px 16px;gap:5px;}
  .wc-cap .t{font-size:21px;}
  .wc-holo{height:520px;}
  .wc-chw1{left:-2px;}.wc-chw2{right:-2px;}
  /* mobile : on allège tout ce qui est coûteux pour le GPU (flou d'arrière-plan
     + micro-particules décoratives), sans toucher au carrousel lui-même. */
  .wc-chip{backdrop-filter:none;background:#302D3D;}
  .wc-sp,.wc-rise,.wc-tw{display:none;}
  .wc-stack::before{animation:none;}
}
@media (prefers-reduced-motion: reduce){
  .wc-card,.wc-card::after,.wc-cap,.wc-dot,.wc-dot::after,.wc-chw,.wc-wire .d,.wc-blocks span,.wc-code .ln,.wc-code .caret,.wc-net .nd,.wc-net .lnk,.wc-sp,.wc-rise,.wc-tw,.wc-stack::before{animation:none !important;}
  .wc-sp,.wc-rise{display:none;}
  .wc-card{opacity:1;filter:none;}
  .wc-card.c1{transform:translateY(52px) scale(1);z-index:40;}
  .wc-card.c2{transform:translateY(-34px) scale(.89);opacity:.5;z-index:30;}
  .wc-card.c3{transform:translateY(-92px) scale(.79);opacity:.32;z-index:20;}
  .wc-card.c4{transform:translateY(-138px) scale(.7);opacity:.2;z-index:10;}
  .wc-cap{opacity:0;}
  .wc-cap.c1{opacity:1;}
  .wc-wire .d{stroke-dashoffset:0;}
  .wc-code .ln{max-width:100%;}
}
/* wpx-mobile-perf (auto) */
@media (max-width:520px){.wc-chip{backdrop-filter:none;background:#302D3D;}.wc-sp,.wc-rise,.wc-tw{display:none;}.wc-stack::before{animation:none;}}