/* MoonTik — Carrousel de cadeaux */
.crx { position: relative; width: 100%; height: 100%; display: flex; contain: inline-size; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; }
.crx.vpos-haut { align-items: flex-start; } .crx.vpos-centre { align-items: center; } .crx.vpos-bas { align-items: flex-end; }
.crx-band { position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fw), #000 calc(100% - var(--fw)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fw), #000 calc(100% - var(--fw)), transparent); }
.crx-run { display: flex; width: max-content; animation: crxRun var(--dur, 12s) linear infinite; }
.crx-run.rev { animation-direction: reverse; }
.crx.ph .crx-band:hover .crx-run { animation-play-state: paused; }
.crx-seq { display: flex; align-items: center; flex: none; }
@keyframes crxRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.crx-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; text-align: center; }
.crx-img { display: grid; place-items: center; overflow: hidden; }
.crx-img img { width: 100%; height: 100%; object-fit: contain; }
.crx-item.sh .crx-img img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
.crx-txt { display: flex; flex-direction: column; align-items: center; max-width: 140px; }
.crx-t1, .crx-t2 { line-height: 1.1; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.crx-item.pos-sur .crx-txt { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.crx-diapo { position: relative; width: 100%; height: 100%; }
.crx-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity .6s, transform .6s; }
.crx-slide.on { opacity: 1; transform: scale(1); }
.crx-car { position: relative; width: 100%; height: 100%; }
.crx-cslot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transition: transform .7s cubic-bezier(.3,.8,.3,1), opacity .7s; }
.ov-cat-preview .crx-prev .fx-scale { height: 100%; }
/* éditeur */
.cre-seg { display: flex; gap: 4px; background: #1a1b21; border: 1px solid #26282f; border-radius: 10px; padding: 3px; margin: 4px 0 10px; }
.cre-seg button { flex: 1; background: none; border: 0; color: #a3a6b2; font: 600 12px "Segoe UI", system-ui; padding: 7px; border-radius: 8px; cursor: pointer; }
.cre-seg button.on { background: #f3f4f6; color: #111; }
.cre-lab { color: #d8dae0; font: 600 13px "Segoe UI", system-ui; margin-top: 8px; }
.cre-lr { display: flex; justify-content: space-between; color: #8b8e99; font: 600 10px "Segoe UI", system-ui; letter-spacing: .05em; }
.cre-sub { display: block; color: #8b8e99; font-size: 11px; }
.cre-wide { width: 100%; margin: 8px 0; }
.cre-items { max-height: 420px; overflow: auto; display: grid; gap: 10px; }
.cre-item { background: #1a1b21; border: 1px solid #26282f; border-radius: 10px; padding: 10px; }
.cre-ih { display: flex; justify-content: space-between; color: #8b8e99; font: 600 11px "Segoe UI", system-ui; }
.cre-ih button { background: none; border: 0; color: #d8dae0; cursor: pointer; font-size: 13px; }
.cre-det { background: #1a1b21; border: 1px solid #26282f; border-radius: 10px; padding: 9px 12px; margin: 6px 0; color: #d8dae0; font: 600 13px "Segoe UI", system-ui; }
.cre-det summary { cursor: pointer; }
.cre-rng { margin: 6px 0; }