/* Styles des ateliers interactifs (chargés avec academie.css). */

/* --- Construis ton réseau --- */
.chain{display:flex;align-items:stretch;gap:0;position:relative;overflow-x:auto;padding:16px 0}
.chain .slot{flex:1 1 0;min-width:118px}
.connector{width:26px;flex:none;align-self:center;height:4px;border-radius:2px;background:var(--line);position:relative;transition:background .3s}
.connector.live{background:var(--green)}
.connector.pulse::after{content:"";position:absolute;left:0;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--amber);animation:travel .8s linear}
@keyframes travel{from{left:0}to{left:calc(100% - 10px)}}
.chain.frontier .connector[data-before="routeur"]{background:var(--red)}
.chain.frontier .connector[data-before="routeur"]::before{content:"frontière";position:absolute;top:-24px;left:50%;transform:translateX(-50%);color:var(--red);font-size:11px;font-weight:600;white-space:nowrap}
.packet{position:absolute;top:calc(50% - 8px);width:18px;height:18px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(217,119,6,.2);z-index:3;display:none}
.slot.done .icon svg{width:96px;height:58px}

/* --- IP Lab --- */
.bits{margin-top:14px}
.bitrow{display:grid;grid-template-columns:64px repeat(4,1fr);gap:0 6px;align-items:center;margin-bottom:5px}
.bitrow .lab{font-size:12px;color:var(--muted)}
.octet{display:flex;gap:2px}
.b{flex:1;aspect-ratio:1/1.1;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:500;border-radius:4px;background:var(--soft);color:var(--muted)}
.b.n{background:var(--sky);color:var(--blue)}
.b.on.n{background:var(--blue);color:#fff}
.b.on.h{background:var(--amber);color:#fff}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.legend .sw-net{background:var(--blue)}.legend .sw-host{background:var(--amber)}
.derived{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:14px;color:var(--muted)}
.derived b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}

/* --- VLAN Lab --- */
.switch-panel{overflow-x:auto}
.sw-body{background:#1f2937;border:2px solid #111827;border-radius:10px;padding:14px 16px;min-width:640px;color:#e5e7eb}
.sw-brand{font-size:12px;font-weight:700;letter-spacing:.04em;color:#cbd5e1;margin-bottom:10px}
.sw-ports{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.sw-port{background:#374151;border:2px solid #4b5563;border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:#e5e7eb;font:inherit;transition:transform .1s,border-color .15s}
.sw-port:hover{transform:translateY(-2px)}
.sw-port.sel{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.35)}
.sw-port.off{opacity:.55}
.sw-port.blink .sw-led{animation:ledpulse .3s 3}
.sw-led{width:8px;height:8px;border-radius:50%;background:#6b7280}
.sw-led.on{background:#22c55e;box-shadow:0 0 6px #22c55e}
.sw-jack{width:26px;height:20px;background:#111827;border:1px solid #6b7280;border-radius:3px 3px 5px 5px}
.sw-num{font-family:var(--font-mono);font-size:12px;font-weight:600}
.sw-dev{font-size:10px;color:#9ca3af;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis}
.sw-ok{font-size:11px;font-weight:700;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.sw-ok.ok{background:#14532d;color:#86efac}.sw-ok.ko{background:#7f1d1d;color:#fecaca}
.frame-stage{position:relative;height:110px;margin:10px 0;border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--soft)}
.frame{position:absolute;left:0;top:8px;display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--panel);border:2px solid var(--amber);border-radius:8px;font-family:var(--font-mono);font-size:12px;box-shadow:var(--shadow);transition:left .6s ease-in-out,top .6s ease-in-out}
.frame.rejected{border-color:var(--red);animation:shake .4s}
.frame-tag{font-size:10px;font-weight:700;color:#fff;padding:1px 6px;border-radius:999px;background:var(--grey)}

/* --- Diagnostic --- */
.schema-row{display:flex;align-items:stretch;gap:0;overflow-x:auto}
.schema-node{flex:1;min-width:150px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:var(--panel);font-size:13.5px}
.schema-link{width:22px;flex:none;align-self:center;height:3px;background:var(--line)}

/* --- Visite guidée --- */
#scene .el{cursor:pointer;transition:opacity .3s}
#scene.dim .el:not(.hl){opacity:.22}
#scene .el.hl .glow{stroke:var(--red);stroke-width:4;fill:none;animation:pulse 1.4s infinite}
#scene .el .glow{stroke:transparent}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
#scene .pk{fill:var(--amber);stroke:#fff;stroke-width:2;display:none}
.visite-dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px}
.visite-dl dt{color:var(--muted);font-weight:500;white-space:nowrap}
.visite-dl dd{margin:0}