/* ═══════════════════════════════════════════════════════════════
ONYX - Stylesheet externalisé
Intégré dans Big One (issu du portfolio + expérience ONYX)
═══════════════════════════════════════════════════════════════ */
/* ─── RESET ─────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
body{overflow:hidden;font-family:'Courier New',monospace;}
/* ─── CSS VARS (dark default) ───────────── */
:root{
--a:#1de8c0; --fg:#b0f0d8; --bg:#030508;
--panel-bg:rgba(3,6,20,.97);
--panel-border:rgba(255,255,255,.13);
--text-main:rgba(255,255,255,.82);
--text-muted:rgba(255,255,255,.4);
--input-border:rgba(255,255,255,.2);
--font-ui:'Courier New',monospace;
}
/* ── Typographies spatiales ────────────────── */
body.tf-orbitron,body.tf-orbitron *:not(canvas):not(svg *):not(.fp-opt){font-family:'Orbitron',sans-serif !important;}
body.tf-spacemono,body.tf-spacemono *:not(canvas):not(svg *):not(.fp-opt){font-family:'Space Mono',monospace !important;}
body.tf-vt323,body.tf-vt323 *:not(canvas):not(svg *):not(.fp-opt){font-family:'VT323',monospace !important;letter-spacing:.5px;font-size:108%;}
body.tf-exo,body.tf-exo *:not(canvas):not(svg *):not(.fp-opt){font-family:'Exo 2',sans-serif !important;}
body.tf-novamono,body.tf-novamono *:not(canvas):not(svg *):not(.fp-opt){font-family:'Nova Mono',monospace !important;}
/* (Mode clair retiré — l'expérience est désormais 100% sombre.) */
/* Notice écouteurs sur l'écran prénom */
.headphones-notice{
font-size:10px;letter-spacing:3px;
color:var(--a);opacity:.6;
text-transform:uppercase;
padding:8px 18px;
border:1px solid rgba(255,255,255,.1);
background:rgba(29,232,192,.03);
margin:2px 0 8px;
text-align:center;
max-width:380px;
animation:headphonesPulse 3s ease-in-out infinite;
}
@keyframes headphonesPulse{
0%,100%{opacity:.4;border-color:rgba(255,255,255,.08);}
50% {opacity:.75;border-color:var(--a);}
}
/* ─── LAYOUT ─────────────────────────────── */
#W{width:100vw;height:100vh;position:relative;overflow:hidden;background:var(--bg);transition:background .6s;}
canvas{position:absolute;inset:0;width:100%;height:100%;}
#icv{z-index:55;pointer-events:none;}
#crtcv{z-index:100;pointer-events:none;opacity:0;transition:opacity .4s;}
#crtcv.on{opacity:1;}
/* ─── LAYERS ─────────────────────────────── */
.layer{
position:absolute;inset:0;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:16px;z-index:50;pointer-events:all;
transition:opacity .6s;
/* Permet le scroll si le contenu est trop grand pour la fenêtre */
overflow-y:auto;
padding:30px 16px;
box-sizing:border-box;
}
.gone{opacity:0!important;pointer-events:none!important;}
/* ─── ACCESSIBILITY SCREEN ───────────────── */
#acc{position:absolute;inset:0;z-index:210;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#030508;}
.acc-title{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--a);opacity:.65;}
.acc-grid{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:480px;}
.acc-opt{padding:7px 14px;border:1px solid rgba(255,255,255,.2);cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);transition:all .2s;background:transparent;font-family:'Courier New',monospace;}
.acc-opt.sel,.acc-opt:hover{border-color:var(--a);color:var(--a);background:rgba(29,232,192,.05);}
.acc-note{font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.2);text-transform:uppercase;}
/* ─── INPUTS & BUTTONS ───────────────────── */
.inp{background:transparent;border:none;border-bottom:1px solid var(--a);color:var(--a);font-family:'Courier New',monospace;font-size:18px;letter-spacing:6px;text-align:center;width:220px;padding:6px 0;outline:none;text-transform:uppercase;}
.inp::placeholder{opacity:.3;font-size:10px;letter-spacing:4px;}
.btn-main{
font-family:'Courier New',monospace;
font-size:13px;letter-spacing:3px;
padding:10px 28px;
border:1.5px solid var(--a);
background:rgba(29,232,192,.04);
color:var(--a);
cursor:pointer;
text-transform:uppercase;
transition:background .2s, box-shadow .2s;
margin-top:4px;
}
.btn-main:hover{background:rgba(29,232,192,.12);box-shadow:0 0 18px rgba(29,232,192,.35);}
.btn-main:disabled{opacity:.25;pointer-events:none;cursor:not-allowed;}
.btn-ghost{font-family:'Courier New',monospace;font-size:10px;letter-spacing:2px;padding:5px 12px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--text-muted);cursor:pointer;text-transform:uppercase;transition:all .2s;}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7);}
.lbl{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--a);opacity:.55;}
#lname-logo{width:clamp(180px,40vw,320px);height:auto;color:var(--a);margin-bottom:8px;}
.chip{padding:6px 14px;border:1px solid rgba(255,255,255,.15);cursor:pointer;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);transition:all .2s;background:transparent;font-family:'Courier New',monospace;}
.chip.sel,.chip:hover{border-color:var(--a);color:var(--a);background:rgba(255,255,255,.04);}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
/* ─── MINERAL GRID ───────────────────────── */
#mgrid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:7px;
width:min(540px,90vw);
/* Plus large + 4 colonnes pour réduire la hauteur (3 rangées au lieu de 4) */
}
.mc{position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.08);padding:9px 8px 7px;transition:border-color .2s,transform .15s;background:rgba(255,255,255,.02);}
.mc:hover{transform:translateY(-2px);border-color:var(--dc);}
.mc.sel{border-color:var(--dc);background:rgba(255,255,255,.06);}
.msw{width:100%;height:3px;margin-bottom:7px;transition:height .15s;}
.mc:hover .msw,.mc.sel .msw{height:5px;}
.mn{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7);}
.mc.sel .mn{color:var(--dc);}
.ms{font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.3);margin-top:1px;}
.mtt{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:170px;background:rgba(2,4,14,.97);border:1px solid var(--dc);padding:9px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:400;}
.mc:hover .mtt{opacity:1;}
.mc:nth-child(n+7) .mtt{bottom:auto;top:calc(100% + 8px);}
.ttn{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.ttb{width:14px;height:1px;margin-bottom:5px;opacity:.5;}
.ttx{font-size:10px;line-height:1.55;color:rgba(255,255,255,.48);}
.ttk{display:inline-block;margin-top:5px;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;border:1px solid;}
/* ─── PRENOM REVEAL ──────────────────────── */
#pr-box{max-width:360px;text-align:center;transition:opacity .4s;}
#pr-box.hidden{opacity:0;}
.pr-name{font-size:20px;font-weight:200;letter-spacing:10px;text-transform:uppercase;color:var(--a);}
.pr-origin{font-size:9px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin:5px 0;}
.pr-meaning{font-size:11px;line-height:1.8;color:rgba(255,255,255,.45);font-style:italic;}
/* ─── THEME SUGGESTION ───────────────────── */
#theme-suggest{max-width:340px;text-align:center;border:1px solid rgba(255,255,255,.1);padding:12px 16px;background:rgba(255,255,255,.03);}
#theme-suggest .ts-txt{font-size:10px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px;}
.ts-actions{display:flex;gap:8px;justify-content:center;}
.ts-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s,border-color .2s;}
.ts-dot:hover{transform:scale(1.25);}
.ts-dot.active{border-color:rgba(255,255,255,.8);}
#ts-light-toggle{font-family:'Courier New',monospace;font-size:9px;letter-spacing:2px;padding:4px 10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--text-muted);cursor:pointer;text-transform:uppercase;transition:all .2s;}
#ts-light-toggle:hover{border-color:var(--a);color:var(--a);}
/* ─── MAIN UI ────────────────────────────── */
#main{position:absolute;inset:0;opacity:0;transition:opacity .8s;pointer-events:none;z-index:10;}
#main.on{opacity:1;pointer-events:all;}
/* Greeting */
#greet{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;transition:opacity 1.2s;}
#greet.gone{opacity:0;}
#ghi{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--a);opacity:.55;margin-bottom:6px;}
#gname{font-size:26px;font-weight:200;letter-spacing:12px;text-transform:uppercase;color:var(--a);}
#getym{font-size:10px;letter-spacing:1px;color:var(--text-muted);margin-top:12px;max-width:380px;line-height:1.75;font-style:italic;}
/* ─── PLANET NAV ─────────────────────────── */
#planet{position:absolute;top:20px;left:20px;z-index:102;display:flex;align-items:center;opacity:0;transition:opacity .5s;pointer-events:none;user-select:none;}
#planet.ready{opacity:1;pointer-events:all;}
#psvg{width:78px;height:38px;flex-shrink:0;cursor:pointer;transition:width .5s cubic-bezier(.7,0,.3,1),height .5s,filter .5s,transform .65s cubic-bezier(.15,0,.1,1);}
#psvg path{fill:var(--a);transition:fill .4s;}
#planet.open #psvg{width:98px;height:48px;filter:drop-shadow(0 0 14px var(--a));}
#planet.bh #psvg{transform:scale(0) rotate(700deg);}
#planet.bhopen #psvg{transform:scale(1.5) rotate(-200deg);filter:drop-shadow(0 0 28px var(--a)) brightness(3);}
/* Canvas trou noir — masqué définitivement, seul le logo SVG est affiché */
#bhcv{display:none !important;}
#psvg{position:relative;z-index:2;}
/* Pastille de notification messagerie sur le bouton planète */
.planet-dot{
position:absolute;top:-4px;left:60px;
min-width:18px;height:18px;
padding:0 4px;
border-radius:9px;
background:#f87171;
color:#fff;
font-family:'Courier New',monospace;
font-size:9px;font-weight:700;
letter-spacing:.3px;
border:2px solid #01040e;
z-index:6;pointer-events:none;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 9px rgba(248,113,113,.7);
animation:msgPulse 1.6s ease-in-out infinite;
}
#planet.open .planet-dot,#planet.bhopen .planet-dot{display:none !important;}
/* Menu */
#pmenu{
position:absolute;left:52px;top:0;
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:14px 16px;
min-width:220px;
pointer-events:none;
opacity:0;
transform:translateX(-8px) scale(.96);
transform-origin:left top;
transition:opacity .3s,transform .3s;
backdrop-filter:blur(8px);
z-index:50;
}
#planet.open #pmenu{opacity:1;transform:none;pointer-events:all;}
.nm-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.nm-title{font-size:13px;font-weight:700;letter-spacing:6px;color:var(--a);text-transform:uppercase;}
#clk2{font-size:9px;letter-spacing:2px;color:var(--a);opacity:.4;}
.hsep{width:100%;height:1px;background:var(--panel-border);margin:6px 0;}
.nv{display:flex;align-items:center;gap:9px;padding:6px 0;border-left:2px solid transparent;cursor:pointer;opacity:.38;transition:all .2s;white-space:nowrap;}
.nv:hover{border-color:var(--a);opacity:1;padding-left:7px;}
.nv span{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--fg);}
/* Pastilles couleur inline (palette minéral du menu planète) */
#icolors{display:flex;gap:5px;flex-wrap:wrap;padding:4px 0;}
.icc{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s,border-color .2s;flex-shrink:0;}
.icc:hover{transform:scale(1.3);}
.icc.sel{border-color:rgba(255,255,255,.85);}
/* Social icons (Insta + Discord, plus visibles) */
#soc{display:flex;gap:8px;padding:6px 0;}
.si{
cursor:pointer;
opacity:.7;
display:flex;align-items:center;justify-content:center;
width:32px;height:32px;
border:1px solid rgba(255,255,255,.13);
border-radius:6px;
text-decoration:none;color:inherit;
transition:all .25s;
}
.si:hover{
opacity:1;
border-color:var(--a);
background:rgba(29,232,192,.08);
transform:scale(1.08);
box-shadow:0 0 12px rgba(29,232,192,.25);
}
/* ─── ICON BUTTONS (top-right) ──────────── */
#iconbar{position:absolute;top:18px;right:18px;z-index:30;display:flex;gap:6px;}
/* Widget météo (à côté de l'heure) — compact + déployable + déplaçable */
#weather-widget{position:absolute;top:18px;left:calc(50% + 95px);z-index:24;display:flex;align-items:center;gap:9px;background:rgba(4,6,18,.78);border:1px solid rgba(255,255,255,.18);padding:5px 12px;user-select:none;cursor:pointer;transition:background .2s,border-color .2s;height:32px;box-sizing:border-box;}
#weather-widget:hover{border-color:var(--a);}
#weather-widget.dragging{cursor:grabbing;border-color:var(--a);box-shadow:0 0 12px var(--a)55;}
#weather-widget.collapsed{padding:6px;gap:0;}
#weather-widget.collapsed #wx-info{display:none;}
#wx-icon{color:var(--a);flex-shrink:0;display:flex;}
#wx-icon svg{width:24px;height:24px;display:block;}
#wx-info{line-height:1.35;}
#wx-temp{font-size:12px;color:var(--fg);letter-spacing:.5px;}
#wx-city{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);}
.ic-btn{
width:32px;height:32px;
border:1px solid rgba(255,255,255,.18);
background:rgba(4,6,18,.75);
display:flex;align-items:center;justify-content:center;
cursor:grab;
transition:border-color .2s,background .2s;
user-select:none;
position:relative;
}
.ic-btn:hover{border-color:rgba(255,255,255,.45);}
.ic-btn.active{border-color:var(--a);background:rgba(29,232,192,.1);}
.ic-btn.locked{cursor:not-allowed;opacity:.5;}
.ic-btn.dragging{cursor:grabbing;box-shadow:0 0 12px var(--a)55;border-color:var(--a);}
.ic-btn svg{pointer-events:none;display:block;}
.lockdot{position:absolute;bottom:-3px;right:-3px;width:6px;height:6px;background:var(--a);display:none;}
.ic-btn.locked .lockdot{display:block;}
/* Pastille de notification messagerie */
.msg-dot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:#f87171;box-shadow:0 0 7px #f87171;border:1.5px solid #01040e;animation:msgPulse 1.6s ease-in-out infinite;}
@keyframes msgPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.28);}}
/* ─── Modal messagerie ─── */
#msg-modal{position:absolute;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;background:rgba(1,3,10,.92);opacity:0;pointer-events:none;transition:opacity .3s;}
#msg-modal.open{opacity:1;pointer-events:all;}
#msgbox{width:min(440px,92vw);max-height:90vh;overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);padding:26px 28px;}
#msgbox textarea{width:100%;background:transparent;border:1px solid var(--input-border);color:var(--fg);font-family:'Courier New',monospace;font-size:12px;padding:8px;outline:none;resize:vertical;}
#msgbox textarea:focus{border-color:var(--a);}
#msg-status{font-size:10px;letter-spacing:1px;color:var(--a);opacity:.85;margin-top:10px;min-height:16px;}
#msg-status.err{color:#f87171;}
#msg-thread{max-height:240px;overflow-y:auto;}
.msg-item{border:1px solid rgba(255,255,255,.08);padding:10px 12px;margin-bottom:10px;}
.msg-meta{font-size:9px;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;}
.msg-mine{font-size:12px;color:var(--fg);line-height:1.5;}
.msg-reply{margin-top:8px;padding:8px 10px;border-left:2px solid var(--a);background:rgba(29,232,192,.06);font-size:12px;color:var(--fg);line-height:1.5;}
.msg-reply-lbl{display:block;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--a);margin-bottom:4px;}
.msg-wait{margin-top:6px;font-size:10px;color:var(--text-muted);font-style:italic;}
/* Quand l'icône est détachée de la barre (glissée ailleurs) */
.ic-btn.floating{position:absolute;z-index:30;}
/* ─── CLOCK ──────────────────────────────── */
#clkwrap{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:22;user-select:none;}
#clkdiv{font-size:11px;letter-spacing:3px;color:var(--a);opacity:.5;padding:4px 9px;border:1px solid transparent;white-space:nowrap;transition:border-color .2s,opacity .3s;}
#clkwrap:hover #clkdiv{border-color:var(--panel-border);}
#clkwrap.movable{cursor:grab;}
#clkwrap.movable:hover #clkdiv{border-color:var(--a);opacity:.8;}
#clkwrap.dragging{cursor:grabbing;}
#clkwrap.off{opacity:0;pointer-events:none;}
/* ─── PANELS ─────────────────────────────── */
/* Backdrop flou derrière le panneau Options */
#opts-backdrop{display:none;}
.panel{
position:absolute;
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:13px 14px;
z-index:200;
display:none;
backdrop-filter:blur(8px);
min-width:160px;
}
#ipanel.open{
box-shadow:0 0 0 9999px rgba(0,2,10,.68);
}
#ipanel{max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--a) transparent;}
#ipanel::-webkit-scrollbar{width:3px;}
#ipanel::-webkit-scrollbar-track{background:transparent;}
#ipanel::-webkit-scrollbar-thumb{background:var(--a);border-radius:2px;opacity:.5;}
.panel.open{display:block;}
.p-title{font-size:9px;letter-spacing:3px;color:var(--a);opacity:.6;text-transform:uppercase;margin-bottom:10px;}
#tpgrid{display:flex;flex-wrap:wrap;gap:7px;}
.tsw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s;}
.tsw:hover{transform:scale(1.2);}
.tsw.sel{border-color:rgba(255,255,255,.85);}
.p-btn{font-family:'Courier New',monospace;font-size:10px;letter-spacing:2px;padding:5px 10px;border:1px solid var(--input-border);background:transparent;color:var(--a);cursor:pointer;text-transform:uppercase;display:block;width:100%;text-align:left;margin-bottom:5px;transition:all .2s;}
.p-btn:hover{border-color:var(--a);background:rgba(29,232,192,.04);}
/* ─── TIPS ───────────────────────────────── */
#tipbar{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;white-space:nowrap;pointer-events:none;z-index:20;}
#tiplbl{font-size:10px;letter-spacing:3px;color:var(--a);opacity:.5;text-transform:uppercase;}
#tipt{font-size:10px;color:var(--fg);opacity:.65;max-width:55vw;overflow:hidden;text-overflow:ellipsis;}
#tipcur{display:inline-block;width:1px;height:11px;background:var(--a);opacity:.8;animation:bl .9s step-end infinite;vertical-align:middle;}
@keyframes bl{0%,100%{opacity:.8}50%{opacity:0}}
/* ─── HOLO CARDS — 3D natif + holo Pokémon ─────────────── */
#holo-area{position:absolute;inset:0;pointer-events:none;z-index:12;perspective:1000px;}
.hthumb{
position:absolute;pointer-events:all;
width:125px;height:78px; /* fallback — surchargé en JS (×3 selon rareté) */
border:1px solid rgba(255,255,255,.18);
border-radius:7px;
overflow:hidden;cursor:pointer;
transform-style:preserve-3d;
/* Disposition éventail : inclinaison statique pilotée par --fan-rot (set en JS) */
transform:rotate(var(--fan-rot,0deg));
transform-origin:center center;
transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
will-change:transform;
}
.hthumb:hover{
/* La carte se détache : passe devant + halo (le redressement/scale est géré en JS) */
z-index:300 !important;
box-shadow:0 0 42px var(--a)aa, 0 0 84px var(--a)55;
}
.hin{
width:100%;height:100%;position:relative;
display:flex;align-items:center;justify-content:center;
transition:transform .1s ease-out;
background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
overflow:hidden;
}
/* Couche holo Pokémon : conic-gradient arc-en-ciel qui suit la souris */
.hin::before{
content:'';
position:absolute;inset:-12%;
background:conic-gradient(
from var(--holo-angle, 0deg),
rgba(255,0,128,.34),
rgba(255,140,0,.30),
rgba(255,230,0,.34),
rgba(0,255,170,.34),
rgba(0,180,255,.34),
rgba(139,92,255,.34),
rgba(255,0,200,.34),
rgba(255,0,128,.34)
);
mix-blend-mode:color-dodge;
filter:saturate(1.35);
opacity:0;
transition:opacity .4s;
pointer-events:none;
}
.hthumb:hover .hin::before{opacity:.85;}
/* Couche nacrée qui glisse en diagonale (iridescence) */
.hin::after{
content:'';
position:absolute;inset:0;
background:linear-gradient(115deg,
transparent 32%,
rgba(255,255,255,.22) 44%,
rgba(170,225,255,.16) 50%,
rgba(255,190,245,.20) 56%,
transparent 68%);
mix-blend-mode:screen;
opacity:0;
transition:opacity .4s;
pointer-events:none;
}
.hthumb:hover .hin::after{opacity:.9;}
/* Reflet (couche supplémentaire qui se déplace) */
.hshine{
position:absolute;inset:-50%;
width:200%;height:200%;
opacity:0;
background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.18) 50%,transparent 64%);
transition:opacity .3s;
pointer-events:none;
transform:translateX(0);
}
.hthumb:hover .hshine{opacity:1;}
.hlbl{
font-size:16px;letter-spacing:3.5px;text-transform:uppercase;
color:var(--a);opacity:.9;
z-index:2;position:relative;
text-shadow:0 0 10px var(--a)66;
}
/* ═══ RARETÉ DES CARTES (Session 6) ═══ */
.rar-badge{
position:absolute;top:9px;left:9px;z-index:3;
font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
padding:3px 9px;border-radius:3px;
background:rgba(2,5,12,.72);
pointer-events:none;
}
/* Holo : un dégradé iridescent PROPRE à chaque rareté (intensité croissante).
Seule la Mythique conserve l'arc-en-ciel prismatique complet. */
.rar-peucommune .hin::before{
opacity:.16;
background:conic-gradient(from var(--holo-angle,0deg),
rgba(190,203,222,.22),rgba(139,155,180,.10),rgba(205,214,228,.22),
rgba(139,155,180,.10),rgba(190,203,222,.22));
}
.rar-rare .hin::before{
opacity:.26;
background:conic-gradient(from var(--holo-angle,0deg),
rgba(56,189,248,.34),rgba(37,99,235,.20),rgba(125,211,252,.36),
rgba(37,99,235,.20),rgba(56,189,248,.34));
}
.rar-epique .hin::before{
opacity:.34;
background:conic-gradient(from var(--holo-angle,0deg),
rgba(217,70,239,.36),rgba(139,92,246,.24),rgba(236,72,153,.38),
rgba(139,92,246,.24),rgba(217,70,239,.36));
}
.rar-legendaire .hin::before{
opacity:.40;
background:conic-gradient(from var(--holo-angle,0deg),
rgba(251,191,36,.40),rgba(245,158,11,.26),rgba(255,237,170,.44),
rgba(245,158,11,.26),rgba(251,191,36,.40));
}
.rar-mythique .hin::before{
opacity:.60;mix-blend-mode:screen;
background:conic-gradient(from var(--holo-angle,0deg),
rgba(255,0,128,.42),rgba(255,140,0,.38),rgba(255,230,0,.42),
rgba(0,255,170,.42),rgba(0,180,255,.42),rgba(139,92,255,.42),
rgba(255,0,200,.42),rgba(255,0,128,.42));
}
/* Peu commune — gris acier, discret */
.rar-peucommune{border-color:#8b9bb4 !important;box-shadow:0 0 8px #8b9bb422;}
.rar-peucommune .rar-badge{color:#aebccf;border:1px solid #8b9bb455;}
/* Rare — bleu */
.rar-rare{border-color:#60a5fa !important;box-shadow:0 0 14px #60a5fa44;}
.rar-rare .rar-badge{color:#93c5fd;border:1px solid #60a5fa66;}
.rar-rare .hlbl{color:#bfdbfe;text-shadow:0 0 8px #60a5fa66;}
/* Épique — violet */
.rar-epique{border-color:#a78bfa !important;box-shadow:0 0 20px #a78bfa55, 0 0 40px #a78bfa22;}
.rar-epique .rar-badge{color:#c4b5fd;border:1px solid #a78bfa77;}
.rar-epique .hlbl{color:#ddd6fe;text-shadow:0 0 8px #a78bfa77;}
/* Légendaire — doré, glow pulsé */
.rar-legendaire{border-color:#fbbf24 !important;animation:rarPulseGold 2.4s ease-in-out infinite;}
.rar-legendaire .rar-badge{color:#fde68a;border:1px solid #fbbf2488;background:rgba(20,12,2,.78);}
.rar-legendaire .hlbl{color:#fef3c7;text-shadow:0 0 10px #fbbf2488;}
@keyframes rarPulseGold{
0%,100%{box-shadow:0 0 18px #fbbf2455, 0 0 36px #fbbf2422;}
50% {box-shadow:0 0 30px #fbbf2499, 0 0 64px #fbbf2444;}
}
/* Mythique — prismatique, glow max, badge animé */
.rar-mythique{border-color:#e879f9 !important;animation:rarPulseMyth 1.9s ease-in-out infinite;}
.rar-mythique .rar-badge{
color:#fff;border:1px solid #e879f9;
background:linear-gradient(90deg,#ec4899,#a78bfa,#60a5fa);
background-size:200% 100%;animation:rarBadgeShift 3s linear infinite;
}
.rar-mythique .hlbl{color:#fff;text-shadow:0 0 12px #e879f9, 0 0 24px #a78bfa;}
@keyframes rarPulseMyth{
0%,100%{box-shadow:0 0 24px #e879f966, 0 0 50px #a78bfa44, 0 0 80px #60a5fa22;}
50% {box-shadow:0 0 42px #e879f9aa, 0 0 84px #a78bfa66, 0 0 120px #60a5fa44;}
}
@keyframes rarBadgeShift{0%{background-position:0 0;}100%{background-position:200% 0;}}
/* Image intégrée → holo atténué + contour renforcé */
.has-img .hin::before{opacity:.05 !important;}
.has-img{border-width:2px !important;}
/* Badge de rareté dans le modal carte */
.crar{
display:inline-block;margin-left:10px;vertical-align:middle;
font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
padding:3px 10px;border-radius:3px;
}
.crar.rar-peucommune{color:#aebccf;border:1px solid #8b9bb4;background:none;}
.crar.rar-rare{color:#93c5fd;border:1px solid #60a5fa;background:none;}
.crar.rar-epique{color:#c4b5fd;border:1px solid #a78bfa;background:none;}
.crar.rar-legendaire{color:#fde68a;border:1px solid #fbbf24;background:none;}
.crar.rar-mythique{color:#fff;border:1px solid #e879f9;background:linear-gradient(90deg,#ec4899,#a78bfa,#60a5fa);}
/* ─── CARD MODAL ─────────────────────────── */
#cmodal{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(1,3,10,.9);opacity:0;pointer-events:none;transition:opacity .3s;}
#cmodal.open{opacity:1;pointer-events:all;}
#cmin{position:relative;width:min(680px,92vw);background:rgba(4,8,22,.99);border:1px solid rgba(255,255,255,.14);overflow:hidden;}
#cimg-zone{width:100%;height:280px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:crosshair;}
#cpimg{position:absolute;inset:-20px;display:flex;align-items:center;justify-content:center;font-size:60px;opacity:.18;transition:transform .1s ease-out;}
#cinfo{padding:18px 22px 16px;}
#ctrow{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;}
#ctitle{font-size:15px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--a);}
#ctag{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--a);border:1px solid var(--a);padding:2px 8px;opacity:.5;}
#cdesc{font-size:11px;line-height:1.8;color:rgba(255,255,255,.45);margin-bottom:12px;}
/* Rating */
#rrow{display:flex;align-items:center;gap:9px;margin-bottom:4px;}
#rlbl{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--a);opacity:.5;}
.star{display:inline-flex;align-items:center;cursor:pointer;color:rgba(255,255,255,.18);transition:color .12s,transform .12s;}
.star:hover,.star.lit{color:var(--a);}
.star:hover{transform:scale(1.3);}
.star .pi{color:inherit;margin-right:0;}
#rnote{font-size:10px;color:var(--a);opacity:.6;margin-left:4px;}
#login-prompt{font-size:9px;letter-spacing:1px;color:var(--text-muted);margin-top:6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
#login-prompt:hover{color:var(--a);}
/* Panneau latéral détails (slide-in au hover du card modal) */
#cside{position:absolute;right:-250px;top:0;bottom:0;width:240px;background:rgba(2,5,18,.99);border-left:1px solid rgba(255,255,255,.1);padding:16px;transition:right .38s cubic-bezier(.7,0,.3,1);z-index:2;overflow-y:auto;}
#cmin:hover #cside{right:0;}
.csk{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin:10px 0 3px;}
.csk:first-child{margin-top:0;}
.csv{font-size:11px;color:rgba(255,255,255,.55);line-height:1.6;}
#cclose{position:absolute;top:12px;right:12px;width:28px;height:28px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.45);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;font-family:monospace;}
#cclose:hover{border-color:var(--a);color:var(--a);}
/* ─── PLANET BLOCKS ──────────────────────── */
.pblock{position:absolute;cursor:grab;z-index:15;pointer-events:all;user-select:none;}
.planet-tip{position:fixed;z-index:9050;background:rgba(5,8,18,.92);border:1px solid var(--a);border-radius:6px;padding:10px 14px;min-width:190px;max-width:240px;display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.5px;color:var(--text-main);pointer-events:none;box-shadow:0 4px 24px rgba(0,0,0,.6);animation:fadeInTip .25s ease;}
.planet-tip span{color:var(--text-muted);}
.planet-tip em{margin-top:4px;font-style:italic;color:var(--a);opacity:.75;font-size:9px;}
@keyframes fadeInTip{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pblock:active{cursor:grabbing;}
.pb-lbl{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:var(--a);opacity:.5;white-space:nowrap;text-transform:uppercase;}
.afl{position:absolute;border-radius:50%;pointer-events:none;z-index:60;animation:afl .45s ease-out forwards;}
@keyframes afl{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
#acnt{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;font-size:10px;letter-spacing:3px;color:var(--a);opacity:0;z-index:20;pointer-events:none;transition:opacity .4s;text-transform:uppercase;white-space:nowrap;}
#acnt.show{opacity:.65;}
/* ─── LOGIN / CONTACT MODAL ─────────────── */
#lmodal{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:rgba(1,3,10,.92);opacity:0;pointer-events:none;transition:opacity .3s;}
#lmodal.open{opacity:1;pointer-events:all;}
#lbox{width:min(400px,90vw);background:var(--panel-bg);border:1px solid var(--panel-border);padding:28px 30px;}
.ltitle{font-size:12px;font-weight:700;letter-spacing:6px;text-transform:uppercase;color:var(--a);margin-bottom:4px;}
.lsub{font-size:10px;letter-spacing:1px;color:var(--text-muted);margin-bottom:20px;line-height:1.7;}
.lf{margin-bottom:14px;}
.lf label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--a);opacity:.5;display:block;margin-bottom:5px;}
.lf input,.lf textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--input-border);color:var(--fg);font-family:'Courier New',monospace;font-size:12px;padding:6px 0;outline:none;transition:border-color .2s;resize:none;}
.lf input:focus,.lf textarea:focus{border-color:var(--a);}
/* RGPD */
#rgpd-block{margin:14px 0;padding:12px;border:1px solid var(--panel-border);background:rgba(255,255,255,.02);}
.rgpd-head{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--a);opacity:.55;margin-bottom:10px;}
.rrow{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.rrow input[type=checkbox]{accent-color:var(--a);cursor:pointer;flex-shrink:0;margin-top:2px;}
.rrow label{font-size:9px;letter-spacing:.4px;color:var(--text-muted);line-height:1.65;cursor:pointer;}
.rrow label a{color:var(--a);opacity:.75;text-decoration:none;}
.rrow label a:hover{opacity:1;}
.lactions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
.lbtn{font-family:'Courier New',monospace;font-size:10px;letter-spacing:3px;padding:8px 16px;border:1px solid var(--input-border);background:transparent;color:var(--fg);cursor:pointer;text-transform:uppercase;transition:all .2s;}
.lbtn:hover{border-color:var(--a);color:var(--a);}
.lbtn.primary{border-color:var(--a);color:var(--a);}
.lbtn.primary:hover{background:rgba(29,232,192,.08);}
#lskip{font-size:10px;letter-spacing:2px;color:var(--text-muted);cursor:pointer;text-transform:uppercase;transition:color .2s;margin-left:auto;background:none;border:none;font-family:'Courier New',monospace;}
#lskip:hover{color:var(--fg);}
#lstatus{font-size:10px;letter-spacing:1px;color:var(--a);opacity:.6;margin-top:10px;min-height:16px;}
/* user badge — wrapper avec zone de clic élargie */
#ubadge-wrap{position:absolute;bottom:8px;right:6px;z-index:25;padding:16px 24px;cursor:pointer;}
#ubadge{font-size:10px;letter-spacing:2px;color:var(--a);opacity:0;pointer-events:none;transition:opacity .3s;text-transform:uppercase;}
#ubadge.on{opacity:.55;}
/* ─── AUTH MODAL (real login + register) ─── */
#auth-modal{position:absolute;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;background:rgba(1,3,10,.92);opacity:0;pointer-events:none;transition:opacity .3s;}
#auth-modal.open{opacity:1;pointer-events:all;}
#abox{width:min(380px,90vw);background:var(--panel-bg);border:1px solid var(--panel-border);padding:28px 30px;}
.atitle{font-size:12px;font-weight:700;letter-spacing:6px;text-transform:uppercase;color:var(--a);margin-bottom:6px;}
.asub{font-size:10px;letter-spacing:1px;color:var(--text-muted);margin-bottom:20px;line-height:1.7;}
#au-toggle{font-size:9px;letter-spacing:2px;color:var(--a);opacity:.7;cursor:pointer;text-transform:uppercase;display:inline-block;margin-top:10px;text-decoration:underline;text-underline-offset:3px;font-family:'Courier New',monospace;background:none;border:none;padding:0;}
#au-toggle:hover{opacity:1;}
#au-status{font-size:10px;letter-spacing:1px;color:var(--a);opacity:.7;margin-top:10px;min-height:16px;}
#au-status.err{color:#f87171;}
/* ─── Modal Mon compte / profil (Session 7A) ─── */
#account-modal{position:absolute;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;background:rgba(1,3,10,.92);opacity:0;pointer-events:none;transition:opacity .3s;}
#account-modal.open{opacity:1;pointer-events:all;}
#acbox{width:min(400px,90vw);max-height:88vh;overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);padding:28px 30px;}
.ac-info{margin-bottom:2px;}
.ac-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.ac-k{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--a);opacity:.5;white-space:nowrap;}
.ac-v{font-size:12px;color:var(--fg);font-family:'Courier New',monospace;text-align:right;word-break:break-word;}
.ac-sep{height:1px;background:rgba(255,255,255,.08);margin:18px 0;}
#acbox > .lbtn{display:block;width:100%;margin:2px 0 4px;}
.lbtn.danger{border-color:rgba(248,113,113,.4);color:#f87171;}
.lbtn.danger:hover{border-color:#f87171;background:rgba(248,113,113,.08);}
#ac-status{font-size:10px;letter-spacing:1px;color:var(--a);opacity:.85;margin-top:12px;min-height:16px;}
#ac-status.err{color:#f87171;}
/* ─── Avatar compte ─── */
.ac-avatar-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;}
/* Zone avatar + bouton info */
.ac-av-zone{position:relative;display:inline-flex;flex-direction:column;align-items:center;padding-top:28px;}
.ac-av-hint{font-size:7px;opacity:.35;letter-spacing:1px;text-transform:uppercase;margin-top:6px;}
/* Cercle avatar */
.ac-avatar-circle{width:82px;height:82px;border-radius:50%;border:1px solid rgba(29,232,192,.35);cursor:pointer;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s;background:rgba(29,232,192,.04);}
.ac-avatar-circle:hover{border-color:var(--a);box-shadow:0 0 0 1px var(--a),0 0 22px rgba(29,232,192,.18);}
/* Scanlines permanentes (overlay) */
.ac-avatar-circle::after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 3px);pointer-events:none;z-index:3;transition:opacity .3s;}
.ac-avatar-circle:hover::after{opacity:.5;}
/* Ligne de scan animée au survol */
.ac-avatar-circle::before{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--a,#1de8c0),transparent);box-shadow:0 0 6px var(--a,#1de8c0);z-index:5;pointer-events:none;opacity:0;top:0;}
.ac-avatar-circle:hover::before{animation:av-scan 1.4s ease-in-out forwards;}
@keyframes av-scan{
0%{top:0;opacity:0;}
6%{opacity:1;}
94%{opacity:.8;}
100%{top:100%;opacity:0;}
}
/* Image duotone au survol (grayscale → teal via filter chain) */
#ac-avatar-img{filter:contrast(1.08) brightness(.92) saturate(.85);transition:filter .35s;}
.ac-avatar-circle:hover #ac-avatar-img{filter:grayscale(1) contrast(1.25) brightness(.68) sepia(1) hue-rotate(122deg) saturate(2.8);}
/* Overlay upload */
.ac-avatar-overlay{position:absolute;inset:0;background:rgba(0,0,0,.48);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;border-radius:50%;z-index:4;}
.ac-avatar-circle:hover .ac-avatar-overlay{opacity:1;}
/* ─── Bouton INFO avatar — au-dessus du cercle, à droite ─── */
.av-info-btn{
position:absolute;
top:0;right:-6px;
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
background:rgba(0,10,20,.75);
border:1px solid rgba(29,232,192,.45);
color:var(--a);
opacity:.8;
font-size:15px;
font-style:italic;
font-family:Georgia,'Times New Roman',serif;
font-weight:700;
cursor:pointer;
padding:0;
border-radius:2px;
transition:all .2s;
line-height:1;
text-shadow:0 0 8px rgba(29,232,192,.6);
}
.av-info-btn::before,.av-info-btn::after{display:none;}
.av-info-btn:hover{opacity:1;background:rgba(29,232,192,.12);border-color:var(--a);box-shadow:0 0 14px rgba(29,232,192,.25);}
/* ─── Popup règles avatar ─── */
#avatar-rules-popup.open{display:flex!important;}
.arp-box{background:rgba(3,6,20,.97);border:1px solid rgba(29,232,192,.25);padding:24px 28px;max-width:360px;width:90%;}
.arp-title{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--a);margin-bottom:18px;}
.arp-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.arp-list li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(29,232,192,.08);}
.arp-list li:last-child{border-bottom:none;}
.arp-k{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--a);opacity:.5;flex-shrink:0;}
.arp-v{font-size:10px;color:var(--fg);opacity:.75;text-align:right;line-height:1.4;}
.arp-actions{display:flex;gap:8px;}
/* ─── Champs âge inscription ─── */
.au-age-fb{font-size:9px;letter-spacing:.5px;margin-top:5px;min-height:14px;transition:color .2s;}
.au-age-fb.ok{color:var(--a);}
.au-age-fb.err{color:#f87171;}
.au-age-check{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid rgba(29,232,192,.15);background:rgba(29,232,192,.03);cursor:pointer;margin-top:2px;margin-bottom:14px;font-size:9px;letter-spacing:.5px;color:var(--fg);opacity:.8;line-height:1.5;user-select:none;}
.au-age-check input[type=checkbox]{accent-color:var(--a);width:14px;height:14px;flex-shrink:0;cursor:pointer;margin-top:1px;}
.au-age-check:has(input:checked){border-color:rgba(29,232,192,.4);color:var(--a);opacity:1;}
/* ─── Commentaires compte ─── */
.ac-comment{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.ac-comment-meta{font-size:8px;letter-spacing:1.5px;color:var(--a);opacity:.5;margin-bottom:3px;text-transform:uppercase;}
.ac-comment-text{font-size:10px;color:var(--fg);line-height:1.5;opacity:.8;}
/* ─── RGPD (modal compte) ─── */
.ac-rgpd-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--a);opacity:.5;margin-bottom:8px;}
#ac-danger{margin:10px 0;padding:12px;border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.05);}
.ac-danger-msg{font-size:10px;letter-spacing:.5px;color:#f87171;line-height:1.6;margin-bottom:10px;}
/* ─── Cycle de vie comptes (admin) ─── */
.st-badge{display:inline-block;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid;}
.st-active{color:#34d399;border-color:#34d399;}
.st-suspended{color:#fbbf24;border-color:#fbbf24;}
.st-banned{color:#f87171;border-color:#f87171;}
.btn-mod{font-family:'Courier New',monospace;font-size:9px;letter-spacing:1px;padding:3px 7px;margin:1px;border:1px solid var(--input-border);background:transparent;color:var(--text-muted);cursor:pointer;text-transform:uppercase;transition:all .2s;}
.btn-mod:hover{border-color:var(--a);color:var(--a);}
.btn-mod-ban:hover{border-color:#f87171;color:#f87171;}
.adm-purge-btn{float:right;}
/* ─── Pop-up de remerciement (exit-intent) ─── */
#thanks-modal{position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;background:rgba(1,3,10,.92);opacity:0;pointer-events:none;transition:opacity .35s;}
#thanks-modal.open{opacity:1;pointer-events:all;}
#thanks-box{position:relative;width:min(380px,90vw);background:var(--panel-bg);border:1px solid var(--a);padding:34px 32px;text-align:center;box-shadow:0 0 50px rgba(29,232,192,.15);}
#thanks-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;line-height:0;}
#thanks-close:hover{color:var(--a);}
.thanks-title{font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--a);margin-bottom:12px;}
.thanks-sub{font-size:11px;letter-spacing:1px;color:var(--text-muted);line-height:1.7;margin-bottom:24px;}
.thanks-socials{display:flex;justify-content:center;gap:18px;margin-bottom:26px;}
.social-ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--input-border);border-radius:50%;color:var(--a);transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;}
.social-ic svg{width:26px;height:26px;}
.social-ic:hover{border-color:var(--a);background:rgba(29,232,192,.1);transform:translateY(-3px) scale(1.08);box-shadow:0 0 20px rgba(29,232,192,.3);}
/* ─── Vue "Déjà envoyé" du modal contact ─── */
#lbox-already{text-align:center;}
#lbox-already .ltitle{margin-bottom:10px;}
#lbox-already .lsub{margin-bottom:18px;}
/* ─── HOLO CARDS : floating horizontal ────── */
.hthumb{will-change:transform,left,top;}
.hthumb .float-y{transition:transform .12s ease-out;}
/* ─── BADGE PRÉNOM en bas à droite ─────── */
#ubadge-wrap:hover #ubadge.on{opacity:1;}
#ubadge{pointer-events:none;user-select:none;display:inline-flex;align-items:center;gap:5px;}
#ubadge.on{opacity:.62;}
#ubadge.dm-pending{opacity:1!important;animation:dm-pulse 2s ease-in-out infinite;text-shadow:0 0 12px var(--a,#1de8c0);}
.ubadge-dm-dot{
width:6px;height:6px;border-radius:50%;
background:var(--a,#1de8c0);
box-shadow:0 0 6px var(--a,#1de8c0);
animation:blink-dot .8s step-end infinite;
flex-shrink:0;
}
@keyframes dm-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes blink-dot{0%,100%{opacity:1;}50%{opacity:0;}}
/* ─── PASSER (bouton skip) ─────────────── */
.btn-skip{
font-family:'Courier New',monospace;
font-size:9px;letter-spacing:3px;
padding:5px 12px;
border:1px solid rgba(255,255,255,.15);
background:transparent;color:var(--text-muted);
cursor:pointer;text-transform:uppercase;
transition:all .2s;
margin-top:4px;
}
.btn-skip:hover{border-color:var(--text-muted);color:var(--fg);}
/* ─── MINI-TIP au démarrage ────────────── */
#init-hint{
position:absolute;
bottom:64px;left:50%;transform:translateX(-50%);
font-size:10px;letter-spacing:2.5px;
color:var(--a);opacity:0;
pointer-events:none;z-index:24;
text-transform:uppercase;
transition:opacity 1s;
white-space:nowrap;
}
#init-hint.show{opacity:.65;}
/* ─── EXPULSION : ondes concentriques ──── */
.expel-wave{
position:absolute;
width:60px;height:60px;
border:1.5px solid var(--a);
border-radius:50%;
pointer-events:none;z-index:60;
animation:expelWave 1.5s cubic-bezier(.15,.7,.4,1) forwards;
box-shadow:0 0 14px var(--a)33;
}
@keyframes expelWave{
0%{transform:scale(.3);opacity:.95;border-width:2px;}
60%{opacity:.4;}
100%{transform:scale(20);opacity:0;border-width:.3px;}
}
/* ─── ABSORB : particule traceuse ──────── */
.absorb-trail{
position:absolute;
width:4px;height:4px;border-radius:50%;
pointer-events:none;z-index:14;
transition:opacity .55s ease-out, transform .55s ease-out;
}
/* ─── EXPEL : particule éjectée ────────── */
.expel-particle{
position:absolute;
width:5px;height:5px;border-radius:50%;
background:var(--a);
box-shadow:0 0 10px var(--a);
pointer-events:none;z-index:62;
}
/* ─── PLANÈTES : curseur grab ──────────── */
.pblock{cursor:grab;}
.pblock:active{cursor:grabbing;}
/* ─── LAYER : transitions douces ───────── */
.layer{transition:opacity .6s;}
/* ═══════════════════════════════════════════
ACCESSIBILITÉ (A11Y) — focus visible + sr-only
═══════════════════════════════════════════ */
/* Anneau de focus net pour navigation clavier (toujours visible) */
:focus-visible{
outline:2px solid var(--a);
outline-offset:3px;
box-shadow:0 0 8px var(--a);
transition:outline-offset .1s, box-shadow .1s;
}
/* Pas de focus visible sur les éléments cliqués à la souris (UX standard) */
:focus:not(:focus-visible){outline:none;box-shadow:none;}
/* Skip link pour lecteurs d'écran */
.sr-only{
position:absolute !important;
width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
position:absolute;top:-40px;left:8px;
background:var(--a);color:#000;
padding:8px 14px;
font-family:'Courier New',monospace;
font-size:12px;letter-spacing:2px;text-transform:uppercase;
text-decoration:none;
z-index:10000;
transition:top .2s;
}
.skip-link:focus{top:8px;}
/* Respect prefers-reduced-motion système */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001s !important;
transition-duration:.05s !important;
}
}
/* ═══════════════════════════════════════════
CURSEUR CUSTOM — réticule tactique sci-fi
La couleur suit le thème via currentColor → var(--a)
═══════════════════════════════════════════ */
body.custom-cursor-on{cursor:none;}
body.custom-cursor-on input,
body.custom-cursor-on textarea{cursor:text;}
#cursor{
position:fixed;
pointer-events:none;
z-index:9999;
color:var(--a);
opacity:0;
transform:translate(-50%,-50%);
transition:opacity .25s, color .4s;
filter:drop-shadow(0 0 3px rgba(0,0,0,.55));
will-change:left,top,transform;
}
body.custom-cursor-on #cursor{opacity:1;}
#cursor .cursor-svg{
display:block;
transition:transform .15s cubic-bezier(.3,1.4,.4,1);
}
#cursor.hover .cursor-svg{transform:rotate(45deg) scale(1.15);}
#cursor.click .cursor-svg{transform:scale(.82);}
/* Le coeur ne rotate pas au hover, juste scale (pour rester lisible) */
#cursor[data-style="coeur"].hover .cursor-svg{transform:scale(1.2);}
#cursor[data-style="etoile"].hover .cursor-svg{transform:rotate(15deg) scale(1.2);}
/* ═══════════════════════════════════════════
QUI SUIS-JE — modal
═══════════════════════════════════════════ */
#about-modal{
position:absolute;inset:0;z-index:160;
display:flex;align-items:center;justify-content:center;
background:rgba(1,3,10,.92);
opacity:0;pointer-events:none;
transition:opacity .3s;
}
#about-modal.open{opacity:1;pointer-events:all;}
#about-box{
width:min(520px,92vw);
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:28px 32px 26px;
position:relative;
}
.about-head{display:flex;align-items:center;gap:18px;margin-bottom:18px;}
.about-avatar{
width:62px;height:62px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--a),rgba(255,255,255,.05));
color:#020308;
font-size:22px;font-weight:700;letter-spacing:4px;
flex-shrink:0;
box-shadow:0 0 22px var(--a)55;
}
.about-id .ai-name{
font-size:18px;font-weight:200;letter-spacing:6px;
text-transform:uppercase;color:var(--a);
}
.about-id .ai-meta{
font-size:10px;letter-spacing:3px;
color:var(--text-muted);text-transform:uppercase;
margin-top:4px;
}
.about-bio{
font-size:11px;line-height:1.85;
color:var(--fg);opacity:.75;
margin-bottom:16px;
}
.about-section{margin-top:14px;}
.about-label{
font-size:9px;letter-spacing:3px;text-transform:uppercase;
color:var(--a);opacity:.55;margin-bottom:8px;
}
.about-tags{display:flex;gap:6px;flex-wrap:wrap;}
.about-tag{
font-size:9px;letter-spacing:2px;text-transform:uppercase;
padding:4px 10px;
border:1px solid var(--a);
color:var(--a);opacity:.75;
}
#about-close{
position:absolute;top:12px;right:12px;
width:28px;height:28px;
border:1px solid rgba(255,255,255,.2);
background:transparent;color:var(--text-muted);
cursor:pointer;font-size:13px;
display:flex;align-items:center;justify-content:center;
transition:all .2s;font-family:monospace;
}
#about-close:hover{border-color:var(--a);color:var(--a);}
/* ═══════════════════════════════════════════
CONTACT PRO MODAL — formulaire structuré
═══════════════════════════════════════════ */
#contact-modal{
position:absolute;inset:0;z-index:155;
display:flex;align-items:center;justify-content:center;
background:rgba(1,3,10,.92);
opacity:0;pointer-events:none;
transition:opacity .3s;
overflow-y:auto;padding:30px 0;
}
#contact-modal.open{opacity:1;pointer-events:all;}
#contact-box{
width:min(480px,92vw);
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:26px 30px;
margin:auto;
}
.cf-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 14px;
}
.cf-grid .lf{margin-bottom:0;}
.cf-grid .lf.full{grid-column:1 / -1;}
.cf-radio{display:flex;gap:14px;margin:10px 0 4px;}
.cf-radio label{font-size:10px;letter-spacing:2px;color:var(--fg);cursor:pointer;display:flex;align-items:center;gap:6px;}
.cf-radio input[type=radio]{accent-color:var(--a);cursor:pointer;}
/* ═══════════════════════════════════════════
OPTIONS PANEL — toggles supplémentaires
═══════════════════════════════════════════ */
.p-toggle{
display:flex;align-items:center;justify-content:space-between;
font-family:'Courier New',monospace;font-size:10px;letter-spacing:2px;
padding:5px 10px;
border:1px solid var(--input-border);
background:transparent;color:var(--fg);
cursor:pointer;text-transform:uppercase;
width:100%;margin-bottom:5px;
transition:all .2s;
}
.p-toggle:hover{border-color:var(--a);}
.p-toggle.on{border-color:var(--a);color:var(--a);background:rgba(29,232,192,.05);}
.p-toggle .pt-state{font-size:9px;opacity:.55;}
/* Bouton action « couper les filtres » — distinct des toggles */
.p-toggle.p-action{justify-content:center;border-color:var(--a);color:var(--a);background:rgba(29,232,192,.06);margin-bottom:9px;}
.p-toggle.p-action:hover{background:rgba(29,232,192,.14);}
/* Slider volume dans le panel Options */
.p-slider-wrap{
width:100%;margin-bottom:5px;
padding:8px 10px;
border:1px solid var(--input-border);
background:rgba(0,0,0,.2);
}
.p-slider-lbl{
display:block;
font-size:10px;letter-spacing:2px;text-transform:uppercase;
color:var(--a);opacity:.8;
margin-bottom:6px;
}
.p-slider{
width:100%;height:4px;
background:rgba(255,255,255,.1);
-webkit-appearance:none;appearance:none;
outline:none;cursor:pointer;
}
.p-slider::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:12px;height:12px;border-radius:50%;
background:var(--a);
box-shadow:0 0 6px var(--a);
cursor:grab;
}
.p-slider::-moz-range-thumb{
width:12px;height:12px;border-radius:50%;
background:var(--a);border:none;
box-shadow:0 0 6px var(--a);
cursor:grab;
}
/* Icône inline pour les toggles (SVG wireframe 16x16) */
.pi{
width:14px;height:14px;
vertical-align:-3px;margin-right:4px;
color:var(--a);opacity:.85;
}
.p-toggle.on .pi{opacity:1;}
/* Select fond dans Options */
.p-select{
width:100%;
background:rgba(0,0,0,.3);
border:1px solid var(--input-border);
color:var(--fg);
font-family:'Courier New',monospace;
font-size:10px;letter-spacing:1.5px;
padding:6px 8px;
cursor:pointer;
text-transform:uppercase;
outline:none;
}
.p-select:focus{border-color:var(--a);}
/* Grille de choix de pointeur (étape 2 onboarding) */
.cursor-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
width:min(440px,90vw);
}
.cpk-opt{
position:relative;
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:18px 8px;
border:1px solid rgba(255,255,255,.15);
background:transparent;
color:var(--text-muted);
cursor:pointer;
transition:all .25s;
font-family:'Courier New',monospace;
}
.cpk-opt:hover,
.cpk-opt:focus-visible{
border-color:var(--a);
color:var(--a);
background:rgba(29,232,192,.05);
transform:translateY(-2px);
}
.cpk-opt.sel{
border-color:var(--a);
color:var(--a);
background:rgba(29,232,192,.08);
box-shadow:0 0 14px rgba(29,232,192,.25);
}
.cpk-opt svg{transition:transform .2s;}
.cpk-opt:hover svg{transform:scale(1.1);}
.cpk-label{
font-size:10px;letter-spacing:3px;text-transform:uppercase;
}
/* Sélecteur curseur (6 options dans Options) */
.cursor-picker{
display:flex;gap:5px;flex-wrap:wrap;justify-content:space-between;
}
.cp-opt{
flex:1;min-width:30px;
display:inline-flex;align-items:center;justify-content:center;
font-size:16px;line-height:1;
padding:6px 0;
border:1px solid var(--input-border);
background:transparent;
color:var(--fg);opacity:.55;
cursor:pointer;transition:all .2s;
font-family:'Courier New',monospace;
}
.cp-opt .pi{color:inherit;margin-right:0;}
.cp-opt:hover{border-color:var(--a);opacity:1;}
.cp-opt.sel{border-color:var(--a);color:var(--a);opacity:1;background:rgba(29,232,192,.06);}
.p-sublbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin:4px 0 2px;}
.font-picker{display:flex;gap:5px;flex-wrap:wrap;}
.fp-opt{flex:1;min-width:36px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;padding:5px 4px;border:1px solid var(--input-border);background:transparent;color:var(--fg);opacity:.55;cursor:pointer;transition:all .2s;letter-spacing:0;}
.fp-opt:hover{border-color:var(--a);opacity:1;}
.fp-opt.sel{border-color:var(--a);color:var(--a);opacity:1;background:rgba(29,232,192,.06);}
/* ═══════════════════════════════════════════
ICON BAR : icône login
═══════════════════════════════════════════ */
#ic-login{position:relative;}
/* ═══════════════════════════════════════════
ÉVÉNEMENTS ALÉATOIRES
═══════════════════════════════════════════ */
.evt-comet{
position:absolute;
width:5px;height:5px;border-radius:50%;
background:white;
box-shadow:0 0 16px white, 0 0 32px var(--a), -8px 0 18px var(--a);
pointer-events:none;z-index:8;
transition:left 4s linear, top 4s linear;
}
.evt-comet::after{
content:'';
position:absolute;
right:5px;top:1px;
width:70px;height:2px;
background:linear-gradient(to left, var(--a), transparent);
filter:blur(.5px);
}
.evt-ship{
position:absolute;
color:var(--a);
pointer-events:none;z-index:8;
transition:left 9s linear;
filter:drop-shadow(0 0 6px var(--a));
}
.evt-pulsar{
position:absolute;
width:8px;height:8px;border-radius:50%;
background:white;
box-shadow:0 0 20px white, 0 0 40px var(--a);
pointer-events:none;z-index:8;
animation:pulsarPulse 3s ease-out forwards;
}
@keyframes pulsarPulse{
0% {transform:scale(0);opacity:0;}
10% {transform:scale(1);opacity:1;}
20% {transform:scale(.6);opacity:.7;}
35% {transform:scale(1.4);opacity:1;}
55% {transform:scale(.8);opacity:.5;}
100% {transform:scale(3.5);opacity:0;}
}
.evt-grav-wave{
position:absolute;
left:-5%;width:110%;height:1.5px;
background:linear-gradient(to right, transparent 0%, var(--a) 30%, white 50%, var(--a) 70%, transparent 100%);
pointer-events:none;z-index:8;
filter:blur(.5px);
box-shadow:0 0 12px var(--a);
}
/* ── ET en vélo + Lune ── */
.evt-et-moon{
position:absolute;
right:30px;
width:90px;height:90px;
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fffbeb 0%, #fcd34d 40%, #f59e0b 80%, #92400e 100%);
pointer-events:none;z-index:7;
box-shadow:0 0 40px rgba(252,211,77,.35);
animation:moonFade 5s ease-in-out forwards;
}
@keyframes moonFade{
0%,100%{opacity:0;}
20%,80%{opacity:1;}
}
.evt-et-bike{
position:absolute;
left:-100px;
width:80px;height:40px;
pointer-events:none;z-index:8;
transition:left 5s linear;
filter:drop-shadow(0 0 4px rgba(0,0,0,.5));
}
/* ── Star Wars hyperespace ── */
.evt-sw-flash{
position:fixed;inset:0;
background:radial-gradient(circle at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,.3) 30%, transparent 70%);
pointer-events:none;z-index:9100;
animation:swFlash .6s ease-out forwards;
}
@keyframes swFlash{
0% {opacity:0;}
20% {opacity:1;}
100%{opacity:0;}
}
.evt-sw-stria{
position:fixed;
width:0;height:2px;
background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%);
pointer-events:none;z-index:9050;
transform-origin:0 50%;
transition:width .7s ease-out, opacity .7s ease-out;
box-shadow:0 0 6px white;
}
.evt-sw-ship{
position:fixed;
width:50px;height:16px;
color:var(--a);
pointer-events:none;z-index:9060;
transition:left 2.5s linear, top 2.5s linear;
filter:drop-shadow(0 0 8px var(--a));
}
/* ── Mini trou noir éphémère ── */
.evt-mini-bh{
position:fixed;
width:160px;height:160px;
pointer-events:none;z-index:8950;
transform:translate(-50%,-50%);
}
/* ═══════════════════════════════════════════
GROUPES UNIVERS (Films / Littérature)
═══════════════════════════════════════════ */
.chip-group{
margin-top:10px;
display:flex;flex-direction:column;align-items:center;gap:6px;
}
.cg-label{
font-size:9px;letter-spacing:3px;
color:var(--a);opacity:.5;
text-transform:uppercase;
}
/* ═══════════════════════════════════════════
SCORE (en bas à gauche dans main)
═══════════════════════════════════════════ */
#score{
position:absolute;
bottom:16px;left:20px;
font-size:10px;letter-spacing:2px;
color:var(--a);opacity:0;
pointer-events:none;z-index:22;
text-transform:uppercase;
transition:opacity .4s;
}
#score.on{opacity:.62;}
#score .sc-sep{opacity:.4;margin:0 6px;}
#score .sc-i{vertical-align:-1px;margin-right:3px;color:var(--a);}
#score .sc-up{
animation:scoreUp .6s ease-out;
}
@keyframes scoreUp{
0%{transform:scale(1);color:var(--a);}
30%{transform:scale(1.3);color:white;}
100%{transform:scale(1);color:var(--a);}
}
/* ═══════════════════════════════════════════
EASTER EGGS — Matrix, Cthulhu, Force, Emperor, Alien, Constellation
═══════════════════════════════════════════ */
/* Matrix mode */
.egg-dismiss{position:fixed;top:14px;right:14px;z-index:9999;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.25);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;opacity:.7;transition:opacity .2s,transform .15s;padding:0;pointer-events:all;}
.egg-dismiss:hover{opacity:1;transform:scale(1.12);}
.matrix-overlay{
position:fixed;inset:0;
pointer-events:all;z-index:9100;
overflow:hidden;
font-family:'Courier New',monospace;
background:rgba(0,0,0,.55);
}
.matrix-col{
position:absolute;
top:-50vh;
font-size:18px; /* 14 → 18 */
color:#0f0;
text-shadow:0 0 8px #0f0, 0 0 16px #0f0;
writing-mode:vertical-rl;
letter-spacing:5px;
white-space:nowrap;
animation:matrixFall linear infinite;
opacity:.9;
}
@keyframes matrixFall{
from{top:-100vh;}
to{top:120vh;}
}
/* Cthulhu tentacules */
.cthulhu-overlay{
position:fixed;inset:0;
pointer-events:all;z-index:9100;
color:#a78bfa;
filter:drop-shadow(0 0 8px #a78bfa);
}
.tentacle{
position:absolute;
opacity:0;
animation:tentacleAppear 5s ease-out forwards;
}
.tentacle svg{width:100%;height:100%;}
.tentacle-top{ top:-20px; left:50%;transform-origin:left top; transform:translateX(-50%) rotate(0deg); width:95vw;height:140px;}
.tentacle-bottom{bottom:-20px;left:50%;transform-origin:left bottom;transform:translateX(-50%) rotate(180deg);width:95vw;height:140px;}
.tentacle-left{ left:-20px; top:50%; transform-origin:left top; transform:translateY(-50%) rotate(90deg); width:95vh;height:140px;}
.tentacle-right{ right:-20px; top:50%; transform-origin:right top; transform:translateY(-50%) rotate(-90deg);width:95vh;height:140px;}
@keyframes tentacleAppear{
0% {opacity:0;}
15% {opacity:.85;}
85% {opacity:.85;}
100%{opacity:0;}
}
/* Force wave — agrandie */
.force-wave{
position:fixed;
width:80px;height:80px;
border:3px solid var(--a);
border-radius:50%;
pointer-events:none;z-index:9100;
box-shadow:0 0 30px var(--a),inset 0 0 30px var(--a),0 0 60px var(--a);
animation:forceWave 2.2s cubic-bezier(.15,.7,.4,1) forwards;
}
@keyframes forceWave{
0% {transform:scale(.2);opacity:1;}
100%{transform:scale(60);opacity:0;}
}
/* Emperor message (Warhammer) — agrandi x2 */
.emperor-msg{
position:fixed;
top:50%;left:50%;
transform:translate(-50%,-50%) scale(.5);
font-family:'Courier New',monospace;
font-size:88px;font-weight:700;letter-spacing:20px;
color:#fbbf24;
text-shadow:0 0 30px #fbbf24, 0 0 60px #f59e0b, 0 0 90px #b45309;
pointer-events:none;z-index:9100;
opacity:0;
white-space:nowrap;
animation:emperorAppear 4.5s ease-out forwards;
}
@keyframes emperorAppear{
0% {opacity:0;transform:translate(-50%,-50%) scale(.4);}
12% {opacity:1;transform:translate(-50%,-50%) scale(1);}
85% {opacity:1;transform:translate(-50%,-50%) scale(1);}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.5);}
}
/* Alien message — agrandi x2 */
.alien-msg{
position:fixed;
top:30%;left:50%;
transform:translate(-50%,-50%);
font-family:'Courier New',monospace;
font-size:62px;font-weight:700;letter-spacing:9px;
color:#f87171;
text-shadow:0 0 25px #f87171,0 0 50px #dc2626,0 0 80px #7f1d1d;
pointer-events:none;z-index:9100;
opacity:0;text-align:center;
white-space:nowrap;
animation:alienAppear 5s ease-out forwards;
}
@keyframes alienAppear{
0% {opacity:0;transform:translate(-50%,-50%) scale(.7);}
10% {opacity:1;transform:translate(-50%,-50%) scale(1.1);}
20% {opacity:1;transform:translate(-50%,-50%) scale(1);}
85% {opacity:1;}
100%{opacity:0;}
}
.alien-flash{
position:fixed;inset:0;
background:rgba(248,113,113,.08);
pointer-events:none;z-index:9099;
opacity:0;
animation:alienFlash 3.5s ease-out forwards;
}
@keyframes alienFlash{
0%,100%{opacity:0;}
10%,80%{opacity:1;}
}
/* Constellation libre (Shift+clic) */
.const-point{
position:fixed;
width:6px;height:6px;
background:white;
border-radius:50%;
box-shadow:0 0 12px var(--a),0 0 24px var(--a);
pointer-events:none;z-index:9000;
transform:translate(-50%,-50%);
animation:constPointBirth .4s ease-out;
}
@keyframes constPointBirth{
from{transform:translate(-50%,-50%) scale(0);opacity:0;}
to {transform:translate(-50%,-50%) scale(1);opacity:1;}
}
.const-line{
position:fixed;
height:1px;
background:var(--a);
pointer-events:none;z-index:8999;
transform-origin:0 50%;
box-shadow:0 0 4px var(--a);
}
/* Terminal Mother (Alien) */
.mother-terminal{
position:fixed;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:min(520px,90vw);
background:rgba(2,12,2,.96);
border:2px solid #00ff41;
padding:24px 30px;
font-family:'Courier New',monospace;
font-size:14px;
color:#00ff41;
text-shadow:0 0 8px #00ff41;
box-shadow:0 0 30px rgba(0,255,65,.4), inset 0 0 30px rgba(0,255,65,.1);
pointer-events:none;z-index:9200;
opacity:0;
animation:motherShow .4s ease-out forwards, motherFadeOut .8s ease-in 5.2s forwards;
}
.mother-line{
margin:6px 0;
opacity:0;
animation:motherType .4s ease-out forwards;
}
.mother-line:nth-child(1){animation-delay:.2s;}
.mother-line:nth-child(2){animation-delay:.6s;}
.mother-line:nth-child(3){animation-delay:1.0s;}
.mother-line:nth-child(4){animation-delay:1.4s;}
.mother-line:nth-child(5){animation-delay:1.8s;}
.mother-line:nth-child(6){animation-delay:2.2s;}
.mother-line:nth-child(7){animation-delay:2.6s;}
@keyframes motherShow{0%{opacity:0;transform:translate(-50%,-50%) scale(.9);}100%{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes motherType{0%{opacity:0;}100%{opacity:1;}}
@keyframes motherFadeOut{to{opacity:0;}}
/* Nostromo self-destruct overlay */
.nostromo-overlay{
position:fixed;inset:0;
background:rgba(40,0,0,.18);
pointer-events:all;z-index:9200;
display:flex;flex-direction:column;align-items:center;justify-content:space-between;
padding:60px 20px;
animation:nostromoFlash 1s ease-in-out infinite;
}
@keyframes nostromoFlash{
0%,100%{background:rgba(140,0,0,.20);}
50% {background:rgba(220,38,38,.08);}
}
.nostromo-header{
font-family:'Courier New',monospace;
font-size:20px;font-weight:700;letter-spacing:5px;
color:#fca5a5;
text-shadow:0 0 14px #dc2626, 0 0 28px #ef4444;
text-align:center;
}
.nostromo-countdown{
font-family:'Courier New',monospace;
font-size:80px;font-weight:700;letter-spacing:6px;
color:#00ff41;
text-shadow:0 0 22px #00ff41;
animation:countdownPulse .5s ease-in-out infinite;
}
@keyframes countdownPulse{
0%,100%{transform:scale(1);}
50% {transform:scale(1.04);}
}
.nostromo-footer{
font-family:'Courier New',monospace;
font-size:13px;letter-spacing:3px;
color:#fca5a5;opacity:.7;
text-align:center;
}
/* ═══════════════════════════════════════════
MODES VISUELS (toggles dans Options)
═══════════════════════════════════════════ */
/* Effet VHS : décalage chromatique + ondulation */
body.fx-vhs #W::before{
content:'';
position:absolute;inset:0;
background:repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.012) 3px, rgba(255,255,255,.012) 4px);
pointer-events:none;z-index:99;
mix-blend-mode:overlay;
animation:vhsRoll 8s linear infinite;
}
@keyframes vhsRoll{
0%{background-position:0 0;}
100%{background-position:0 50px;}
}
body.fx-vhs #cv{filter:contrast(1.05) saturate(1.15) hue-rotate(-2deg);}
/* Glitch random : bandes décalées aléatoires */
body.fx-glitch::after{
content:'';
position:fixed;inset:0;
pointer-events:none;z-index:9998;
background:repeating-linear-gradient(to bottom, transparent 0, transparent 80px, rgba(248,113,113,.04) 80px, rgba(248,113,113,.04) 82px, transparent 82px, transparent 90px, rgba(96,165,250,.04) 90px, rgba(96,165,250,.04) 92px);
animation:glitchScan 3s linear infinite;
}
@keyframes glitchScan{
0%,100%{transform:translateY(0);opacity:.5;}
20%{transform:translateY(8px);opacity:.8;}
40%{transform:translateY(-3px);opacity:.4;}
60%{transform:translateY(12px);opacity:.7;}
80%{transform:translateY(-6px);opacity:.5;}
}
/* Grain film continu (très subtil) */
body.fx-grain::before{
content:'';
position:fixed;inset:0;
pointer-events:none;z-index:9997;
background-image:url("data:image/svg+xml;utf8,");
opacity:.06;
animation:grainMove .15s steps(8) infinite;
}
@keyframes grainMove{
0%{transform:translate(0,0);}
20%{transform:translate(-3px,2px);}
40%{transform:translate(3px,-2px);}
60%{transform:translate(-2px,-3px);}
80%{transform:translate(2px,3px);}
100%{transform:translate(0,0);}
}
/* ── MODE NOSTROMO — Écran DOS phosphore vert, pixelisé 70s ─────────── */
body.fx-nostromo{
--a:#00ff41;--fg:#33ff55;--text-main:#00e836;--text-muted:rgba(0,255,65,.45);
font-family:'VT323',monospace !important;
letter-spacing:.5px;
}
body.fx-nostromo *:not(canvas):not(svg):not(path):not(line):not(circle):not(polyline):not(polygon):not(rect):not(ellipse){
font-family:'VT323',monospace !important;
text-rendering:optimizeSpeed;
}
body.fx-nostromo #W::after{
content:'';
position:absolute;inset:0;
pointer-events:none;z-index:200;
background:
repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0px,rgba(0,0,0,.22) 2px,transparent 2px,transparent 5px),
repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0px,rgba(0,0,0,.12) 1px,transparent 1px,transparent 5px);
}
body.fx-nostromo #W::before{
content:'';
position:absolute;inset:0;
pointer-events:none;z-index:199;
background:rgba(0,255,65,.065);
animation:nostroGlow 2.8s ease-in-out infinite;
}
@keyframes nostroGlow{
0%,100%{opacity:.7;}
50%{opacity:1;}
}
body.fx-nostromo #W{filter:contrast(1.25) brightness(.88) saturate(.6);}
/* ──────────────────────────────────────────────────────────────────── */
/* Mode Dyslexie : police Atkinson Hyperlegible (Braille Institute) + spacing renforcé
Cette police est conçue spécifiquement pour les personnes ayant des difficultés
de lecture (dyslexie, malvoyance) — formes distinctes pour b/d, p/q, etc. */
/* Police OpenDyslexic (spécialisée dyslexie) — chargée à la demande via CDN */
@font-face{
font-family:'OpenDyslexic';
src:url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic/files/opendyslexic-latin-400-normal.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:'OpenDyslexic';
src:url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic/files/opendyslexic-latin-700-normal.woff2') format('woff2');
font-weight:700;font-style:normal;font-display:swap;
}
body.fx-dyslexia,
body.fx-dyslexia *:not(svg):not(canvas):not(.cursor-svg){
/* OpenDyslexic en priorité, Atkinson Hyperlegible en secours si le CDN échoue */
font-family:'OpenDyslexic','Atkinson Hyperlegible','Verdana',sans-serif !important;
letter-spacing:.04em !important;
line-height:1.7 !important;
word-spacing:.08em !important;
}
/* Animations réduites (général, complète prefers-reduced-motion) */
body.fx-reduced *,
body.fx-reduced *::before,
body.fx-reduced *::after{
animation-duration:.001s !important;
transition-duration:.05s !important;
}
/* Filtre nuit chaud (jaune/orange) — a11y / réduction lumière bleue */
body.fx-night #W::after{
content:'';
position:absolute;inset:0;
pointer-events:none;z-index:97;
background:rgba(255,138,40,.26);
mix-blend-mode:multiply;
}
body.fx-night #cv{filter:sepia(.5) hue-rotate(-14deg) saturate(.9) brightness(.96);}
/* Toggle 3 états : off-state (gris foncé) */
.p-toggle.off-state{opacity:.4;}
/* Contraste élevé : opacity boost + bordures plus visibles */
body.fx-contrast{
--text-muted:rgba(255,255,255,.85);
--panel-border:rgba(255,255,255,.45);
--input-border:rgba(255,255,255,.55);
}
body.fx-contrast .lsub,
body.fx-contrast .ms,
body.fx-contrast .csk,
body.fx-contrast .csv{opacity:1 !important;}
/* Silhouette Xenomorph */
.xeno-silhouette{
position:fixed;
bottom:-220px;
width:100px;height:200px;
pointer-events:none;z-index:8800;
animation:xenoCross 2.2s ease-in-out forwards;
}
@keyframes xenoCross{
0% {bottom:-220px;opacity:0;}
20% {opacity:.85;}
80% {opacity:.85;}
100%{bottom:25%;opacity:0;}
}
/* ═══════════════════════════════════════════
SOURIS AVANCÉE — traînée + warp + astéroïde
═══════════════════════════════════════════ */
/* ── Déchirure espace-temps (violet + cyan) ── */
.warp-tear{
position:fixed;
width:720px;height:20px;
pointer-events:none;z-index:8950;
background:linear-gradient(90deg,
transparent 0%,
#4f46e5 8%,
#06b6d4 28%,
rgba(255,255,255,.96) 50%,
#06b6d4 72%,
#4f46e5 92%,
transparent 100%);
filter:blur(2.5px) brightness(2.8);
animation:warpTearAnim .85s ease-out forwards;
box-shadow:0 0 22px #06b6d4, 0 0 55px #4f46e5, 0 0 90px #0e7490;
}
/* Fissure intérieure — couche haute tension */
.warp-rift{
position:fixed;
width:200px;height:4px;
pointer-events:none;z-index:8951;
background:linear-gradient(90deg,
transparent 0%,
#7c3aed 15%,
#e0f2fe 50%,
#7c3aed 85%,
transparent 100%);
filter:blur(1px) brightness(4);
animation:warpRiftAnim .6s ease-out forwards;
box-shadow:0 0 8px #fff, 0 0 18px #06b6d4, 0 0 35px #4f46e5;
}
@keyframes warpTearAnim{
0% {opacity:0;width:80px;filter:blur(0px) brightness(4);}
12% {opacity:1;width:720px;filter:blur(2.5px) brightness(2.8);}
100%{opacity:0;width:1020px;filter:blur(12px) brightness(1);}
}
@keyframes warpRiftAnim{
0% {opacity:0;width:16px;}
15% {opacity:.9;width:200px;}
100%{opacity:0;width:320px;filter:blur(6px);}
}
.asteroid-frag{
position:fixed;
width:6px;height:6px;border-radius:50%;
pointer-events:none;z-index:8930;
}
/* Toast achievement débloqué (apparait en bas) */
.ach-toast{
position:fixed;
bottom:30px;left:50%;
transform:translateX(-50%) translateY(100px);
background:rgba(2,5,15,.97);
border:1px solid var(--a);
padding:14px 20px;
display:flex;align-items:center;gap:14px;
z-index:9300;
box-shadow:0 0 30px rgba(29,232,192,.3);
transition:transform .4s cubic-bezier(.3,1.4,.5,1), opacity .4s;
opacity:0;
pointer-events:none;
}
.ach-toast.show{
transform:translateX(-50%) translateY(0);
opacity:1;
}
.ach-toast-icon{color:var(--a);}
.ach-toast-icon svg{width:32px;height:32px;}
.ach-toast-lbl{
font-size:9px;letter-spacing:3px;
color:var(--a);opacity:.7;
text-transform:uppercase;
}
.ach-toast-name{
font-size:13px;font-weight:700;letter-spacing:2px;
color:var(--a);text-transform:uppercase;
margin-top:3px;
}
/* Modal Succès / Achievements */
#ach-modal{
position:fixed;inset:0;z-index:166;
background:rgba(1,3,10,.95);
opacity:0;pointer-events:none;
transition:opacity .3s;
display:flex;align-items:center;justify-content:center;
padding:20px;
overflow-y:auto;
}
#ach-modal.open{opacity:1;pointer-events:all;}
#ach-box{
width:min(620px,94vw);
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:28px 32px;
position:relative;
max-height:85vh;overflow-y:auto;
}
.ach-title{
font-size:14px;font-weight:700;letter-spacing:5px;
color:var(--a);text-transform:uppercase;
margin-bottom:6px;
}
.ach-sub{
font-size:11px;letter-spacing:.5px;
color:var(--text-muted);margin-bottom:8px;
}
.ach-stats{
font-size:11px;letter-spacing:2px;
color:var(--a);opacity:.85;
margin-bottom:18px;
text-transform:uppercase;
}
#ach-close{
position:absolute;top:12px;right:12px;
width:28px;height:28px;
border:1px solid rgba(255,255,255,.2);
background:transparent;color:var(--text-muted);
cursor:pointer;font-size:13px;
display:flex;align-items:center;justify-content:center;
font-family:monospace;
}
#ach-close:hover{border-color:var(--a);color:var(--a);}
.ach-list{
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:10px;
margin-bottom:20px;
}
.ach-item{
padding:14px;
border:1px solid var(--panel-border);
background:rgba(0,0,0,.2);
position:relative;
transition:all .2s;
}
.ach-item.locked{
opacity:.4;
filter:grayscale(.8);
}
.ach-item.unlocked{
border-color:var(--a);
background:rgba(29,232,192,.06);
}
.ach-icon{margin-bottom:8px;display:block;color:var(--a);}
.ach-icon svg{width:30px;height:30px;}
.ach-lock{position:absolute;top:10px;right:10px;opacity:.6;color:var(--text-muted);}
.ach-lock svg{width:14px;height:14px;}
/* Tooltip custom au survol des succès (data-tip) */
.ach-item[data-tip]:hover::after{
content:attr(data-tip);
position:absolute;
bottom:calc(100% + 6px);
left:50%;
transform:translateX(-50%);
background:rgba(2,5,15,.98);
border:1px solid var(--a);
color:var(--a);
padding:8px 12px;
font-size:10px;letter-spacing:.5px;line-height:1.5;
white-space:normal;
width:240px;
z-index:10;
pointer-events:none;
box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 12px var(--a)33;
font-family:'Courier New',monospace;
text-transform:none;
}
.ach-item[data-tip]:hover{z-index:5;}
.ach-name{
font-size:11px;font-weight:700;letter-spacing:2px;
color:var(--a);text-transform:uppercase;
margin-bottom:4px;
}
.ach-desc{
font-size:10px;color:var(--text-muted);
line-height:1.5;
}
.ach-date{
font-size:9px;color:var(--a);opacity:.7;
margin-top:6px;letter-spacing:1px;
}
.ach-item.locked .ach-name::after{content:' 🔒';opacity:.6;}
.ach-actions{
display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}
.ach-actions .lbtn{flex:0 0 auto;}
/* Modal de confirmation reset */
#ach-confirm-modal{
position:fixed;inset:0;z-index:167;
background:rgba(1,3,10,.96);
opacity:0;pointer-events:none;
transition:opacity .25s;
display:flex;align-items:center;justify-content:center;
padding:20px;
}
#ach-confirm-modal.open{opacity:1;pointer-events:all;}
#ach-confirm-box{
width:min(420px,92vw);
background:var(--panel-bg);
border:1px solid #f87171;
padding:24px 28px;
}
.ach-confirm-title{
font-size:13px;font-weight:700;letter-spacing:4px;
color:#f87171;text-transform:uppercase;
margin-bottom:8px;
}
.ach-confirm-sub{
font-size:11px;color:var(--text-muted);
line-height:1.6;margin-bottom:18px;
}
/* Modal consentement Cookies + Géoloc */
#consent-modal{
position:fixed;inset:0;z-index:9500;
background:rgba(1,3,10,.96);
opacity:0;pointer-events:none;
transition:opacity .4s;
display:flex;align-items:center;justify-content:center;
padding:20px;
}
#consent-modal.open{opacity:1;pointer-events:all;}
#consent-box{
width:min(540px,94vw);
background:var(--panel-bg);
border:1px solid var(--a);
padding:28px 32px;
box-shadow:0 0 40px rgba(29,232,192,.15);
}
.consent-title{
font-size:14px;font-weight:700;letter-spacing:5px;
color:var(--a);text-transform:uppercase;
margin-bottom:8px;
}
.consent-sub{
font-size:11px;letter-spacing:.5px;
color:var(--text-muted);line-height:1.6;
margin-bottom:20px;
}
.consent-cat{
padding:12px 14px;
margin-bottom:8px;
border:1px solid var(--panel-border);
background:rgba(0,0,0,.2);
}
.consent-cat-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:5px;
}
.consent-cat-name{
font-size:11px;font-weight:700;letter-spacing:2px;
color:var(--a);text-transform:uppercase;
}
.consent-cat-badge{
font-size:8px;letter-spacing:2px;
color:var(--text-muted);text-transform:uppercase;
padding:2px 6px;border:1px solid var(--text-muted);
}
.consent-cat-desc{
font-size:10px;color:var(--text-muted);
line-height:1.55;
}
/* Switch toggle iOS-like */
.consent-switch{
position:relative;display:inline-block;
width:34px;height:18px;cursor:pointer;
}
.consent-switch input{display:none;}
.consent-switch span{
position:absolute;inset:0;
background:rgba(255,255,255,.15);
border:1px solid var(--panel-border);
border-radius:10px;
transition:.2s;
}
.consent-switch span::before{
content:'';position:absolute;
left:2px;top:2px;
width:12px;height:12px;border-radius:50%;
background:var(--text-muted);
transition:.2s;
}
.consent-switch input:checked + span{
background:rgba(29,232,192,.2);
border-color:var(--a);
}
.consent-switch input:checked + span::before{
left:18px;background:var(--a);
}
.consent-actions{
display:flex;gap:8px;margin-top:18px;
flex-wrap:wrap;
}
.consent-actions .lbtn{flex:1;min-width:120px;}
/* ─── Porte d'âge consentement ─── */
#consent-age-gate{padding:16px 0 4px;}
.cag-header{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--a);margin-bottom:10px;}
.cag-desc{font-size:10px;color:var(--fg);opacity:.7;line-height:1.6;margin-bottom:14px;}
.cag-btns{display:flex;gap:8px;flex-wrap:wrap;}
.cag-mineur-btn{border-color:rgba(248,113,113,.35);color:rgba(248,113,113,.7);}
.cag-mineur-btn:hover{border-color:#f87171;color:#f87171;background:rgba(248,113,113,.06);}
/* ─── Écran mineur ─── */
#consent-mineur{padding:20px 0;text-align:center;}
.cmineur-icon{font-size:32px;color:rgba(248,113,113,.5);margin-bottom:10px;line-height:1;}
.cmineur-title{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#f87171;margin-bottom:10px;}
.cmineur-desc{font-size:10px;color:var(--fg);opacity:.6;line-height:1.7;margin-bottom:18px;}
.cmineur-actions{display:flex;gap:8px;flex-direction:column;}
.cmineur-quit-btn{border-color:#f87171;color:#f87171;background:rgba(248,113,113,.06);letter-spacing:3px;}
.cmineur-quit-btn:hover{background:rgba(248,113,113,.14);}
/* Toast info mini-jeux (stub S3) */
.game-stub-toast{
position:fixed;bottom:30px;left:50%;
transform:translateX(-50%) translateY(60px);
background:var(--panel-bg);
border:1px solid var(--a);
color:var(--a);
padding:14px 22px;
font-size:12px;letter-spacing:2px;text-transform:uppercase;
z-index:9300;
opacity:0;transition:opacity .4s, transform .4s;
pointer-events:none;
box-shadow:0 0 20px rgba(29,232,192,.3);
}
.game-stub-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ═══ SALLE DE JEUX (Session 8) ═══ */
#games-modal{position:fixed;inset:0;z-index:170;display:none;align-items:center;justify-content:center;background:rgba(1,3,10,.95);}
#games-modal.open{display:flex;}
#games-box{position:relative;width:min(760px,94vw);max-height:92vh;overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);padding:28px 30px;}
#games-box.playing{width:min(1380px,96vw);padding:14px 16px;overflow:hidden;}
#games-box.playing > .atitle,#games-box.playing > .asub{display:none;}
#games-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-muted);cursor:pointer;line-height:0;padding:4px;}
#games-close:hover{color:var(--a);}
#game-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;}
.game-card{border:1px solid var(--input-border);padding:18px 16px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s;text-align:center;}
.game-card:hover{border-color:var(--a);background:rgba(29,232,192,.06);transform:translateY(-2px);}
.game-card-icon{color:var(--a);margin-bottom:8px;}
.game-card-icon svg{width:36px;height:36px;}
.game-card-name{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--fg);margin-bottom:5px;}
.game-card-desc{font-size:10px;color:var(--text-muted);line-height:1.5;margin-bottom:9px;}
.game-best{font-size:9px;letter-spacing:1px;color:var(--a);opacity:.75;}
#game-stage{flex-direction:column;align-items:center;width:100%;margin-top:6px;}
.game-bar{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:12px;}
.game-title{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--a);}
.game-score{font-size:11px;color:var(--text-muted);margin-left:auto;}
.game-host{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
/* aspect-ratio seul contrôle la hauteur (height:auto est non fiable sur canvas).
La contrainte width=(84vh-110px)*2 garantit que le canvas tient dans le modal sans scroll. */
.game-canvas{display:block;border:1px solid var(--input-border);background:#01040e;}
.game-size-ctl{display:flex;align-items:center;gap:6px;color:var(--text-muted);}
.game-size-ctl input[type=range]{width:90px;accent-color:var(--a);cursor:pointer;}
.game-hint{font-size:10px;color:var(--text-muted);letter-spacing:1px;}
.game-soon{padding:46px 20px;color:var(--text-muted);font-size:12px;letter-spacing:1px;text-align:center;}
@media(max-width:560px){#game-menu{grid-template-columns:1fr;}}
/* ═══ Quitter & effacer ═══ */
#quit-modal{position:absolute;inset:0;z-index:180;display:none;align-items:center;justify-content:center;background:rgba(1,3,10,.92);}
#quit-modal.open{display:flex;}
#quit-box{width:min(440px,92vw);background:var(--panel-bg);border:1px solid #f87171;padding:26px 28px;box-shadow:0 0 40px rgba(248,113,113,.15);}
#quit-box .asub{line-height:1.7;}
.nv-danger:hover span{color:#f87171;}
.nv-danger:hover .ist{stroke:#f87171;}
/* ═══ Panneau infos système ═══ */
#info-panel{position:fixed;top:60px;right:18px;z-index:9200;width:236px;background:rgba(2,5,14,.95);border:1px solid var(--a);font-family:'Courier New',monospace;box-shadow:0 0 26px rgba(0,0,0,.5);}
/* ═══ Boîte à outils scientifiques ═══ */
#tools-modal{position:fixed;inset:0;z-index:170;display:none;align-items:center;justify-content:center;background:rgba(1,3,10,.95);}
#tools-modal.open{display:flex;}
#tools-box{position:relative;width:min(920px,96vw);max-height:88vh;background:var(--panel-bg);border:1px solid var(--panel-border);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.9);}
#tools-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-muted);cursor:pointer;line-height:0;padding:4px;z-index:2;}
#tools-close:hover{color:var(--a);}
#tools-header{padding:20px 52px 14px 28px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
#tools-layout{display:flex;flex:1;overflow:hidden;min-height:0;}
#tools-nav{display:flex;flex-direction:column;gap:3px;padding:12px 8px;border-right:1px solid rgba(255,255,255,.07);width:128px;flex-shrink:0;overflow-y:auto;}
.tnav{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid transparent;color:var(--text-muted);cursor:pointer;padding:9px 6px 8px;font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;font-family:inherit;transition:all .2s;text-align:center;line-height:1.2;}
.tnav svg{opacity:.5;transition:opacity .2s;flex-shrink:0;}
.tnav:hover{border-color:rgba(255,255,255,.12);color:var(--fg);}
.tnav:hover svg{opacity:.85;}
.tnav.active{border-color:var(--a);color:var(--a);}
.tnav.active svg{opacity:1;}
#tools-content{flex:1;overflow-y:auto;padding:22px 26px;min-width:0;}
.ttab{display:none;}
.ttab.active{display:block;}
.ttab-title{font-size:11px;letter-spacing:2.5px;color:var(--a);text-transform:uppercase;margin-bottom:4px;}
.ttab-sub{font-size:9.5px;color:var(--text-muted);margin-bottom:14px;letter-spacing:.3px;line-height:1.6;}
.ttab-formula{font-family:'Courier New',monospace;font-size:13px;color:var(--fg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:8px 14px;margin-bottom:16px;text-align:center;letter-spacing:.5px;}
.ttab-row{display:flex;gap:8px;margin-bottom:9px;align-items:center;flex-wrap:wrap;}
.ttab-label{font-size:9px;color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase;width:118px;flex-shrink:0;}
.ttab-unit{font-size:10px;color:var(--text-muted);flex-shrink:0;}
.ttab-inp{flex:1;min-width:60px;background:rgba(255,255,255,.06);border:1px solid var(--input-border);color:var(--text-main);padding:6px 10px;font-size:12px;font-family:'Courier New',monospace;}
.ttab-inp:focus{outline:none;border-color:var(--a);}
.ttab-sel{background:rgba(255,255,255,.05);border:1px solid var(--input-border);color:var(--text-main);padding:6px 8px;font-size:10px;font-family:inherit;cursor:pointer;flex-shrink:0;}
.ttab-result{background:rgba(29,232,192,.04);border:1px solid rgba(29,232,192,.28);padding:10px 14px;margin:12px 0;font-family:'Courier New',monospace;font-size:12px;color:var(--fg);min-height:36px;line-height:1.8;}
.ttab-presets-lbl{font-size:9px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.ttab-presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.ttab-preset{background:none;border:1px solid rgba(255,255,255,.13);color:var(--text-muted);padding:4px 9px;font-size:9px;cursor:pointer;font-family:inherit;transition:all .18s;letter-spacing:.5px;}
.ttab-preset:hover{border-color:var(--a);color:var(--a);}
.ttab-note{font-size:9px;color:var(--text-muted);letter-spacing:.2px;line-height:1.7;border-top:1px solid rgba(255,255,255,.05);padding-top:8px;margin-top:4px;}
/* Échelle */
#scale-list{display:flex;flex-direction:column;}
.scale-item{display:grid;grid-template-columns:68px 1fr;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03);align-items:baseline;}
.scale-exp{font-family:'Courier New',monospace;color:var(--a);font-size:10px;text-align:right;opacity:.7;}
.scale-val{font-size:11px;color:var(--fg);margin-bottom:2px;}
.scale-ex{font-size:8.5px;color:var(--text-muted);line-height:1.5;}
#info-head{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-bottom:1px solid rgba(255,255,255,.12);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--a);}
#info-head button{background:none;border:none;color:var(--text-muted);cursor:pointer;line-height:0;padding:2px;}
#info-head button:hover{color:var(--a);}
#info-body{padding:6px 11px 9px;}
.info-row{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;padding:3px 0;}
.info-row span:first-child{color:var(--text-muted);}
.info-row span:last-child{color:var(--a);text-align:right;}
/* ═══ Tableau périodique ═══ */
.pt-wrap{overflow-x:auto;overflow-y:visible;padding-bottom:4px;}
.pt-grid{display:grid;grid-template-columns:repeat(18,1fr);gap:2px;min-width:506px;}
.pt-gap{grid-column:3/span 10;height:6px;}
.pt-sep-lbl{grid-column:1/-1;font-size:8px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin:6px 0 2px;}
.elem{border:1px solid rgba(255,255,255,.1);padding:2px 1px;text-align:center;cursor:pointer;transition:all .15s;position:relative;}
.elem:hover{border-color:var(--a);z-index:1;transform:scale(1.15);}
.elem-num{font-size:6px;color:var(--text-muted);line-height:1;display:block;}
.elem-sym{font-size:11px;font-weight:700;line-height:1.2;display:block;color:var(--fg);}
.elem-mass{font-size:6px;color:var(--text-muted);line-height:1;display:block;}
/* Catégories - teintes de fond */
.ec1{background:rgba(255,120,80,.12);} /* alcalins */
.ec2{background:rgba(255,200,80,.12);} /* alc-terreux */
.ec3{background:rgba(80,160,255,.12);} /* transitions */
.ec4{background:rgba(140,200,140,.12);} /* autres métaux */
.ec5{background:rgba(160,160,220,.12);} /* métalloïdes */
.ec6{background:rgba(100,220,180,.12);} /* non-métaux */
.ec7{background:rgba(220,120,220,.12);} /* halogènes */
.ec8{background:rgba(180,220,255,.12);} /* gaz nobles */
.ec9{background:rgba(255,180,100,.12);} /* lanthanides */
.ec10{background:rgba(200,120,80,.12);} /* actinides */
.pt-legend{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;font-size:8px;color:var(--text-muted);}
.pt-leg-item{display:flex;align-items:center;gap:3px;cursor:pointer;padding:2px 4px;border-radius:3px;border:1px solid transparent;transition:all .15s;user-select:none;}
.pt-leg-item:hover{border-color:rgba(255,255,255,.2);color:var(--fg);}
.pt-leg-item.pt-active{border-color:var(--a);color:var(--a);}
.pt-leg-dot{width:8px;height:8px;border:1px solid rgba(255,255,255,.15);}
.elem.pt-dim{opacity:.1;pointer-events:none;transform:none!important;}
.elem.pt-lit{outline:1.5px solid var(--a);box-shadow:0 0 7px rgba(29,232,192,.4);z-index:2;}
/* Info popup élément */
#pt-info{margin-top:10px;padding:10px 14px;background:rgba(29,232,192,.04);border:1px solid rgba(29,232,192,.25);font-size:11px;font-family:'Courier New',monospace;color:var(--fg);min-height:36px;display:none;}
#pt-info.vis{display:block;}
/* ═══ Calculatrice scientifique ═══ */
#calc-display{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);padding:10px 14px;margin-bottom:10px;text-align:right;}
#calc-expr{font-size:10px;color:var(--text-muted);font-family:'Courier New',monospace;min-height:14px;word-break:break-all;}
#calc-val{font-size:22px;color:var(--a);font-family:'Courier New',monospace;min-height:28px;}
.calc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.cb{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--fg);padding:7px 4px;font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s;text-align:center;}
.cb:hover{border-color:var(--a);background:rgba(29,232,192,.08);color:var(--a);}
.cb.cb-op{color:var(--a);background:rgba(29,232,192,.05);}
.cb.cb-eq{background:rgba(29,232,192,.15);border-color:var(--a);color:var(--a);font-size:14px;}
.cb.cb-eq:hover{background:rgba(29,232,192,.3);}
.cb.cb-ce{color:#f87171;border-color:rgba(248,113,113,.3);}
.cb.cb-ce:hover{background:rgba(248,113,113,.1);}
/* Iconbar : icône Mute active = barré */
#ic-mute.active svg{filter:opacity(.7);}
#ic-mute.active::after{
content:'';
position:absolute;
left:5px;right:5px;top:50%;height:2px;
background:#f87171;
box-shadow:0 0 4px #f87171;
transform:rotate(-30deg);
}
/* Modal Téléchargements (CV + Lettre + Portfolio) */
#dl-modal{
position:fixed;inset:0;z-index:165;
background:rgba(1,3,10,.92);
opacity:0;pointer-events:none;
transition:opacity .3s;
display:flex;align-items:center;justify-content:center;
padding:20px;
}
#dl-modal.open{opacity:1;pointer-events:all;}
#dl-box{
width:min(480px,92vw);
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:28px 30px;
position:relative;
}
.dl-title{
font-size:13px;font-weight:700;letter-spacing:5px;
color:var(--a);text-transform:uppercase;
margin-bottom:6px;
}
.dl-sub{
font-size:11px;letter-spacing:1px;
color:var(--text-muted);margin-bottom:22px;line-height:1.6;
}
#dl-close{
position:absolute;top:12px;right:12px;
width:28px;height:28px;
border:1px solid rgba(255,255,255,.2);
background:transparent;color:var(--text-muted);
cursor:pointer;font-size:13px;
display:flex;align-items:center;justify-content:center;
font-family:monospace;
}
#dl-close:hover{border-color:var(--a);color:var(--a);}
.dl-list{display:flex;flex-direction:column;gap:8px;}
.dl-item{
display:flex;align-items:center;gap:14px;
padding:14px 16px;
border:1px solid var(--panel-border);
background:rgba(255,255,255,.02);
text-decoration:none;
color:var(--fg);
transition:all .25s;
}
.dl-item:hover{
border-color:var(--a);
background:rgba(29,232,192,.05);
transform:translateX(4px);
}
.dl-icon{font-size:24px;}
.dl-info{flex:1;}
.dl-name{
font-size:13px;font-weight:700;letter-spacing:3px;
color:var(--a);text-transform:uppercase;
}
.dl-desc{
font-size:10px;color:var(--text-muted);
margin-top:3px;line-height:1.5;
}
.dl-arrow{
font-size:18px;color:var(--a);opacity:.6;
}
.dl-item:hover .dl-arrow{opacity:1;transform:translateY(3px);}
/* Badge constellation (triple-clic) */
.badge-stars{
position:fixed;inset:0;
pointer-events:none;z-index:9000;
}
.badge-star{
position:fixed;
width:3px;height:3px;
background:white;
border-radius:50%;
box-shadow:0 0 8px var(--a),0 0 16px var(--a);
animation:badgeStarBirth .6s ease-out forwards;
}
@keyframes badgeStarBirth{
0%{opacity:0;transform:scale(0);}
20%{opacity:1;transform:scale(2);}
100%{opacity:1;transform:scale(1);}
}
/* ═══════════════════════════════════════════
ADMIN MODAL — fonctionnel (visuel basique)
═══════════════════════════════════════════ */
#admin-modal{
position:fixed;inset:0;z-index:170;
background:rgba(1,3,10,.96);
opacity:0;pointer-events:none;
transition:opacity .3s;
overflow-y:auto;padding:20px 0;
}
#admin-modal.open{opacity:1;pointer-events:all;}
#admin-box{
max-width:1200px;
margin:0 auto;
background:var(--panel-bg);
border:1px solid var(--panel-border);
padding:22px 26px;
}
#admin-header{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:22px;padding-bottom:14px;
border-bottom:1px solid var(--panel-border);
flex-wrap:wrap;gap:10px;
}
#admin-title{
font-size:14px;font-weight:700;letter-spacing:5px;
color:var(--a);text-transform:uppercase;
}
#admin-actions{display:flex;gap:6px;flex-wrap:wrap;}
#admin-actions button{
font-family:'Courier New',monospace;
font-size:10px;letter-spacing:2px;
padding:6px 11px;
border:1px solid var(--input-border);
background:transparent;color:var(--fg);
cursor:pointer;text-transform:uppercase;
transition:all .2s;
}
#admin-actions button:hover{border-color:var(--a);color:var(--a);}
/* Login view */
#admin-login-view{max-width:380px;margin:0 auto;padding:20px 0;}
/* Data view */
#admin-stats{
display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;
}
.admin-stat{
flex:1;min-width:140px;
padding:10px 14px;
border:1px solid var(--panel-border);
background:rgba(29,232,192,.03);
}
.admin-stat .as-lbl{
font-size:8px;letter-spacing:3px;text-transform:uppercase;
color:rgba(255,255,255,.5);
}
.admin-stat .as-val{
font-size:22px;color:var(--a);
font-weight:200;letter-spacing:3px;margin-top:4px;
}
.admin-section{margin-bottom:24px;}
.admin-section h3{
font-size:11px;font-weight:700;letter-spacing:4px;
color:var(--a);text-transform:uppercase;
margin-bottom:10px;
}
.admin-section h3 .adm-cnt{
color:var(--text-muted);font-weight:400;letter-spacing:2px;
}
.admin-table-wrap{
overflow-x:auto;
border:1px solid var(--panel-border);
background:rgba(0,0,0,.2);
}
.admin-table{
width:100%;border-collapse:collapse;
font-family:'Courier New',monospace;
font-size:10px;color:var(--fg);
}
.admin-table th{
font-size:8px;letter-spacing:2px;text-transform:uppercase;
color:rgba(255,255,255,.5);
text-align:left;padding:8px 10px;
border-bottom:1px solid var(--panel-border);
background:rgba(0,0,0,.3);
white-space:nowrap;
}
.admin-table td{
padding:8px 10px;
border-bottom:1px solid rgba(255,255,255,.04);
vertical-align:top;
max-width:300px;
word-break:break-word;
}
.admin-table tr:hover{background:rgba(255,255,255,.02);}
.admin-table tr.unread td:first-child::before{
content:'●';color:var(--a);margin-right:5px;
}
.admin-table .btn-del{
background:transparent;
border:1px solid rgba(248,113,113,.5);
color:#f87171;
font-family:'Courier New',monospace;
font-size:9px;letter-spacing:1.5px;
padding:3px 8px;cursor:pointer;
text-transform:uppercase;
transition:all .15s;
}
.admin-table .btn-del:hover{
background:rgba(248,113,113,.12);
border-color:#f87171;
}
.admin-empty{
font-size:11px;color:rgba(255,255,255,.4);
font-style:italic;padding:16px;text-align:center;
}
#adm-status{
font-size:10px;letter-spacing:1px;
color:var(--a);opacity:.8;
margin-top:12px;min-height:16px;
}
#adm-status.err{color:#f87171;}
/* ═══════════════════════════════════
EASTER EGGS — NOUVEAUX OVERLAYS
═══════════════════════════════════ */
/* Morpheus — choix pilule */
.morpheus-overlay{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.88);animation:fadeIn .6s ease;}
.morpheus-text{color:#94a3b8;font-size:clamp(14px,2vw,20px);letter-spacing:2px;text-align:center;line-height:1.8;margin-bottom:40px;font-family:monospace;}
.morpheus-pills{display:flex;gap:40px;}
.morpheus-pill{padding:12px 32px;border:1px solid currentColor;background:transparent;font-family:monospace;font-size:13px;letter-spacing:2px;cursor:pointer;transition:background .2s,box-shadow .2s;}
.morpheus-pill.red{color:#dc2626;border-color:#dc2626;}
.morpheus-pill.red:hover{background:#7f1d1d33;box-shadow:0 0 20px #dc2626;}
.morpheus-pill.blue{color:#3b82f6;border-color:#3b82f6;}
.morpheus-pill.blue:hover{background:#1e3a5f33;box-shadow:0 0 20px #3b82f6;}
/* Sauron — l'œil */
.sauron-overlay{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1c0900 0%,#000 70%);animation:fadeIn .4s ease;}
.sauron-eye{width:min(60vw,400px);animation:sauronPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 30px #c2410c);}
@keyframes sauronPulse{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.08);}}
.sauron-text{color:#f97316;font-family:monospace;font-size:clamp(12px,2.5vw,22px);letter-spacing:4px;margin-top:30px;text-shadow:0 0 20px #f97316;animation:flickerText 1.5s ease-in-out infinite;}
@keyframes flickerText{0%,100%{opacity:1;}50%{opacity:.7;}}
/* Dune — sable */
.dune-overlay{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0a0500 40%,#1c0e00 100%);animation:fadeIn .8s ease;}
.dune-sand{position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(0deg,#7c4a00 0%,#a16207 60%,transparent 100%);mask:url('data:image/svg+xml,') no-repeat bottom/cover;}
.dune-text{position:relative;color:#fbbf24;font-family:monospace;font-size:clamp(13px,3vw,26px);letter-spacing:3px;text-align:center;text-shadow:0 0 30px #d97706;animation:fadeInUp .8s ease;}
/* HAL 9000 */
.hal-overlay{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,0,0,.92);animation:fadeIn .4s ease;}
.hal-eye{width:min(30vw,200px);margin-bottom:30px;animation:halGlow 1.8s ease-in-out infinite;}
@keyframes halGlow{0%,100%{filter:drop-shadow(0 0 15px #dc2626);}50%{filter:drop-shadow(0 0 35px #ef4444);}}
.hal-msg{color:#fca5a5;font-family:monospace;font-size:clamp(12px,2vw,18px);letter-spacing:1px;text-align:center;max-width:500px;line-height:1.7;}
/* Skynet */
.skynet-overlay{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.9);border:2px solid #dc2626;animation:fadeIn .3s ease;}
.skynet-title{color:#dc2626;font-family:monospace;font-size:clamp(16px,4vw,36px);letter-spacing:6px;text-shadow:0 0 20px #dc2626;margin-bottom:16px;animation:flickerText 1s infinite;}
.skynet-msg{color:#f87171;font-family:monospace;font-size:clamp(11px,1.5vw,14px);letter-spacing:2px;margin-bottom:24px;}
.skynet-cd{color:#fca5a5;font-family:monospace;font-size:clamp(14px,2.5vw,22px);letter-spacing:3px;animation:skynetBlink .5s step-start infinite;}
@keyframes skynetBlink{0%,100%{opacity:1;}50%{opacity:.3;}}
/* Hogwarts */
.hogwarts-flash{position:fixed;inset:0;z-index:9100;background:#fff;opacity:.9;animation:hwFlash .4s ease forwards;}
@keyframes hwFlash{0%{opacity:.9;}100%{opacity:0;pointer-events:none;}}
.hogwarts-msg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9100;color:#f0e68c;font-family:monospace;font-size:clamp(14px,3vw,28px);letter-spacing:3px;text-align:center;text-shadow:0 0 20px #fde68a, 0 0 40px #d97706;animation:fadeInUp .5s ease;}
.hw-lightning{color:#fde047;font-size:1.4em;margin-right:8px;}
.hw-spark{position:fixed;z-index:9090;width:4px;height:4px;background:#fde047;border-radius:50%;box-shadow:0 0 8px #fde047;animation:hwFall linear forwards;}
@keyframes hwFall{0%{top:-10px;opacity:1;}100%{top:110vh;opacity:0;}}
/* Predator — infrarouge thermique */
.predator-overlay{position:fixed;inset:0;z-index:9100;background:linear-gradient(135deg,rgba(30,0,0,.7) 0%,rgba(0,10,30,.7) 50%,rgba(30,0,0,.7) 100%);backdrop-filter:hue-rotate(140deg) saturate(3) contrast(1.4);animation:fadeIn .3s ease,predatorScan 4s linear;}
@keyframes predatorScan{0%{background-position:0 0;}100%{background-position:0 100%;}}
.predator-msg{position:fixed;bottom:15%;left:50%;transform:translateX(-50%);z-index:9101;color:#4ade80;font-family:monospace;font-size:clamp(12px,2vw,18px);letter-spacing:3px;text-shadow:0 0 10px #4ade80;animation:fadeIn .5s ease;}
/* Terminator — vision T-800 */
.terminator-overlay{position:fixed;inset:0;z-index:9100;background:rgba(20,0,0,.85);animation:fadeIn .3s ease;pointer-events:auto;}
.term-hud{position:absolute;top:15%;left:50%;transform:translateX(-50%);color:#ef4444;font-family:monospace;font-size:clamp(10px,1.5vw,13px);letter-spacing:2px;line-height:2;}
.term-line{animation:termScan .3s ease both;}
.term-line:nth-child(2){animation-delay:.3s;}
.term-line:nth-child(3){animation-delay:.6s;}
@keyframes termScan{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
.term-crosshair{position:fixed;width:40px;height:40px;border:1.5px solid #ef4444;border-radius:50%;pointer-events:none;z-index:9102;box-shadow:0 0 10px #ef4444;transition:left .05s,top .05s;}
.term-crosshair::before,.term-crosshair::after{content:'';position:absolute;background:#ef4444;opacity:.7;}
.term-crosshair::before{width:1px;height:12px;left:50%;top:-14px;}
.term-crosshair::after{width:12px;height:1px;top:50%;left:-14px;}
/* R2-D2 */
.r2d2-msg{position:fixed;bottom:12%;left:50%;transform:translateX(-50%);z-index:9100;color:#60a5fa;font-family:monospace;font-size:clamp(11px,1.8vw,16px);letter-spacing:2px;text-align:center;text-shadow:0 0 12px #3b82f6;animation:fadeInUp .4s ease;}
/* Shoggoth — texte ancien */
.shoggoth-overlay{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(0,2,0,.94);animation:fadeIn .5s ease;}
.shoggoth-line{color:#4ade80;font-family:monospace;font-size:clamp(11px,1.8vw,16px);letter-spacing:3px;opacity:0;text-shadow:0 0 8px #16a34a;animation:shoggothFade 1s ease forwards;}
.shoggoth-line:nth-child(1){animation-delay:.2s;}
.shoggoth-line:nth-child(2){animation-delay:.6s;}
.shoggoth-line:nth-child(3){animation-delay:1s;}
.shoggoth-line:nth-child(4){animation-delay:1.4s;}
.shoggoth-line:nth-child(5){animation-delay:1.8s;}
.shoggoth-line:nth-child(6){animation-delay:2.2s;}
@keyframes shoggothFade{0%{opacity:0;letter-spacing:6px;}100%{opacity:.85;letter-spacing:3px;}}
/* Monolith — 2001 */
.evt-monolith{position:fixed;z-index:9050;animation:monolithApp 2s ease-in-out forwards;}
@keyframes monolithApp{0%{opacity:0;transform:scaleY(.1);}30%{opacity:1;transform:scaleY(1);}80%{opacity:1;}100%{opacity:0;}}
/* Death Star */
.evt-deathstar{position:fixed;z-index:9050;opacity:.7;transition:left 8s linear;filter:drop-shadow(0 0 8px #334155);}
/* Enterprise */
.evt-enterprise{position:fixed;z-index:9050;opacity:.6;transition:left 9s linear;filter:drop-shadow(0 0 6px #3b82f6);}
/* Deep Thought */
.deepthought-msg{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.9);animation:fadeIn .6s ease;}
.dt-big{color:var(--a,#1de8c0);font-family:monospace;font-size:clamp(60px,15vw,140px);font-weight:900;letter-spacing:10px;text-shadow:0 0 40px currentColor;animation:dtPop .4s cubic-bezier(.22,.61,.36,1) .8s both;}
.dt-small{color:#64748b;font-family:monospace;font-size:clamp(10px,1.5vw,13px);letter-spacing:2px;margin:8px 0;}
@keyframes dtPop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
/* Thèmes ambiants — boutons sélecteur */
.theme-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.theme-btn{padding:5px 12px;border:1px solid var(--input-border);background:transparent;color:var(--text-muted);font-family:monospace;font-size:10px;letter-spacing:1px;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s;border-radius:0;}
.theme-btn:hover{border-color:var(--a);color:var(--a);}
.theme-btn.active{border-color:var(--a);color:var(--a);box-shadow:0 0 8px var(--a);}
.ambient-vol-row{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--text-muted);}
.ambient-vol-row .p-slider{flex:1;accent-color:var(--a);}
.ambient-vol-row #ambient-vol-val{font-size:10px;letter-spacing:1px;min-width:30px;text-align:right;}
/* ════════════════════════════════════════════════════════════
DM — Messages directs entre utilisateurs
════════════════════════════════════════════════════════════ */
#dm-modal{
display:none;
position:fixed;
inset:0;
z-index:180;
background:rgba(0,2,10,.82);
align-items:center;
justify-content:center;
}
#dm-modal.open{display:flex;}
#dmbox{
position:relative;
width:min(96vw,500px);
height:min(90vh,600px);
display:flex;
flex-direction:column;
background:var(--bg,#000a12);
border:1px solid rgba(29,232,192,.3);
box-shadow:0 0 60px rgba(29,232,192,.12),0 0 120px rgba(0,0,0,.9);
overflow:hidden;
}
#dm-close{
position:absolute;top:10px;right:10px;
background:none;border:none;color:var(--text-muted,#64748b);
cursor:pointer;z-index:2;padding:4px;
transition:color .2s;
}
#dm-close:hover{color:var(--a,#1de8c0);}
/* Badge non-lus */
.dm-badge{
display:inline-block;
background:var(--a,#1de8c0);
color:#000;
font-size:8px;
font-weight:700;
letter-spacing:.5px;
padding:1px 5px;
border-radius:10px;
margin-left:6px;
}
/* ── Panneau conversations ── */
#dm-convs-panel{
display:flex;
flex-direction:column;
height:100%;
}
.dm-panel-title{
padding:18px 20px 12px;
font-size:11px;
letter-spacing:3px;
color:var(--a,#1de8c0);
text-transform:uppercase;
border-bottom:1px solid rgba(29,232,192,.1);
}
.dm-search-row{padding:10px 16px;}
.dm-search-row input{
width:100%;
background:rgba(29,232,192,.05);
border:1px solid rgba(29,232,192,.2);
color:var(--text,#e2e8f0);
font-family:monospace;
font-size:11px;
padding:7px 12px;
outline:none;
transition:border-color .2s;
}
.dm-search-row input:focus{border-color:var(--a,#1de8c0);}
.dm-search-results{
margin:0 16px;
border:1px solid rgba(29,232,192,.2);
background:rgba(0,10,18,.95);
max-height:140px;
overflow-y:auto;
}
.dm-sr-row{
padding:8px 12px;
font-size:11px;
color:var(--text,#e2e8f0);
cursor:pointer;
transition:background .15s;
letter-spacing:.5px;
}
.dm-sr-row:hover{background:rgba(29,232,192,.08);color:var(--a,#1de8c0);}
.dm-sr-empty{padding:8px 12px;font-size:10px;color:var(--text-muted,#64748b);letter-spacing:1px;}
.dm-convs-list{flex:1;overflow-y:auto;padding:6px 0;}
.dm-conv-row{
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
padding:10px 16px;
cursor:pointer;
border-bottom:1px solid rgba(29,232,192,.05);
transition:background .15s;
gap:2px 8px;
}
.dm-conv-row:hover{background:rgba(29,232,192,.06);}
.dm-conv-main{display:flex;align-items:center;gap:6px;}
.dm-conv-name{font-size:11px;letter-spacing:.5px;color:var(--text,#e2e8f0);font-weight:600;}
.dm-conv-preview{grid-column:1;font-size:9px;color:var(--text-muted,#64748b);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-conv-time{grid-column:2;grid-row:1/3;font-size:8px;color:var(--text-muted,#64748b);align-self:center;letter-spacing:.5px;text-align:right;}
.dm-conv-badge{margin-left:auto;}
.dm-empty{
padding:24px 16px;
font-size:10px;
color:var(--text-muted,#64748b);
letter-spacing:1px;
text-align:center;
line-height:1.8;
}
/* ── Thread ── */
#dm-thread-panel{
display:flex;
flex-direction:column;
height:100%;
}
.dm-thread-header{
display:flex;
align-items:center;
gap:12px;
padding:12px 16px;
border-bottom:1px solid rgba(29,232,192,.1);
}
.dm-back-btn{
background:none;border:1px solid rgba(29,232,192,.25);
color:var(--text-muted,#64748b);font-family:monospace;
font-size:9px;letter-spacing:1px;padding:4px 10px;
cursor:pointer;transition:all .2s;
}
.dm-back-btn:hover{border-color:var(--a,#1de8c0);color:var(--a,#1de8c0);}
.dm-thread-name{
font-size:11px;letter-spacing:2px;color:var(--a,#1de8c0);
text-transform:uppercase;
}
.dm-thread-msgs{
flex:1;
overflow-y:auto;
padding:12px 14px;
display:flex;
flex-direction:column;
gap:8px;
}
.dm-msg{display:flex;flex-direction:column;max-width:78%;align-self:flex-start;}
.dm-mine{align-self:flex-end;align-items:flex-end;}
.dm-msg-bubble{
padding:8px 12px;
font-size:11px;
line-height:1.6;
color:var(--text,#e2e8f0);
background:rgba(29,232,192,.08);
border:1px solid rgba(29,232,192,.15);
word-break:break-word;
white-space:pre-wrap;
}
.dm-mine .dm-msg-bubble{
background:rgba(29,232,192,.16);
border-color:rgba(29,232,192,.3);
color:#d1fef6;
}
.dm-msg-ts{font-size:8px;color:var(--text-muted,#64748b);letter-spacing:.5px;margin-top:2px;padding:0 2px;}
/* ── Compose ── */
.dm-compose{
display:flex;
gap:8px;
padding:10px 14px;
border-top:1px solid rgba(29,232,192,.1);
background:rgba(0,2,10,.5);
}
.dm-compose-ta{
flex:1;
background:rgba(29,232,192,.04);
border:1px solid rgba(29,232,192,.2);
color:var(--text,#e2e8f0);
font-family:monospace;
font-size:11px;
padding:8px 10px;
resize:none;
outline:none;
transition:border-color .2s;
line-height:1.5;
}
.dm-compose-ta:focus{border-color:var(--a,#1de8c0);}
.dm-send-btn{
background:rgba(29,232,192,.1);
border:1px solid rgba(29,232,192,.3);
color:var(--a,#1de8c0);
cursor:pointer;
padding:0 14px;
transition:all .2s;
display:flex;align-items:center;
}
.dm-send-btn:hover{background:rgba(29,232,192,.2);box-shadow:0 0 12px rgba(29,232,192,.2);}
.dm-thread-st{
padding:2px 14px 6px;
font-size:9px;
letter-spacing:1px;
color:var(--text-muted,#64748b);
min-height:14px;
}
/* ── ACCOUNT UNIVERS ───────────────────────────── */
.ac-topics-hint{font-size:9px;letter-spacing:1px;color:var(--text-muted,#64748b);margin-bottom:10px;line-height:1.5;}
#ac-topics-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.ac-topics-row{display:flex;flex-wrap:wrap;gap:5px;}
.ac-chip{
padding:4px 10px;border:1px solid rgba(255,255,255,.13);cursor:pointer;
font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
color:rgba(255,255,255,.4);transition:all .18s;background:transparent;
font-family:'Courier New',monospace;border-radius:2px;user-select:none;
}
.ac-chip:hover{border-color:rgba(29,232,192,.5);color:rgba(29,232,192,.7);}
.ac-chip.sel{border-color:var(--a,#1de8c0);color:var(--a,#1de8c0);background:rgba(29,232,192,.07);}
/* ── CGU MODAL ─────────────────────────────────── */
#cgu-modal{
display:none;position:fixed;inset:0;z-index:9100;
background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
align-items:center;justify-content:center;
padding:20px;
}
#cgu-modal.open{display:flex;}
#cgu-box{
background:var(--bg,#0a0a0f);
border:1px solid rgba(29,232,192,.25);
border-radius:10px;
width:min(680px,100%);
max-height:85vh;
display:flex;flex-direction:column;
box-shadow:0 0 40px rgba(29,232,192,.08),0 8px 32px rgba(0,0,0,.6);
}
.cgu-head{
display:flex;align-items:center;justify-content:space-between;
padding:18px 20px 14px;
border-bottom:1px solid rgba(29,232,192,.12);
flex-shrink:0;
}
.cgu-title{
font-size:11px;letter-spacing:4px;text-transform:uppercase;
color:var(--a,#1de8c0);font-weight:700;
}
.cgu-close{
background:none;border:none;cursor:pointer;color:var(--text,#e2e8f0);
opacity:.5;transition:opacity .2s;padding:4px;line-height:0;
}
.cgu-close:hover{opacity:1;}
.cgu-meta{
padding:8px 20px;
font-size:9px;letter-spacing:2px;text-transform:uppercase;
color:var(--text-muted,#64748b);
border-bottom:1px solid rgba(255,255,255,.05);
flex-shrink:0;
}
.cgu-body{
overflow-y:auto;padding:16px 20px 20px;flex:1;
scrollbar-width:thin;scrollbar-color:rgba(29,232,192,.2) transparent;
}
.cgu-body::-webkit-scrollbar{width:4px;}
.cgu-body::-webkit-scrollbar-track{background:transparent;}
.cgu-body::-webkit-scrollbar-thumb{background:rgba(29,232,192,.2);border-radius:2px;}
.cgu-section{margin-bottom:18px;}
.cgu-section-title{
font-size:10px;letter-spacing:2px;text-transform:uppercase;
color:var(--a,#1de8c0);margin-bottom:7px;font-weight:600;
}
.cgu-section p{
font-size:11px;line-height:1.7;color:var(--text,#e2e8f0);
opacity:.8;margin:0 0 6px;
}
.cgu-list{
margin:6px 0 6px 16px;padding:0;
list-style:none;
}
.cgu-list li{
font-size:11px;line-height:1.7;color:var(--text,#e2e8f0);
opacity:.8;padding-left:12px;position:relative;margin-bottom:2px;
}
.cgu-list li::before{
content:'›';position:absolute;left:0;color:var(--a,#1de8c0);
}
.cgu-code{
font-family:monospace;font-size:10px;
background:rgba(29,232,192,.06);
border:1px solid rgba(29,232,192,.15);
border-radius:3px;padding:1px 5px;
color:var(--a,#1de8c0);
}
.cgu-link{
color:var(--a,#1de8c0);text-decoration:none;
border-bottom:1px solid rgba(29,232,192,.3);
transition:border-color .2s;
}
.cgu-link:hover{border-color:var(--a,#1de8c0);}