/* MK10 · offre de lancement MarakizSystem · page Apprentissage (apprentissage.html) · KAZAKOM */

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

/* --- Compteur 500 → 250 --- */
#mk-main-price{font-variant-numeric:tabular-nums}
.mk10-num{display:none}
.mk10-counting .mk10-num{display:inline}
.mk10-counting .mk10-orig{display:none}
.mk10-ready .mk-prices{flex-wrap:wrap}
.mk10-ready .mk-prices del.mk10-del{position:relative;text-decoration:none!important}
.mk10-ready .mk-prices del.mk10-del::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:3px;margin-top:-1px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.6,0,.2,1)}
html[dir="rtl"] .mk10-ready .mk-prices del.mk10-del::after{transform-origin:right center}
.mk10-done .mk-prices del.mk10-del::after{transform:scaleX(1)}
@keyframes mk10-land{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.mk10-done #mk-main-price{display:inline-block;animation:mk10-land .5s ease-out both}

/* --- Les deux grosses pastilles : −50 % et 3 centres, qui clignotent --- */
.mk10-hits{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin:20px 0 8px}
@keyframes mk10-pop{0%{opacity:0;transform:scale(.35)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes mk10-blink{0%,100%{opacity:1;filter:brightness(1.06)}50%{opacity:.38;filter:brightness(.9)}}
@keyframes mk10-glow{0%,100%{box-shadow:0 0 0 0 rgba(229,189,119,.55),0 14px 34px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 12px rgba(229,189,119,0),0 14px 34px rgba(0,0,0,.35)}}

.mk10-hits .mk10-hit{opacity:0;transform:scale(.35)}
.mk10-done .mk10-hits .mk10-hit{animation:mk10-pop .55s cubic-bezier(.2,.9,.3,1.25) both,mk10-blink 1.1s ease-in-out 1s infinite}
.mk10-done .mk10-hits .mk10-hit+.mk10-hit{animation-delay:.28s,1s}

/* −50 % */
body .mk10-hits #mk-discount.mk10-hit{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-height:84px;margin:0!important;
  padding:12px 26px!important;border-radius:20px!important;border:0!important;
  background:linear-gradient(135deg,#f6e2b0 0%,#e5bd77 50%,#c99a4f 100%)!important;color:#10292e!important;
  font-size:clamp(38px,5.2vw,58px)!important;line-height:1!important;font-weight:800!important;letter-spacing:-1px!important;white-space:nowrap;
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
.mk10-done .mk10-hits #mk-discount.mk10-hit{animation:mk10-pop .55s cubic-bezier(.2,.9,.3,1.25) both,mk10-blink 1.1s ease-in-out 1s infinite,mk10-glow 1.1s ease-in-out 1s infinite}
body .mk10-hits #mk-discount.mk10-hit[hidden]{display:none!important}

/* 3 centres */
.mk10-centres{display:inline-flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-height:84px;padding:10px 24px;border-radius:20px;
  border:2px solid #e5bd77;background:rgba(229,189,119,.12);color:#fff;text-align:start}
.mk10-centres small{display:block;font-size:12.5px;line-height:1.2;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#e5bd77;margin:0 0 6px}
.mk10-centres b{display:block;font-size:clamp(32px,4.4vw,50px);line-height:1;font-weight:800;letter-spacing:-.5px;text-transform:uppercase;color:#fff;white-space:nowrap}
html[lang|="ar"] .mk10-centres small{letter-spacing:0}
html[lang|="ar"] .mk10-centres b{letter-spacing:0}

/* --- Ligne « 10 leçons incluses… » --- */
.mk-included .mk10-inc b{font-weight:800}

@media(max-width:640px){
  .mk10-hits{gap:10px;margin:16px 0 6px}
  body .mk10-hits #mk-discount.mk10-hit{min-height:70px;padding:10px 18px!important;font-size:40px!important;border-radius:16px!important}
  .mk10-centres{min-height:70px;padding:8px 16px;border-radius:16px}
  .mk10-centres small{font-size:11px;letter-spacing:1.2px;margin-bottom:5px}
  .mk10-centres b{font-size:32px}
}

/* --- Mouvement réduit : tout reste bien visible, sans clignotement --- */
@media(prefers-reduced-motion:reduce){
  .mk10-hits .mk10-hit,.mk10-done .mk10-hits .mk10-hit,.mk10-done .mk10-hits #mk-discount.mk10-hit,.mk10-done #mk-main-price{opacity:1;transform:none;animation:none!important}
  .mk10-ready .mk-prices del.mk10-del::after{transform:scaleX(1);transition:none}
}