html.cmost-intro-lock,
html.cmost-intro-lock body{overflow:hidden!important}

.ci{
  position:fixed;inset:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 12%,rgba(70,234,255,.10),transparent 30%),
    radial-gradient(circle at 84% 82%,rgba(114,87,255,.22),transparent 32%),
    linear-gradient(150deg,#07090d 0%,#0a0d16 46%,#0c1021 100%);
  color:#fff;opacity:0;visibility:hidden;
  transition:opacity .5s ease;
  font-family:inherit
}
.ci.is-visible{opacity:1;visibility:visible}
.ci.is-leaving{transition:opacity .55s ease .35s;pointer-events:none}
.ci.is-leaving{opacity:0}

/* ---------- fond technologique ---------- */
.ci-bg,.ci-grid,.ci-scan,.ci-particles,.ci-orb{position:absolute;inset:0;pointer-events:none}
.ci-bg{transition:opacity .5s ease;}
.ci.is-leaving .ci-bg{opacity:0}
.ci.is-leaving .ci-orb,.ci.is-leaving .ci-ring{animation:none!important;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s ease,filter .8s ease;transform:scale(2.6);opacity:0;filter:blur(18px)}

/* profondeur multi-plans : chaque plan reçoit --mx/--my (mis à jour en
   JS au mouvement de la souris) avec un coefficient différent, pour une
   vraie sensation de parallaxe plutôt qu'un unique bloc qui s'incline. */
.ci{--mx:0;--my:0}

.ci-network{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:blur(0.4px);animation:ciFadeIn 1.1s ease .3s forwards}
.ci.is-launching .ci-network{transition:opacity .6s ease;opacity:0!important}

.ci-grid{
  inset:-18%;
  background-image:
    linear-gradient(rgba(78,161,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,161,255,.08) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(800px) rotateX(63deg) translateY(26%) translate3d(calc(var(--mx) * -14px),calc(var(--my) * -8px),0);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.8) 50%,transparent 88%);
  filter:blur(0.5px);
  animation:ciGridDrift 9s linear infinite;
  opacity:0;animation:ciGridDrift 9s linear infinite,ciFadeIn .8s ease .14s forwards
}
@keyframes ciGridDrift{to{background-position:0 52px,52px 0}}
@keyframes ciFadeIn{to{opacity:1}}

.ci-orb{border-radius:50%;filter:blur(16px);opacity:0;animation:ciOrbIn 1.4s ease forwards}
.ci-orb-a{width:36vw;height:36vw;min-width:330px;min-height:330px;left:-14vw;top:-12vw;background:radial-gradient(circle,rgba(114,87,255,.5),transparent 66%);animation-delay:.05s;transform:translate3d(calc(var(--mx) * 22px),calc(var(--my) * 14px),0)}
.ci-orb-b{width:42vw;height:42vw;min-width:380px;min-height:380px;right:-17vw;bottom:-18vw;background:radial-gradient(circle,rgba(78,161,255,.5),transparent 68%);animation-delay:.2s;transform:translate3d(calc(var(--mx) * -18px),calc(var(--my) * -12px),0)}
@keyframes ciOrbIn{to{opacity:.34}}

.ci-ring{position:absolute;border-radius:50%;border:1px solid rgba(70,234,255,.1);opacity:.7}
.ci-ring-a{width:38vw;height:38vw;min-width:320px;min-height:320px;left:-10vw;top:8vh;animation:ciSpin 18s linear infinite}
.ci-ring-b{width:30vw;height:30vw;min-width:260px;min-height:260px;right:-9vw;bottom:2vh;border-color:rgba(114,87,255,.12);animation:ciSpinBack 22s linear infinite}
@keyframes ciSpin{to{transform:rotate(360deg)}}
@keyframes ciSpinBack{to{transform:rotate(-360deg)}}

.ci-scan{
  height:16%;
  background:linear-gradient(to bottom,transparent,rgba(70,234,255,.08),transparent);
  transform:translateY(-120%);
  animation:ciScanMove 4.4s ease-in-out .6s infinite
}
@keyframes ciScanMove{0%,100%{transform:translateY(-120%)}50%{transform:translateY(520%)}}

.ci-particles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#46eaff;box-shadow:0 0 12px #46eaff;
  opacity:0;animation:ciParticle 7s ease-in-out infinite
}
.ci-particles i:nth-child(1){left:12%;top:28%;animation-delay:.4s}
.ci-particles i:nth-child(2){left:20%;top:72%;animation-delay:1.3s}
.ci-particles i:nth-child(3){left:34%;top:18%;animation-delay:2.1s}
.ci-particles i:nth-child(4){left:64%;top:24%;animation-delay:2.9s}
.ci-particles i:nth-child(5){left:78%;top:68%;animation-delay:1.7s}
.ci-particles i:nth-child(6){left:88%;top:35%;animation-delay:3.6s}
.ci-particles i:nth-child(7){left:52%;top:82%;animation-delay:4.2s}
.ci-particles i:nth-child(8){left:44%;top:44%;animation-delay:5.1s}
@keyframes ciParticle{0%{opacity:0}8%,50%{opacity:1}100%{transform:translateY(-22px) scale(1.8);opacity:0}}

