/* ============================================================
   CISCO // INTERFACE NEURALE — style cyberpunk
   ============================================================ */
:root{
  --accent-rgb:0,234,255;                 /* COULEUR VARIABLE DU SQUELETTE */
  --cyan:rgb(var(--accent-rgb));
  --cyan-soft:#7df6ff;
  --red:#ff3b3b;
  --bg0:#00040a;
  --bg1:#03101a;
  --line:rgba(var(--accent-rgb),.35);
  --glow:0 0 12px rgba(var(--accent-rgb),.6);
  --title:"Orbitron","Rajdhani","Segoe UI",sans-serif;
  --font:"Rajdhani","Segoe UI",Tahoma,sans-serif;
  --mono:"Share Tech Mono","Consolas","Courier New",monospace;
  /* Palette JARVIS (rouge/bleu) */
  --jred:#ff0033; --jred2:#8a0020; --jredshadow:#ff003388;
  --jblue:#00d4ff; --jblueshadow:#00d4ff88;
  --jcyan:#00ffcc; --jorange:#ff6600;
  --panel:rgba(5,5,16,.72); --panelborder:#1a1a3a;
  --text:#c0c8e0; --textdim:#5a6488;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:#00040a;
  color:var(--cyan);
  overflow:hidden;
  letter-spacing:.5px;
  position:relative;
}

/* ---------- Fond animé : Espace plein écran ---------- */
#galaxy{position:fixed; inset:0; z-index:0; pointer-events:none}

/* ---------- Couches d'ambiance ---------- */
.grid-bg{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 45%, #000 35%, transparent 80%);
  animation:gridmove 18s linear infinite;
}
@keyframes gridmove{from{background-position:0 0}to{background-position:44px 44px}}

.scanlines{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 4px);
  mix-blend-mode:overlay; opacity:.5;
}
.vignette{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  box-shadow:inset 0 0 220px rgba(0,0,0,.9);
}
#particles{position:fixed; inset:0; z-index:3; pointer-events:none}

/* ---------- Crochets de coin ---------- */
.corner{position:fixed; width:60px; height:60px; z-index:20; border:2px solid var(--cyan); filter:drop-shadow(var(--glow))}
.corner.tl{top:14px; left:14px; border-right:0; border-bottom:0}
.corner.tr{top:14px; right:14px; border-left:0; border-bottom:0}
.corner.bl{bottom:14px; left:14px; border-right:0; border-top:0}
.corner.br{bottom:14px; right:14px; border-left:0; border-top:0}

/* ---------- Barre supérieure ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:62px; z-index:25;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 90px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(0,20,28,.7), transparent);
}
.brand{font-size:26px; font-weight:700; text-shadow:var(--glow); letter-spacing:4px}
.brand .logo{color:var(--red); animation:pulse 2s infinite}
.brand .sub{font-size:11px; letter-spacing:3px; color:var(--cyan-soft); opacity:.7; margin-left:10px}
.topstat{font-size:12px; font-family:var(--mono); color:var(--cyan-soft); display:flex; align-items:center; gap:8px}
.topstat .sep{opacity:.4}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.ok{background:#19ff8a; box-shadow:0 0 8px #19ff8a; animation:pulse 1.6s infinite}

/* ---------- Panneaux latéraux (style JARVIS) ---------- */
.panel{
  position:fixed; top:84px; bottom:148px; width:250px; z-index:15;
  display:flex; flex-direction:column; gap:10px;
}
.panel.left{left:18px}
.panel.right{right:320px}   /* collé contre le côté gauche de la TchatBox */

.panel-block{
  background:var(--panel); border:1px solid var(--panelborder);
  padding:12px; position:relative; overflow:hidden; backdrop-filter:blur(3px);
}
.panel-block::before{content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--jred), transparent)}
.panel-block.blue-accent::before{background:linear-gradient(90deg, transparent, var(--jblue), transparent)}
.panel-block.grow{flex:1; display:flex; flex-direction:column; min-height:0}
.panel-title{font-family:var(--mono); font-size:9px; color:var(--textdim);
  letter-spacing:3px; margin-bottom:10px; text-transform:uppercase}

