.state {
  font-size:22px;
  margin-bottom:20px;
}

.pac {
width:260px;
height:200px;
border-radius:16px;
background:linear-gradient(145deg,#2c2f36,#1b1e24);
box-shadow:0 20px 40px rgba(0,0,0,0.6), inset 0 0 25px rgba(255,255,255,0.05);
position:relative;
overflow:hidden;
}


/* Ventilateur */
.fan {
position:absolute;
top:50%; left:70px;
width:90px; height:90px;
margin-top:-45px;
border-radius:50%;
background:#111;
border:4px solid #444;
}
.fan::before {
content:"";
position:absolute;
inset:12px;
border-radius:50%;
background:conic-gradient(#888 0deg 20deg, transparent 20deg 60deg);
}


.fan.on { animation: spin 0.8s linear infinite; }


@keyframes spin {
to { transform:rotate(360deg); }
}


/* Serpentin */
.coil {
position:absolute;
right:25px; top:30px;
width:80px; height:140px;
border-radius:10px;
background:repeating-linear-gradient(
180deg,
#ff9f00,
#ff9f00 6px,
#7a3d00 6px,
#7a3d00 12px
);
filter:brightness(0.6);
}
.coil.hot {
filter:brightness(1.2);
box-shadow:0 0 20px #ff7b00;
}


/* Flux d’air */
.air {
position:absolute;
left:0; top:0;
width:100%; height:100%;
pointer-events:none;
}
.air.hot::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(255,140,0,0.25), transparent);
animation: flow 2s infinite;
}


@keyframes flow {
from { transform:translateX(-100%); }
to { transform:translateX(100%); }
}


/* Voyant */
.indicator {
position:absolute;
top:14px; left:50%;
transform:translateX(-50%);
width:16px; height:16px;
border-radius:50%;
background:#333;
}
.indicator.on {
background:#00ff9c;
box-shadow:0 0 12px #00ff9c;
}