/* ---------- lignes de convergence vers le logo ---------- */
.ci-conv{position:absolute;left:50%;top:50%;pointer-events:none}
.ci-conv i{
  position:absolute;height:1px;width:120px;
  background:linear-gradient(90deg,transparent,rgba(70,234,255,.85));
  opacity:0;transform-origin:right center;
  animation:ciConverge .7s cubic-bezier(.2,.8,.2,1) forwards
}
.ci-conv i:nth-child(1){transform:rotate(0deg) translate(-260px,-90px)}
.ci-conv i:nth-child(2){transform:rotate(180deg) translate(-260px,-40px);animation-delay:.06s}
.ci-conv i:nth-child(3){transform:rotate(35deg) translate(-260px,10px);animation-delay:.12s}
.ci-conv i:nth-child(4){transform:rotate(215deg) translate(-260px,60px);animation-delay:.18s}
@keyframes ciConverge{0%{opacity:0;transform:translateX(-40px) scaleX(1.4);}30%{opacity:1}100%{opacity:0;transform:translateX(70px) scaleX(.4)}}

/* ---------- panneau central ---------- */
.ci-panel{
  position:relative;z-index:2;
  width:min(92vw,900px);
  text-align:center;
  padding:28px 22px 24px;
  border:1px solid rgba(70,234,255,.16);
  background:linear-gradient(180deg,rgba(10,13,22,.5),rgba(7,9,13,.26));
  box-shadow:0 0 80px rgba(78,161,255,.08),inset 0 0 40px rgba(255,255,255,.018);
  backdrop-filter:blur(6px);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  opacity:0;transform:translateY(16px) scale(.99);
  animation:ciPanelIn .8s .07s cubic-bezier(.2,.8,.2,1) forwards
}
.ci.is-visible:not(.is-leaving) .ci-panel{transition:transform .15s ease-out}
@keyframes ciPanelIn{to{opacity:1;transform:none}}
.ci.is-leaving .ci-panel{transition:opacity .3s ease,transform .4s ease;opacity:0;transform:translateY(-8px) scale(.985)}

