/* MemoMilo v246 — Modèles premium des annonces (jeu + aperçu de l'application admin).
 * Une signature par modèle (couleurs, illustration, ruban), le texte suit le thème du jeu.
 * Animations d'entrée uniquement (transform/opacity), aucune boucle infinie. */
.mqt-k-info{--t1:#22d3ee;--t2:#3b82f6;--t3:#4338ca;--tc:#2563eb}
.mqt-k-update{--t1:#2dd4bf;--t2:#0ea5e9;--t3:#1e3a8a;--tc:#0284c7}
.mqt-k-event{--t1:#f472b6;--t2:#c026d3;--t3:#4c1d95;--tc:#c026d3}
.mqt-k-tournament{--t1:#fbbf24;--t2:#4338ca;--t3:#0b1030;--tc:#d97706}
.mqt-k-reward{--t1:#fde047;--t2:#f97316;--t3:#be123c;--tc:#ea580c}
.mqt-k-welcome{--t1:#6ee7b7;--t2:#10b981;--t3:#075985;--tc:#059669}
.mqt-k-recall{--t1:#fda4af;--t2:#e11d48;--t3:#581c87;--tc:#e11d48}
.mqt-k-warning{--t1:#cbd5e1;--t2:#475569;--t3:#0f172a;--tc:#475569}
.mqt-k-support{--t1:#7dd3fc;--t2:#6366f1;--t3:#3b0764;--tc:#6366f1}

/* ---------- Carte ---------- */
.mqt-card{position:relative;width:min(100%,392px);max-height:calc(100vh - 36px);display:flex;flex-direction:column;overflow:hidden;border-radius:30px;
  background:var(--mqa-panel,linear-gradient(180deg,#ffffff,#f2fbfd));color:var(--mqa-ink,#123d55);
  box-shadow:0 30px 80px color-mix(in srgb,var(--t3) 45%,rgba(0,0,0,.35)),0 0 0 1px var(--mqa-line,rgba(17,94,116,.12));
  font-family:var(--mq-font-body,ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif);text-align:center}
.mqt-card .mqt-x{position:absolute;top:12px;right:12px;z-index:5;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;
  font-weight:900;font-size:14px;line-height:1;color:#fff;background:rgba(10,16,40,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}

/* ---------- Héros ---------- */
.mqt-hero{position:relative;flex:none;height:192px;display:grid;place-items:center;overflow:hidden;isolation:isolate;color:#fff}
.mqt-hero.has-img,.mqt-hero.is-loading{height:auto;aspect-ratio:16/9;max-height:42vh}
.mqt-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 50% 115%,var(--t3),transparent 70%),linear-gradient(150deg,var(--t1) 0%,var(--t2) 58%,var(--t3) 100%)}
.mqt-k-tournament .mqt-bg{background:radial-gradient(60% 60% at 50% 50%,rgba(251,191,36,.55),transparent 70%),radial-gradient(120% 90% at 50% 120%,#1e1b4b,transparent),linear-gradient(160deg,#312e81 0%,#1e1b4b 55%,#0b1030 100%)}
.mqt-k-reward .mqt-bg{background:radial-gradient(60% 60% at 50% 52%,rgba(255,247,200,.75),transparent 68%),linear-gradient(150deg,#fde047 0%,#f97316 55%,#be123c 100%)}
.mqt-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.16) 0deg 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0 22%,transparent 58%);mask:radial-gradient(circle at 50% 50%,#000 0 22%,transparent 58%);animation:mqt-spin 1.6s cubic-bezier(.2,.8,.3,1) both}
.mqt-glow{position:absolute;left:50%;top:50%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%)}
.mqt-dots{position:absolute;inset:0;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 75%);mask:linear-gradient(180deg,#000,transparent 75%)}
.mqt-art{position:relative;width:132px;height:132px;filter:drop-shadow(0 14px 22px color-mix(in srgb,var(--t3) 55%,transparent));animation:mqt-in .7s cubic-bezier(.2,.9,.3,1.35) .08s both}
.mqt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:mqt-fade .5s ease both}
.mqt-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 34%,transparent 58%,color-mix(in srgb,var(--t3) 70%,rgba(0,0,0,.6)) 100%);pointer-events:none}
.mqt-hero.has-img .mqt-bg,.mqt-hero.has-img .mqt-rays{display:none}
.mqt-hero::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:mqt-sweep 1.4s ease .55s 1 both}
.mqt-shim{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);background-size:220% 100%;animation:mqa-shim 1.1s linear infinite}
.mqt-ribbon{position:absolute;z-index:5;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border-radius:999px;
  font-weight:900;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,16,40,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:mqt-drop .5s ease .2s both}
.mqt-glyph{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mqt-badge{position:absolute;z-index:5;left:14px;bottom:13px;max-width:60%;padding:6px 12px;border-radius:12px;font-weight:950;font-size:14px;letter-spacing:-.01em;
  color:var(--tc);background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:mqt-drop .5s ease .35s both}
.mqt-k-tournament .mqt-badge,.mqt-k-reward .mqt-badge{background:linear-gradient(180deg,#fff9db,#fde68a);color:#92400e}
.mqt-count{position:absolute;z-index:5;right:14px;bottom:13px;padding:6px 11px;border-radius:12px;font-weight:800;font-size:12px;color:#fff;background:rgba(10,16,40,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums;animation:mqt-drop .5s ease .45s both}
.mqt-count b{font-weight:950}

/* ---------- Texte ---------- */
.mqt-body{padding:20px 24px 4px;overflow:auto;-webkit-overflow-scrolling:touch}
.mqt-body h2{margin:0 0 10px;font-weight:950;font-size:clamp(21px,5.8vw,25px);line-height:1.13;letter-spacing:-.025em;color:var(--mqa-ink,#123d55)}
.mqt-body p{margin:0 0 8px;font-weight:700;font-size:14.5px;line-height:1.5;color:var(--mqa-sub,#5d7f93)}
.mqt-body b{color:var(--mqa-ink,#123d55);font-weight:900}
.mqt-list{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:8px;text-align:left}
.mqt-list li{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:14px;background:var(--mqa-row,#f3f9fc);box-shadow:inset 0 0 0 1px var(--mqa-line,rgba(17,94,116,.12));
  font-weight:800;font-size:13.5px;line-height:1.4;color:var(--mqa-ink,#123d55);animation:mqt-drop .4s ease both}
.mqt-list li:nth-child(2){animation-delay:.06s}.mqt-list li:nth-child(3){animation-delay:.12s}.mqt-list li:nth-child(4){animation-delay:.18s}.mqt-list li:nth-child(n+5){animation-delay:.24s}
.mqt-list i{flex:none;width:20px;height:20px;margin-top:-1px;border-radius:50%;background:linear-gradient(135deg,var(--t1),var(--t2));box-shadow:0 3px 8px color-mix(in srgb,var(--t2) 40%,transparent);position:relative}
.mqt-list i::after{content:"";position:absolute;left:6.5px;top:4.5px;width:5px;height:9px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}

/* ---------- Boutons ---------- */
.mqt-actions{display:grid;gap:8px;padding:14px 20px 20px}
.mqt-cta{position:relative;overflow:hidden;min-height:52px;border:0;border-radius:17px;padding:0 20px;font:inherit;font-weight:950;font-size:16px;letter-spacing:-.01em;color:#fff!important;cursor:pointer;
  background:linear-gradient(135deg,var(--t1),var(--t2))!important;text-shadow:0 1px 2px rgba(0,0,0,.18);
  box-shadow:0 12px 26px color-mix(in srgb,var(--t2) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.4)!important;transition:transform .15s ease}
.mqt-k-tournament .mqt-cta,.mqt-k-reward .mqt-cta{background:linear-gradient(135deg,#fde047,#f59e0b 55%,#ea580c)!important;color:#3b1d02!important;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.mqt-k-warning .mqt-cta{background:linear-gradient(135deg,#64748b,#334155)!important}
.mqt-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-120%);animation:mqt-sweep 1.2s ease 1.1s 1 both}
.mqt-cta:active{transform:scale(.97)}
.mqt-later{min-height:44px;border:0;border-radius:15px;font:inherit;font-weight:850;font-size:14px;color:var(--mqa-sub,#5d7f93)!important;background:transparent!important;cursor:pointer}

/* ---------- Bandeau & liste « Nouveautés » ---------- */
.mqa-banner[class*="mqt-k-"]::before{width:5px;background:linear-gradient(180deg,var(--t1),var(--t2))}
.mqa-banner[class*="mqt-k-"] .mqa-banner-ic,.mqa-news[class*="mqt-k-"] .mqa-news-ic{color:#fff;background:linear-gradient(135deg,var(--t1),var(--t2));box-shadow:0 6px 14px color-mix(in srgb,var(--t2) 38%,transparent)}
.mqa-banner .mqt-glyph,.mqa-news .mqt-glyph{width:19px;height:19px}
.mqa-banner-copy em,.mqa-news-copy i.mqt-chip{font-style:normal;font-weight:900;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tc)}
.mqa-news-copy i.mqt-chip{display:block;margin-bottom:1px}
.mq-shell:is([data-skin="ocean"],[data-skin="grenat"],[data-skin="ardoise"],[data-skin="nuit"]) .mqa-banner-copy em,
.mq-shell:is([data-skin="ocean"],[data-skin="grenat"],[data-skin="ardoise"],[data-skin="nuit"]) .mqa-news-copy i.mqt-chip{color:var(--t1)}

@keyframes mqt-in{from{opacity:0;transform:translateY(16px) scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes mqt-fade{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes mqt-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes mqt-spin{from{opacity:0;transform:rotate(-25deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes mqt-sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes mqa-shim{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.mqt-card *,.mqt-hero::before,.mqt-cta::after{animation:none!important}}
.mq-shell[data-motion="calme"] .mqt-card *,.mq-shell[data-motion="calme"] .mqt-hero::before,.mq-shell[data-motion="calme"] .mqt-cta::after{animation:none!important}
