/* MoonTik — Overlays Battle : section, menu « … » et éditeur plein écran */
.mtbe-section { margin: 4px 0 22px; }
.mtbe-sec-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.mtbe-sec-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #e5e7eb; }
.mtbe-sec-head .mtbe-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: #1f1f25; color: #a1a1aa; font-size: 12px; display: grid; place-items: center; }
.mtbe-sec-head i { flex: 1; height: 1px; background: #26262c; }
.mtbe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; }
.mtbe-card { background: #111114; border: 1px solid #26262c; border-radius: 16px; overflow: hidden; transition: border-color .15s; }
.mtbe-card:hover { border-color: #3a3a44; }
.mtbe-card.is-off .mtbe-prev iframe { opacity: .35; }
.mtbe-prev { position: relative; height: 190px; background-color: #17171b; background-image: linear-gradient(45deg, #1f1f24 25%, transparent 25%), linear-gradient(-45deg, #1f1f24 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1f1f24 75%), linear-gradient(-45deg, transparent 75%, #1f1f24 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; overflow: hidden; }
.mtbe-prev iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform: none; transform-origin: 0 0; pointer-events: none; background: transparent; }
.mtbe-status { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(10,10,12,.85); border: 1px solid #2c2c33; color: #d4d4d8; font-size: 11.5px; font-weight: 600; }
.mtbe-status svg { width: 14px; height: 14px; } .mtbe-status.on { color: #4ade80; border-color: rgba(74,222,128,.4); }
.mtbe-offtag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 99px; background: #3f1d1d; color: #fca5a5; font-size: 11px; font-weight: 600; }
.mtbe-foot { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; } .mtbe-foot b { flex: 1; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtbe-dots { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: #a1a1aa; font-size: 18px; cursor: pointer; } .mtbe-dots:hover { background: #222228; color: #fff; }
.mtbe-url { margin: 0 14px 14px; padding: 9px 12px; border-radius: 10px; background: #18181c; border: 1px solid #26262c; font: 12px ui-monospace, Consolas, monospace; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: copy; }
.mtbe-menu { position: fixed; z-index: 10050; min-width: 240px; padding: 6px; background: #161619; border: 1px solid #2e2e35; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.mtbe-menu button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: transparent; color: #f4f4f5; font: 600 14px inherit; border-radius: 9px; cursor: pointer; text-align: left; }
.mtbe-menu button:hover { background: #222228; } .mtbe-menu button svg { width: 18px; height: 18px; flex: none; color: #a1a1aa; } .mtbe-menu button span { flex: 1; }
.mtbe-menu .danger, .mtbe-menu .danger svg { color: #f87171; } .mtbe-menu hr { border: 0; border-top: 1px solid #2a2a30; margin: 5px 4px; }
.mtbe-sub-wrap { position: relative; } .mtbe-sub { display: none; position: absolute; left: calc(100% + 6px); top: 0; min-width: 220px; padding: 6px; background: #161619; border: 1px solid #2e2e35; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.mtbe-sub-wrap:hover .mtbe-sub, .mtbe-sub-wrap.open .mtbe-sub { display: block; } .mtbe-menu.sub-left .mtbe-sub { left: auto; right: calc(100% + 6px); }
.mtbe-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 10100; background: #16a34a; color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,.4); } .mtbe-toast.bad { background: #dc2626; }
/* éditeur */
.mtbe-ed { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: 1fr 380px; background: radial-gradient(ellipse at 60% 40%, #1a1a1f, #0b0b0d 70%); color: #f4f4f5; }
.mtbe-stage { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mtbe-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.mtbe-back { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 12px; border: 1px solid #2e2e35; background: #121215; color: #f4f4f5; font-weight: 700; cursor: pointer; }
.mtbe-opac { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; border: 1px solid #2e2e35; background: #121215; color: #d4d4d8; font-size: 12px; }
.mtbe-opac svg { width: 16px; height: 16px; } .mtbe-opac input { width: 110px; accent-color: #fff; }
.mtbe-canvas { flex: 1; display: grid; place-items: center; padding: 20px; min-height: 0; }
.mtbe-frame { width: min(92%, 760px); aspect-ratio: 16 / 7; border-radius: 16px; overflow: hidden; border: 1px solid #2a2a30; background-color: #141417; background-image: linear-gradient(45deg, #1d1d22 25%, transparent 25%), linear-gradient(-45deg, #1d1d22 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1d1d22 75%), linear-gradient(-45deg, transparent 75%, #1d1d22 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.mtbe-frame iframe { width: 100%; height: 100%; border: 0; background: transparent; }
.mtbe-bar { align-self: center; display: flex; gap: 4px; margin: 0 0 26px; padding: 6px; border-radius: 14px; border: 1px solid #2e2e35; background: #121215; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.mtbe-bar button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px; background: transparent; color: #e4e4e7; font-weight: 700; cursor: pointer; }
.mtbe-bar button svg { width: 16px; height: 16px; } .mtbe-bar button:hover { background: #1f1f24; } .mtbe-bar button.primary { background: #fff; color: #111; }
.mtbe-side { border-left: 1px solid #222228; background: #0e0e10; display: flex; flex-direction: column; min-height: 0; }
.mtbe-side-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #1f1f24; } .mtbe-side-h svg { width: 18px; height: 18px; color: #a1a1aa; }
.mtbe-side-b { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.mtbe-box { border: 1px solid #24242a; border-radius: 14px; background: #121215; padding: 0 14px 14px; }
.mtbe-box h4 { display: flex; align-items: center; gap: 8px; margin: 0 -14px 12px; padding: 12px 14px; border-bottom: 1px solid #1f1f24; font-size: 11.5px; letter-spacing: .08em; color: #d4d4d8; }
.mtbe-box h4 span { color: #a1a1aa; }
.mtbe-lab { font-size: 13px; font-weight: 600; margin: 12px 0 6px; color: #e4e4e7; }
.mtbe-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; font-size: 13px; font-weight: 600; color: #e4e4e7; }
.mtbe-seg { display: flex; padding: 3px; border-radius: 10px; background: #18181c; border: 1px solid #24242a; }
.mtbe-seg button { flex: 1; padding: 6px 4px; border: 0; border-radius: 7px; background: transparent; color: #a1a1aa; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtbe-seg button.on { background: #fff; color: #111; }
.mtbe-sw { width: 36px; height: 20px; border-radius: 99px; border: 0; background: #3f3f46; position: relative; cursor: pointer; flex: none; }
.mtbe-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; } .mtbe-sw.on { background: #e4e4e7; } .mtbe-sw.on i { left: 18px; background: #18181b; }
.mtbe-sel { background: #18181c; color: #f4f4f5; border: 1px solid #2e2e35; border-radius: 9px; padding: 6px 10px; font: 600 12.5px inherit; max-width: 190px; }
.mtbe-font { background: #18181c; color: #fff; border: 1px solid #2e2e35; border-radius: 9px; padding: 7px 10px; font-size: 14px; max-width: 190px; }
.mtbe-sl { margin: 12px 0; } .mtbe-sl-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mtbe-num { display: inline-flex; align-items: center; gap: 4px; } .mtbe-num input { width: 52px; background: #18181c; color: #fff; border: 1px solid #2e2e35; border-radius: 7px; padding: 4px 6px; text-align: right; font: 12px ui-monospace, monospace; } .mtbe-num em { font-style: normal; font-size: 11px; color: #71717a; }
.mtbe-sl input[type=range] { width: 100%; accent-color: #fff; }
.mtbe-ends { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .08em; color: #71717a; margin-top: 2px; }
.mtbe-col { display: inline-flex; align-items: center; gap: 6px; } .mtbe-col input { width: 38px; height: 28px; border: 1px solid #2e2e35; border-radius: 7px; background: #fff; padding: 0; cursor: pointer; }
.mtbe-col em { font-size: 11px; color: #71717a; font-style: normal; } .mtbe-col button { border: 0; background: #222228; color: #fff; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; }
.mtbe-note { font-size: 12px; color: #a1a1aa; background: #18181c; border: 1px solid #24242a; border-radius: 9px; padding: 8px 10px; margin: 4px 0 12px; line-height: 1.4; }
.mtbe-note button { margin-top: 6px; border: 0; background: #222228; color: #e4e4e7; border-radius: 7px; padding: 4px 8px; font-size: 11.5px; cursor: pointer; }
.mtbe-acc { border: 1px solid #24242a; border-radius: 12px; margin-top: 10px; } .mtbe-acc-h { width: 100%; display: flex; gap: 10px; align-items: center; padding: 12px; border: 0; background: transparent; color: #f4f4f5; font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: left; }
.mtbe-acc-h .chev { color: #a1a1aa; width: 12px; } .mtbe-acc-b { padding: 0 12px 10px; }
.mtbe-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mtbe-skins button { padding: 8px 6px; border-radius: 9px; border: 1px solid #2e2e35; background: #18181c; color: #d4d4d8; font-weight: 600; font-size: 12px; cursor: pointer; } .mtbe-skins button.on { background: #fff; color: #111; border-color: #fff; }
/* aperçus iframe dans le choix du type / du style */
.ov-ifr-prev { position: relative; width: 100%; height: 100%; min-height: 120px; overflow: hidden; }
.ov-ifr-prev iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform: none; transform-origin: 0 0; pointer-events: none; background: transparent; }
/* Overlays rattachés à une scène + section « Modules de la scène » du catalogue Créer */
.ov-scene-chip { display: inline-block; padding: 0 7px; border-radius: 99px; background: rgba(139,92,246,.15); color: #c4b5fd; font-size: 11px; }
.ov-wiz-featured h3 small { font-weight: 500; font-size: 11.5px; color: #a1a1aa; margin-left: 8px; }
.ov-wiz-featured .ov-cat-card { border-color: rgba(139,92,246,.45); }

.mtbe-vsstyles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.mtbe-vsstyles button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: #16161a; border: 1px solid #2a2a32; border-radius: 10px; color: #e4e4ea; cursor: pointer; font: 11px/1.2 inherit; }
.mtbe-vsstyles button.on { border-color: #a78bfa; box-shadow: 0 0 0 1px #a78bfa; }
.mtbe-vsstyles .vs-th { font: 700 14px "Lilita One", sans-serif; color: #facc15; letter-spacing: .04em; }
.mtbe-vsstyles .vs-badge { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #facc15; display: grid; place-items: center; }
.mtbe-vsstyles .vs-burst { width: 40px; height: 40px; display: grid; place-items: center; background: #facc15; color: #111 !important; clip-path: polygon(50% 0,61% 30%,95% 18%,72% 45%,100% 62%,66% 66%,72% 100%,50% 76%,26% 100%,32% 66%,0 62%,28% 45%,5% 18%,39% 30%); }
.mtbe-vsstyles .vs-plaque { background: linear-gradient(#fff7c2,#b45309); color: #111 !important; padding: 4px 8px; border: 2px solid #78350f; border-radius: 4px; }
.mtbe-vsstyles .vs-spark { text-shadow: 0 0 8px #67e8f9, 0 0 14px #facc15; }
.mtbe-vsstyles .vs-orb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #c4b5fd 40%, #4c1d95); box-shadow: 0 0 10px #a78bfa; }
.mtbe-vsstyles .vs-ribbon { background: #be123c; color: #fff !important; padding: 3px 14px; transform: skewX(-12deg); border: 2px solid #fff; }