/* Widgets interactifs : terminal, commandes commentées, OSI, table MAC, calculateur IPv4, binaire, entraîneur. */

/* ---------- Terminal (toujours sombre, comme une vraie console) ---------- */
.terminal--static { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: #0B1220; color: #D9E3F0; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; overflow-x: auto; border: 1px solid #1E2A40; }
.terminal--static code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; white-space: pre; }

.term { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #1E2A40; background: #0B1220; box-shadow: var(--shadow); }
.term__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #131D30; color: #A9B7CB; font-size: var(--fs-sm); }
.term__dots { display: inline-flex; gap: 6px; }
.term__dots i { width: 11px; height: 11px; border-radius: 50%; background: #F06C76; }
.term__dots i:nth-child(2) { background: #E3AA45; }
.term__dots i:nth-child(3) { background: #4CC38A; }
.term__title { flex: 1; font-weight: 650; }
.term__reset { border: 1px solid #31445F; background: transparent; color: #A9B7CB; border-radius: 8px; padding: 4px 10px; font-size: var(--fs-xs); font-weight: 650; }
.term__reset:hover { color: #fff; border-color: #6CCBF3; }
.term__screen { height: 340px; overflow-y: auto; padding: 12px 14px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; color: #D9E3F0; cursor: text; }
.term__row { white-space: pre-wrap; word-break: break-word; }
.term__row--err { color: #FF9AA2; }
.term__row--sys { color: #E3C46F; }
.term__row--muted { color: #7D8BA1; }
.term__line { display: flex; align-items: baseline; }
.term__prompt { white-space: pre; color: #7FD4F7; }
.term__input { flex: 1; min-width: 40px; border: 0; background: transparent; color: #fff; font: inherit; padding: 0; caret-color: #4CC38A; }
.term__input:focus { outline: none; }
.term__hint { margin: 0; padding: 8px 12px; background: #131D30; color: #8191A8; font-size: var(--fs-xs); border-top: 1px solid #1E2A40; }
.term__hint kbd { padding: 0 5px; border-radius: 4px; border: 1px solid #31445F; color: #D9E3F0; font-size: 11px; }
.term__tasks { padding: 12px 16px 16px; background: var(--surface); color: var(--text); border-top: 1px solid var(--border); }
.term__tasks-title { font-weight: 800; margin-bottom: 8px; }
.term__tasks code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: .88em; }
.term__tasks ol { list-style: none; display: grid; gap: 6px; }
.term__tasks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.term__check { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--border-strong); display: inline-grid; place-items: center; }
.term__tasks li.is-done .term__check { background: var(--success); border-color: var(--success); }
.term__tasks li.is-done .term__check::after { content: "✓"; color: var(--on-success); font-size: 13px; font-weight: 900; }
.term__tasks li.is-done span:last-child { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--success); }
.term__done { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-weight: 750; }
@media (max-width: 639px) { .term__screen { height: 300px; font-size: 12.5px; } }

/* ---------- Commandes commentées ---------- */
.cli-static { border-radius: var(--radius); overflow: hidden; border: 1px solid #1E2A40; }
.cli-static__title { padding: 8px 14px; background: #131D30; color: #A9B7CB; font-size: var(--fs-sm); font-weight: 650; }
.cli-static__grid { display: grid; }
.cli-static__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.cli-static__code { margin: 0; padding: 7px 14px; background: #0B1220; color: #fff; font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.cli-static__prompt { color: #7FD4F7; }
.cli-static__note { padding: 7px 14px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.cli-static__note code { background: var(--surface); }
.cli-static__row--out { grid-template-columns: minmax(0, 1fr); }
.cli-static__row--out .cli-static__code { color: #C9D4E3; white-space: pre; overflow-x: auto; word-break: normal; font-size: 12.5px; }
.cli-static__row--out span { display: none; }
@media (max-width: 720px) {
  .cli-static__row { grid-template-columns: 1fr; }
  .cli-static__row--out span { display: none; }
  .cli-static__note { border-left: 3px solid var(--primary); }
}

/* ---------- Explorateur OSI ---------- */
.osi { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: var(--space-4); }
.osi__stack { list-style: none; display: grid; gap: 6px; }
.osi__layer {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 12px 6px 6px; border-radius: 10px; text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--border)); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--text);
  transition: transform .15s var(--ease);
}
.osi__layer:hover { transform: translateX(3px); }
/* --on-c : blanc ou bleu nuit selon la couleur de la couche (C.core.ui.onColor) */
.osi__layer.is-active { background: var(--c); color: var(--on-c, #fff); border-color: var(--c); }
.osi__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--c); color: var(--on-c, #fff); font-weight: 900; }
.osi__layer.is-active .osi__num { background: var(--tile, rgba(255, 255, 255, .22)); }
.osi__name { font-weight: 750; }
.osi__pdu { font-size: var(--fs-xs); font-weight: 700; opacity: .8; }
.osi__detail { padding: var(--space-4); border-radius: var(--radius); border: 1.5px solid var(--c); background: var(--surface); }
.osi__kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 65%, var(--text)); }
.osi__title { font-size: var(--fs-xl); margin: 2px 0 var(--space-3); }
.osi__dl { display: grid; gap: 10px; }
.osi__dl dt { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.osi__dl dd { font-size: var(--fs-sm); }
@media (max-width: 760px) { .osi { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Table MAC ---------- */
.mac-sim__controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-3); }
.mac-sim__controls select { min-height: 42px; }
.mac-sim__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.mac-sim__caption { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
.mac-sim__table { min-height: 170px; font-size: 12px; }
.mac-sim__link { stroke: var(--border-strong); stroke-width: 3; transition: stroke .2s; }
.mac-sim__link--in { stroke: var(--primary); stroke-width: 5; }
.mac-sim__link--out { stroke: var(--success); stroke-width: 5; stroke-dasharray: 10 6; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.mac-sim__log { margin-top: var(--space-3); display: grid; gap: 8px; }
.mac-sim__log ol { list-style: none; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-sm); opacity: .65; }
.mac-sim__log ol.is-last { opacity: 1; border: 1.5px solid var(--primary); background: var(--primary-soft); }
@media (max-width: 760px) { .mac-sim__grid { grid-template-columns: minmax(0, 1fr); } }
.mac-sim__grid > *, .osi > *, .ipcalc, .trainer, .binconv { min-width: 0; }

/* ---------- Calculateur IPv4 ---------- */
.ipcalc__form { display: flex; gap: var(--space-3); }
.ipcalc__form input { font-family: var(--font-mono); font-size: var(--fs-lg); }
.ipcalc__chips { margin: var(--space-3) 0; }
.ipcalc__error { padding: 12px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 650; }
.ipcalc__visual { padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; }
.ipcalc__octets { display: flex; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 800; margin-bottom: 8px; }
.ipcalc__octets span { padding: 2px 10px; border-radius: 8px; }
/* Couleurs de domaine en texte : mélangées à --text pour garder le contraste dans les deux thèmes */
.ipcalc__octets .is-net { background: color-mix(in srgb, var(--d1) 22%, transparent); color: color-mix(in srgb, var(--d1) 60%, var(--text)); }
.ipcalc__octets .is-host { background: color-mix(in srgb, var(--d3) 22%, transparent); color: color-mix(in srgb, var(--d3) 60%, var(--text)); }
.ipcalc__octets .is-mixed { background: linear-gradient(90deg, color-mix(in srgb, var(--d1) 22%, transparent), color-mix(in srgb, var(--d3) 22%, transparent)); }
.bits { display: flex; flex-wrap: nowrap; font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.bits__b { display: inline-grid; place-items: center; width: 19px; height: 26px; border-radius: 4px; margin-right: 1px; }
.bits__b.is-net { background: color-mix(in srgb, var(--d1) 22%, transparent); color: color-mix(in srgb, var(--d1) 60%, var(--text)); }
.bits__b.is-host { background: color-mix(in srgb, var(--d3) 20%, transparent); color: color-mix(in srgb, var(--d3) 60%, var(--text)); }
.bits__dot { width: 10px; text-align: center; color: var(--text-3); }
.ipcalc__legend { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.key--net { background: color-mix(in srgb, var(--d1) 40%, transparent); }
.key--host { background: color-mix(in srgb, var(--d3) 40%, transparent); margin-left: 8px; }
.ipcalc__result { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: var(--space-4); }
.ipcalc__result div { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.ipcalc__result dt { font-size: var(--fs-xs); font-weight: 750; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ipcalc__result dd { font-family: var(--font-mono); font-weight: 750; font-size: var(--fs-md); word-break: break-all; }
.ipcalc__result + .callout { margin-top: var(--space-3); }
.ipcalc__steps { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--primary-soft); }
.ipcalc__steps summary { cursor: pointer; font-weight: 750; }
.ipcalc__steps ol { margin-top: 8px; padding-left: 1.3em; display: grid; gap: 4px; font-size: var(--fs-sm); }

/* ---------- Convertisseur binaire ---------- */
.binconv__bits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; max-width: 560px; }
@media (max-width: 420px) { .binconv__v { font-size: var(--fs-lg); } .binconv__w { font-size: 10px; } }
.binconv__bit { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.binconv__bit.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.binconv__w { font-size: var(--fs-xs); font-weight: 700; opacity: .8; }
.binconv__v { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 900; }
.binconv__sum { margin: var(--space-3) 0; font-family: var(--font-mono); font-size: var(--fs-lg); }
.binconv__row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.binconv__challenge { margin-top: var(--space-3); padding: 10px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-weight: 700; }
.binconv__challenge.is-ok { background: var(--success-soft); color: var(--success); }

/* ---------- Entraîneur de subnetting ---------- */
.trainer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.trainer__setup { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.trainer__setup > *, .trainer__setup select { min-width: 0; max-width: 100%; }
.trainer__setup .segmented { margin-top: 6px; }
.trainer__setup + .btn { justify-self: start; }
.trainer__hist { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
.trainer__progress { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); }
.trainer__q { font-weight: 650; margin-top: var(--space-2); }
.trainer__ip code { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 900; color: var(--primary); }
.trainer__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.trainer__fields input { font-family: var(--font-mono); font-size: var(--fs-lg); }
.trainer__fields .is-ok input { border-color: var(--success); background: var(--success-soft); }
.trainer__fields .is-ko input { border-color: var(--danger); background: var(--danger-soft); }
.trainer__expected { font-size: var(--fs-sm); color: var(--danger); }
.trainer__expected strong { font-family: var(--font-mono); }
.trainer__steps { padding-left: 1.3em; display: grid; gap: 4px; font-size: var(--fs-sm); }
.trainer .btn { justify-self: start; }
.trainer--result { text-align: center; justify-items: center; padding: var(--space-5) 0; }
.trainer__big { font-size: 3rem; font-weight: 900; }
.trainer__score { font-size: var(--fs-xl); font-weight: 750; }

.module-card--soon { opacity: .75; }

/* ---------- Table de routage : longest prefix match (routing.js) ---------- */
.rtw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.rt__caption { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; }
.rt__caption .muted { font-family: var(--font-sans); font-weight: 500; }
.rt__field { max-width: 320px; }
.rt__field input, .rt__dest { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; }
.rt__msg { padding: 10px 14px; border-radius: 10px; background: var(--primary-soft); font-size: var(--fs-sm); }
.rt__msg--err { background: var(--danger-soft); color: var(--danger); font-weight: 650; }
.rt { list-style: none; display: grid; gap: 4px; font-family: var(--font-mono); font-size: 13px; }
.rt__row {
  width: 100%; display: grid; grid-template-columns: 2.6em 9.6em 5.8em minmax(0, 1fr) 7.5em; gap: 6px; align-items: center;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left;
}
button.rt__row { cursor: pointer; }
button.rt__row:hover { border-color: var(--primary); background: var(--primary-soft); }
.rt__row.is-dim { opacity: .45; }
.rt__row.is-match { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: var(--primary-soft); }
.rt__row.is-best { border: 2px solid var(--success); background: var(--success-soft); opacity: 1; }
.rt__row.is-picked { border: 2px solid var(--danger); background: var(--danger-soft); opacity: 1; }
.rt__code { font-weight: 800; color: var(--primary); }
.rt__pfx { font-weight: 700; }
.rt__ad, .rt__via { color: var(--text-2); overflow-wrap: anywhere; }
.rt__flag { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 750; text-align: right; }
.is-best .rt__flag { color: var(--success); }
.is-picked .rt__flag { color: var(--danger); }
.is-match:not(.is-best) .rt__flag { color: var(--primary); }
@media (max-width: 640px) {
  .rt { font-size: 12px; }
  .rt__row { grid-template-columns: 2.4em minmax(0, 1fr) auto; row-gap: 2px; }
  .rt__via { grid-column: 2 / -1; }
  .rt__flag { grid-column: 2 / -1; text-align: left; }
  .rt__flag:empty { display: none; }
}

/* ---------- Simulateur HSRP / VRRP (routing.js) ---------- */
.fhrp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.fhrp__controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.fhrp__dev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.fhrp__name { font-weight: 800; }
.fhrp__prio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.fhrp__prio select { min-height: 36px; }
.fhrp__gw { padding: 10px 14px; border-radius: 10px; background: var(--primary-soft); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fhrp__outs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.fhrp__outs pre { font-size: 11.5px; overflow-x: auto; }
.fhrp__cap { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; }
.fhrp__log { list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm); }
.fhrp__log li { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); opacity: .7; }
.fhrp__log li.is-last { opacity: 1; border: 1.5px solid var(--primary); background: var(--primary-soft); }

/* ---------- Labo de routage statique (static-lab.js) ---------- */
.slab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.slab__missions { flex-wrap: wrap; }
.slab__brief { padding: 10px 14px; border-radius: 10px; background: var(--primary-soft); }
.slab__routers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
.slab__router { display: grid; gap: 6px; align-content: start; min-width: 0; }
.slab__label { font-weight: 800; }
.slab__label .muted { font-weight: 500; display: block; overflow-wrap: anywhere; }
.slab__ta { width: 100%; min-height: 96px; resize: vertical; padding: 8px 10px; border-radius: 10px; border: 1px solid #1E2A40; background: #0B1220; color: #E7EDF6; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.slab__ta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slab__notes { list-style: none; display: grid; gap: 4px; font-size: var(--fs-xs); }
.slab__notes:empty { display: none; }
.slab__notes li { padding: 6px 8px; border-radius: 8px; overflow-wrap: anywhere; }
.slab__notes .is-err { background: var(--danger-soft); color: var(--danger); }
.slab__notes .is-warn { background: var(--warning-soft); color: var(--warning); }
.slab__notes .is-info { background: var(--surface-2); color: var(--text-2); }
.slab__actions { align-items: center; margin-top: 0; }
.slab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.slab__cap { font-weight: 750; font-size: var(--fs-sm); margin: 6px 0; }
.slab__pings { list-style: none; display: grid; gap: 6px; }
.slab__ping { width: 100%; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-weight: 750; text-align: left; }
.slab__ping.is-ok { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.slab__ping.is-ko { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.slab__ping.is-ok > span:first-child { color: var(--success); }
.slab__ping.is-ko > span:first-child { color: var(--danger); }
.slab__ping.is-sel { box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); }
.slab__why { font-weight: 500; font-size: var(--fs-sm); color: var(--text-2); }
.slab__trace ol { padding-left: 1.3em; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.slab__trace li.is-ko { color: var(--danger); font-weight: 650; }
.slab__table { font-size: 11.5px; overflow-x: auto; margin-top: 8px; }
.slab__sol { padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--border-strong); }
.slab__sol summary { cursor: pointer; font-weight: 750; }
.slab__sol p { margin-top: 8px; overflow-wrap: anywhere; }
.slab__sol code { font-size: .88em; }
@media (max-width: 900px) { .slab__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- OSPF : SPF, adjacence, élection DR/BDR (ospf.js) ---------- */
.spf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.spf__controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.spf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.spf__grid .diagram .dg { max-width: 620px; }
.spf__grid .btn-row { margin-top: var(--space-3); }
.spf__tbl { border: 1px solid var(--border); border-radius: var(--radius); }
.spf__tbl tr.is-done { background: var(--success-soft); }
.spf__out { font-size: 12px; overflow-x: auto; }
@media (max-width: 860px) { .spf__grid { grid-template-columns: minmax(0, 1fr); } }
.adj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.adj__state { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid; }
.adj__state strong { font-size: var(--fs-lg); }
.adj__state--ok { border-color: var(--success); background: var(--success-soft); }
.adj__state--ok strong { color: var(--success); }
.adj__state--warn { border-color: var(--warning); background: var(--warning-soft); }
.adj__state--warn strong { color: var(--warning); }
.adj__state--ko { border-color: var(--danger); background: var(--danger-soft); }
.adj__state--ko strong { color: var(--danger); }
.adj__tbl select { min-height: 34px; max-width: 100%; }
.adj__tbl td { padding: 6px 10px; }
.adj__tbl tr.is-diff th, .adj__tbl tr.is-diff td { background: var(--warning-soft); }
.adj__outs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.adj__outs pre, .adj__log { font-size: 11.5px; overflow-x: auto; }

/* ---------- Labo VLAN (vlan.js) ---------- */
.vlab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.vlab__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--text-2); }
.vlab__legend span, .vlab__db li > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.vlab__legend i, .vlab__db i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.vlab__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.vlab__ports td, .vlab__ports th { padding: 6px 10px; vertical-align: middle; }
.vlab__ports select { min-height: 32px; max-width: 100%; }
.vlab__ports td.is-ok { color: var(--success); font-weight: 700; white-space: nowrap; }
.vlab__ports td.is-ko { color: var(--danger); font-weight: 700; white-space: nowrap; }
.vlab__voice { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.vlab__side { display: grid; gap: 8px; min-width: 0; }
.vlab__db { list-style: none; display: grid; gap: 4px; font-size: var(--fs-sm); }
.vlab__db li { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); }
.vlab__db li.is-off { opacity: .7; text-decoration: line-through; text-decoration-color: var(--danger); }
.vlab__db li.is-off button { text-decoration: none; }
.vlab__mini { min-height: 32px; padding: 0 10px; font-size: var(--fs-xs); }
.vlab__test { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vlab__test select { min-height: 34px; max-width: 100%; min-width: 0; }
.vlab__res { padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); font-size: var(--fs-sm); }
.vlab__res.is-ok { background: var(--success-soft); }
.vlab__res.is-ko { background: var(--danger-soft); }
.vlab__outs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.vlab__outs pre, .vlab .slab__sol pre { font-size: 11.5px; overflow-x: auto; }
.vlab__logc { white-space: pre-wrap; font-size: var(--fs-xs); background: none; border: 0; padding: 0; }
@media (max-width: 900px) { .vlab__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Labo trunk (trunk.js) ---------- */
.tlab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.tlab__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tlab__side { display: grid; gap: 8px; margin: 0; padding: 10px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.tlab__side legend { padding: 0 6px; font-weight: 800; }
.tlab__f { display: grid; gap: 4px; font-size: var(--fs-sm); min-width: 0; }
.tlab__f > span:first-child { font-weight: 650; color: var(--text-2); }
.tlab__f select { min-height: 34px; max-width: 100%; }
.tlab__checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tlab__checks label { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); }
.tlab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.tlab__grid .fields { margin-top: var(--space-3); }
.tlab__out { font-size: 11.5px; overflow-x: auto; margin-top: 8px; }
@media (max-width: 900px) { .tlab__grid, .tlab__sides { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Labo inter-VLAN (intervlan.js) ---------- */
.ivl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ivl__ctl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ivl__tbl th, .ivl__tbl td { padding: 6px 10px; vertical-align: middle; }
.ivl__tbl select { min-height: 32px; }
.ivl__ip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; }
.ivl__gw { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.ivl__gw select { min-height: 32px; min-width: 0; max-width: 60%; }
.ivl .tlab__grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Spanning Tree (stp.js) ---------- */
.stp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.stp__ctl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.stp__ctl select { min-height: 32px; max-width: 100%; }
.stp__explain { padding: 10px 14px 10px 30px; border-radius: 10px; background: var(--primary-soft); display: grid; gap: 4px; font-size: var(--fs-sm); }
.stp__quiz { display: grid; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); }
.stp__ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.stp__quiz select { min-height: 32px; max-width: 100%; }
.stp__quiz .is-ok { color: var(--success); font-weight: 800; font-size: var(--fs-sm); }
.stp__quiz .is-ko { color: var(--danger); font-weight: 800; font-size: var(--fs-sm); }
.stp__score { font-weight: 800; font-size: var(--fs-lg); }
.stp__events { flex-wrap: wrap; }
.stp__events button { white-space: normal; text-align: left; }

/* ---------- Labo EtherChannel (etherchannel.js) ---------- */
.ec__lb { max-width: 340px; margin-bottom: 8px; }
.ivl__tbl td.ec__hit { color: var(--primary); font-weight: 900; text-align: center; background: var(--primary-soft); }
.ivl__tbl td { text-align: center; }
.ivl__tbl td:has(select), .ivl__tbl td:has(.ivl__ip) { text-align: left; }
@media (max-width: 900px) { .ivl__ctl { grid-template-columns: minmax(0, 1fr); } }

/* ---------- DHCP : DORA pas à pas et labo serveur / relais (dhcp.js) ---------- */
.dora { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.dora__bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.dora__steps { flex-wrap: wrap; }
.dora__head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.dora__name { font-weight: 850; font-size: var(--fs-lg); color: var(--text); padding-left: 12px; border-left: 5px solid var(--mc, var(--primary)); }
.dora__client { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); overflow-wrap: anywhere; }
.dora__text { overflow-wrap: anywhere; }
.dora__legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.dora__leg { min-width: 0; }
.dora__who { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.dora__cast { font-size: var(--fs-xs); font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); }
.dora__cast.is-bc { background: var(--warning-soft); color: var(--warning); }
.dora__tbl th, .dora__tbl td { padding: 6px 10px; font-size: var(--fs-xs); overflow-wrap: anywhere; }
.dora__tbl tbody th { white-space: normal; width: 38%; color: var(--text-2); }
.dora__tbl td { font-family: var(--font-mono); }
.dora__tbl tr.dora__f th { color: var(--primary); }
.dora__nav { margin-top: 0; }
.dhcp__ta { min-height: 170px; }
.dhcp__cmd { max-width: 360px; margin-top: 8px; }
/* ---------- DNS : résolution pas à pas et labo de zone (dns.js) ---------- */
.dnsr__cache ul { list-style: none; display: grid; gap: 4px; }
.dnsr__cache code { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.dns__ta { min-height: 330px; font-size: 12px; white-space: pre; overflow-x: auto; }
.dns__cmd { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #0B1220; border: 1px solid #1E2A40; }
.dns__prompt { font-family: var(--font-mono); font-size: 12.5px; color: #8FE3A6; font-weight: 700; }
.dns__in { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #E7EDF6; font-family: var(--font-mono); font-size: 12.5px; padding: 6px 2px; }
.dns__in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.dns__quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dns__quick .chip { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-xs); white-space: normal; text-align: left; }
.dns__quick .chip:hover { border-color: var(--primary); color: var(--primary); }
.dns__out { min-height: 120px; }
.dns__out code { white-space: pre-wrap; overflow-wrap: anywhere; }
.dns .slab__ping { cursor: default; }
/* ---------- NAT : les quatre adresses et labo NAT/PAT (nat.js) ---------- */
.nat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.nat__tbl td code { display: block; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.nat__term { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 750; color: var(--primary); }
.nat__tbl select { margin-top: 4px; max-width: 100%; min-height: 32px; }
.nat__tbl td.is-ok { background: var(--success-soft); }
.nat__tbl td.is-ko { background: var(--danger-soft); }
.nat__tbl td.is-ko .nat__term { color: var(--danger); }
.nat__tbl--sm th, .nat__tbl--sm td { padding: 6px 10px; }
.nat__tbl--sm { margin-bottom: 6px; }
.nat__score { font-weight: 800; font-size: var(--fs-lg); }
.nat__score.is-ok { color: var(--success); }
.nat__rules { display: grid; gap: 4px; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--text-2); }
.natl__ta { min-height: 290px; }@media (max-width: 560px) {
  .nat__tbl td code { font-size: 11px; overflow-wrap: normal; }
  .nat__tbl tbody th { white-space: normal; }
  .nat__tbl--sm th, .nat__tbl--sm td { padding: 6px 7px; }
}
/* ---------- ACL : calculateur de wildcard et labo (acl.js) ---------- */
.wild { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.wild__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.wild__ip { font-family: var(--font-mono); width: 100%; max-width: 260px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.wild__ip:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.wild__err { color: var(--danger); font-weight: 700; }
.wild__bits th, .wild__bits td { padding: 6px 8px; white-space: nowrap; }
.wild__bits td { font-family: var(--font-mono); font-size: 13px; letter-spacing: .5px; }
.wild__bits td span { display: inline-block; min-width: .72em; text-align: center; }
.wild__bits .is-free { color: var(--text-3, var(--text-2)); opacity: .55; }
.wild__bits .is-fix { color: var(--primary); font-weight: 800; }
.wild__res { display: grid; gap: 4px; padding-left: 1.2em; overflow-wrap: anywhere; }
.wild__res .is-warn { color: var(--warning); }
.wild__conv { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 6px; }
.wild__train { display: grid; gap: 10px; }
.wild__q { font-weight: 750; overflow-wrap: anywhere; }
.wild__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wild__fb.is-ok { color: var(--success); font-weight: 800; }
.wild__fb.is-ko { color: var(--danger); font-weight: 700; overflow-wrap: anywhere; }
.acll__policy { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.acll__policy ul { display: grid; gap: 3px; padding-left: 1.2em; font-size: var(--fs-sm); }
.acll__ta { min-height: 300px; }
/* ---------- Services : lecteur Syslog et labo NTP (services.js) ---------- */
.syslog { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.syslog__ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; }
.syslog__chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 650; }
.syslog__trap { min-width: 220px; }
.syslog__trap select { min-height: 36px; }
.syslog__list { list-style: none; display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: #0B1220; border: 1px solid #1E2A40; }
.syslog__line { width: 100%; display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #E7EDF6; cursor: pointer; }
.syslog__line code { font-family: var(--font-mono); font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: none; color: inherit; padding: 0; }
.syslog__line:hover { background: #16213A; }
.syslog__line.is-sel { border-color: #5B8DEF; background: #16213A; }
.syslog__line.is-kept { opacity: .45; }
.syslog__line:disabled { cursor: default; }
.syslog__sev { flex: none; display: inline-grid; place-items: center; width: 22px; height: 20px; border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; color: #fff; }
/* Teintes choisies pour un texte blanc à 4,5:1 au moins, dans les deux thèmes */
.syslog__sev.s0, .syslog__sev.s1 { background: #B42318; }
.syslog__sev.s2 { background: #C2410C; }
.syslog__sev.s3 { background: #B45309; }
.syslog__sev.s4 { background: #A16207; }
.syslog__sev.s5 { background: #2563EB; }
.syslog__sev.s6 { background: #1F7A5F; }
.syslog__sev.s7 { background: #6B7280; }
.syslog__tbl th, .syslog__tbl td { padding: 6px 10px; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.syslog__tbl tbody th { white-space: normal; width: 30%; }
.syslog__what { padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); overflow-wrap: anywhere; }
.syslog__levels th, .syslog__levels td { padding: 5px 10px; font-size: var(--fs-sm); }
.syslog__levels tr.is-cur { background: var(--primary-soft); font-weight: 700; }
.syslog__levels tr.is-off td { color: var(--text-2); opacity: .7; }
.syslog__quiz { display: grid; gap: 8px; }
.syslog__quiz .btn-row { margin-top: 0; }
.ntp__cmd { margin-top: 8px; flex-wrap: wrap; }
/* ---------- Sécurité de niveau 2 : port security, DHCP snooping, DAI (security.js) ---------- */
.psl__events { padding-left: 1.3em; display: grid; gap: 8px; font-size: var(--fs-sm); }
.psl__events > li.is-todo { color: var(--text-2); }
.psl__events > li.is-ok > strong { color: var(--success); }
.psl__events > li.is-ko > strong { color: var(--danger); }
.psl__events ul { list-style: none; margin-top: 3px; display: grid; gap: 2px; color: var(--text-2); overflow-wrap: anywhere; }
.psl__goals { list-style: none; display: grid; gap: 4px; font-weight: 700; font-size: var(--fs-sm); }
.psl__goals--row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.psl__goals .is-ok { color: var(--success); }
.psl__goals .is-ko { color: var(--danger); }
/* ---------- Wi-Fi : canaux et contrôleur WLC (wifi.js) ---------- */
.wch { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.wch__ctl { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.wch__sel select { min-width: 92px; min-height: 34px; }
.wch__sel span { font-weight: 800; }
.wch__apname { color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.wch__spec { padding: 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.wch__svg { width: 100%; height: auto; display: block; }
.wch__tick { stroke: var(--text-2); }
.wch__lbl { fill: var(--text-2); font-size: 11px; font-family: var(--font-mono); }
.wch__lbl--sm { font-size: 8.5px; }
.wch__ap { font-size: 11px; font-weight: 800; }
.wch__slot { fill: var(--border-strong); }
.wlc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.wlc__frame { border: 1px solid #c9d2de; border-radius: 10px; overflow: hidden; background: #fff; color: #1f2a37; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.wlc__top { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 8px 12px; background: linear-gradient(#3c4a5c, #26313f); color: #dfe6ee; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.wlc__top .is-active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.wlc__logo { font-family: Arial, sans-serif; font-weight: 800; color: #49b7e8; font-size: 15px; text-transform: lowercase; letter-spacing: 0; margin-right: 8px; }
.wlc__body { padding: 12px 14px; display: grid; gap: 8px; }
.wlc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.wlc__body h4 { font-size: 15px; color: #1f4e79; }
.wlc__new select, .wlc__form select, .wlc__form input:not([type]) , .wlc__form input[type="text"] { min-height: 30px; border: 1px solid #a9b6c6; border-radius: 4px; padding: 0 6px; background: #fff; color: #1f2a37; max-width: 100%; }
.wlc__tbl th, .wlc__tbl td { padding: 6px 8px; font-size: 12.5px; }
.wlc__tbl thead th { background: #e7edf4; color: #1f2a37; }
.wlc__link { border: 0; background: none; color: #1565c0; text-decoration: underline; font-weight: 700; cursor: pointer; padding: 0; }
.wlc__form { display: grid; gap: 8px; }
.wlc__row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 8px; align-items: center; }
.wlc__row > span:first-child { font-weight: 700; color: #34495e; }
.wlc__checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wlc__checks label { display: inline-flex; gap: 5px; align-items: center; }
.wlc__tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid #1f4e79; }
.wlc__tabs button { border: 1px solid #a9b6c6; border-bottom: 0; background: #e7edf4; color: #1f2a37; padding: 5px 12px; border-radius: 6px 6px 0 0; font-weight: 700; cursor: pointer; }
.wlc__tabs button.is-active { background: #1f4e79; color: #fff; }
.wlc__sub { font-weight: 800; color: #1f4e79; }
.wlc__err { color: #b42318; font-weight: 700; }
.wlc__frame .muted { color: #5b6b7d; }
.wlc__client { display: grid; gap: 8px; align-content: start; }
.wlc__client > .btn { justify-self: start; }
@media (max-width: 560px) { .wlc__row { grid-template-columns: minmax(0, 1fr); } }
/* ---------- WAN : topologies et encapsulation VPN (wan.js) ---------- */
.wan, .vpns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.wan__ctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.wan__ctl select { min-height: 34px; }
.wan__stats { display: grid; gap: 4px; padding-left: 1.2em; overflow-wrap: anywhere; }
.wan__ko { color: var(--danger); font-weight: 700; }
.wan__acc { display: grid; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.wan__acc .segmented { flex-wrap: wrap; }
.vpns__modes { flex-wrap: wrap; }
.vpns__pkt { display: flex; gap: 2px; min-height: 64px; border-radius: 8px; overflow: hidden; }
.vpns__b { min-width: 0; display: grid; place-content: center; text-align: center; padding: 4px 2px; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; overflow: hidden; }
.vpns__b span { overflow-wrap: anywhere; }
.vpns__b small { font-weight: 600; opacity: .85; }
.vpns__b--new { background: #2563EB; }
.vpns__b--orig { background: #1F7A5F; }
.vpns__b--sec { background: #7C4DCC; }
.vpns__b--gre { background: #A16207; }
.vpns__b.is-enc, .vpns__sw.is-enc { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 5px, transparent 5px 10px); }
.vpns__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); }
.vpns__legend li { display: inline-flex; align-items: center; gap: 6px; }
.vpns__sw { display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
.vpns__sw.is-enc { background-color: #6B7280; }
.vpns__tbl th, .vpns__tbl td { padding: 7px 10px; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vpns__tbl tbody th { white-space: normal; width: 34%; }
/* ---------- Virtualisation, VRF et cloud (virt.js) ---------- */
.virt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.virt__stack { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.virt__units { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.virt__unit { display: grid; gap: 3px; padding: 6px; border-radius: 10px; border: 2px dashed var(--border-strong); }
.virt__unit > p { font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); text-align: center; }
.virt__layer { padding: 8px 10px; border-radius: 8px; text-align: center; font-weight: 750; font-size: var(--fs-sm); color: #fff; overflow-wrap: anywhere; }
.virt__layer--hw { background: #4B5563; }
.virt__layer--hyp { background: #7C4DCC; }
.virt__layer--os { background: #2563EB; }
.virt__layer--app { background: #1F7A5F; }
.virt__layer--lib { background: #A16207; }
.vpns__tbl .virt__cur { background: var(--primary-soft); font-weight: 750; }
.vrfl__ifs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vrfl__ifs select { min-height: 34px; }
.cloud__grid { display: grid; gap: 3px; max-width: 520px; }
.cloud__row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: var(--fs-sm); }
.cloud__row.is-client { background: var(--primary-soft); }
.cloud__row.is-client strong { color: var(--primary); }
.cloud__row.is-prov { background: var(--surface-2); color: var(--text-2); }
.cloud__cases { display: grid; gap: 8px; padding-left: 1.3em; }
.cloud__cases li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.cloud__cases li > span { flex: 1 1 260px; min-width: 0; }
.cloud__cases select { min-height: 32px; }
.cloud__cases li.is-ok { background: var(--success-soft); }
.cloud__cases li.is-ko { background: var(--danger-soft); }
.cloud__cases em { color: var(--danger); font-weight: 700; font-style: normal; }
/* ---------- Automatisation et IA : API REST, JSON, Ansible, prompts (automation.js) ---------- */
.auto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.rest__grid, .json__grid, .ans__grid, .prm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.rest__req, .rest__res, .json__ed, .json__res, .json__q, .ans__files, .ans__term, .prm__form, .prm__res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; align-content: start; }
.rest__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: #0B1220; border: 1px solid #1E2A40; }
.rest__method { min-height: 34px; font-family: var(--font-mono); font-weight: 800; border-radius: 8px; }
.rest__host { font-family: var(--font-mono); font-size: 12.5px; color: #8FA3BE; overflow-wrap: anywhere; }
.rest__uri { flex: 1 1 180px; min-width: 0; min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid #31445F; background: #131D30; color: #E7EDF6; font-family: var(--font-mono); font-size: 12.5px; }
.rest__uri:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rest__h { min-height: 74px; }
.rest__b { min-height: 150px; }
.rest__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid; }
.rest__status strong { font-family: var(--font-mono); font-size: var(--fs-lg); }
.rest__status span { font-size: var(--fs-sm); font-weight: 650; }
.rest__status--2 { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.rest__status--4 { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.rest__status--5 { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.rest__exp { font-weight: 650; }
.rest__out code, .ans__log code { white-space: pre; }
.rest__hist { list-style: none; display: grid; gap: 4px; font-size: var(--fs-sm); }
.rest__hist li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); }
.rest__hist code { overflow-wrap: anywhere; }
.rest__code { font-family: var(--font-mono); font-weight: 800; }
.rest__code--2 { color: var(--success); }
.rest__code--4 { color: var(--warning); }
.rest__code--5 { color: var(--danger); }
.json__ta { min-height: 380px; font-size: 12.5px; white-space: pre; overflow-x: auto; }
.json__err { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--danger); background: var(--danger-soft); color: var(--text); overflow-wrap: anywhere; }
.json__err strong { color: var(--danger); }
.json__ok { font-weight: 750; color: var(--success); }
.json__info { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.json__info code { overflow-wrap: anywhere; }
.json__tree { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-sm); overflow-x: auto; }
.json__tree ul { list-style: none; margin: 2px 0 2px 10px; padding-left: 10px; border-left: 1px dashed var(--border-strong); display: grid; gap: 1px; }
.json__node > summary { cursor: pointer; padding: 1px 0; }
.json__k { font-family: var(--font-mono); font-weight: 700; color: var(--primary); }
button.json__k, .json__leaf { border: 1px solid transparent; background: none; border-radius: 6px; padding: 1px 4px; cursor: pointer; font: inherit; text-align: left; color: inherit; }
button.json__k { font-family: var(--font-mono); font-weight: 700; color: var(--primary); }
.json__leaf { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; max-width: 100%; }
button.json__k:hover, .json__leaf:hover { border-color: var(--border-strong); }
button.json__k.is-sel, .json__leaf.is-sel { border-color: var(--primary); background: var(--primary-soft); }
.json__sep { color: var(--text-2); }
.json__v { font-family: var(--font-mono); background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
.json__v--str { color: color-mix(in srgb, var(--d4) 60%, var(--text)); }
.json__v--num { color: color-mix(in srgb, var(--d3) 60%, var(--text)); }
.json__v--bool { color: color-mix(in srgb, var(--d2) 75%, var(--text)); }
.json__v--null { color: var(--text-2); font-style: italic; }
.json__t { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); padding: 0 6px; border-radius: 999px; background: var(--surface-3); }
.json__t--obj { color: var(--primary); }
.json__t--arr { color: var(--d2); }
.json__doc { max-height: 560px; overflow: auto; font-size: 12px; }
.json__choices { display: grid; gap: 6px; }
.json__choices .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.json__choices code { background: none; border: 0; padding: 0; color: inherit; overflow-wrap: anywhere; }
.json__fb { padding: 10px 14px; border-radius: 10px; border: 1.5px solid; display: grid; gap: 6px; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.json__fb.is-ok { border-color: var(--success); background: var(--success-soft); }
.json__fb.is-ok strong { color: var(--success); }
.json__fb.is-ko { border-color: var(--danger); background: var(--danger-soft); }
.json__fb.is-ko strong { color: var(--danger); }
.json__fb ol { padding-left: 1.3em; display: grid; gap: 2px; }
.json__end { display: grid; gap: 8px; }
.ans__ta { min-height: 380px; font-size: 12.5px; white-space: pre; overflow-x: auto; }
.ans__files .segmented code { background: none; border: 0; padding: 0; color: inherit; }
.ans__log { min-height: 260px; max-height: 520px; overflow: auto; font-size: 12px; line-height: 1.45; }
.ans-p { color: #8FE3A6; font-weight: 700; }
.ans-ok { color: #4CC38A; }
.ans-ch { color: #E3C46F; }
.ans-ko { color: #FF8A94; }
.ans-sk { color: #6CCBF3; }
.ans-wa { color: #D7A8FF; }
.prm__ta { width: 100%; min-height: 0; resize: vertical; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 1.45; }
.prm__ta:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.prm__data { min-height: 110px; font-size: 12px; }
.prm__form .tlab__f select { min-height: 36px; }
.prm__verdict { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1.5px solid; }
.prm__verdict p { font-size: var(--fs-sm); color: var(--text-2); }
.prm__verdict--ok { border-color: var(--success); background: var(--success-soft); }
.prm__verdict--ok strong, .prm__verdict--ok .prm__score { color: var(--success); }
.prm__verdict--warn { border-color: var(--warning); background: var(--warning-soft); }
.prm__verdict--warn strong, .prm__verdict--warn .prm__score { color: var(--warning); }
.prm__verdict--ko { border-color: var(--danger); background: var(--danger-soft); }
.prm__verdict--ko strong, .prm__verdict--ko .prm__score { color: var(--danger); }
.prm__score { flex: none; font-size: 26px; font-weight: 900; font-family: var(--font-mono); }
.prm__tip { display: block; font-weight: 500; color: var(--text-2); margin: 1px 0 3px 1.2em; }
.prm__preview { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
.prm__rev, .prm__cls { display: grid; gap: var(--space-3); }
.prm__lines { list-style: none; display: grid; gap: 4px; padding: 8px; border-radius: 10px; background: #0B1220; border: 1px solid #1E2A40; counter-reset: l; }
.prm__line { width: 100%; display: grid; gap: 4px; text-align: left; padding: 5px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #E7EDF6; cursor: pointer; }
.prm__line code { font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; background: none; border: 0; padding: 0; color: inherit; }
.prm__line:hover { background: #16213A; }
.prm__line.is-flag { border-color: #E3C46F; background: #2A2614; }
.prm__line.is-found { border-color: #4CC38A; background: #10291D; }
.prm__line.is-missed { border-color: #FF8A94; background: #2E1418; }
.prm__line.is-false { border-color: #E3C46F; background: #2A2614; }
.prm__why { font-size: var(--fs-xs); color: #C9D4E3; }
@media (max-width: 900px) { .rest__grid, .json__grid, .ans__grid, .prm__grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Dépannage : traceroute, méthode, captures (trouble.js) ---------- */
.trl__term, .trl__diag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.trl__log { min-height: 220px; max-height: 480px; }
.trl__diag { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); }
.trl__diag select { min-height: 36px; max-width: 100%; }
.mp__list { list-style: none; display: grid; gap: 6px; }
.mp__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.mp__list li.is-ok { border-color: var(--success); background: var(--success-soft); }
.mp__list li.is-ko { border-color: var(--danger); background: var(--danger-soft); }
.mp__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: var(--fs-sm); }
.mp__t { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.mp__btns { display: inline-flex; gap: 4px; }
.mp__mv { width: 34px; height: 34px; font-weight: 800; }
.mp__mv:disabled { opacity: .35; }
.mp__cases { grid-template-columns: minmax(0, 1fr); }
.mp__cases select { max-width: 100%; min-width: 0; }
.mp__why { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--text-2) !important; font-weight: 500 !important; }
.cap__flt { display: grid; gap: 4px; font-size: var(--fs-sm); }
.cap__flt > span { font-weight: 650; color: var(--text-2); }
.cap__flt input { min-height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 12.5px; min-width: 0; }
.cap__flt input.is-good { background: #d7f5d2; color: #13261a; border-color: #67b56c; }
.cap__flt input.is-bad { background: #ffd1d1; color: #3a1010; border-color: #d35b5b; }
.cap__flt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.cap__ferr { color: var(--danger); font-weight: 700; font-size: var(--fs-sm); }
.cap__tbl th, .cap__tbl td { padding: 4px 8px; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; text-align: left; }
.cap__tbl tbody tr { cursor: pointer; color: #12161f; }
.cap__row--tcp { background: #e7e6ff; }
.cap__row--udp { background: #daeeff; }
.cap__row--arp { background: #faf0d7; }
.cap__row--rst { background: #a40000; color: #fffc9c !important; }
.cap__row--retr { background: #12161f; color: #ff6b6b !important; }
.cap__row--other { background: #f3f4f6; }
.cap__tbl tbody tr.is-sel { outline: 3px solid #2f6fed; outline-offset: -3px; }
.cap__tbl tbody tr:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cap__detail { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-sm); }
.cap__layer summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.cap__layer ul { list-style: none; display: grid; gap: 2px; padding: 4px 0 6px 18px; }
.cap__layer li { overflow-wrap: anywhere; color: var(--text-2); }
.cap__layer code { font-size: .92em; overflow-wrap: anywhere; }
.cap__q { display: grid; gap: 8px; }
/* ---------- Générateur de script switch (switch-config.js) ---------- */
.swg { display: grid; gap: var(--space-4); }
.swg__intro { font-size: var(--fs-sm); color: var(--text-2); max-width: 75ch; }
.swg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.swg__form { display: grid; gap: var(--space-3); min-width: 0; }
.swg__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
.swg__f { min-width: 0; }
.swg__f input, .swg__f select { width: 100%; min-width: 0; min-height: 40px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.swg__hint { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.swg__hint code, .swg__chk code, .swg__howto code { font-size: .92em; }
.swg__dep { display: grid; gap: 8px; }
.swg__dep.is-off { opacity: .55; }
.swg__chk { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.swg__chk input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); }
.swg__chk span { min-width: 0; overflow-wrap: anywhere; }
.swg__chks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.swg__list { display: grid; gap: 8px; }
.swg__vhead, .swg__vrow { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.swg__vhead { font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }
.swg__vrow input { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); }
.swg__vrow input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.swg__acc { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.swg__acc-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 750; font-size: var(--fs-sm); }
.swg__allowed { font-family: var(--font-mono); font-weight: 700; color: var(--primary); }
.swg__out { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.swg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.swg__title { font-weight: 800; font-size: var(--fs-lg); }
.swg__status { padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 750; }
.swg__status.is-ok, .slab__notes .swg__okline { background: var(--success-soft); color: var(--success); }
.swg__status.is-warn { background: var(--warning-soft); color: var(--warning); }
.swg__status.is-err { background: var(--danger-soft); color: var(--danger); }
.swg__actions { margin-top: 0; align-items: center; }
.swg__pre { font-size: 12.5px; }
.swg__c { color: #8A9AB1; }
.swg__h { color: #6CCBF3; font-weight: 700; }
.swg__howto { padding-left: 1.3em; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); }
@media (min-width: 1300px) {
  .swg__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .swg__out { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px); overflow: auto; }
}

/* ---------- Parcours carrière IT : terminal système (shell.js) et labo pare-feu (firewall.js) ---------- */
.shl { display: grid; gap: var(--space-3); min-width: 0; }
.shl__pick { max-width: 420px; }
.fwl { display: grid; gap: var(--space-3); min-width: 0; }
.fwl__h { font-size: var(--fs-md, 1rem); font-weight: 750; margin-top: var(--space-2); }
.fwl__rules td, .fwl__rules th { white-space: nowrap; }
.fwl__acts { display: flex; gap: 4px; }
.fwl__acts .btn { min-width: 34px; padding: 0 8px; }
.fwl__implicit th, .fwl__implicit td { color: var(--text-2); font-style: italic; }
.fwl__form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.fwl__form .tlab__f { flex: 1 1 160px; }
.fwl__flows { list-style: none; display: grid; gap: 6px; padding: 0; }
.fwl__flows li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fwl__mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 900; }
.fwl__ok .fwl__mark { background: var(--success); color: var(--on-success); }
.fwl__ko { border-color: var(--danger); }
.fwl__ko .fwl__mark { background: var(--danger); color: var(--on-danger); }
.fwl__notes { display: grid; gap: 8px; }
.fwl > *, .shl > * { min-width: 0; }
.fwl .table-wrap { position: relative; }   /* garde le titre de colonne « sr-only » dans le cadre qui défile */
.fwl__form select { width: 100%; min-width: 0; }