:root{
  --bg1:#061225;
  --bg2:#0d2348;
  --panel:rgba(255,255,255,.085);
  --panel2:rgba(255,255,255,.13);
  --wire:#58a6ff;
  --wire-soft:rgba(88,166,255,.35);
  --accent:#ffd84d;
  --green:#67f5a0;
  --red:#ff7768;
  --text:#eef6ff;
  --muted:#a9bbd8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 25% 10%,rgba(68,130,255,.28),transparent 30%),
    radial-gradient(circle at 82% 25%,rgba(103,245,160,.12),transparent 28%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}
.app{width:min(1220px,94vw);margin:0 auto;padding:28px 0 32px}
.header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}
.eyebrow{margin:0 0 6px;color:#80b8ff;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700}
h1{margin:0;font-size:clamp(28px,4vw,48px);line-height:1.05;font-weight:750}
.subtitle{max-width:780px;color:var(--muted);font-size:16px;line-height:1.5;margin:12px 0 0}
.status-pill{white-space:nowrap;border:1px solid rgba(255,255,255,.16);background:var(--panel);border-radius:999px;padding:12px 16px;color:#cfe1ff;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.board{position:relative;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 0 45px rgba(88,166,255,.08);overflow:hidden}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent);opacity:.7}
.component{position:absolute;text-align:center;z-index:3}
.component strong{display:block;margin-top:8px;font-size:15px}.component small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.wire{position:absolute;height:8px;background:linear-gradient(90deg,var(--wire-soft),var(--wire),var(--wire-soft));border-radius:999px;box-shadow:0 0 14px rgba(88,166,255,.75);z-index:1}.wire::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:pulse 1.6s linear infinite;opacity:.45}@keyframes pulse{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.battery{left:44px;top:188px;width:88px;height:148px;border:2px solid rgba(255,255,255,.75);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:0 0 22px rgba(88,166,255,.25)}.battery-top{position:absolute;left:25px;top:-14px;width:38px;height:13px;border-radius:8px 8px 0 0;background:rgba(255,255,255,.75)}.plus,.minus{position:absolute;left:0;right:0;font-size:28px;font-weight:600}.plus{top:22px;color:#67f5a0}.minus{bottom:34px;color:#ff9a91}.battery small{position:absolute;left:-14px;right:-14px;bottom:-28px}
.wire-a{left:132px;top:258px;width:128px}.wire-b{left:390px;top:258px;width:122px}.wire-c{left:646px;top:258px;width:116px}.wire-d{left:920px;top:258px;width:120px}.wire-e{left:1050px;top:258px;width:76px}.wire-f{left:80px;top:392px;width:1030px;opacity:.38}
.resistor{left:260px;top:220px;width:130px}.resistor-body{height:82px;border-radius:18px;background:linear-gradient(135deg,#a9631e,#e8a14a);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 26px rgba(232,161,74,.28),inset 0 0 20px rgba(255,255,255,.13);display:flex;align-items:center;justify-content:space-around;padding:0 12px}.resistor-body span{width:10px;height:58px;background:rgba(65,35,14,.42);border-radius:99px}
.capacitor{left:510px;top:180px;width:138px;height:174px}.plate{position:absolute;top:20px;width:10px;height:118px;border-radius:99px;background:#f7fbff;box-shadow:0 0 14px rgba(255,255,255,.45)}.plate.left{left:24px}.plate.right{right:24px}.dielectric{position:absolute;left:40px;right:40px;top:20px;height:118px;border-radius:12px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.1)}.charge-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(0deg,#ffbf2f,#fff06a);transition:height .08s linear}.charge-glow{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 35px #ffe761;transition:opacity .2s}.capacitor strong{position:absolute;top:146px;left:0;right:0}.capacitor small{position:absolute;top:169px;left:0;right:0}
.transistor{left:758px;top:150px;width:170px}.transistor svg{width:170px;height:170px;filter:drop-shadow(0 0 14px rgba(103,245,160,.2))}.transistor-ring,.pin,.junction{fill:none;stroke:#67f5a0;stroke-width:6;stroke-linecap:round}.arrow{fill:#67f5a0}.transistor.active svg{filter:drop-shadow(0 0 26px rgba(103,245,160,.9))}.transistor.active .transistor-ring,.transistor.active .pin,.transistor.active .junction{stroke:#b7ffd0}.transistor.active .arrow{fill:#b7ffd0}
.lamp{right:92px;top:190px;width:108px}.bulb{margin:0 auto;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#777,#232a38 52%,#121722);border:2px solid rgba(255,255,255,.18);transition:.25s}.lamp.on .bulb{background:radial-gradient(circle at 35% 25%,#fff9c5,#ffe35f 38%,#ffb929 74%);box-shadow:0 0 26px #ffe35f,0 0 60px rgba(255,227,95,.9),0 0 105px rgba(255,180,40,.45)}
.electron{position:absolute;width:12px;height:12px;border-radius:50%;background:#8ce9ff;box-shadow:0 0 12px #8ce9ff,0 0 24px rgba(140,233,255,.65);z-index:4;offset-path:path("M 112 262 H 258 H 390 H 510 H 646 H 758 H 920 H 1130");animation:flow 4.4s linear infinite}.e2{animation-delay:-.8s}.e3{animation-delay:-1.6s}.e4{animation-delay:-2.4s}.e5{animation-delay:-3.2s}@keyframes flow{to{offset-distance:100%}}
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}.card{background:var(--panel);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.18)}.card-label{color:var(--muted);font-size:13px}.metric{font-size:32px;font-weight:800;margin:5px 0 9px}.metric span:last-child{font-size:18px;color:var(--muted);margin-left:3px}.progress{height:11px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.progress div{height:100%;width:0%;background:linear-gradient(90deg,#ffb62e,#fff066);border-radius:inherit}.card input{width:100%;accent-color:#ffd84d}.controls{display:flex;gap:10px;align-items:center;justify-content:center}button{border:0;border-radius:12px;padding:11px 14px;background:#1d6fff;color:white;font-weight:700;cursor:pointer;box-shadow:0 12px 24px rgba(29,111,255,.22)}button:last-child{background:rgba(255,255,255,.14)}button:hover{transform:translateY(-1px)}.explain{margin-top:16px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:18px 20px;color:#d6e5ff}.explain h2{margin:0 0 10px}.explain p{margin:7px 0;line-height:1.45}
.board.transistor-on .wire-d,.board.transistor-on .wire-e{background:linear-gradient(90deg,rgba(103,245,160,.3),#67f5a0,rgba(103,245,160,.25));box-shadow:0 0 16px rgba(103,245,160,.8)}.board.transistor-off .wire-d,.board.transistor-off .wire-e{filter:saturate(.35);opacity:.45}.board.transistor-off .electron{animation-play-state:running;opacity:.65}.board.paused .electron{animation-play-state:paused}.resistance-high .electron{animation-duration:6.5s}.resistance-low .electron{animation-duration:2.8s}
@media(max-width:850px){.header{display:block}.status-pill{display:inline-block;margin-top:14px}.board{height:620px;transform-origin:top left}.dashboard{grid-template-columns:1fr 1fr}.wire-f{display:none}.battery{left:24px}.wire-a{left:112px;width:80px}.resistor{left:190px}.wire-b{left:320px;width:70px}.capacitor{left:390px}.wire-c{left:520px;width:60px}.transistor{left:570px}.wire-d{left:730px;width:60px}.lamp{left:790px;right:auto}.wire-e{left:890px;width:50px}.board{overflow:auto}.grid{width:980px}.explain{font-size:14px}}
@media(max-width:560px){.app{width:96vw;padding-top:18px}.dashboard{grid-template-columns:1fr}.board{height:515px}.board::after{content:"Faites défiler horizontalement pour voir tout le circuit";position:absolute;left:14px;bottom:12px;color:var(--muted);font-size:12px}.header h1{font-size:28px}.subtitle{font-size:14px}}