/* ==========================================================================
   CENTURION — TRAILER v6
   La scène est un cadre fixe (1280×800, ou 720×1120 en portrait) mis à
   l'échelle par --tr-scale, comme une vidéo : rendu identique sur tout écran.
   Toutes les tailles sont en px (indépendantes du font-size de la page).
   Animations continues : transform / opacity uniquement.
   ========================================================================== */

/* ---------- Lecteur ---------- */
.tr-player {
    border: 0; padding: 0; margin: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: 100vw; max-height: 100vh; max-height: 100dvh;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: #000; color: #fff; overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.4;
}
.tr-player::backdrop { background: #000; }
/* Navigateurs sans <dialog> natif : le lecteur reste caché tant qu'il n'est pas ouvert */
.tr-player:not([open]) { display: none; }
.tr-player[open] { display: block; z-index: 99999; }
.tr-player *, .tr-player *::before, .tr-player *::after { box-sizing: border-box; }
.tr-player h1, .tr-player h2, .tr-player h3 { margin: 0; text-wrap: balance; }

.tr-topbar {
    position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 16px; z-index: 50;
    display: flex; align-items: center; gap: 10px;
}
.tr-iconbtn, .tr-skip {
    height: 40px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; font: 600 14px/1 'Inter', system-ui, sans-serif;
    transition: background-color .25s, border-color .25s, opacity .4s;
}
.tr-iconbtn { width: 40px; display: grid; place-items: center; }
.tr-skip { position: relative; overflow: hidden; padding: 0 18px; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.tr-iconbtn:hover, .tr-skip:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
.tr-skip > i, .tr-skip > span:not(.skip-progress-bar) { position: relative; z-index: 1; }
.skip-progress-bar {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: left center; transform: scaleX(0);
    background: linear-gradient(90deg, rgba(168,85,247,0.55), rgba(236,72,153,0.55));
}
.tr-player.is-ended .tr-skip { background: rgba(255,255,255,0.16); }
.tr-player.is-ended .skip-progress-bar { opacity: 0; }

.tr-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.tr-wrapper.is-shake { animation: trShake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes trShake {
    10%, 90% { transform: translate3d(-3px, 1px, 0); }
    20%, 80% { transform: translate3d(6px, -2px, 0); }
    30%, 50%, 70% { transform: translate3d(-10px, 3px, 0); }
    40%, 60% { transform: translate3d(10px, -3px, 0); }
}

/* ---------- Scène ---------- */
.tr-screen {
    --sw: 1280px; --sh: 800px;
    width: var(--sw); height: var(--sh);
    /* Centrage absolu : reste centré même quand le cadre (non mis à l'échelle) dépasse la fenêtre */
    position: absolute; left: 50%; top: 50%; margin: calc(var(--sh) / -2) 0 0 calc(var(--sw) / -2);
    overflow: hidden;
    background: #0b0c10; border-radius: 14px;
    transform: scale(var(--tr-scale, 1)); transform-origin: center center;
    perspective: 1700px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 40px 120px rgba(0,0,0,0.9);
    user-select: none; -webkit-user-select: none;
}
.tr-player.is-portrait .tr-screen { --sw: 720px; --sh: 1120px; }

.tr-vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle at center, transparent 55%, rgba(0,0,0,0.55) 125%); }
.tr-vignette::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 200px rgba(242,63,67,0.6); opacity: 0; }
.tr-screen.is-danger .tr-vignette::after { animation: trDanger .7s ease-in-out infinite alternate; }
@keyframes trDanger { from { opacity: .25; } to { opacity: 1; } }

.tr-dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 35; pointer-events: none; background: #000; opacity: 0; transition: opacity 1.2s ease; }
.tr-dim.show { opacity: .6; }
.tr-dim.cut { transition: none; }
.tr-flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; pointer-events: none; background: #fff; opacity: 0; }
.tr-flash.go { animation: trFlash .7s ease-out both; }
@keyframes trFlash { 0% { opacity: .85; } 100% { opacity: 0; } }

