/* KZPLAY · boutons play MarakizSystem · KAZAKOM (apprentissage.html) */

/* --- Langues : FR par défaut, EN / AR selon <html lang> --- */
.kzp-l{display:none}
.kzp-l[data-l="fr"]{display:inline}
html[lang|="en"] .kzp-l[data-l="fr"],html[lang|="ar"] .kzp-l[data-l="fr"]{display:none}
html[lang|="en"] .kzp-l[data-l="en"]{display:inline}
html[lang|="ar"] .kzp-l[data-l="ar"]{display:inline;font-family:"Noto Sans Arabic",Arial,sans-serif;letter-spacing:0}

/* --- Disque play + halo qui clignote --- */
@keyframes kzp-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.85);opacity:0}}
@keyframes kzp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes kzp-flash{0%,100%{box-shadow:0 0 0 0 rgba(236,206,140,0),0 14px 36px rgba(0,0,0,.38)}50%{box-shadow:0 0 0 12px rgba(236,206,140,.30),0 14px 36px rgba(0,0,0,.38)}}
@keyframes kzp-blink{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes kzp-ring-sm{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.32);opacity:0}}

.kzp-disc{position:relative;flex:none;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e2b0,#d5ad62 62%,#b98d45);color:#0f2c31;
  box-shadow:0 14px 36px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.55);animation:kzp-breathe 1.8s ease-in-out infinite}
.kzp-disc::before,.kzp-disc::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:3px solid #ebcd8c;animation:kzp-ring 1.8s ease-out infinite;pointer-events:none}
.kzp-disc::after{animation-delay:.9s}
.kzp-disc svg{width:42%;height:42%;margin-left:9%;display:block;fill:currentColor}

