/* KAZAKOM — 3alimni ressort des archives (v2) */
.kza{position:relative;padding-top:clamp(40px,7vw,90px)!important;padding-bottom:clamp(40px,7vw,90px)!important}
.kza-head{max-width:780px}
.kza-head h2{font-size:clamp(2rem,5vw,3.6rem)!important;letter-spacing:-.005em!important;word-spacing:.08em;line-height:1.08!important;margin:0 0 16px!important;color:#fff}
.kza-lead{font-size:clamp(1rem,1.6vw,1.2rem)!important;line-height:1.6!important;color:#a9b8cc!important;margin:0!important}
.kza-stamp{display:inline-block;margin:0 0 22px!important;padding:7px 15px;border:2px solid rgba(226,185,119,.85);border-radius:6px;color:#e8c07e;
  font:700 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase}
.kza-step{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.kza-stamp.kza-step{transform:rotate(-4deg) scale(2.2);transition:opacity .2s ease,transform .38s cubic-bezier(.25,1.9,.45,1)}
.kza-on .kza-step{opacity:1;transform:none}
.kza-on .kza-stamp.kza-step{transform:rotate(-4deg) scale(1)}
.kza-on h2.kza-step{transition-delay:.18s}.kza-on .kza-lead.kza-step{transition-delay:.32s}

/* --- le coffre --- */
.kza-vault{position:relative;max-width:1040px;margin:48px auto 0;perspective:1800px}
.kza-box{position:relative;border-radius:24px;padding:clamp(12px,2.2vw,26px);transform-style:preserve-3d;
  background:linear-gradient(165deg,#221a0f,#0e0b07 70%);border:1px solid rgba(226,185,119,.3);
  box-shadow:inset 0 2px 0 rgba(255,220,160,.06),0 50px 110px -60px #000;transition:background 1.6s ease,border-color 1.6s ease,box-shadow 1.6s ease}
.kza-shake .kza-box{animation:kzaShake .42s ease}
.kza-done .kza-box{background:linear-gradient(165deg,#0c1b30,#060a13 70%);border-color:rgba(56,189,248,.42);
  box-shadow:inset 0 2px 0 rgba(160,220,255,.08),0 50px 120px -50px rgba(56,189,248,.45)}

.kza-lid{position:absolute;inset:-1px;z-index:6;border-radius:24px;transform-origin:50% 0;backface-visibility:hidden;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,transparent 2px 58px),linear-gradient(175deg,#3a2b17,#1a130a 72%);
  border:1px solid rgba(226,185,119,.4);display:grid;place-items:center;box-shadow:inset 0 0 90px rgba(0,0,0,.65),inset 0 -2px 0 rgba(226,185,119,.25);
  transition:transform 1.25s cubic-bezier(.55,0,.15,1),opacity .5s ease .9s,filter 1.25s ease}
.kza-seam{position:absolute;left:6%;right:6%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#ffd690,transparent);opacity:0;box-shadow:0 0 18px 4px rgba(255,200,110,.6)}
.kza-unlock .kza-seam{animation:kzaSeam .7s ease forwards}
.kza-plate{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 38px;border-radius:10px;
  background:linear-gradient(180deg,#d8b073,#8c6b3a);color:#1b1309;box-shadow:inset 0 1px 0 rgba(255,245,210,.55),0 10px 28px rgba(0,0,0,.55)}
.kza-plate span{font:700 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.32em}
.kza-plate b{font-family:Amiri,serif;font-size:clamp(2rem,4.6vw,3rem);line-height:1;font-weight:700}
.kza-latch{position:absolute;bottom:-16px;left:50%;width:50px;height:30px;margin-left:-25px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#c79d5c,#6b5028);box-shadow:0 8px 16px rgba(0,0,0,.55);transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.kza-unlock .kza-latch{transform:translateY(10px) rotate(18deg)}
.kza-open .kza-lid{transform:rotateX(-100deg);opacity:0;filter:brightness(.4);pointer-events:none}

.kza-rays{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:24px;opacity:0}
.kza-rays i{position:absolute;bottom:40%;left:50%;width:14%;height:160%;transform-origin:50% 100%;
  background:linear-gradient(0deg,rgba(255,214,140,.8),rgba(255,214,140,0) 75%);filter:blur(6px)}
.kza-rays i:nth-child(1){transform:translateX(-50%) rotate(-48deg)}.kza-rays i:nth-child(2){transform:translateX(-50%) rotate(-30deg)}
.kza-rays i:nth-child(3){transform:translateX(-50%) rotate(-13deg)}.kza-rays i:nth-child(4){transform:translateX(-50%) rotate(0deg);width:18%}
.kza-rays i:nth-child(5){transform:translateX(-50%) rotate(13deg)}.kza-rays i:nth-child(6){transform:translateX(-50%) rotate(30deg)}
.kza-rays i:nth-child(7){transform:translateX(-50%) rotate(48deg)}
.kza-open .kza-rays{animation:kzaRays 2s ease-out forwards}

.kza-dust{position:absolute;inset:-40px;pointer-events:none;z-index:7}
.kza-dust i{position:absolute;border-radius:50%;background:#f3cf8f;opacity:0;box-shadow:0 0 6px rgba(243,207,143,.8)}
.kza-open .kza-dust i{animation:kzaDust 3.4s ease-out forwards}

/* --- le fichier / l'écran --- */
.kza-file{position:relative;z-index:3;opacity:0;transform:translateY(70px) scale(.9);transition:opacity .8s ease .55s,transform 1.3s cubic-bezier(.16,.9,.2,1) .55s}
.kza-open .kza-file{opacity:1;transform:none}
.kza-tab{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:7px 13px;border-radius:8px 8px 0 0;
  font:500 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e8c07e;background:rgba(226,185,119,.12);transition:color 1.2s,background 1.2s}
.kza-tab i{width:8px;height:8px;border-radius:50%;background:#e8c07e;box-shadow:0 0 8px #e8c07e;transition:background 1.2s,box-shadow 1.2s}
.kza-type::after{content:"▍";animation:kzaBlink 1s steps(1) infinite;margin-inline-start:2px}
.kza-done .kza-tab{color:#7dd3fc;background:rgba(56,189,248,.12)}.kza-done .kza-tab i{background:#38bdf8;box-shadow:0 0 8px #38bdf8}

.kza-screen{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;transition:box-shadow 1.2s ease}
.kza-done .kza-screen{box-shadow:0 0 0 1px rgba(56,189,248,.5),0 0 40px -8px rgba(56,189,248,.6)}
.kza-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:sepia(.55) saturate(1.5) contrast(1.25) brightness(.82) blur(.9px);transition:filter 1.4s ease}
.kza-done .kza-vid{filter:none}
.kza-lines{position:absolute;inset:0;pointer-events:none;opacity:.55;transition:opacity 1s ease;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.kza-track{position:absolute;left:0;right:0;height:14%;top:-15%;pointer-events:none;opacity:.7;transition:opacity .8s ease;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 40%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.1) 60%,transparent);
  animation:kzaTrack 3.2s linear infinite;mix-blend-mode:screen}
.kza-osd{position:absolute;inset:0;pointer-events:none;font:600 clamp(.8rem,1.8vw,1.25rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;
  text-shadow:2px 0 0 rgba(255,0,60,.6),-2px 0 0 rgba(0,200,255,.6),0 0 8px rgba(255,255,255,.5);letter-spacing:.12em;transition:opacity .5s ease}
.kza-osd-play{position:absolute;top:6%;left:5%;animation:kzaBlink 1.2s steps(1) infinite}
.kza-osd-year{position:absolute;bottom:7%;left:5%}
.kza-done .kza-lines,.kza-done .kza-track,.kza-done .kza-osd{opacity:0}
.kza-glitch .kza-screen{animation:kzaGlitch .65s steps(2) both}
.kza-flash{position:absolute;inset:0;background:#dff4ff;opacity:0;pointer-events:none}
.kza-glitch .kza-flash{animation:kzaFlash .75s ease .45s both}

.kza-restore{position:absolute;top:14px;inset-inline-end:14px;margin:0!important;padding:6px 12px;border:2px solid rgba(56,189,248,.85);border-radius:6px;
  color:#7dd3fc;background:rgba(3,10,20,.6);font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:rotate(-6deg) scale(2);transition:opacity .2s ease,transform .38s cubic-bezier(.25,1.9,.45,1);pointer-events:none}
.kza-done .kza-restore{opacity:1;transform:rotate(-6deg) scale(1)}
.kza-sound{position:absolute;bottom:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(4,10,20,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font:600 .9rem/1 inherit;cursor:pointer;animation:kzaPulse 2.2s ease-in-out infinite}
.kza-sound svg{width:20px;height:20px;fill:#38bdf8;color:#38bdf8}
.kza-sound[hidden]{display:none}
.kza-cap{margin:12px 2px 0!important;font-size:.88rem;color:#8a97a8}

/* --- compte à rebours --- */
.kza-count{margin:52px auto 0;text-align:center;max-width:740px;opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.kza-lit .kza-count{opacity:1;transform:none}
.kza-soon{margin:0 0 18px!important;color:#9fb3cc;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.kza-digits{display:flex;justify-content:center;gap:clamp(8px,2vw,18px);direction:ltr;perspective:600px}
.kza-digits div{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px 14px;
  border:1px solid rgba(56,189,248,.28);border-radius:16px;background:linear-gradient(180deg,rgba(56,189,248,.1),rgba(56,189,248,.02));position:relative;overflow:hidden}
.kza-digits div::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45)}
.kza-digits b{display:block;font:700 clamp(2rem,6vw,3.4rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;text-shadow:0 0 22px rgba(56,189,248,.55)}
.kza-digits b.kza-flip{animation:kzaFlip .32s ease}
.kza-digits span{font-size:.78rem;color:#8fa3bb;letter-spacing:.1em;text-transform:uppercase}
.kza-insha{margin:22px 0 26px!important;font-size:clamp(1.15rem,2.4vw,1.45rem);color:#fff}
.kza-cta{display:inline-block;padding:16px 34px;border-radius:999px;background:#38bdf8;color:#04121f!important;font-weight:600;text-decoration:none!important;
  transition:transform .25s ease,box-shadow .25s ease}
.kza-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(56,189,248,.75)}

@keyframes kzaBlink{50%{opacity:0}}
@keyframes kzaShake{0%,100%{transform:none}20%{transform:translate(-4px,1px) rotate(-.4deg)}40%{transform:translate(4px,-1px) rotate(.4deg)}60%{transform:translate(-3px,0)}80%{transform:translate(2px,0)}}
@keyframes kzaSeam{0%{opacity:0}40%{opacity:1}100%{opacity:1}}
@keyframes kzaRays{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes kzaDust{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes kzaTrack{0%{top:-15%}100%{top:110%}}
@keyframes kzaGlitch{0%{transform:none;filter:none}15%{transform:translate(-8px,0) skewX(-4deg);filter:hue-rotate(60deg) saturate(2)}
  30%{transform:translate(6px,2px);filter:invert(.15)}45%{transform:translate(-4px,-2px) skewX(3deg);filter:hue-rotate(-50deg)}
  60%{transform:translate(9px,0);filter:contrast(2)}80%{transform:translate(-2px,0)}100%{transform:none;filter:none}}
@keyframes kzaFlash{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
@keyframes kzaPulse{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.5)}50%{box-shadow:0 0 0 10px rgba(56,189,248,0)}}
@keyframes kzaFlip{0%{transform:rotateX(90deg);opacity:.2}100%{transform:none;opacity:1}}

@media (max-width:700px){
  .kza-vault{margin-top:34px}
  .kza-box,.kza-lid,.kza-rays{border-radius:16px}
  .kza-plate{padding:14px 24px}
  .kza-restore{top:10px;inset-inline-end:10px;font-size:.58rem;padding:5px 8px}
  .kza-sound{bottom:10px;inset-inline-end:10px;padding:8px 12px;font-size:.8rem}
  .kza-digits div{padding:14px 4px 10px}
}
@media (prefers-reduced-motion:reduce){.kza *,.kza-step,.kza-count{transition:none!important;animation:none!important}}