.tr-timeline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 70; background: rgba(255,255,255,0.06); }
.tr-timeline span { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #a855f7, #ec4899); }

/* Titre de chapitre */
.tr-chapter {
    position: absolute; left: 50%; top: 66px; z-index: 40; white-space: nowrap;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 22px 14px 16px; border-radius: 16px;
    background: rgba(8,8,14,0.9); border: 1px solid rgba(168,85,247,0.35);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 40px rgba(168,85,247,0.15);
    opacity: 0; transform: translate(-50%, -24px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2,1,.3,1);
    pointer-events: none;
}
.tr-chapter.show { opacity: 1; transform: translate(-50%, 0); }
.tr-chapter-num {
    font: 900 34px/1 'Outfit', sans-serif; letter-spacing: -1px;
    background: linear-gradient(135deg, #c084fc, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tr-chapter-txt { display: flex; flex-direction: column; gap: 3px; }
.tr-chapter-txt b { font: 800 19px/1.1 'Outfit', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.tr-chapter-txt span { font-size: 13.5px; color: #a3a3ba; }

/* Scènes (fondus enchaînés) */
.tr-scene {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.tr-scene.active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }

/* Utilitaires de texte */
.tr-player .text-danger { color: #f23f43; }
.tr-player .text-success { color: #23a55a; }
.tr-player .text-info { color: #22d3ee; }
.tr-player .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avatars à initiale (aucune image externe) */
.avt {
    width: 100%; height: 100%; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--avc, #5865f2); color: #fff;
    font: 700 15px/1 'Outfit', sans-serif;
}
.avt-bot { background: #1e1f22; color: #23a55a; border: 2px solid #23a55a; font-size: 14px; }

/* ---------- Scène 0 : intro ---------- */
.tr-scene-0 { background: #000; display: grid; place-items: center; text-align: center; z-index: 5; }
.cinematic-text {
    grid-area: 1 / 1; padding: 20px;
    font: 900 62px/1.25 'Outfit', sans-serif; letter-spacing: 2px; color: #fff;
    text-shadow: 0 0 40px rgba(255,255,255,0.25);
    opacity: 0; transform: scale(1.12); filter: blur(10px);
    transition: opacity 1.2s ease, transform 2.6s cubic-bezier(.2,1,.3,1), filter 1.2s ease;
}
.cinematic-text.show { opacity: 1; transform: scale(1); filter: blur(0); }
.cinematic-text.text-success { text-shadow: 0 0 50px rgba(35,165,90,0.55); letter-spacing: 8px; }
.tr-player.is-portrait .cinematic-text { font-size: 40px; }

/* ---------- Interface Discord ---------- */
.discord-ui { display: flex; background: #313338; color: #dbdee1; }

.server-list { width: 72px; flex: none; background: #1e1f22; display: flex; flex-direction: column; align-items: center; padding-top: 12px; gap: 8px; }
.server-icon { width: 48px; height: 48px; border-radius: 50%; background: #313338; display: grid; place-items: center; font-size: 20px; color: #dbdee1; position: relative; }
.server-icon.discord-logo { background: #5865f2; color: #fff; border-radius: 16px; }
.server-icon.active { border-radius: 16px; }
.server-art { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #2a1a6e, #7a2ad6); color: #fff; font: 800 13px/1 'Outfit', sans-serif; }
.server-art img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.server-pill { position: absolute; left: -12px; top: 4px; width: 4px; height: 40px; background: #fff; border-radius: 0 4px 4px 0; }
.server-icon.explore-servers { color: #23a55a; }
.server-sep { width: 32px; height: 2px; background: #35363c; margin: 2px 0; }

.sidebar { width: 240px; flex: none; background: #2b2d31; display: flex; flex-direction: column; }
.srv-top { position: relative; height: 112px; flex: none; overflow: hidden; background: linear-gradient(135deg, #2a1650, #7a2a6a); }
.srv-banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.srv-top::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.12) 55%, rgba(43,45,49,0.9) 100%); }
.srv-header { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 49px; padding: 0 16px; font: 800 15px/1 'Inter', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.srv-header i { font-size: 12px; color: #b5bac1; }
.ch-list { padding: 4px 8px; flex: 1; overflow: hidden; }
.ch-cat { font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: .3px; color: #949ba4; margin: 14px 0 5px 2px; display: flex; align-items: center; gap: 5px; }
.ch-cat i { font-size: 9px; }
.ch-cat.admin-cat { color: #f23f43; }
.ch {
    height: 34px; padding: 0 8px; margin-bottom: 2px; border-radius: 4px;
    color: #949ba4; font-weight: 500; font-size: 15px;
    display: flex; align-items: center; gap: 8px; position: relative;
    transition: background-color .3s, color .3s, opacity .5s, transform .5s cubic-bezier(.5,0,.75,0), height .4s ease .25s, margin .4s ease .25s;
}
.ch-icon { width: 20px; flex: none; text-align: center; font-size: 14px; color: #80848e; }
.ch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch.ch-voice { font-size: 14px; }
.ch.active { background: rgba(78,80,88,0.6); color: #fff; }
.ch.highlight-del { background: rgba(242,63,67,0.4); color: #fff; animation: chShake .35s linear 2; }
.ch.highlight-del .ch-icon { color: #fff; }
.ch.deleted { background: rgba(242,63,67,0.2); color: #f23f43; text-decoration: line-through; opacity: 0; transform: translateX(-24px); height: 0; margin-bottom: 0; }
.ch.restored { animation: chRestored 1.6s ease both; }
@keyframes chShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes chRestored { 0% { background: rgba(35,165,90,0.55); color: #fff; transform: translateX(-10px); opacity: 0; } 25% { transform: none; opacity: 1; } 60% { background: rgba(35,165,90,0.35); color: #fff; } 100% { background: transparent; } }
.ch.ch-logs { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.ch.ch-logs.show { opacity: 1; height: 34px; margin-bottom: 2px; overflow: visible; }
.ch-ping { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f23f43; color: #fff; font: 700 11.5px/18px 'Inter', sans-serif; text-align: center; animation: pingPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.ch-ping.hide { display: none; }
@keyframes pingPop { from { transform: scale(0); } to { transform: scale(1); } }

.user-panel { height: 54px; flex: none; background: #232428; padding: 0 10px; display: flex; align-items: center; gap: 9px; }
.up-av { width: 32px; height: 32px; position: relative; flex: none; }
.up-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.up-info b { font-size: 13.5px; color: #f2f3f5; font-weight: 600; }
.up-info span { font-size: 12px; color: #949ba4; }
.up-icons { display: flex; gap: 13px; color: #b5bac1; font-size: 15px; }
.status-indicator { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: #23a55a; border: 3px solid #2b2d31; }
.up-av .status-indicator { border-color: #232428; }
.status-indicator.st-dnd { background: #f23f43; }

.main-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-header { height: 49px; flex: none; padding: 0 16px; border-bottom: 1px solid #26272b; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ch-title { display: flex; align-items: center; gap: 9px; font: 600 16px/1 'Inter', sans-serif; color: #f2f3f5; min-width: 0; }
.ch-title > i { color: #80848e; font-size: 19px; }
.ch-topic { font-size: 13.5px; font-weight: 400; color: #949ba4; padding-left: 14px; margin-left: 6px; border-left: 1px solid #3f4147; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-icons { display: flex; align-items: center; gap: 16px; color: #b5bac1; font-size: 17px; flex: none; }
.ch-search { background: #1e1f22; font-size: 13px; padding: 5px 9px; border-radius: 4px; width: 144px; color: #949ba4; display: flex; justify-content: space-between; align-items: center; }
.ch-search i { font-size: 12px; }

.chat-content { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.tr-scene-content {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0 16px 6px;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.tr-scene-content.active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }

.chat-history { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: opacity .4s ease; }
.msg-divider { display: flex; align-items: center; gap: 8px; color: #949ba4; font-size: 12px; font-weight: 600; margin: 8px 0 2px; }
.msg-divider::before, .msg-divider::after { content: ''; flex: 1; height: 1px; background: #3f4147; }
.msg { display: flex; align-items: flex-start; gap: 16px; margin-top: 17px; flex: none; animation: msgPop .35s cubic-bezier(.2,1,.3,1) both; transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
@keyframes msgPop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.msg .av { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.msg .av.danger-border { box-shadow: 0 0 0 2px #313338, 0 0 0 4px #f23f43; }
.msg .av.centurion-av { background: #1e1f22; border: 2px solid #23a55a; color: #23a55a; display: grid; place-items: center; font-size: 17px; box-shadow: 0 0 18px rgba(35,165,90,0.45); }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-meta b { font-weight: 600; font-size: 16px; color: #f2f3f5; }
.msg-meta .time { font-size: 12px; color: #949ba4; }
.msg-text { font-size: 16px; line-height: 1.4; color: #dbdee1; }
.msg-text b { color: #fff; font-weight: 700; }
.msg.msg-scam { display: none; }
.msg.msg-scam.show { display: flex; }
.msg.msg-compact { margin-top: 5px; }
.msg.msg-compact .av { visibility: hidden; height: 0; }
.msg.msg-compact .msg-meta { display: none; }
.msg.purged { opacity: 0; transform: translateX(40px) scale(.96); filter: blur(4px); }
.msg.msg-centurion { background: linear-gradient(90deg, rgba(35,165,90,0.12), transparent 70%); border-left: 3px solid #23a55a; padding: 10px 12px; margin-left: -15px; border-radius: 0 8px 8px 0; }
.msg-sys { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-left: 12px; font-size: 14.5px; color: #949ba4; flex: none; animation: msgPop .35s cubic-bezier(.2,1,.3,1) both; }
.msg-sys i { width: 20px; text-align: center; color: #f23f43; }
.msg-sys.ok i { color: #23a55a; }
.msg-sys b { color: #f2f3f5; font-weight: 600; }
.bot-tag { background: #5865f2; color: #fff; font: 700 10.5px/1 'Inter', sans-serif; padding: 3px 5px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; align-self: center; }
.bot-tag i { font-size: 9px; }
.scam-text { font-weight: 700; color: #f2f3f5; transition: opacity .5s; }
.scam-text.struck { text-decoration: line-through; opacity: .35; }

.typing-ind { height: 26px; flex: none; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #b5bac1; opacity: 0; transition: opacity .3s; }
.typing-ind.show { opacity: 1; }
.typing-ind b { color: #f2f3f5; font-weight: 700; }
.dots { display: flex; gap: 3px; }
.dots span { width: 6px; height: 6px; background: #b5bac1; border-radius: 50%; animation: typingDot 1.4s infinite ease-in-out both; }
.dots span:nth-child(1) { animation-delay: -0.32s; }
.dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingDot { 0%, 80%, 100% { transform: scale(.4); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.chat-input-area { padding: 0 16px 22px; flex: none; }
.chat-input { height: 46px; background: #383a40; border-radius: 8px; padding: 0 16px; display: flex; align-items: center; gap: 14px; color: #6d6f78; font-size: 15.5px; }
.chat-input > i { color: #b5bac1; font-size: 20px; }
.chat-input > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-input-icons { display: flex; gap: 16px; color: #b5bac1; font-size: 20px; }

.member-list { width: 240px; flex: none; background: #2b2d31; padding: 6px 8px 0 16px; position: relative; z-index: 5; }
.ml-cat { font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: .3px; color: #949ba4; margin: 20px 0 8px; }
.ml-user { height: 44px; padding: 0 8px; margin-left: -8px; border-radius: 6px; display: flex; align-items: center; gap: 12px; color: #949ba4; font-weight: 500; font-size: 15.5px; transition: opacity .4s, background-color .4s, color .4s; position: relative; }
.ml-av { width: 32px; height: 32px; flex: none; position: relative; }
.ml-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-user.bot-highlight { background: rgba(35,165,90,0.08); }
.ml-user .bot-tag-verified { margin-left: auto; }
.ml-user.offline { opacity: .35; }
.ml-user.offline .status-indicator { background: #80848e; }
.ml-user.is-alert { background: rgba(242,63,67,0.14); color: #f2f3f5; }
.ml-user.is-alert::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; border: 1px solid rgba(242,63,67,0.6); animation: trDanger .6s ease-in-out infinite alternate; }
.ml-user.banned { opacity: .45; color: #f23f43 !important; }
.ml-user.banned .ml-name { text-decoration: line-through; color: #f23f43 !important; }
.ml-user.banned .status-indicator { background: #80848e; }
.ml-state { margin-left: auto; color: #fee75c; font-size: 14px; opacity: 0; transform: scale(0); transition: opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.ml-user.timeout { opacity: .6; }
.ml-user.timeout .ml-state { opacity: 1; transform: scale(1); }

.ctx-menu {
    position: absolute; right: calc(100% + 10px); top: -96px; width: 208px; z-index: 20;
    background: #111214; border-radius: 6px; padding: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.75);
    font-size: 14px; font-weight: 500; color: #dbdee1;
    opacity: 0; transform: scale(.9); transform-origin: bottom right; visibility: hidden; text-decoration: none;
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.ctx-menu.show { opacity: 1; transform: scale(1); visibility: visible; transition: opacity .2s, transform .2s, visibility 0s; }
.ctx-item { padding: 8px 10px; border-radius: 3px; display: flex; align-items: center; gap: 9px; }
.ctx-item.ctx-red { color: #f23f43; transition: background-color .15s, color .15s; }
.ctx-item.ctx-red.active { background: #f23f43; color: #fff; }
.ctx-sep { height: 1px; background: #2e2f34; margin: 4px 0; }

/* ---------- Pastilles, cartes, badges ---------- */
.tr-overlay-center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; }
#scene1-content .tr-overlay-center { justify-content: flex-start; padding-top: 54px; }
.tr-overlay-side { position: absolute; left: 0; right: 0; top: 54px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; }

.tr-glass-card {
    min-width: 420px; padding: 34px 40px; border-radius: 18px;
    background: #100712; border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 70px rgba(0,0,0,0.75);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    opacity: 0; visibility: hidden; transform: translateY(24px) scale(.96);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,1,.3,1), visibility 0s linear .45s;
}
.tr-glass-card.show { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,1,.3,1), visibility 0s; }

.tr-pill {
    display: none; align-items: center; gap: 14px;
    padding: 15px 28px; border-radius: 999px;
    font: 800 21px/1.15 'Inter', sans-serif; white-space: nowrap;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}
.tr-pill.show { display: flex; animation: pillIn .5s cubic-bezier(.34,1.56,.64,1) both; }
/* Les compteurs en direct se rangent à droite : ils ne masquent pas la conversation */
#s2-alert, #s3-scan { align-self: flex-end; margin-right: 26px; }
@keyframes pillIn { from { opacity: 0; transform: translateY(-18px) scale(.9); } to { opacity: 1; transform: none; } }
.tr-pill b { font-variant-numeric: tabular-nums; }
.tr-pill-red { background: linear-gradient(135deg, #f23f43, #c9272c); color: #fff; border: 1px solid #ff8a8d; }
.tr-pill-yellow { background: linear-gradient(135deg, #fee75c, #e0c531); color: #17140a; border: 1px solid #fff59d; }
.tr-pill-blue { background: linear-gradient(135deg, #5865f2, #3f4bc7); color: #fff; border: 1px solid #9aa5ff; }
.pill-icon-wrap { width: 30px; text-align: center; font-size: 22px; }
.heartbeat { animation: trBeat 1s ease-in-out infinite; }
@keyframes trBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.2); } }
.counter-glitch.bump { display: inline-block; animation: trBump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes trBump { 0% { transform: scale(1.9); color: #ffe08a; } 100% { transform: scale(1); } }
.tr-pill-flash.show { animation: pillIn .4s cubic-bezier(.34,1.56,.64,1) both, trFlashPill .55s ease-in-out .4s infinite alternate; }
@keyframes trFlashPill { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.05); filter: brightness(1.35); } }
.tr-pill-slam.show { animation: trSlam .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes trSlam { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.94); } 100% { transform: scale(1); } }
.spinner-border { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; animation: trSpin .8s linear infinite; }
@keyframes trSpin { to { transform: rotate(360deg); } }

.tr-action-grid { display: none; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tr-action-grid.show { display: flex; }
.tr-badge {
    display: none; align-items: center; gap: 11px;
    padding: 15px 24px; border-radius: 12px;
    font: 800 19px/1.1 'Inter', sans-serif; white-space: nowrap;
    box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.tr-badge.show { display: flex; animation: badgeIn .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes badgeIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.badge-banned { background: rgba(242,63,67,0.16); border: 2px solid #f23f43; color: #ff8a8d; }
.badge-banned span { color: #fff; }
.badge-restored { background: rgba(35,165,90,0.16); border: 2px solid #23a55a; color: #4ade80; }
.badge-timeout { background: rgba(254,231,92,0.14); border: 2px solid #fee75c; color: #fee75c; background-color: #1a1908; }
#s3-action { background-color: #1c0b0c; }

/* ---------- Scène 3 : Vision IA ---------- */
.scam-grid-wrapper { position: relative; width: 340px; margin-top: 10px; }
.scam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
.scam-img { height: 104px; background: #1e1f22; border-radius: 8px; display: grid; place-items: center; font-size: 44px; color: #f23f43; border: 2px solid rgba(242,63,67,0.25); position: relative; transition: border-color .3s, box-shadow .3s; }
.scam-tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 4px; background: #f23f43; color: #fff; font: 700 11px/1.2 'JetBrains Mono', monospace; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.scam-img.flagged { border-color: #f23f43; box-shadow: 0 0 22px rgba(242,63,67,0.45), inset 0 0 26px rgba(242,63,67,0.18); }
.scam-img.flagged .scam-tag { opacity: 1; transform: none; }
.scam-grid.destroyed { opacity: .12; transform: scale(.96); filter: grayscale(1) blur(3px); }
.ai-laser-scanner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; overflow: hidden; border-radius: 8px; pointer-events: none; display: none; }
.ai-laser-scanner.show { display: block; }
.laser-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #8ea1ff; box-shadow: 0 0 18px 5px rgba(88,101,242,0.85); animation: laserSweep 1.9s ease-in-out infinite alternate; }
.laser-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 46px; background: linear-gradient(to top, rgba(88,101,242,0.3), transparent); }
@keyframes laserSweep { from { transform: translateY(0); } to { transform: translateY(214px); } }

/* ---------- Scène 4 : journaux ---------- */
#scene4-content { justify-content: center; }
.log-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 640px; margin: 0 auto; }
.log-embed {
    background: #2b2d31; border-left: 4px solid var(--ec, #23a55a); border-radius: 6px; padding: 14px 18px 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
    opacity: 0; transform: translateY(40px) scale(.98);
    transition: opacity .5s ease, transform .7s cubic-bezier(.2,1,.3,1);
}
.log-embed.show { opacity: 1; transform: none; }
.embed-author { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #f2f3f5; margin-bottom: 8px; }
.embed-author .avt { width: 24px; height: 24px; font-size: 11px; flex: none; }
.embed-time { margin-left: auto; font: 500 12px/1 'JetBrains Mono', monospace; color: #949ba4; }
.embed-title { font-weight: 700; font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; color: #fff; }
.embed-title i { color: var(--ec, #23a55a); }
.e-field-row { display: grid; grid-template-columns: 1fr 1.15fr 1.3fr; gap: 14px; }
.e-field span { display: block; font-size: 11.5px; font-weight: 700; color: #949ba4; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.e-field b { color: #dbdee1; font-weight: 600; font-size: 14.5px; line-height: 1.3; display: block; }
.e-field .c-red { color: #ff7b7f; }
.e-field .c-green { color: #3fcf7c; }
.e-field .c-yellow { color: #fee75c; }
.embed-foot { font-size: 12px; font-weight: 500; color: #949ba4; margin-top: 12px; }

/* ---------- Scène 5 : tableau de bord ---------- */
.tr-scene-5 { background: #07080c; }
.saas-ui { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; color: #c5c6c7; background: #0b0c10; transform-origin: 50% 40%; }
.tr-scene-5.active .saas-ui { animation: saasPan 13.4s cubic-bezier(.16,.62,.22,1) both; }
@keyframes saasPan {
    0% { transform: scale(1.5) rotateX(22deg) rotateY(-18deg) translate3d(6%, 8%, 0); }
    100% { transform: none; }
}
.saas-nav { height: 66px; flex: none; padding: 0 30px; display: flex; align-items: center; gap: 36px; border-bottom: 1px solid rgba(102,252,241,0.16); background: rgba(0,0,0,0.5); }
.saas-logo { font: 900 22px/1 'Outfit', sans-serif; color: #66fcf1; display: flex; align-items: center; gap: 11px; letter-spacing: 1px; white-space: nowrap; }
.saas-badge { background: linear-gradient(135deg, #a855f7, #ec4899); color: #fff; font: 700 11px/1 'Inter', sans-serif; letter-spacing: .5px; padding: 5px 8px; border-radius: 6px; }
.saas-menu { display: flex; gap: 28px; font-weight: 600; font-size: 15px; flex: 1; height: 100%; }
.menu-item { color: #7d8794; display: flex; align-items: center; gap: 8px; height: 100%; border-bottom: 3px solid transparent; white-space: nowrap; }
.menu-item.active { color: #fff; border-bottom-color: #66fcf1; }
.saas-user { display: flex; align-items: center; gap: 12px; }
.saas-user .avt { width: 38px; height: 38px; box-shadow: 0 0 0 2px #0b0c10, 0 0 0 4px #66fcf1; }
.server-name-badge { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 1px; color: #66fcf1; background: rgba(102,252,241,0.08); border: 1px solid rgba(102,252,241,0.25); padding: 7px 10px; border-radius: 6px; }

.saas-content { flex: 1; min-height: 0; padding: 22px 30px 26px; position: relative; }
.cyber-grid-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(rgba(102,252,241,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(102,252,241,0.04) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.saas-grid { position: relative; height: 100%; display: grid; grid-template-columns: 1.2fr 1fr .78fr; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.saas-card { background: rgba(24,30,40,0.92); padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(102,252,241,0.12); box-shadow: 0 22px 50px rgba(0,0,0,0.55); display: flex; flex-direction: column; min-height: 0; opacity: 0; }
.tr-scene-5.active .saas-card { animation: cardIn .8s cubic-bezier(.2,1,.3,1) both; }
.tr-scene-5.active .sc-1 { animation-delay: .5s; }
.tr-scene-5.active .sc-2 { animation-delay: .7s; }
.tr-scene-5.active .sc-ring { animation-delay: .9s; }
.tr-scene-5.active .sc-chart { animation-delay: 1.1s; }
.tr-scene-5.active .sc-3 { animation-delay: 1.3s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.sc-3 { grid-column: span 2; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.saas-card h3 { color: #fff; font: 800 17px/1.2 'Outfit', sans-serif; display: flex; align-items: center; gap: 10px; letter-spacing: .3px; }
.saas-card h3 i { color: #66fcf1; font-size: 18px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 12px #23a55a; animation: trBeat 2s ease-in-out infinite; }
.badge-subtle { font: 600 11px/1 'JetBrains Mono', monospace; color: #66fcf1; background: rgba(102,252,241,0.08); padding: 5px 8px; border-radius: 5px; letter-spacing: .5px; }
.saas-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 15px; font-weight: 600; color: #dfe3ea; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.saas-row:first-of-type { border-top: 0; padding-top: 0; }
.saas-row > span > i { width: 22px; }
.saas-row-col { flex-direction: column; align-items: stretch; gap: 10px; }
.setting-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.saas-card .title { font-size: 14.5px; font-weight: 600; color: #dfe3ea; }
.saas-card .desc { font-size: 12.5px; font-weight: 400; color: #7d8794; }
.val-badge { font: 700 13px/1 'JetBrains Mono', monospace; color: #66fcf1; background: rgba(102,252,241,0.1); border: 1px solid rgba(102,252,241,0.3); padding: 6px 9px; border-radius: 6px; white-space: nowrap; }
.val-badge.bump { animation: trBump .45s cubic-bezier(.34,1.56,.64,1); }
.saas-slider-track { height: 8px; background: #1a2029; border-radius: 4px; position: relative; margin: 4px 9px; }
.saas-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: 4px; background: linear-gradient(90deg, #45a29e, #66fcf1); transition: width 1.6s cubic-bezier(.5,0,.2,1); }
.saas-slider-thumb { position: absolute; top: 50%; left: 20%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(102,252,241,0.3), 0 4px 10px rgba(0,0,0,0.5); transition: left 1.6s cubic-bezier(.5,0,.2,1); }
.saas-select { background: #0b0c10; padding: 11px 14px; border-radius: 8px; border: 1px solid #2d6f6c; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; transition: border-color .3s, box-shadow .3s; }
.saas-select.is-focus { border-color: #66fcf1; box-shadow: 0 0 0 4px rgba(102,252,241,0.15); }
.saas-select > i { color: #7d8794; font-size: 12px; }
.saas-toggle { width: 50px; height: 28px; flex: none; border-radius: 999px; background: #2a303b; position: relative; transition: background-color .4s, box-shadow .4s; }
.saas-toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .4s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.saas-toggle.on { background: #2fae8f; box-shadow: 0 0 14px rgba(47,174,143,0.55); }
.saas-toggle.on::after { transform: translateX(22px); }

.sc-ring { align-items: center; }
.sc-ring .card-header { align-self: stretch; }
.ring-wrap { position: relative; width: 148px; height: 148px; margin: auto; }
.circular-chart { display: block; width: 100%; height: 100%; }
.circle-bg { fill: none; stroke: #1a2029; stroke-width: 3.2; }
.circle { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.ring-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-val { font: 900 29px/1 'Outfit', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ring-sub { font-size: 11.5px; color: #7d8794; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 5px; }

.saas-bars { flex: 1; min-height: 110px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 22px; position: relative; }
.s-bar-group { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.s-bar { height: var(--h, 30%); border-radius: 5px 5px 0 0; background: linear-gradient(to top, #2d6f6c, #45a29e); transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2,1,.3,1), height 1.1s cubic-bezier(.34,1.3,.5,1); position: relative; }
.tr-scene-5.active .s-bar { transform: scaleY(1); }
.tr-scene-5.active .s-bar-group:nth-child(1) .s-bar { transition-delay: 1.6s, 0s; }
.tr-scene-5.active .s-bar-group:nth-child(2) .s-bar { transition-delay: 1.7s, 0s; }
.tr-scene-5.active .s-bar-group:nth-child(3) .s-bar { transition-delay: 1.8s, 0s; }
.tr-scene-5.active .s-bar-group:nth-child(4) .s-bar { transition-delay: 1.9s, 0s; }
.tr-scene-5.active .s-bar-group:nth-child(5) .s-bar { transition-delay: 2.0s, 0s; }
.tr-scene-5.active .s-bar-group:nth-child(6) .s-bar { transition-delay: 2.1s, 0s; }
.tr-scene-5.active .s-bar-group:nth-child(7) .s-bar { transition-delay: 2.2s, 0s; }
.s-bar.bar-danger { background: linear-gradient(to top, #b3262a, #f23f43); }
.s-bar.bar-danger.spiked { box-shadow: 0 0 26px rgba(242,63,67,0.6); }
.b-label { position: absolute; left: 0; right: 0; bottom: -19px; text-align: center; font: 500 11px/1 'JetBrains Mono', monospace; color: #7d8794; }
.b-label.highlight-label { color: #ff8a8d; font-weight: 700; }
.bar-tooltip { position: absolute; bottom: calc(100% + 9px); right: -4px; white-space: nowrap; background: #f23f43; color: #fff; font: 700 12px/1 'Inter', sans-serif; padding: 6px 9px; border-radius: 6px; opacity: 0; transform: translateY(6px); transition: opacity .3s .7s, transform .3s .7s; }
.bar-tooltip::after { content: ''; position: absolute; top: 100%; right: 14px; border: 5px solid transparent; border-top-color: #f23f43; }
.s-bar.spiked .bar-tooltip { opacity: 1; transform: none; }

.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; }
.terminal-dots span:nth-child(2) { background: #ffbd2e; }
.terminal-dots span:nth-child(3) { background: #27c93f; }
.saas-terminal { flex: 1; min-height: 0; background: #020304; padding: 14px 16px; border-radius: 10px; border: 1px solid #1a2029; font: 500 13.5px/1.45 'JetBrains Mono', monospace; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.t-line { color: #9fb4c4; white-space: nowrap; flex: none; animation: tType .7s steps(34, end) both; }
@keyframes tType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.t-line i { color: #5b6673; font-style: normal; margin-right: 10px; }
.t-tag { display: inline-block; min-width: 54px; text-align: center; padding: 1px 6px; margin-right: 8px; border-radius: 4px; font-weight: 700; font-size: 11.5px; background: rgba(102,252,241,0.12); color: #66fcf1; }
.t-tag.tag-sec { background: rgba(242,63,67,0.16); color: #ff8a8d; }
.t-tag.tag-ok { background: rgba(35,165,90,0.18); color: #3fcf7c; }
.t-tag.tag-cfg { background: rgba(168,85,247,0.18); color: #c084fc; }
.t-line.t-ok { color: #3fcf7c; }

.tr-cursor { position: absolute; left: 0; top: 0; z-index: 20; font-size: 22px; color: #fff; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.8)); opacity: 0; transform: translate3d(640px, 520px, 0); transition: transform 1.1s cubic-bezier(.5,0,.2,1), opacity .4s; pointer-events: none; }
.tr-cursor.show { opacity: 1; }
.tr-cursor.click i { animation: trClick .35s ease; }
@keyframes trClick { 50% { transform: scale(.75); } }

/* ---------- Scène 7 : tout le reste ---------- */
.tr-scene-7 { background: radial-gradient(ellipse at 50% 0%, #1a1030 0%, #07070d 62%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 40px 70px; text-align: center; }
.mt-head { opacity: 0; transform: translateY(-20px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,1,.3,1); }
.tr-scene-7.active .mt-head { opacity: 1; transform: none; transition-delay: .25s; }
.mt-kicker { display: block; font: 600 13px/1 'JetBrains Mono', monospace; letter-spacing: 4px; text-transform: uppercase; color: #c084fc; margin-bottom: 14px; }
.mt-title { font: 900 54px/1.05 'Outfit', sans-serif; letter-spacing: -1px; color: #fff; }
.mt-title span { background: linear-gradient(135deg, #c084fc, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: 1040px; transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
.mt-grid.dimmed { opacity: .13; transform: scale(.97); filter: blur(3px); }
.mt-tile {
    background: rgba(18,16,30,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
    padding: 24px 22px; text-align: left; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden;
    opacity: 0; transform: translateY(34px) scale(.92);
    transition: opacity .45s ease, transform .6s cubic-bezier(.34,1.4,.5,1), border-color .5s, box-shadow .5s;
}
.mt-tile.on { opacity: 1; transform: none; }
.mt-tile.hot { border-color: var(--tc); box-shadow: 0 20px 50px rgba(0,0,0,0.5); box-shadow: 0 0 44px color-mix(in srgb, var(--tc) 35%, transparent), 0 20px 50px rgba(0,0,0,0.5); }
.mt-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tc); opacity: .9; }
.mt-ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; color: var(--tc); background: rgba(255,255,255,0.06); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid rgba(255,255,255,0.14); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); margin-bottom: 6px; }
.mt-tile b { font: 800 20px/1.1 'Outfit', sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.mt-tile span { font-size: 14.5px; line-height: 1.45; color: #a3a3ba; }
.mt-price {
    position: absolute; left: 0; right: 0; top: 50%; margin-top: -10px; z-index: 3;
    font: 900 92px/1 'Outfit', sans-serif; letter-spacing: -3px; color: #fff; text-shadow: 0 10px 60px rgba(0,0,0,0.9);
    opacity: 0; transform: scale(2.2); pointer-events: none;
    transition: opacity .25s ease, transform .55s cubic-bezier(.2,1.3,.4,1);
}
.mt-price.show { opacity: 1; transform: scale(1); }
.mt-price span { background: linear-gradient(135deg, #4ade80, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Scène 6 : outro ---------- */
.tr-scene-6 { background: #000; }
.outro-ui { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at center, #17181c 0%, #000 72%); }
.outro-step { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.outro-step.show { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.o-seq { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,1,.3,1); }
.o-seq.show { opacity: 1; transform: none; }

.o-logo-wrap { position: relative; margin-bottom: 18px; }
.o-logo-glow { position: absolute; top: -70px; right: -70px; bottom: -70px; left: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(35,165,90,0.4) 0%, transparent 65%); animation: trGlow 3s ease-in-out infinite alternate; }
@keyframes trGlow { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }
.o-logo { position: relative; font-size: 104px; line-height: 1; color: #23a55a; }
.o-title { font: 900 86px/1 'Outfit', sans-serif; letter-spacing: 10px; color: #fff; padding-left: 10px; }
.o-sub { font: 500 25px/1.3 'Inter', sans-serif; color: #dbdee1; margin: 18px 0 30px; }
.o-tag { font-size: 20px; color: #3fcf7c; font-weight: 700; background: rgba(35,165,90,0.1); padding: 15px 32px; border-radius: 999px; border: 1px solid rgba(35,165,90,0.4); box-shadow: 0 0 40px rgba(35,165,90,0.2); }
.o-tag .text-highlight { color: #fff; }

.fire-bg-effect { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse 70% 55% at 50% 108%, rgba(245,119,49,0.42) 0%, rgba(245,119,49,0.1) 45%, transparent 70%); animation: trGlow 2.4s ease-in-out infinite alternate; transform-origin: bottom center; pointer-events: none; }
#outro-2 > *:not(.fire-bg-effect) { position: relative; }
.o-fire-logo { font-size: 68px; line-height: 1; color: #f57731; margin-bottom: 10px; filter: drop-shadow(0 0 34px rgba(245,119,49,0.75)); }
.o-fire-logo.show i { display: inline-block; animation: trFire 1.8s ease-in-out infinite alternate; }
@keyframes trFire { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.1) rotate(2deg); } }
.o-title-fire { font: 900 64px/1.05 'Outfit', sans-serif; letter-spacing: -1px; text-transform: uppercase; background: linear-gradient(90deg, #f57731, #f9c226); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#o2-title { transform: scale(1.8); }
#o2-title.show { transform: none; transition: opacity .2s ease, transform .5s cubic-bezier(.2,1.5,.4,1); }
#outro-2 .o-sub { margin: 10px 0 22px; font-size: 22px; color: #fff; }
.real-stats-box { display: flex; align-items: center; gap: 34px; padding: 18px 40px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); margin-bottom: 20px; }
.stat-number { font: 900 46px/1 'Outfit', sans-serif; color: #fff; font-variant-numeric: tabular-nums; min-width: 190px; }
.stat-label { font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: 2px; text-transform: uppercase; color: #a3a3ba; margin-top: 8px; }
.stat-divider { width: 1px; height: 56px; background: rgba(255,255,255,0.15); }
.perks-container { display: flex; gap: 30px; margin-bottom: 20px; }
.o-perk { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; color: #fff; }
.o-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; }
.o-icon.icon-gold { color: #fbbf24; background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.45); }
.o-icon.icon-purple { color: #c084fc; background: rgba(168,85,247,0.14); border: 1px solid rgba(168,85,247,0.45); }
.o-link { font: 900 36px/1 'Outfit', sans-serif; color: #fff; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; text-shadow: 0 0 40px rgba(88,101,242,0.6); }
.o-link i { color: #7289ff; font-size: 44px; }
.tr-cta {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 13px;
    padding: 20px 46px; border-radius: 999px; text-decoration: none; cursor: pointer;
    font: 800 21px/1 'Outfit', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 12px 44px rgba(236,72,153,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.tr-cta.show { animation: trCtaPulse 1.6s ease-in-out 1s infinite alternate; }
@keyframes trCtaPulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.btn-flare { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: trFlare 2.6s ease-in-out infinite; }
@keyframes trFlare { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(620%) skewX(-20deg); } }

/* ==========================================================================
   THÈME & STRUCTURE DU VRAI SERVEUR « CHILL & FR » (relevés sur capture d'écran)
   Dégradé prune du client, salons/catégories/rôles réels, pseudo stylé du fondateur.
   Les autres membres réels ne sont pas reproduits (lignes floutées).
   ========================================================================== */
.discord-ui { background: linear-gradient(180deg, #170813 0%, #261022 52%, #351830 100%); color: #e6dbe8; }
.server-list { background: rgba(0,0,0,0.28); }
.server-icon { background: rgba(255,255,255,0.07); }
.server-icon.ghost { background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)); }
.server-icon.explore-servers { color: #c9b6ce; font-size: 16px; }
.server-sep { background: rgba(255,255,255,0.1); }

.sidebar { background: rgba(255,255,255,0.022); border-right: 1px solid rgba(255,255,255,0.05); }
.srv-header { position: static; height: 49px; flex: none; padding: 0 14px; gap: 8px; justify-content: flex-start; background: rgba(8,1,8,0.5); border-bottom: 1px solid rgba(255,255,255,0.06); text-shadow: none; }
.srv-badge { color: #f0a6ff; font-size: 16px; }
.srv-chevron { font-size: 11px; color: #cdbfd1; }
.srv-invite { margin-left: auto; font-size: 14px; color: #cdbfd1; }
.ch-list { padding: 6px 8px 0; }
.ch-cat { margin: 13px 0 4px 4px; gap: 6px; color: #b3a5b8; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .2px; }
.ch-cat > i { font-size: 9px; }
.ch-cat .ch-cat-add { margin-left: auto; margin-right: 4px; font-size: 11px; }
.ch { height: 30px; margin-bottom: 1px; font-size: 14px; color: #9a879d; }
.ch-icon { position: relative; color: #9a879d; }
.ch-lock { position: absolute; right: -3px; top: -4px; font-size: 7px !important; }
.ch.active { background: rgba(255,255,255,0.09); color: #fff; }
.ch.active .ch-icon { color: #e9dcec; }
.ch.ch-logs.show { height: 30px; margin-bottom: 1px; }
.ch-ping { margin-right: 2px; }

.discord-ui { --rail: 72px; --side: 240px; }
.tr-player.is-portrait .discord-ui { --rail: 0px; --side: 196px; }
/* Comme sur Discord : le panneau utilisateur chevauche la barre des serveurs et la liste des salons */
.user-panel { position: absolute; left: 8px; bottom: 8px; z-index: 6; width: calc(var(--rail) + var(--side) - 16px); height: 52px; margin: 0; border-radius: 10px; padding: 0 12px; background: linear-gradient(90deg, #4f1c5e, #6a2180); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.sidebar, .server-list { padding-bottom: 66px; }
.up-info b { font-size: 14px; }
.up-info span { color: #e3d3ea; font-size: 11.5px; display: flex; align-items: center; gap: 4px; }
.up-icons { color: #f0e6f4; gap: 12px; }
.up-muted { color: #ff5c61; }
.up-note { color: #3fcf7c; font-size: 10px; }
.status-chip { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; border-radius: 3px; background: #1d1d1f; color: #f6d21c; font: 800 10px/1 'Inter', sans-serif; }
.status-indicator { border-color: #2a1227; }
.up-av .status-indicator { border-color: #58206c; }
.status-indicator.st-dnd { background: #f23f43; }
.status-indicator.st-dnd::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: #2a1227; }

.chat-header { background: rgba(8,1,8,0.5); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ch-title { gap: 10px; }
.ch-title .ch-icon { width: 22px; font-size: 18px; color: #b3a5b8; }
.ch-title .ch-lock { font-size: 8px !important; }
.ch-icons { color: #d5c8d9; }
.ch-search { width: 196px; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,0.08); color: #b3a5b8; }
.msg-divider { color: #b3a5b8; }
.msg-divider::before, .msg-divider::after { background: rgba(255,255,255,0.1); }
.msg-meta { gap: 7px; }
.msg-meta .time { color: #a897ad; }
.msg-text { color: #ece3ee; }
.msg-sys { color: #b3a5b8; }
.typing-ind { color: #cdbfd1; }
.chat-input { border-radius: 10px; background: rgba(255,255,255,0.13); color: #b9a9bd; }
.chat-input > i, .chat-input-icons { color: #e3d6e6; }
.gif-badge { font: 800 10px/1 'Inter', sans-serif; border: 2px solid currentColor; border-radius: 4px; padding: 2px 3px; }

.member-list { background: rgba(255,255,255,0.02); border-left: 1px solid rgba(255,255,255,0.05); padding: 2px 8px 0 14px; }
.ml-cat { margin: 13px 0 4px; display: flex; align-items: center; gap: 7px; color: #b3a5b8; font: 600 12.5px/1.2 'Inter', sans-serif; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-cat i { font-size: 12px; flex: none; }
.ml-user { height: 42px; color: #a897ad; }
.ml-lines { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ml-lines .ml-name { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.ml-sub { font-size: 11.5px; color: #b3a5b8; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.ml-user.bot-highlight { background: none; }
.name-centurion { color: #7b7dff; font-weight: 600; }
.ml-owner { background: linear-gradient(90deg, rgba(120,40,140,0.12), rgba(160,60,180,0.42)); }
.ml-ghost .avt { background: rgba(255,255,255,0.16); filter: blur(1.5px); }
.gl { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.22); filter: blur(2.5px); }
.gl.gl-2 { width: 74px; height: 7px; background: rgba(255,255,255,0.1); }

/* Pseudo du fondateur (style d'affichage « médiéval » de Discord) + tag de serveur */
.name-phoenix {
    font-family: 'New Rocker', 'Outfit', sans-serif; font-weight: 400 !important; letter-spacing: .4px;
    background-image: linear-gradient(90deg, #9db8ff, #f7a8e4 55%, #d9b5ff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.name-phoenix--gold { background-image: linear-gradient(90deg, #f6c21c, #f08a1b); }
.srv-tag { flex: none; align-self: center; font: 700 11px/1 'Inter', sans-serif; color: #fff; background: rgba(255,255,255,0.1); border-radius: 5px; padding: 3px 6px; white-space: nowrap; }
.role-ico { align-self: center; color: #e6a3ff; font-size: 13px; }
.avt-gold { background: radial-gradient(circle at 50% 35%, #6b5a2a, #1c160a); color: #f3d98b; box-shadow: inset 0 0 0 2px #b8973d; }

/* Centurion : avatar et libellé réels (APP) */
.avt-bot { position: relative; overflow: hidden; }
.avt-bot img, .msg .av.centurion-av img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.msg .av.centurion-av { position: relative; overflow: hidden; border: 0; background: #101a1c; color: #3fcf7c; box-shadow: none; }
.bot-tag { background: #5865f2; font-size: 10.5px; padding: 2px 5px; border-radius: 5px; }
.msg.msg-centurion { background: linear-gradient(90deg, rgba(110,110,255,0.14), transparent 70%); border-left-color: #6c6cff; }
.log-embed { background: rgba(10,3,10,0.55); }
.embed-author .bot-tag { margin-left: 2px; }
.ctx-menu { background: #1c0b1a; }

/* ---------- Éléments des scènes « comportement réel » ---------- */
.lock-bar {
    flex: none; height: 0; overflow: hidden; opacity: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(90deg, rgba(242,63,67,0.28), rgba(242,63,67,0.5), rgba(242,63,67,0.28));
    border-bottom: 1px solid rgba(242,63,67,0.7);
    color: #fff; font: 700 13px/1 'JetBrains Mono', monospace; letter-spacing: 1.5px; text-transform: uppercase;
    transition: height .35s ease, opacity .35s ease, background-color .5s;
}
.lock-bar.show { height: 34px; opacity: 1; }
.lock-bar.ok { background: linear-gradient(90deg, rgba(35,165,90,0.2), rgba(35,165,90,0.42), rgba(35,165,90,0.2)); border-bottom-color: rgba(35,165,90,0.7); }
.mention { background: rgba(88,101,242,0.35); color: #c9cdfb; border-radius: 4px; padding: 0 3px; font-weight: 500; }

.proof-wrap { --laser-h: 168px; position: relative; width: 340px; margin-top: 8px; }
.proof-shot { position: relative; overflow: hidden; background: #111214; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 7px; transition: filter .6s ease, opacity .6s ease; }
.proof-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #949ba4; margin-bottom: 2px; }
.proof-head .avt { width: 22px; height: 22px; font-size: 10px; flex: none; }
.proof-head b { color: #f2f3f5; font-size: 13.5px; font-weight: 600; }
.proof-zone { position: relative; padding: 9px 10px; border-radius: 7px; background: #1e1f22; border: 2px solid transparent; font-size: 13.5px; line-height: 1.3; color: #dbdee1; transition: border-color .3s, box-shadow .3s, background-color .3s; }
.proof-zone b { color: #fff; }
.proof-zone u { color: #00a8fc; }
.proof-zone .scam-tag { left: auto; right: 6px; bottom: auto; top: -9px; }
.proof-zone.flagged { border-color: #f23f43; background: rgba(242,63,67,0.1); box-shadow: 0 0 18px rgba(242,63,67,0.35); }
.proof-zone.flagged .scam-tag { opacity: 1; transform: none; }
.proof-stamp { position: absolute; left: 50%; top: 50%; padding: 8px 16px; border: 3px solid #f23f43; border-radius: 8px; color: #ff6b6f; background: rgba(17,18,20,0.85); font: 900 19px/1 'Outfit', sans-serif; letter-spacing: 3px; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(2); transition: opacity .25s ease, transform .4s cubic-bezier(.2,1.4,.4,1); }
.proof-shot.archived .proof-zone, .proof-shot.archived .proof-head { filter: grayscale(1); opacity: .35; }
.proof-shot.archived .proof-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
@keyframes laserSweep { from { transform: translateY(0); } to { transform: translateY(var(--laser-h, 214px)); } }

.circle { stroke: #00ff88; transition: stroke-dasharray 1.4s cubic-bezier(.2,1,.3,1), stroke .6s ease; }
.ring-val { font-size: 46px; transition: color .6s ease; }
.ring-sub { text-align: center; padding: 0 14px; line-height: 1.25; }
.t-tag { min-width: 62px; }

/* ---------- Conversations façon Discord 2026 : réponses, réactions, sondage, message vocal ---------- */
/* Les anciens messages s'estompent en haut du salon, comme en faisant défiler */
.chat-history { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px); mask-image: linear-gradient(to bottom, transparent 0, #000 34px); }
.msg-text:empty { display: none; }
.msg-text.jumbo { font-size: 42px; line-height: 1.1; }
.edited { font-size: 11px; color: #a897ad; margin-left: 5px; }
.mention.role { background: rgba(255,255,255,0.13); color: #fff; }
.mention { white-space: nowrap; }
.msg.has-reply .av { margin-top: 22px; }
.msg-reply { position: relative; display: flex; align-items: center; gap: 5px; height: 18px; margin-bottom: 4px; min-width: 0; font-size: 13px; color: #b3a5b8; white-space: nowrap; }
.msg-reply::before { content: ''; position: absolute; left: -36px; top: 8px; width: 30px; height: 13px; border-left: 2px solid rgba(255,255,255,0.22); border-top: 2px solid rgba(255,255,255,0.22); border-top-left-radius: 7px; }
.msg-reply b { font-weight: 600; font-size: 13px; flex: none; }
.rp-av { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--avc, #5865f2); color: #fff; font: 700 9px/16px 'Outfit', sans-serif; text-align: center; }
.rp-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.msg-reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.msg-reacts:empty { display: none; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid transparent; font-size: 13.5px; color: #d9cfe0; animation: reactPop .35s cubic-bezier(.34,1.56,.64,1) both; }
.react b { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.react.me { background: rgba(88,101,242,0.28); border-color: #5865f2; color: #e3e5ff; }
.react.pop { animation: reactBump .3s ease; }
@keyframes reactPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes reactBump { 50% { transform: scale(1.2); } }

.poll { width: 330px; max-width: 100%; margin-top: 6px; padding: 13px 14px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); }
.poll-q { font-weight: 700; font-size: 15px; color: #fff; }
.poll-sub { font-size: 12px; color: #b3a5b8; margin: 2px 0 9px; }
.poll-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 12px; margin-bottom: 6px; border-radius: 8px; background: rgba(255,255,255,0.07); font-size: 14px; color: #f2f3f5; }
.poll-opt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: rgba(88,101,242,0.4); }
.poll-opt.win::before { background: rgba(88,101,242,0.75); }
.poll-opt > * { position: relative; }
.poll-opt b { font-weight: 700; font-size: 13px; }
.poll-foot { font-size: 12px; color: #b3a5b8; margin-top: 8px; }

.voice-msg { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 8px; margin-top: 4px; border-radius: 22px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.1); }
.vm-play { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #5865f2; color: #fff; display: grid; place-items: center; font-size: 11px; }
.vm-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.vm-wave span { width: 3px; border-radius: 2px; background: #cfc3d4; }
.vm-time { font: 500 12px/1 'JetBrains Mono', monospace; color: #b3a5b8; }

/* ==========================================================================
   RECOPIE DU SERVEUR RÉEL — bannière, liste des salons défilante, vocaux,
   avatars, couleurs et icônes de rôles, tags et emojis du serveur
   ========================================================================== */
.avt.has-img, .rp-av.has-img { position: relative; overflow: hidden; }
.avt.has-img img, .rp-av.has-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* En-tête du serveur posé sur la bannière, puis opaque dès que la liste défile */
.sidebar { position: relative; }
/* Le panneau utilisateur est maintenant positionné dans la colonne des salons : il déborde à gauche sous la barre des serveurs */
.user-panel { left: calc(8px - var(--rail)); }
.srv-header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0)); border-bottom-color: transparent; text-shadow: 0 1px 3px rgba(0,0,0,0.8); transition: border-color .35s ease; }
.srv-header::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #1d0b19; opacity: 0; transition: opacity .35s ease; }
.sidebar.scrolled .srv-header { border-bottom-color: rgba(255,255,255,0.07); }
.sidebar.scrolled .srv-header::before { opacity: 1; }
.ch-list { padding: 0 8px; }
.ch-scroll { position: relative; padding-bottom: 24px; transform: translate3d(0, calc(var(--sy, 0) * -1px), 0); transition: transform var(--sd, 1.6s) cubic-bezier(.5, .05, .15, 1); will-change: transform; }
.ch-banner { position: relative; height: 136px; margin: 0 -8px 2px; overflow: hidden; background: linear-gradient(135deg, #2a1650, #7a2a6a); }
.ch-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to bottom, rgba(29,11,25,0), rgba(29,11,25,0.85)); }
.ch-cat > span { min-width: 0; }
.ch-cat .fa-chevron-right { font-size: 8px; }

/* Membres connectés dans un salon vocal */
.vc-user { height: 30px; margin: 0 0 1px 30px; padding: 0 8px 0 6px; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #bcabc0; }
.vc-user .avt { width: 22px; height: 22px; flex: none; font-size: 10px; }
.vc-name { flex: 1; min-width: 0; }
.vc-ico { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9a879d; }
.vc-live { background: #f23f43; color: #fff; font: 800 9px/1 'Inter', sans-serif; letter-spacing: .3px; padding: 3px 5px; border-radius: 8px; }
.ch.restored { animation: chRestored 1.6s ease both; }

/* Noms colorés par le rôle (dégradés « couleurs de rôle améliorées »), icône de rôle, tag de serveur */
.nm { font-weight: 500; }
/* Les emojis d'un pseudo gardent leurs couleurs dans un nom en dégradé */
.nm-grad .em { -webkit-text-fill-color: #fff; color: #fff; }
.nm-grad { background-image: var(--g); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.msg-meta b.nm, .msg-meta b.nm-grad { font-weight: 600; }
/* L'en-tête d'un message tient sur une ligne : un pseudo trop long est coupé, jamais renvoyé à la ligne */
.msg-body { min-width: 0; }
.msg-meta { min-width: 0; }
.msg-meta > b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-meta > .time, .msg-meta > .srv-tag, .msg-meta > .role-ic, .msg-meta > .bot-tag { flex: none; }
.role-ic { width: 18px; height: 18px; flex: none; align-self: center; object-fit: contain; }
.ml-cat .role-ic { width: 15px; height: 15px; }
.ml-cat > span { min-width: 0; }
.srv-tag { display: inline-flex; align-items: center; gap: 4px; }
.srv-tag img { width: 12px; height: 12px; object-fit: contain; }
.ml-user { height: 41px; }
.ml-cat { margin: 12px 0 3px; }
.ml-lines .ml-name > .truncate { min-width: 0; }
.ml-user.banned .nm, .ml-user.banned .nm-grad { background-image: none; -webkit-text-fill-color: #f23f43; color: #f23f43 !important; }
.status-indicator.st-idle { background: #f0b232; }
.status-indicator.st-idle::after { content: ''; position: absolute; left: -1px; top: -1px; width: 5px; height: 5px; border-radius: 50%; background: #2a1227; }
.msg .av .avt { font-size: 17px; }
.emo { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; }
.react .emo { width: 17px; height: 17px; vertical-align: 0; }
.ch-topic { color: #b3a5b8; border-left-color: rgba(255,255,255,0.14); }
.ch-topic:empty { display: none; }

/* ==========================================================================
   SCÈNES FIDÈLES AU BOT — raid (2 tolérées, ban à la 3e), escalade anti-spam,
   logs par salon, 12 fonctions exclusives
   ========================================================================== */
.tr-pill small { font: 600 .68em/1 'Inter', sans-serif; opacity: .85; margin-left: 4px; }
.s1-last { display: none; align-items: center; gap: 8px; max-width: 100%; font-size: 14px; color: #d9cfe0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s1-last.show { display: block; animation: msgPop .35s cubic-bezier(.2,1,.3,1) both; }
.s1-last i { color: #f23f43; margin-right: 4px; }
.s1-last b { color: #fff; font-weight: 600; }
.lock-bar.warn { background: linear-gradient(90deg, rgba(52,152,219,0.16), rgba(52,152,219,0.4), rgba(52,152,219,0.16)); border-bottom-color: rgba(52,152,219,0.75); color: #d6ecff; }
/* Un membre banni quitte la liste */
.ml-user, .ml-cat { transition: height .5s ease, margin .5s ease, opacity .4s ease, background-color .4s, color .4s; }
.ml-user.gone, .ml-cat.gone { height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; overflow: hidden; }
.msg-text { text-wrap: pretty; }
.msg-text .nowrap { white-space: nowrap; }
.msg-text .nowrap code { padding: 0 3px; }
.msg-text code { font: 500 .82em/1 'JetBrains Mono', monospace; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 4px; }
/* Journal : un seul rapport à l'écran, celui du salon ouvert */
.log-embed { display: none; }
.log-embed.show { display: block; animation: embedIn .5s cubic-bezier(.2,1,.3,1) both; }
@keyframes embedIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.e-field-wide { margin-top: 12px; }
.saas-select.is-locked { border-color: rgba(242,63,67,0.35); }
.saas-select.is-locked > i { color: #f2777a; font-size: 11px; }
/* Les 12 fonctions exclusives : tuiles compactes, icône à gauche */
.tr-scene-7 { gap: 28px; }
.mt-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1150px; }
.mt-tile { flex-direction: row; align-items: flex-start; gap: 13px; padding: 17px 16px 16px; border-radius: 16px; }
.mt-ico { width: 42px; height: 42px; flex: none; border-radius: 11px; font-size: 18px; }
.mt-txt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mt-tile b { font-size: 16px; }
.mt-tile span { font-size: 13px; line-height: 1.38; }
.mt-tile.on:not(.hot) { opacity: .78; }

/* ---------- Format portrait (téléphones) : scène 720×1120 ---------- */
.tr-player.is-portrait .server-list,
.tr-player.is-portrait .member-list { display: none; }
.tr-player.is-portrait .sidebar { width: 196px; }
.tr-player.is-portrait .ch-topic,
.tr-player.is-portrait .ch-search,
.tr-player.is-portrait .ch-icons { display: none; }
.tr-player.is-portrait .tr-glass-card { min-width: 0; padding: 26px 24px; }
.tr-player.is-portrait .ch-banner { height: 112px; }
.tr-player.is-portrait .vc-user { margin-left: 22px; font-size: 13px; }
.tr-player.is-portrait .vc-live { display: none; }
.tr-player.is-portrait .tr-pill { font-size: 18px; padding: 13px 20px; }
.tr-player.is-portrait .tr-badge { font-size: 16px; padding: 13px 16px; }
.tr-player.is-portrait .tr-overlay-side { top: 150px; }
.tr-player.is-portrait #s2-alert, .tr-player.is-portrait #s2-action { align-self: center; margin: 96px 0 auto; }
.tr-player.is-portrait #s3-scan { align-self: center; margin-right: 0; }
.tr-player.is-portrait .e-field-row { grid-template-columns: 1fr; gap: 8px; }
.tr-player.is-portrait .saas-menu, .tr-player.is-portrait .server-name-badge { display: none; }
.tr-player.is-portrait .saas-nav { justify-content: space-between; padding: 0 22px; }
.tr-player.is-portrait .saas-content { padding: 18px 20px 22px; }
.tr-player.is-portrait .saas-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 14px; }
.tr-player.is-portrait .sc-1, .tr-player.is-portrait .sc-chart, .tr-player.is-portrait .sc-3 { grid-column: span 2; }
.tr-player.is-portrait .saas-bars { min-height: 130px; }
.tr-player.is-portrait .badge-subtle { display: none; }
.tr-player.is-portrait .tr-scene-7 { padding: 40px 28px; gap: 26px; }
.tr-player.is-portrait .mt-title { font-size: 44px; }
.tr-player.is-portrait .mt-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-player.is-portrait .mt-tile { padding: 15px 13px 14px; gap: 11px; }
.tr-player.is-portrait .mt-tile span { font-size: 12.5px; }
.tr-player.is-portrait .mt-price { font-size: 66px; }
.tr-player.is-portrait .o-title { font-size: 60px; letter-spacing: 6px; }
.tr-player.is-portrait .o-sub { font-size: 21px; }
.tr-player.is-portrait .o-title-fire { font-size: 46px; }
.tr-player.is-portrait .real-stats-box { flex-direction: column; gap: 16px; padding: 22px 34px; }
.tr-player.is-portrait .stat-divider { width: 120px; height: 1px; }
.tr-player.is-portrait .perks-container { flex-direction: column; gap: 14px; align-items: flex-start; }
.tr-player.is-portrait .o-link { font-size: 30px; }
.tr-player.is-portrait .tr-chapter { top: 60px; white-space: normal; width: 86%; }

@media (max-width: 560px) {
    .tr-skip { padding: 0 14px; font-size: 13px; }
}