/* --- 1. Gros bouton en haut de page --- */
.kzp-hero{margin:34px 0 4px;clear:both}
body .kzp-big{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex!important;align-items:center;gap:24px;max-width:100%;min-height:108px;
  margin:0!important;padding:14px 40px 14px 16px!important;padding-inline:16px 40px!important;border:0!important;border-radius:999px!important;cursor:pointer;text-align:start;
  background:linear-gradient(135deg,#f1d9a1 0%,#d3aa60 55%,#c0934b 100%)!important;color:#0f2a30!important;font:inherit;
  animation:kzp-flash 1.8s ease-in-out infinite;transition:transform .2s ease}
body .kzp-big:hover{transform:translateY(-2px) scale(1.015)}
body .kzp-big:focus-visible{outline:3px solid #fff;outline-offset:5px}
.kzp-big .kzp-disc{width:76px;height:76px;background:#0f2c31;color:#f1d79c;box-shadow:inset 0 0 0 2px rgba(241,215,156,.35)}
.kzp-big .kzp-disc::before,.kzp-big .kzp-disc::after{inset:0;border-width:2px;border-color:#f6e4b4;animation-name:kzp-ring-sm}
.kzp-big-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.kzp-big-txt b{display:block;font-size:clamp(22px,2.5vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.3px;color:#0f2a30}
.kzp-big-txt small{display:block;font-size:14.5px;line-height:1.35;font-weight:500;color:#2c4a4c}

/* --- 2. Vidéo 3alimni : affiche + gros play (aucune vidéo chargée avant le clic) --- */
.kzp-vid{position:relative!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:var(--kzp-ar,16 / 9);
  max-height:min(78vh,700px);min-height:220px;margin:28px 0 0!important;padding:0!important;float:none!important;clear:both;
  border-radius:22px;overflow:hidden!important;background:#06121a;isolation:isolate;transform:none!important;z-index:0;box-shadow:0 22px 60px rgba(0,0,0,.35)}
.kzp-vid>.kzp-poster,.kzp-vid>video.kzp-player{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;display:block!important}
.kzp-vid>.kzp-poster{object-fit:cover;z-index:1}
.kzp-vid>video.kzp-player{object-fit:contain;background:#000;z-index:1}
body .kzp-vcover{position:absolute!important;inset:0!important;z-index:3;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:22px;width:100%!important;height:100%!important;
  margin:0!important;padding:20px!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer;color:#fff!important;font:inherit;-webkit-appearance:none;appearance:none;
  background:radial-gradient(ellipse at center,rgba(5,16,22,.38) 0%,rgba(5,16,22,.58) 60%,rgba(5,16,22,.74) 100%)!important}
.kzp-vcover .kzp-disc,.kzp-cover-btn .kzp-disc{box-shadow:0 0 0 10px rgba(5,16,22,.45),0 14px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55)}
body .kzp-vcover:focus-visible{outline:3px solid #fff;outline-offset:-8px}
.kzp-vcover:hover .kzp-disc{transform:scale(1.08)}
.kzp-vcover .kzp-disc{width:clamp(96px,10vw,132px);height:clamp(96px,10vw,132px)}
.kzp-tag{position:absolute;top:18px;inset-inline-start:18px;padding:8px 14px;border-radius:999px;background:rgba(5,16,22,.72);border:1px solid rgba(236,206,140,.55);
  color:#f1d9a1;font-size:13px;font-weight:700;letter-spacing:.3px;line-height:1}
.kzp-pill{display:inline-block;padding:13px 26px;border-radius:999px;background:rgba(5,16,22,.78);border:2px solid #e2c27f;color:#fff;
  font-size:clamp(17px,2vw,21px);font-weight:800;line-height:1.1;animation:kzp-blink 1.8s ease-in-out infinite;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.kzp-vid.is-playing>.kzp-vcover,.kzp-vid.is-playing>.kzp-poster{display:none!important}
.kzp-cap{margin:0 0 28px!important;padding:12px 0 0!important;font-size:14px;opacity:.85}

/* --- 3. Démonstration : voile + gros play par-dessus, avant le premier lancement --- */
.kzp-demo{position:relative;margin-top:26px;clear:both}
.kzp-demo>iframe{margin-top:0!important}
.kzp-cover{position:absolute;inset:0;z-index:5;box-sizing:border-box;padding:clamp(70px,12vh,140px) 20px 40px;border-radius:22px;cursor:pointer;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(9,35,39,.66) 0%,rgba(9,35,39,.86) 45%,rgba(9,35,39,.93) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .45s ease,visibility .45s ease}
.kzp-cover-in{position:-webkit-sticky;position:sticky;top:max(100px,calc(50vh - 170px));display:flex;flex-direction:column;align-items:center;gap:20px;max-width:640px;margin:0 auto}
body .kzp-cover-btn{-webkit-appearance:none;appearance:none;display:flex!important;flex-direction:column;align-items:center;gap:22px;margin:0!important;padding:0!important;
  border:0!important;background:none!important;color:#fff!important;cursor:pointer;font:inherit;box-shadow:none!important}
.kzp-cover-btn .kzp-disc{width:clamp(108px,13vw,148px);height:clamp(108px,13vw,148px)}
.kzp-cover-btn:focus-visible{outline:3px solid #fff;outline-offset:10px;border-radius:24px}
.kzp-cover-btn:hover .kzp-disc{transform:scale(1.08)}
.kzp-cover-t{display:block;font-size:clamp(26px,3.4vw,42px);line-height:1.15;font-weight:800;letter-spacing:-.6px;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.kzp-cover-s{display:block;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:#d9e8e5;max-width:520px}
.kzp-cover-s .kzp-snd{display:inline-block;margin-top:14px;padding:7px 14px;border-radius:999px;border:1px solid rgba(236,206,140,.6);color:#f1d9a1;font-size:13px;font-weight:700}
.kzp-demo.is-started .kzp-cover{opacity:0;visibility:hidden;pointer-events:none}

/* --- Mobile --- */
@media(max-width:640px){
  .kzp-hero{margin-top:26px}
  body .kzp-big{display:flex!important;width:100%;min-height:92px;gap:16px;padding:12px 22px 12px 12px!important;padding-inline:12px 22px!important}
  .kzp-big .kzp-disc{width:64px;height:64px}
  .kzp-big-txt b{font-size:20px}
  .kzp-big-txt small{font-size:13px}
  .kzp-vid{border-radius:16px;min-height:200px}
  .kzp-vid .kzp-disc{width:88px;height:88px}
  .kzp-vcover{gap:16px}
  .kzp-tag{top:12px;inset-inline-start:12px;font-size:12px}
  .kzp-cover{border-radius:16px;padding-top:70px}
  .kzp-cover-in{top:max(84px,calc(50vh - 150px))}
}

/* --- Mouvement réduit : le play reste bien visible, sans animation --- */
@media(prefers-reduced-motion:reduce){
  .kzp-disc,.kzp-disc::before,.kzp-disc::after,body .kzp-big,.kzp-pill{animation:none!important}
  .kzp-disc::before{opacity:.55;transform:scale(1.18)}
  .kzp-disc::after{display:none}
}