/* barres de stats */
.stat-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; font-family:var(--mono)}
.stat-name{font-size:10px; color:var(--textdim); letter-spacing:1px}
.stat-bar-wrap{flex:1; margin:0 8px; height:4px; background:#111; border-radius:2px; overflow:hidden}
.stat-bar{display:block; height:100%; width:0; border-radius:2px; transition:width .6s ease}
.stat-bar.cpu{background:linear-gradient(90deg,var(--jred2),var(--jred)); box-shadow:0 0 6px var(--jred)}
.stat-bar.ram{background:linear-gradient(90deg,#006699,var(--jblue)); box-shadow:0 0 6px var(--jblue)}
.stat-bar.gpu{background:linear-gradient(90deg,#006633,var(--jcyan)); box-shadow:0 0 6px var(--jcyan)}
.stat-bar.net{background:linear-gradient(90deg,#994400,var(--jorange)); box-shadow:0 0 6px var(--jorange)}
.stat-val{font-size:10px; color:var(--text); min-width:36px; text-align:right}

/* couleurs néon */
.nred{color:var(--jred); text-shadow:0 0 8px var(--jred)}
.nblue{color:var(--jblue); text-shadow:0 0 8px var(--jblue)}
.ncyan{color:var(--jcyan); text-shadow:0 0 8px var(--jcyan)}
.norange{color:var(--jorange); text-shadow:0 0 8px var(--jorange)}
.ngreen{color:#00ff66; text-shadow:0 0 8px #00ff66}

.readout{font-family:var(--mono); font-size:11px; line-height:1.9; color:var(--text)}
.readout b{color:var(--text)}

/* modules */
.mod-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mod-btn{background:#08080f; border:1px solid var(--panelborder); padding:8px 4px;
  text-align:center; cursor:pointer; font-family:var(--mono); font-size:9px;
  color:var(--textdim); transition:.2s; text-decoration:none; letter-spacing:1px}
.mod-btn:hover{border-color:var(--jred); color:var(--jred); background:#ff003310; box-shadow:0 0 12px var(--jredshadow)}
.mod-btn .mi{font-size:16px; display:block; margin-bottom:3px}

.log{font-family:var(--mono); font-size:11px; line-height:1.6; flex:1; overflow:hidden; color:var(--text)}
.log p{margin-bottom:5px; opacity:0; animation:fadein .4s forwards}
.log .t{color:var(--textdim)}
.log .r{color:var(--jred)}

/* ---------- Scène centrale ---------- */
.stage{position:fixed; top:0; bottom:0; left:218px; right:620px; z-index:10; display:flex; align-items:center; justify-content:center}
@media (max-width:1100px){ .stage{left:0; right:0} .vwidget{left:50% !important} }
.head{
  width:330px; z-index:12;
  filter:drop-shadow(0 0 12px rgba(80,200,255,.55)) drop-shadow(0 0 34px rgba(70,170,255,.30));
  animation:float 6s ease-in-out infinite;
}
body.thinking .head{filter:drop-shadow(0 0 16px rgba(120,210,255,.9)) drop-shadow(0 0 38px rgba(70,170,255,.45)); animation:float 6s ease-in-out infinite, shake 2.4s infinite}

.rings{position:absolute; width:560px; height:560px; display:flex; align-items:center; justify-content:center}
.ring{position:absolute; border-radius:50%; border:1px solid rgba(255,59,59,.35)}
.ring.r1{width:560px; height:560px; border-top-color:var(--red); border-bottom-color:transparent; animation:spin 14s linear infinite}
.ring.r2{width:460px; height:460px; border-left-color:#ff7a5a; border-right-color:transparent; opacity:.75; animation:spin 10s linear infinite reverse}
.ring.r3{width:380px; height:380px; border-style:dotted; border-color:rgba(255,59,59,.45); animation:spin 22s linear infinite}
.ring.dashed{width:620px; height:620px; border:2px dashed rgba(255,59,59,.2); animation:spin 40s linear infinite}
.sweep{position:absolute; width:560px; height:560px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,59,59,.22) 40deg, transparent 80deg);
  animation:spin 4s linear infinite}

.fire-halo{position:absolute; width:600px; height:840px; z-index:11; pointer-events:none;
  opacity:0; transition:opacity .6s ease; mix-blend-mode:screen}
.fire-halo.lit{opacity:1}
.reactor{position:absolute; width:120px; height:120px; border-radius:50%; bottom:30%; z-index:11;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, #5ec8ff 26%, rgba(70,170,255,.28) 58%, transparent 75%);
  filter:blur(4px); animation:reactor 2.2s ease-in-out infinite}

.ticks{position:absolute; width:600px; height:600px; pointer-events:none}
.ticks i{position:absolute; left:50%; top:0; width:2px; height:12px; background:var(--red); transform-origin:1px 300px; opacity:.55}

.status-tag{
  position:absolute; bottom:14%; font-family:var(--mono); font-size:13px; letter-spacing:3px;
  color:var(--jred); padding:5px 16px; border:1px solid rgba(255,0,51,.5);
  background:rgba(20,0,6,.45); text-shadow:0 0 12px var(--jred);
}
body.thinking .status-tag{color:#fff; border-color:var(--jred); box-shadow:0 0 14px var(--jredshadow)}
/* CISCO parle : la tete et le reacteur s'illuminent */
body.speaking .head{filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 48px rgba(80,200,255,.75))}
body.speaking .reactor{animation:reactor .5s ease-in-out infinite}
body.speaking .status-tag{color:#fff; border-color:var(--jblue); box-shadow:0 0 16px var(--jblueshadow)}

/* ---------- Barre de contrôle vocal (style JARVIS) ---------- */
.dock{
  position:fixed; left:18px; right:18px; bottom:6px; height:124px; z-index:25;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  border-top:1px solid var(--panelborder);
  background:linear-gradient(0deg, rgba(5,5,16,.86), rgba(5,5,16,.12));
  backdrop-filter:blur(4px); padding:0 30px;
}
/* zone saisie (gauche) */
.text-input-wrap{display:flex; align-items:center; gap:10px; max-width:440px}
.dock .prompt{font-family:var(--mono); color:var(--jred); font-size:13px; text-shadow:0 0 8px var(--jred); white-space:nowrap}
.dock input{flex:1; background:#0a0a15; border:1px solid var(--panelborder); outline:0;
  color:var(--text); font-family:var(--mono); font-size:12px; padding:9px 12px; transition:border-color .2s}
.dock input:focus{border-color:var(--jblue); box-shadow:0 0 12px var(--jblueshadow)}
.dock input::placeholder{color:var(--textdim)}
#send{background:transparent; border:1px solid var(--jred); color:var(--jred); border-radius:4px;
  font-family:var(--mono); font-size:10px; letter-spacing:2px; padding:8px 12px; cursor:pointer; transition:.2s; white-space:nowrap}
#send:hover{background:#ff003315; box-shadow:0 0 14px var(--jredshadow)}

/* bouton micro (centre) */
.voice-btn-wrap{display:flex; flex-direction:column; align-items:center; gap:6px}
#center-clock{font-family:var(--title); font-size:19px; font-weight:900; color:var(--jred);
  text-shadow:0 0 24px var(--jred); letter-spacing:3px}
.voice-btn{width:64px; height:64px; border-radius:50%; border:3px solid var(--jred);
  background:radial-gradient(circle,#1a0005 0%,#000 70%); cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; transition:.3s;
  box-shadow:0 0 20px var(--jredshadow), inset 0 0 20px rgba(255,0,0,.04)}
.voice-btn:hover{box-shadow:0 0 40px var(--jred), inset 0 0 30px rgba(255,0,0,.08); border-color:#ff3355}
.voice-btn svg{width:30px; height:30px; color:var(--jred); transition:color .3s}
.voice-btn.active{border-color:var(--jblue); box-shadow:0 0 55px var(--jblue),0 0 110px var(--jblueshadow); animation:btn-pulse .6s infinite alternate}
.voice-btn.active svg{color:var(--jblue)}
.voice-ring{position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--jred); opacity:.5; animation:spin 4s linear infinite}
.voice-ring2{position:absolute; inset:-15px; border-radius:50%; border:1px dashed rgba(255,0,51,.3); animation:spin 8s linear infinite reverse}
.voice-label{font-family:var(--mono); font-size:9px; color:var(--textdim); letter-spacing:3px; text-transform:uppercase}
#voice-text.listening{color:var(--jred); text-shadow:0 0 12px var(--jred)}
#voice-text.processing{color:var(--jcyan); text-shadow:0 0 12px var(--jcyan)}

/* droite : voix TTS */
.dock-right{display:flex; justify-content:flex-end; align-items:center}
.voicebtn{font-size:18px; padding:6px 10px; background:transparent; border:1px solid var(--jblue);
  color:var(--jblue); cursor:pointer; border-radius:6px; transition:.2s}
.voicebtn:hover{background:#00d4ff15; box-shadow:0 0 12px var(--jblueshadow)}
.voicebtn.off{border-color:var(--jred); color:var(--jred)}
@keyframes btn-pulse{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- Animations ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes reactor{0%,100%{opacity:.55; transform:scale(.92)}50%{opacity:1; transform:scale(1.08)}}
@keyframes fadein{to{opacity:1}}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

/* ---------- Police titres (Orbitron) ---------- */
.brand, .panel h3, .status-tag, .dock button{font-family:var(--title)}

/* ---------- Bouton sélecteur de couleur du squelette ---------- */
.themebtn{
  width:24px; height:24px; padding:0; border:1px solid var(--line);
  border-radius:50%; background:transparent; cursor:pointer; overflow:hidden;
  box-shadow:var(--glow); vertical-align:middle; transition:.2s;
}
.themebtn:hover{transform:scale(1.15)}
.themebtn::-webkit-color-swatch-wrapper{padding:0}
.themebtn::-webkit-color-swatch{border:none; border-radius:50%}
.themebtn::-moz-color-swatch{border:none; border-radius:50%}

/* ---------- Mode LOCAL / ONLINE ---------- */
.mode-btn{font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:4px 9px; border-radius:4px; cursor:pointer; background:transparent; transition:.2s}
.mode-online{border:1px solid var(--jblue); color:var(--jblue)}
.mode-online:hover{background:#00d4ff15; box-shadow:0 0 10px var(--jblueshadow)}
.mode-local{border:1px solid #00ff66; color:#00ff66}
.mode-local:hover{box-shadow:0 0 10px #00ff6688}

/* ---------- Bouton modules + canvases des panneaux ---------- */
.open-modules{width:100%; padding:10px; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:1px;
  background:#08080f; border:1px solid var(--jblue); color:var(--jblue); transition:.2s}
.open-modules:hover{background:#00d4ff12; box-shadow:0 0 14px var(--jblueshadow)}
#spectrum, #globe{width:100%; display:block; margin-top:4px}

/* ---------- Overlays ---------- */
.overlay{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(0,2,8,.82); backdrop-filter:blur(4px)}
.overlay.hidden{display:none}
.overlay-box{width:min(880px,92vw); max-height:84vh; overflow:auto; background:var(--panel);
  border:1px solid var(--panelborder); box-shadow:0 0 40px rgba(0,0,0,.7)}
.overlay-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
  border-bottom:1px solid var(--panelborder); font-family:var(--title); letter-spacing:2px; color:var(--jblue)}
.overlay-head button, .mframe-head button{background:transparent; border:1px solid var(--jred); color:var(--jred);
  font-family:var(--mono); font-size:11px; padding:5px 10px; cursor:pointer; border-radius:4px; transition:.2s}
.overlay-head button:hover, .mframe-head button:hover{background:#ff003318}

.modules-grid-full{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; padding:20px}
.mcard{position:relative; aspect-ratio:1/.85; background:#08080f; border:1px solid var(--panelborder);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; color:var(--text); font-family:var(--mono); font-size:11px; letter-spacing:1px; transition:.2s}
.mcard:hover{border-color:var(--jred); color:var(--jred); background:#ff00330d; box-shadow:0 0 16px var(--jredshadow); transform:translateY(-2px)}
.mcard .mic{font-size:30px}
.mcard.locked{opacity:.4; cursor:not-allowed; filter:grayscale(1)}
.mcard.locked:hover{border-color:var(--panelborder); color:var(--text); background:#08080f; box-shadow:none; transform:none}
.mcard .mlock{position:absolute; top:6px; right:8px; font-size:12px}

#module-frame{flex-direction:column; padding:14px}
.mframe-head{width:min(1200px,96vw); display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; background:var(--panel); border:1px solid var(--panelborder); border-bottom:0;
  font-family:var(--title); letter-spacing:2px; color:var(--jblue)}
#mf-iframe{width:min(1200px,96vw); height:78vh; border:1px solid var(--panelborder); background:#000}

/* ---------- Bouton engrenage (paramètres) ---------- */
.cogbtn{
  width:26px; height:26px; padding:0; border:1px solid var(--jblue);
  border-radius:50%; background:transparent; color:var(--jblue); cursor:pointer;
  font-size:14px; line-height:1; box-shadow:0 0 10px var(--jblueshadow); transition:.25s;
}
.cogbtn:hover{transform:rotate(90deg) scale(1.12); background:#00d4ff15}

/* ---------- Panneau PARAMÈTRES (réutilise .overlay) ---------- */
.settings-box{width:min(560px,92vw)}
.settings-body{padding:18px 22px}
.seg{margin-bottom:24px}
.seg .panel-title{font-size:10px; color:var(--jblue); letter-spacing:3px; margin-bottom:14px;
  border-bottom:1px solid var(--panelborder); padding-bottom:8px}

.ctl{display:block; font-family:var(--mono); font-size:11px; letter-spacing:1px;
  color:var(--text); margin-bottom:15px}
.ctl > span{float:right; color:var(--jcyan); text-shadow:0 0 8px var(--jcyan)}

.choices{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap}
.chip{background:#08080f; border:1px solid var(--panelborder); color:var(--textdim);
  font-family:var(--mono); font-size:11px; letter-spacing:2px; padding:7px 13px;
  cursor:pointer; transition:.2s}
.chip:hover{border-color:var(--jblue); color:var(--jblue)}
.chip.active{border-color:var(--jblue); color:#02121a; background:var(--jblue); box-shadow:0 0 12px var(--jblueshadow)}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:5px;
  margin-top:11px; background:#111; border:1px solid var(--panelborder); border-radius:3px;
  outline:0; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--jblue); box-shadow:0 0 10px var(--jblueshadow); cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border:0; border-radius:50%;
  background:var(--jblue); box-shadow:0 0 10px var(--jblueshadow); cursor:pointer}

.sel{width:100%; margin-top:9px; background:#0a0a15; border:1px solid var(--panelborder);
  color:var(--text); font-family:var(--mono); font-size:12px; padding:9px 10px; outline:0; cursor:pointer}
.sel:focus{border-color:var(--jblue); box-shadow:0 0 12px var(--jblueshadow)}
.sel option{background:#0a0a15; color:var(--text)}

.wbtn{width:100%; margin-top:9px; background:#08080f; border:1px solid var(--jblue);
  color:var(--jblue); font-family:var(--mono); font-size:11px; letter-spacing:2px;
  padding:10px; cursor:pointer; transition:.2s}
.wbtn:hover{background:#00d4ff12; box-shadow:0 0 14px var(--jblueshadow)}

.swatch{width:26px; height:26px; padding:0; border-radius:50%; border:1px solid var(--panelborder);
  background:var(--s); cursor:pointer; transition:.2s; box-shadow:0 0 9px var(--s)}
.swatch:hover{transform:scale(1.22)}

/* ---------- Néon supplémentaire (jaune / violet) ---------- */
.nyellow{color:#ffe14b; text-shadow:0 0 8px #ffe14b}
.npurple{color:#b14bff; text-shadow:0 0 8px #b14bff}

/* ---------- Widget MÉTÉO ---------- */
.weather-block .wx{display:flex; align-items:center; gap:12px}
.wx-icon{font-size:36px; line-height:1; filter:drop-shadow(0 0 9px rgba(255,225,75,.55))}
.wx-info{display:flex; flex-direction:column}
.wx-temp{font-family:var(--title); font-size:28px; font-weight:900; line-height:1}
.wx-city{font-family:var(--mono); font-size:10px; color:var(--textdim); letter-spacing:1px; margin-top:3px}
.wx-desc{font-family:var(--mono); font-size:11px; letter-spacing:1px; margin-top:9px; text-transform:uppercase}
.wx-extra{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text); margin-top:9px}
.wx-extra b{font-weight:700}

/* ---------- Widget VISITEURS ---------- */
.visitors-block .vrow{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-family:var(--mono)}
.visitors-block .vrow:last-child{margin-bottom:0}
.vlabel{font-size:10px; color:var(--textdim); letter-spacing:1px}
.vval{font-size:15px; font-weight:700}
.vval.npurple{font-size:12px; letter-spacing:1px}
.odot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#00ff66;
  box-shadow:0 0 8px #00ff66; animation:pulse 1.4s infinite; vertical-align:middle; margin-right:4px}

/* ---------- Bloc PILOTAGE IA (sélecteurs moteur / skill) ---------- */
.psel-lbl{display:block; font-family:var(--mono); font-size:9px; letter-spacing:2px;
  color:var(--textdim); text-transform:uppercase; margin-bottom:11px}
.psel-lbl .sel{margin-top:5px}
.psel-lbl:last-of-type{margin-bottom:0}

/* le panneau gauche défile si l'écran est court (évite tout débordement) */
.panel.left{overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--jblue) transparent}
.panel.left::-webkit-scrollbar{width:6px}
.panel.left::-webkit-scrollbar-thumb{background:var(--jblue); border-radius:3px}

/* ---------- ARÈNE (débat de deux IA) ---------- */
.arene-box{width:min(780px,94vw)}
.arene-body{padding:16px 20px; display:flex; flex-direction:column; gap:14px}
.arene-config{display:flex; flex-direction:column; gap:10px}
.arene-input{width:100%; margin-top:6px; background:#0a0a15; border:1px solid var(--panelborder);
  color:var(--text); font-family:var(--mono); font-size:13px; padding:10px; outline:0}
.arene-input:focus{border-color:var(--jblue); box-shadow:0 0 12px var(--jblueshadow)}
.arene-row{display:flex; gap:10px; flex-wrap:wrap}
.arene-row .ctl{flex:1; min-width:150px; margin-bottom:0}
.arene-log{display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow:auto; padding-right:4px}
.arene-msg{border:1px solid var(--panelborder); padding:10px 12px; font-family:var(--mono); font-size:12px; line-height:1.55}
.arene-name{display:block; font-size:10px; letter-spacing:2px; margin-bottom:5px}
.arene-txt{color:var(--text)}
.arene-msg.a{border-left:3px solid var(--jblue)}      .arene-msg.a .arene-name{color:var(--jblue); text-shadow:0 0 8px var(--jblueshadow)}
.arene-msg.b{border-left:3px solid #b14bff}           .arene-msg.b .arene-name{color:#b14bff; text-shadow:0 0 8px #b14bff}
.arene-msg.sujet{border-left:3px solid #ffe14b; background:rgba(255,225,75,.05)} .arene-msg.sujet .arene-name{color:#ffe14b}
.arene-msg.err{border-left:3px solid var(--jred)}     .arene-msg.err .arene-name{color:var(--jred)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .panel{display:none}
  .dock{left:40px; right:40px}
  .topbar{padding:0 70px}
}

/* ---------- Centre de controle : etat des cles/moteurs ---------- */
.apistatus{font-family:var(--mono); font-size:12px}
.apirow{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--panelborder); color:var(--text)}
.apirow:last-child{border-bottom:0}
.apirow .ok{color:#00ff66; text-shadow:0 0 8px #00ff66}
.apirow .off{color:var(--textdim)}
.apinote{font-family:var(--mono); font-size:10px; color:var(--textdim); margin-top:10px; line-height:1.5}

/* ---------- Widget visiteurs (haut-centre, cadrans neon) ---------- */
.vwidget{position:fixed; top:70px; left:calc(50% - 151px); transform:translateX(-50%); z-index:22;
  display:flex; align-items:center; gap:22px; padding:12px 32px;
  background:linear-gradient(180deg, rgba(25,0,8,.55), rgba(5,5,16,.25));
  border:1px solid rgba(255,0,51,.4);
  box-shadow:0 0 26px rgba(255,0,51,.28), inset 0 0 18px rgba(255,0,51,.06);
  clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  backdrop-filter:blur(3px); pointer-events:none;
}
.vw-cell{display:flex; flex-direction:column; align-items:center; gap:7px}
.vw-dial{position:relative; width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(45,0,10,.7) 56%, rgba(0,0,0,.25) 72%, transparent 76%);}
.vw-dial::before{content:''; position:absolute; inset:-2px; border-radius:50%;
  background:conic-gradient(from 90deg, var(--jred) 0deg, #ff5470 250deg, transparent 305deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  filter:drop-shadow(0 0 7px var(--jred)); animation:spin 7s linear infinite;}
.vw-dial::after{content:''; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(255,0,51,.22);}
.vw-num{font-family:var(--title); font-weight:900; font-size:22px; color:#fff; text-shadow:0 0 14px var(--jred); z-index:1}
.vw-top{font-family:var(--title); font-weight:700; font-size:12px; letter-spacing:.5px; color:#fff;
  text-shadow:0 0 12px var(--jred); z-index:1; text-align:center; max-width:68px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; padding:0 4px}
.vw-lbl{font-family:var(--mono); font-size:9px; letter-spacing:3px; color:#5fd8ff; text-shadow:0 0 8px #00d4ff, 0 0 14px #00d4ff}
.vw-live::before{animation:spin 4s linear infinite}
.vw-live .vw-num{color:#5fffa0; text-shadow:0 0 14px #00ff66}
.vw-sep{color:rgba(255,0,51,.55); font-size:13px; margin-top:-16px; text-shadow:0 0 8px var(--jred)}
@media (max-width:780px){ .vwidget{display:none} }

/* ---------- Bouton ACHAT-DON (haut de page) ---------- */
.donbtn{font-family:var(--title); font-size:11px; letter-spacing:2px; text-decoration:none;
  color:#1a1000; background:linear-gradient(90deg,#ffe14b,#ff8a3c); padding:5px 13px; border-radius:4px;
  font-weight:700; box-shadow:0 0 12px rgba(255,200,60,.55); transition:.2s; white-space:nowrap;
  animation:donpulse 2.6s ease-in-out infinite}
.donbtn:hover{transform:scale(1.07); box-shadow:0 0 22px rgba(255,200,60,.95)}
@keyframes donpulse{0%,100%{box-shadow:0 0 12px rgba(255,200,60,.5)}50%{box-shadow:0 0 20px rgba(255,138,60,.85)}}
/* ---------- TchatBox cyberpunk ---------- */
.chat-toggle{margin-top:4px; font-family:var(--mono); font-size:9px; letter-spacing:2px;
  background:transparent; border:1px solid var(--jblue); color:var(--jblue); cursor:pointer;
  padding:3px 8px; border-radius:4px; transition:.2s}
.chat-toggle:hover{background:#00d4ff15; box-shadow:0 0 10px var(--jblueshadow)}
.chatbox{position:fixed; right:18px; top:84px; bottom:148px; z-index:20;
  width:300px; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(5,8,20,.96), rgba(2,4,12,.96));
  border:1px solid var(--jblue); box-shadow:0 0 30px var(--jblueshadow), inset 0 0 20px rgba(0,212,255,.05);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); backdrop-filter:blur(4px)}
.chatbox.hidden, .chat-emojis.hidden{display:none}
.chatbox-head{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--panelborder);
  font-family:var(--title); font-size:12px; letter-spacing:2px; color:var(--jblue); text-shadow:0 0 8px var(--jblueshadow)}
.chatbox-head .chat-status{flex:1; font-family:var(--mono); font-size:9px; color:var(--jorange); letter-spacing:1px}
.chatbox-head button{background:transparent; border:1px solid var(--jred); color:var(--jred); cursor:pointer; font-size:11px; padding:2px 7px; border-radius:3px}
.chatbox-head button:hover{background:#ff003318}
.chat-msgs{flex:1; overflow-y:auto; padding:8px 12px; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--text)}
.chat-msgs::-webkit-scrollbar{width:6px} .chat-msgs::-webkit-scrollbar-thumb{background:var(--jblue); border-radius:3px}
.chat-line{margin-bottom:5px; word-break:break-word}
.chat-t{color:var(--textdim); font-size:10px}
.chat-n{font-weight:700; text-shadow:0 0 6px currentColor}
.chat-m{color:#d6e2ff}
.chat-emojis{display:flex; flex-wrap:wrap; gap:2px; padding:6px 10px; max-height:110px; overflow-y:auto; border-top:1px solid var(--panelborder); background:rgba(0,0,0,.3)}
.chat-emojis .emo{background:transparent; border:0; font-size:18px; cursor:pointer; padding:2px; border-radius:4px; transition:.15s}
.chat-emojis .emo:hover{transform:scale(1.3); background:rgba(0,212,255,.12)}
.chat-input-row{display:flex; gap:6px; padding:8px; border-top:1px solid var(--panelborder)}
.chat-pseudo{width:88px; background:#0a0a15; border:1px solid var(--panelborder); color:var(--jcyan); font-family:var(--mono); font-size:11px; padding:6px 7px; outline:0}
.chat-text{flex:1; background:#0a0a15; border:1px solid var(--panelborder); color:var(--text); font-family:var(--mono); font-size:12px; padding:6px 9px; outline:0}
.chat-text:focus, .chat-pseudo:focus{border-color:var(--jblue); box-shadow:0 0 8px var(--jblueshadow)}
.chat-emoji-btn{background:transparent; border:1px solid var(--panelborder); cursor:pointer; font-size:15px; padding:2px 7px; border-radius:4px}
.chat-emoji-btn:hover{border-color:var(--jblue)}
.chat-send{background:transparent; border:1px solid var(--jblue); color:var(--jblue); font-size:15px; cursor:pointer; padding:2px 11px; border-radius:4px; transition:.2s}
.chat-send:hover{background:var(--jblue); color:#02121a; box-shadow:0 0 12px var(--jblueshadow)}
@media (max-width:1100px){ .chatbox{width:min(300px,86vw); top:70px; bottom:140px} }
/* ============================================================
   WIDGETS EXTRA — Station orbitale ISS / Trafic aérien / Transmission
   ============================================================ */
/* --- ISS --- */
.iss-block::before{background:linear-gradient(90deg,transparent,var(--jcyan),transparent)}
.iss-head{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.iss-sat{font-size:20px; filter:drop-shadow(0 0 6px var(--jcyan)); animation:issfloat 4s ease-in-out infinite}
@keyframes issfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.iss-id{flex:1; min-width:0}
.iss-name{font-family:var(--mono); font-size:11px; color:var(--text); letter-spacing:1px}
.iss-zone{font-family:var(--mono); font-size:9px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.iss-day{font-size:15px}
.iss-grid{display:grid; grid-template-columns:1fr 1fr; gap:5px 10px}
.iss-cell{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:11px; border-bottom:1px solid rgba(255,255,255,.05); padding-bottom:2px}
.iss-k{font-size:9px; color:var(--textdim); letter-spacing:1px}

/* --- TRAFIC AÉRIEN --- */
.air-block::before{background:linear-gradient(90deg,transparent,var(--jorange),transparent)}
.air-count{float:right; font-family:var(--mono); font-size:13px; color:var(--jorange); text-shadow:0 0 8px var(--jorange); letter-spacing:0}
.air-sub{font-family:var(--mono); font-size:9px; color:var(--textdim); letter-spacing:.5px; margin-bottom:7px}
.air-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.air-row{display:grid; grid-template-columns:1fr auto; grid-template-areas:"cs d" "a s"; gap:0 8px; font-family:var(--mono); font-size:10.5px; padding:4px 6px; background:rgba(255,255,255,.025); border-left:2px solid var(--jorange); border-radius:0 3px 3px 0}
.air-cs{grid-area:cs; color:var(--text); letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.air-d{grid-area:d; color:var(--jcyan); font-size:10px}
.air-a{grid-area:a; font-size:9.5px}
.air-s{grid-area:s; font-size:9.5px; text-align:right}
.air-empty,.air-row.air-empty{font-family:var(--mono); font-size:10px; color:var(--textdim); padding:4px 6px; background:none; border:0; list-style:none}

/* --- TRANSMISSION DU JOUR --- */
.xmit-block::before{background:linear-gradient(90deg,transparent,var(--jblue),transparent)}
.xmit-btn{float:right; background:transparent; border:1px solid var(--panelborder); color:var(--jcyan); cursor:pointer; font-size:11px; line-height:1; padding:1px 6px; border-radius:4px; transition:.2s}
.xmit-btn:hover{border-color:var(--jcyan); box-shadow:0 0 8px var(--jcyan); transform:rotate(180deg)}
.xmit-body{display:flex; gap:6px; align-items:flex-start}
.xmit-quote{font-family:var(--title); font-size:26px; line-height:.7; color:var(--jblue); opacity:.6; text-shadow:0 0 10px var(--jblue)}
.xmit-text{margin:0; font-family:var(--font); font-size:13px; line-height:1.5; color:var(--cyan-soft); font-style:italic}
.xmit-meta{margin-top:8px; font-family:var(--mono); font-size:8.5px; letter-spacing:1px; color:var(--textdim); text-transform:uppercase; text-align:right}