.ci-hud{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);
  color:#6b7280;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;animation:ciFadeUp .6s .28s ease forwards
}
.ci-hud i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#46eaff;box-shadow:0 0 8px #46eaff;margin-right:6px;animation:ciBlink 1.6s ease-in-out infinite}
.ci-hud span:nth-child(2){color:#8fc4ff}
@keyframes ciBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ciFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- construction du logo ---------- */
.ci-logo-wrap{
  position:relative;width:150px;height:150px;margin:14px auto 0;
  display:flex;align-items:center;justify-content:center;
  transform:translate3d(calc(var(--mx) * 8px),calc(var(--my) * 5px),0);
  transition:transform .2s ease-out
}
.ci-logo-ring{position:absolute;border-radius:50%;opacity:0;animation:ciRingIn .5s ease forwards}
.ring-1{inset:5px;border:1px dashed rgba(70,234,255,.3);animation:ciRingIn .5s .49s ease forwards,ciSpin 9s linear .49s infinite}
.ring-2{inset:22px;border:1px solid rgba(114,87,255,.4);animation:ciRingIn .5s .63s ease forwards,ciSpinBack 6.5s linear .63s infinite}
@keyframes ciRingIn{to{opacity:1}}

.ci-logo{
  display:flex;flex-direction:column;align-items:center;
  font-weight:950;letter-spacing:-.075em;
  font-size:56px;line-height:.9;
}
.ci-logo-main{
  position:relative;display:inline-block;color:#fff;
  clip-path:inset(0 100% 0 0);
  animation:ciWipeReveal .55s .77s cubic-bezier(.4,0,.2,1) forwards;
  text-shadow:0 0 28px rgba(78,161,255,.15)
}
.ci-logo-main:after{
  content:"";position:absolute;top:-6%;bottom:-6%;left:0;width:6px;
  background:linear-gradient(180deg,transparent,#46eaff,transparent);
  box-shadow:0 0 18px 3px rgba(70,234,255,.8);
  animation:ciWipeEdge .55s .77s cubic-bezier(.4,0,.2,1) forwards
}
@keyframes ciWipeReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes ciWipeEdge{to{left:100%;opacity:0}}
.ci-c{color:#42efbd;text-shadow:0 0 20px rgba(66,239,189,.4)}
.ci-digital{
  margin-top:2px;font-size:14px;font-weight:900;
  letter-spacing:.2em;color:#46eaff;text-shadow:0 0 18px rgba(70,234,255,.3);
  opacity:0;animation:ciDigitalIn .5s 1.47s ease forwards
}
@keyframes ciDigitalIn{from{opacity:0;letter-spacing:.62em}to{opacity:1;letter-spacing:.56em}}

.ci-dataline{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-mono);
  margin:16px auto 12px;color:#6b7280;font-size:8px;letter-spacing:.2em;
  opacity:0;animation:ciFadeUp .5s 1.75s ease forwards
}
.ci-dataline span{display:block;width:0;height:1px;background:linear-gradient(90deg,transparent,#46eaff);animation:ciLineGrow .5s 1.82s ease forwards}
.ci-dataline span:last-child{transform:scaleX(-1)}
.ci-dataline b{color:#8fc4ff;font-weight:800}
@keyframes ciLineGrow{to{width:76px}}

.ci-kicker{
  margin:0 0 10px;color:#9da3b2;
  font-size:10px;font-weight:850;letter-spacing:.22em;
  opacity:0;animation:ciFadeUp .55s 1.96s ease forwards
}
.ci-title{
  margin:0;font-size:clamp(32px,6vw,58px);line-height:1.06;
  letter-spacing:-.04em;font-weight:900
}
.ci-title-l1{display:block}
.ci-title-l2{
  display:block;
  background:linear-gradient(90deg,#42efbd,#46eaff,#8fc4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ci-title-word{display:inline;opacity:0;transform:translateY(10px);animation:ciWordIn .5s ease forwards}
@keyframes ciWordIn{to{opacity:1;transform:translateY(0)}}
.ci-sub{
  max-width:600px;margin:16px auto 0;color:#9da3b2;
  font-size:13px;line-height:1.6;
  opacity:0;animation:ciFadeUp .55s 2.73s ease forwards
}

.ci-enter{
  position:relative;overflow:hidden;
  margin:26px auto 0;min-height:56px;padding:0 24px;
  border:1px solid rgba(70,234,255,.65);
  background:linear-gradient(135deg,#7257ff,#4ea1ff);
  color:#fff;border-radius:12px;
  font:inherit;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:16px;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 12px 44px rgba(78,161,255,.28);
  transition:transform .2s ease,box-shadow .2s ease;
  opacity:0;transform:translateY(10px) scale(.97);
  animation:ciBtnIn .5s 3.01s cubic-bezier(.2,.8,.2,1) forwards
}
@keyframes ciBtnIn{to{opacity:1;transform:none}}
.ci-enter:before{
  content:"";position:absolute;top:0;bottom:0;width:70px;left:-90px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:ciSweep 2.8s 3.6s infinite
}
@keyframes ciSweep{0%{left:-90px}45%,100%{left:120%}}
.ci-enter:hover{transform:translateY(-2px);box-shadow:0 16px 52px rgba(78,161,255,.36)}
.ci-arrow{font-size:19px;transition:transform .2s ease}
.ci-enter:hover .ci-arrow{transform:translateX(4px)}

.ci-skip{
  display:block;margin:12px auto 0;background:none;border:0;
  color:#6b7280;font:inherit;font-size:10px;
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;
  opacity:0;animation:ciFadeUp .5s 3.22s ease forwards
}

.ci-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.04)}
.ci-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#7257ff,#46eaff,#42efbd);
  box-shadow:0 0 16px rgba(78,161,255,.6)
}
.ci.is-visible .ci-progress span{animation:ciProgress 7s linear forwards}
@keyframes ciProgress{to{width:100%}}

/* ---------- transition de sortie : balayage lumineux ---------- */
.ci-wipe{
  position:absolute;top:-10%;bottom:-10%;width:min(38vw,340px);
  left:-40%;
  background:linear-gradient(90deg,transparent,rgba(78,161,255,.16) 35%,rgba(70,234,255,.55) 50%,rgba(114,87,255,.16) 65%,transparent);
  filter:blur(2px);
  opacity:0;pointer-events:none;z-index:3
}
.ci.is-leaving .ci-wipe{opacity:1;animation:ciWipeAcross .75s .12s cubic-bezier(.6,0,.3,1) forwards}
@keyframes ciWipeAcross{0%{left:-40%}100%{left:112%}}

/* ---------- traversée immersive (clic sur « Découvrir ») ---------- */
.ci-flash{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,#fff,rgba(200,232,255,.9) 22%,rgba(70,234,255,.35) 46%,transparent 72%);
  opacity:0
}
.ci.is-launching .ci-flash{animation:ciFlash 1.15s cubic-bezier(.3,0,.4,1) forwards}
@keyframes ciFlash{0%,38%{opacity:0}62%{opacity:1}100%{opacity:0}}

.ci.is-launching .ci-panel > *:not(.ci-logo-wrap){
  transition:opacity .4s ease,transform .4s ease;
  opacity:0;transform:translateY(-6px)
}
.ci.is-launching .ci-panel{transition:none;box-shadow:none;border-color:transparent;background:transparent}
.ci.is-launching .ci-logo-wrap{
  animation:none!important;
  transition:transform 1.15s cubic-bezier(.3,0,.5,1),filter 1.15s ease;
  transform:translate3d(0,0,0) scale(9);
  filter:blur(6px) brightness(1.6)
}
.ci.is-launching .ci-logo-ring{transition:opacity .4s ease;opacity:0}
.ci.is-launching .ci-ring{
  animation:none!important;
  transition:transform 1.05s cubic-bezier(.2,.8,.2,1),opacity 1.05s ease;
  transform:scale(2.4);opacity:0
}
.ci.is-launching .ci-orb{transition:opacity .95s ease,transform .95s ease;opacity:0;transform:scale(1.5)}
.ci.is-launching .ci-grid{transition:opacity .7s ease;opacity:0}
.ci.is-launching .ci-particles i{
  animation:none!important;
  transition:transform .85s cubic-bezier(.4,0,.6,1),opacity .85s ease;
  transform:translate(calc((50vw - 50%) * .1),calc((50vh - 50%) * .1)) scale(0.2);
  opacity:0
}
.ci.is-launching .ci-conv i{animation:none!important;transition:transform .55s ease,opacity .55s ease;opacity:1;transform:translateX(140px) scaleX(.15)}
.ci.is-arriving{transition:opacity .6s ease;opacity:0}
.ci.is-launched{opacity:0!important;visibility:hidden!important;transition:none!important}

@media(prefers-reduced-motion:reduce){
  .ci-flash,.ci.is-launching *{transition:none!important;animation:none!important}
}

@media(max-width:768px){
  .ci-panel{width:calc(100vw - 24px);padding:20px 16px 18px}
  .ci-hud{font-size:7px;letter-spacing:.1em}
  .ci-logo-wrap{width:126px;height:126px;margin-top:10px}
  .ci-logo{font-size:46px}
  .ci-digital{font-size:11px}
  .ci-dataline{gap:8px;margin:13px auto 10px}
  .ci-dataline span{width:0}
  .ci-dataline span{animation-name:ciLineGrowSm}
  @keyframes ciLineGrowSm{to{width:32px}}
  .ci-dataline b{font-size:7px}
  .ci-kicker{font-size:8px;letter-spacing:.14em}
  .ci-title{font-size:32px}
  .ci-sub{font-size:11px;max-width:300px}
  .ci-enter{width:min(100%,300px);min-height:52px;margin-top:20px;padding:0 16px}
  .ci-grid{background-size:34px 34px}
  .ci-conv{display:none}
  .ci-wipe{width:60vw}
  /* moins de particules et parallaxe simplifiée sur mobile */
  .ci-particles i:nth-child(6),.ci-particles i:nth-child(7),.ci-particles i:nth-child(8){display:none}
  .ci-grid,.ci-orb-a,.ci-orb-b,.ci-logo-wrap{transform:none!important}
  /* traversée plus courte sur mobile, mais avec la même marge de sécurité */
  .ci.is-launching .ci-logo-wrap{transition-duration:.85s;transform:scale(7)}
  .ci.is-launching .ci-flash{animation-duration:.9s}
  .ci.is-launching .ci-panel > *:not(.ci-logo-wrap),
  .ci.is-launching .ci-ring,
  .ci.is-launching .ci-orb,
  .ci.is-launching .ci-grid,
  .ci.is-launching .ci-particles i{transition-duration:.6s}
}
@media(max-height:700px){
  .ci-logo-wrap{width:104px;height:104px;margin-top:6px}
  .ci-logo{font-size:40px}
  .ci-dataline{margin:10px auto 8px}
}
@media(prefers-reduced-motion:reduce){
  .ci *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ci-grid,.ci-scan,.ci-particles i,.ci-conv i,.ci-ring-a,.ci-ring-b{animation:none!important;opacity:0!important}
  .ci-logo-main{clip-path:inset(0 0 0 0)!important}
  .ci-logo-main:after{display:none}
  .ci-wipe{display:none}
  .ci-panel,.ci-hud,.ci-kicker,.ci-title-l1,.ci-title-l2,.ci-title-word,.ci-sub,.ci-enter,.ci-skip,.ci-digital,.ci-dataline{opacity:1!important;transform:none!important;animation:none!important}
}