/* MATE · verre nocturne, inspiré de la référence fournie */
body.mate-immersive{--bg:#08111f;--panel:#101d31;--line:#8ccfff38;--muted:#c0cede;--lime:#65e2ba;color:#f3f7ff}
body.mate-immersive .mate-scenery::after{background:linear-gradient(90deg,#030b1766,#08143126 65%),linear-gradient(180deg,#090f3033,transparent 45%,#020a1577)}
body.mate-immersive>aside,body.mate-immersive main>header{background:linear-gradient(135deg,#182c4a9e,#071320bd 65%,#17364b99);border:1px solid #84caff55;box-shadow:inset 0 1px 0 #ddf4ff1c,inset 0 -1px 0 #56d9fb12,0 18px 50px #0005;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
@media(min-width:851px){
 body.mate-immersive>aside{inset:24px auto 24px 18px;width:252px;height:auto;padding:34px 16px 18px;border-radius:28px;display:flex;overflow-y:auto}
 body.mate-immersive>aside .logo{font-size:54px;padding:10px 18px;letter-spacing:-3px}
 body.mate-immersive>aside .world{margin:24px 18px 40px;line-height:1.7;letter-spacing:1.5px}
 body.mate-immersive>aside .world small{color:#65e2ba;font-weight:700}
 body.mate-immersive>aside nav{display:grid;gap:14px}
 body.mate-immersive>main{margin-left:292px;padding:36px 28px 32px 0;max-width:none}
 body.mate-immersive main>header{height:96px;padding:22px 30px;border-radius:22px;margin-bottom:30px}
 body.mate-immersive>aside .account{margin-top:auto;padding:16px 12px;background:linear-gradient(140deg,#37647a44,#091625b3);border:1px solid #8bd6ec36;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff12;min-height:86px}
 body.mate-immersive>aside .account .avatar{outline:2px solid #63dcdcb0;outline-offset:2px}
 body.mate-immersive>aside .account::after{content:'›';font-size:26px;color:#bed4e4;margin-left:auto}
}
body.mate-immersive>aside nav button{position:relative;border:1px solid transparent;border-radius:13px;min-height:56px;color:#e2edf5;background:transparent;padding:14px 16px;align-items:center;transition:background .18s,border-color .18s,box-shadow .18s}
body.mate-immersive>aside nav button.active{background:linear-gradient(110deg,#65e2ba24,#4483c563 65%,#8addf343);border-color:#7fcdeb8a;box-shadow:inset 0 1px 0 #e6ffff33,0 0 24px #4bcecb16;color:white}
body.mate-immersive>aside nav button.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:4px;background:#b3ff88;box-shadow:0 0 12px #a5ff7b}
body.mate-immersive>aside nav button:hover{background-color:#8cd6ff16;border-color:#8cd6ff44}
body.mate-immersive .glass-nav-icon{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.mate-immersive .nav-badge,body.mate-immersive .conversation-badge{background:#ed386d;color:white;border-color:#112239;box-shadow:0 0 12px #ff3b7055}
body.mate-immersive main>header b{padding:13px 20px;border:1px solid #8cdccd55;border-radius:24px;background:linear-gradient(#284e6055,#081720bb);box-shadow:inset 0 1px 0 #ffffff1a;color:white}
body.mate-immersive .heading{padding:20px 24px;background:linear-gradient(110deg,#0b192ab3,#10213b66);border:1px solid #8dc6ff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px}
body.mate-immersive .heading h1{font-size:clamp(26px,2.7vw,38px);letter-spacing:-1px}
body.mate-immersive :is(.sidebox,.empty,.form,.chat,.discovery-filters,.match-row,.match-item){background:linear-gradient(135deg,#1b304ad9,#081422e6);border:1px solid #8ccaff3b;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff12,0 14px 34px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.mate-immersive .card{border:1px solid #8bcbff59;border-radius:23px;box-shadow:0 18px 44px #0006;overflow:hidden}
body.mate-immersive .gallery-card .card-info{background:linear-gradient(130deg,#162a40f5,#0a1627f5)}
body.mate-immersive .pill{background:#0a1d2bd9;border:1px solid #9fcffb44;color:#edf8ff}
body.mate-immersive :is(.primary,.actions .like){background:linear-gradient(160deg,#7fdef1,#3b9cd1 60%,#297aaa);color:#051b2c;border:1px solid #c7f3ff99;box-shadow:inset 0 1px 0 #ffffff88,0 5px 18px #0a78b42e;border-radius:14px;font-weight:700}
body.mate-immersive .actions button:not(.like),body.mate-immersive .emoji-toggle{background:linear-gradient(#33516b9e,#122438e6);border:1px solid #91cced44;color:#edf8ff;border-radius:14px}
body.mate-immersive :is(input,textarea,select){background:#081626d9;border:1px solid #8bb8dd40;border-radius:11px;color:#f4f8ff;accent-color:#8fdcf5}
body.mate-immersive :is(input,textarea)::placeholder{color:#9dacbe}
body.mate-immersive .visual-select summary{background:linear-gradient(#1e344be6,#102137ed);border-color:#8ccaff40}
body.mate-immersive .visual-options{background:#102135;border-color:#8ccaff66}
body.mate-immersive .tag,body.mate-immersive .choices button{background:#28425c66;border:1px solid #9cc6e340;color:#e6f1fb;border-radius:12px}
body.mate-immersive .choices button.selected{background:#327a965c;border-color:#87d9e8;color:#edffff}
body.mate-immersive .chat-head{background:#142c4255;border-bottom:1px solid #8ccaff26;border-radius:20px 20px 0 0;padding:16px}
body.mate-immersive .bubble.received{background:#294259e8;color:#f5f8ff;border:1px solid #93c2e32b}
body.mate-immersive .bubble.mine{background:linear-gradient(135deg,#245c7e,#24435f);color:#f5fbff;border:1px solid #8bdcf04d}
body.mate-immersive .composer{background:#09162788;border-top:1px solid #8ccaff22;border-radius:0 0 20px 20px}
body.mate-immersive .emoji-panel{background:#102137f5}body.mate-immersive .emoji-grid button{background:#1b344766;border-color:#87c9e42b}
body.mate-immersive dialog{background:linear-gradient(140deg,#243c54f5,#091626fa);color:#f3f7ff;border:1px solid #86c9ee66;border-radius:24px;box-shadow:0 22px 80px #0009}
body.mate-immersive dialog::backdrop{background:#01081599;backdrop-filter:blur(5px)}
body.mate-immersive :is(button,a,summary):focus-visible{outline:2px solid #b1e9ff;outline-offset:3px}
@media(max-width:850px){
 body.mate-immersive>main{margin-left:0;padding:16px 14px calc(100px + env(safe-area-inset-bottom,0px));width:100%}
 body.mate-immersive main>header{height:auto;min-height:70px;padding:14px 16px;border-radius:18px;margin-bottom:20px;gap:10px}
 body.mate-immersive main>header .demo{display:none}
 body.mate-immersive main>header b{padding:9px 12px;white-space:nowrap}
 body.mate-immersive>aside{position:fixed;inset:auto 0 0;width:100%;height:calc(76px + env(safe-area-inset-bottom,0px));padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;background:linear-gradient(#1a3043ed,#081521f5);z-index:100;transform:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 body.mate-immersive>aside :is(.logo,.world,.account){display:none}
 body.mate-immersive>aside nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:62px;gap:4px}
 body.mate-immersive>aside nav button{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:5px 2px;min-height:0;border-radius:12px}
 body.mate-immersive>aside nav button.active::before{top:auto;bottom:2px;left:35%;width:30%;height:2px}
 body.mate-immersive>aside nav button span:not(.nav-badge){font-size:11px;white-space:nowrap}
 body.mate-immersive .glass-nav-icon{width:21px;height:21px}
 body.mate-immersive .heading{padding:16px;backdrop-filter:none}
 body.mate-immersive :is(.form,.chat,.sidebox,.match-row,.discovery-filters){backdrop-filter:none;-webkit-backdrop-filter:none}
 body.mate-immersive .chat-head{flex-wrap:wrap;gap:10px}
 body.mate-immersive .form{padding:18px 14px}
}
@media(prefers-reduced-motion:reduce){body.mate-immersive>aside nav button{transition:none}}
@supports not (backdrop-filter:blur(1px)){body.mate-immersive>aside,body.mate-immersive main>header{background:#102034f5}}
/* MATE : transparence sombre et reflet blanc discret */
body.mate-immersive>aside,body.mate-immersive main>header{
 background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,0) 27%),linear-gradient(125deg,rgba(13,29,50,.68),rgba(6,17,30,.63));
 border-color:rgba(112,177,227,.38);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(220,240,255,.035),0 16px 40px rgba(0,0,0,.28);
 backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
}
body.mate-immersive>aside nav button.active{
 background:linear-gradient(170deg,rgba(255,255,255,.07),transparent 38%),linear-gradient(110deg,rgba(65,177,149,.15),rgba(57,111,170,.37) 65%,rgba(105,190,215,.22));
 border-color:rgba(132,203,230,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(60,170,170,.06);
}
body.mate-immersive>aside .account{
 background:linear-gradient(160deg,rgba(255,255,255,.055),transparent 35%),linear-gradient(130deg,rgba(36,69,85,.35),rgba(5,17,29,.64));
 border-color:rgba(125,192,215,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
body.mate-immersive :is(.sidebox,.empty,.form,.chat,.discovery-filters,.match-row,.match-item){
 background:linear-gradient(155deg,rgba(255,255,255,.035),transparent 25%),linear-gradient(135deg,rgba(19,38,59,.80),rgba(7,19,33,.87));
 border-color:rgba(130,185,223,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 12px 30px rgba(0,0,0,.2);
}
@media(max-width:850px){body.mate-immersive>aside{background:linear-gradient(170deg,rgba(255,255,255,.05),transparent 30%),rgba(9,24,39,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
@supports not (backdrop-filter:blur(1px)){body.mate-immersive>aside,body.mate-immersive main>header{background:#102034ed}}