/* ===== TO2026 — page « Le virtual TO2026 » ===== */
.to-vt-hero { padding: 56px 0 0; }
.to-vt-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; }
html body .to-vt-head h1 { font-size: 48px; line-height: 1.17; margin: 0; }
html body .to-vt-head p { margin: 0; color: var(--to-muted); }
.to-vt-specs { margin-top: 64px; padding: 64px 0 72px; }
.to-vt-specs .to-specs { margin-top: 0; }

/* 01 · les couches, de l'utilisateur au navigateur */
.to-vt-layers { list-style: none; margin: 72px 0 0; padding: 0; counter-reset: c; }
.to-vt-layers li { display: grid; grid-template-columns: 56px 240px 1fr; gap: 24px; align-items: center; padding: 20px 24px; border: 2px solid var(--to-ink); background: #fff; counter-increment: c; }
.to-vt-layers li::before { content: "0" counter(c); font-size: 12px; color: var(--to-blue); }
.to-vt-layers li + li { margin-top: -2px; }
.to-vt-layers li:nth-child(1) { background: var(--to-yellow); }
.to-vt-layers li:nth-child(2) { background: #fff; }
.to-vt-layers li:nth-child(3) { background: var(--to-ink); color: var(--to-paper); }
.to-vt-layers li:nth-child(3)::before, .to-vt-layers li:nth-child(3) span { color: var(--to-yellow); }
.to-vt-layers li:nth-child(4) { background: var(--to-blue); color: #fff; }
.to-vt-layers li:nth-child(4)::before, .to-vt-layers li:nth-child(4) span { color: var(--to-yellow); }
.to-vt-layers li:nth-child(5) { background: #e6e4da; }
.to-vt-layers span { font-size: 12px; }
.to-vt-layers b { font-weight: 400; line-height: 1.6; }
.to-vt-layers i { font-style: normal; opacity: .6; }

/* 02 · la carte mémoire : une barre par zone, hauteur selon l'importance */
.to-vt-mem { margin: 72px 0 0; border: 2px solid var(--to-ink); background: #fff; }
.to-vt-mem ol { list-style: none; margin: 0; padding: 0; }
.to-vt-memh, .to-vt-mem li { display: grid; grid-template-columns: 110px 110px 260px minmax(0, 1fr); gap: 16px; align-items: center; padding: 0 20px; margin: 0; }
.to-vt-memh { font-size: 12px; color: var(--to-paper); background: var(--to-ink); padding-top: 10px; padding-bottom: 10px; }
.to-vt-mem li { border-top: 2px solid var(--to-ink); min-height: 44px; }
html body .to-vt-mem code { font-family: var(--to-mono); font-size: 16px; background: none; border: 0; padding: 0; color: inherit; }
.to-vt-mem b { font-weight: 400; }
.to-vt-mem span { font-size: 12px; line-height: 1.6; color: var(--to-muted); }
.to-vt-mem li.is-ram { background: repeating-linear-gradient(135deg, #fff 0 6px, #f1f0ea 6px 12px); }
.to-vt-mem li.is-ram:first-child, .to-vt-mem li.is-ram:last-child { min-height: 88px; }
.to-vt-mem li.is-bank { background: var(--to-yellow); min-height: 96px; }
.to-vt-mem li.is-bank span { color: var(--to-ink); }
.to-vt-mem li.is-io { background: var(--to-blue); color: #fff; }
.to-vt-mem li.is-io span { color: #dfe4ff; }

/* 03 · les modes et les plans du mode 20 */
.to-vt-modes { width: 100%; border-collapse: collapse; margin: 72px 0 0; }
.to-vt-modes th, .to-vt-modes td { border: 2px solid var(--to-ink); padding: 14px 18px; text-align: left; vertical-align: top; }
.to-vt-modes th { background: var(--to-ink); color: var(--to-paper); font-weight: 400; font-size: 12px; }
.to-vt-modes td { background: #fff; font-size: 16px; line-height: 1.5; }
.to-vt-modes td:first-child { width: 1%; white-space: nowrap; color: var(--to-blue); }
.to-vt-modes td:last-child { font-size: 12px; line-height: 1.75; color: var(--to-muted); }
.to-vt-modes tr.is-20 td { background: var(--to-yellow); color: var(--to-ink); }
.to-vt-planes { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; margin: 96px 0 0; }
html body .to-vt-planes h3 { font-size: 32px; margin: 0 0 24px; }
.to-vt-planes-text p { color: var(--to-muted); margin: 0 0 24px; }
/* les plans empilés, décalés comme des calques vus de biais */
.to-vt-stack { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; }
.to-vt-stack li {
  position: relative; display: grid; grid-template-columns: 32px 200px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 14px 18px; border: 2px solid var(--to-ink); background: #fff; margin: 0 0 -2px calc(var(--i) * 16px);
  box-shadow: 6px 6px 0 rgba(18,18,18,.12);
}
.to-vt-stack li:nth-child(1) { background: var(--to-ink); color: var(--to-paper); }
.to-vt-stack li:nth-child(1) em { color: var(--to-yellow); }
.to-vt-stack li:nth-child(2), .to-vt-stack li:nth-child(4) { background: var(--to-yellow); }
.to-vt-stack li:nth-child(3) { background: #fff; }
.to-vt-stack li:nth-child(5), .to-vt-stack li:nth-child(6) { background: #e6e4da; }
.to-vt-stack li:nth-child(7) { background: var(--to-blue); color: #fff; }
.to-vt-stack li:nth-child(7) em { color: var(--to-yellow); }
.to-vt-stack em { font-style: normal; font-size: 12px; color: var(--to-blue); }
.to-vt-stack b { font-weight: 400; }
.to-vt-stack span { font-size: 12px; line-height: 1.6; opacity: .8; }

/* 04 et 05 · fiches des circuits */
.to-vt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 56px 0 0; }
.to-vt-chip { background: #fff; border: 2px solid var(--to-ink); padding: 32px; box-shadow: 8px 8px 0 var(--to-ink); }
html body .to-vt-chip h3 { font-size: 24px; margin: 0 0 20px; }
.to-vt-chip p { color: var(--to-muted); margin: 0 0 24px; font-size: 16px; line-height: 1.75; }
.to-vt-chip dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); margin: 0; border-top: 2px solid var(--to-ink); }
.to-vt-chip dt, .to-vt-chip dd { margin: 0; padding: 10px 0; border-bottom: 2px dotted var(--to-rule); font-size: 12px; line-height: 1.6; }
.to-vt-chip dt { color: var(--to-blue); }

/* 06 · démarrage */
.to-vt-boot { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--to-ink); counter-reset: b; }
.to-vt-boot li { padding: 24px 24px 0 0; counter-increment: b; }
.to-vt-boot li::before { content: "0" counter(b); display: block; font-size: 12px; color: var(--to-blue); margin-bottom: 12px; }
.to-vt-boot b { display: block; font-weight: 400; font-size: 16px; margin-bottom: 12px; }
.to-vt-boot p { margin: 0; color: var(--to-muted); font-size: 12px; line-height: 1.75; }
.to-vt-cta { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; margin: 96px 0 56px; padding: 40px; background: var(--to-yellow); border: 2px solid var(--to-ink); }
html body .to-vt-cta h3 { font-size: 32px; margin: 0 0 12px; }
.to-vt-cta p { margin: 0; }
.to-vt-cta > p { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

@media (max-width: 1099px) {
  .to-vt-head, .to-vt-planes { grid-template-columns: 1fr; gap: 32px; }
  html body .to-vt-head h1 { font-size: 32px; }
  .to-vt-boot { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .to-vt-memh, .to-vt-mem li { grid-template-columns: 90px 90px minmax(0, 1fr); }
  .to-vt-memh span:last-child, .to-vt-mem li span { grid-column: 3; }
  .to-vt-mem li { padding-top: 8px; padding-bottom: 8px; row-gap: 2px; }
  .to-vt-mem li span:empty { display: none; }
}
@media (max-width: 760px) {
  html body .to-vt-head h1 { font-size: 24px; }
  .to-vt-layers li { grid-template-columns: 1fr; gap: 6px; }
  .to-vt-chips { grid-template-columns: 1fr; }
  .to-vt-chip { padding: 20px; }
  .to-vt-chip dl { grid-template-columns: 110px minmax(0, 1fr); }
  .to-vt-boot { grid-template-columns: 1fr; }
  .to-vt-cta { grid-template-columns: 1fr; padding: 24px; }
  .to-vt-stack li { grid-template-columns: 24px minmax(0, 1fr); margin-left: calc(var(--i) * 6px); }
  .to-vt-stack span { grid-column: 2; }
  .to-vt-memh, .to-vt-mem li { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 14px; }
  .to-vt-memh span:nth-child(n+2) { display: none; }
  .to-vt-mem li b, .to-vt-mem li span { grid-column: 1 / -1; }
  .to-vt-modes th, .to-vt-modes td { padding: 10px; }
  .to-vt-modes td { font-size: 12px; }
}