/* ===== TO2026 — page « Qui suis-je » ===== */
.to-qs-hero { padding: 56px 0 0; }
.to-qs-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center; }
html body .to-qs-head h1 { font-size: 48px; line-height: 1.17; margin: 0 0 24px; }
.to-qs-head .to-lede { margin: 0 0 32px; }
.to-qs-head .to-lede + .to-lede { margin-top: -8px; }

/* le portrait, posé dans un moniteur */
.to-qs-mon { margin: 0; background: #2a2a2e; border: 2px solid var(--to-ink); padding: 20px 20px 0; box-shadow: 8px 8px 0 var(--to-ink); }
.to-qs-mon img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 2px solid #000; }
.to-qs-mon figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; line-height: 1.5; color: #c9c9cf; padding: 12px 0 14px; }
.to-qs-mon figcaption i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; }
.to-qs-mon figcaption i::before { content: ""; width: 8px; height: 8px; background: #ff3b30; box-shadow: 0 0 6px #ff3b30; }

/* la fiche d'identité */
.to-qs-id { 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); }
.to-qs-id li { padding: 16px 16px 20px 0; border-right: 2px dotted var(--to-rule); }
.to-qs-id li + li { padding-left: 16px; }
.to-qs-id li:last-child { border-right: 0; }
.to-qs-id span { display: block; font-size: 12px; color: var(--to-muted); }
.to-qs-id b { display: block; font-weight: 400; font-size: 16px; line-height: 1.5; margin-top: 4px; }
.to-qs-id .is-key b { color: var(--to-blue); }

/* 02 · LIST : le parcours écrit comme un programme, les années en numéros de ligne */
.to-qs-list { margin: 72px 0 0; background: var(--to-blue); border: 2px solid var(--to-ink); box-shadow: 8px 8px 0 var(--to-ink); color: #fff; }
.to-qs-list-top { display: flex; justify-content: space-between; gap: 16px; font-family: var(--to-mono); font-size: 16px; line-height: 1.5; padding: 16px 28px; border-bottom: 2px solid rgba(255,255,255,.35); color: var(--to-yellow); }
.to-qs-list-top span:last-child { color: #b9c3ff; }
.to-qs-list ol { list-style: none; margin: 0; padding: 8px 0; }
.to-qs-list li { display: grid; grid-template-columns: 96px 64px minmax(0, 1fr); gap: 0 16px; padding: 20px 28px; align-items: baseline; }
.to-qs-list li + li { border-top: 2px dotted rgba(255,255,255,.22); }
.to-qs-list li:hover { background: #0a1db0; }
.to-qs-y { font-family: var(--to-mono); font-size: 24px; line-height: 1.33; color: #ffb21e; }
.to-qs-kw { font-family: var(--to-mono); font-size: 16px; color: #7ff0ff; }
.to-qs-list b { display: block; font-weight: 400; font-size: 24px; line-height: 1.33; color: var(--to-yellow); margin: 0 0 8px; }
.to-qs-list p { margin: 0; font-size: 16px; line-height: 1.75; color: #dfe4ff; max-width: 70ch; }
.to-qs-list .is-now b { color: #fff; }
.to-qs-run { font-family: var(--to-mono); font-size: 16px; line-height: 1.5; padding: 16px 28px 24px; border-top: 2px solid rgba(255,255,255,.35); color: #fff; }
.to-qs-run .to-cursor { background: #fff; }

/* 03 · aujourd'hui : les trois briques */
.to-qs-tech { margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--to-ink); }
.to-qs-tech > div { padding: 32px 28px 36px; background: #fff; }
.to-qs-tech > div + div { border-left: 2px solid var(--to-ink); }
.to-qs-tech > div:first-child { background: var(--to-ink); color: var(--to-paper); }
.to-qs-tech > div:first-child p { color: #c9c9cf; }
.to-qs-tech > div:first-child span { color: var(--to-yellow); }
.to-qs-tech span { font-size: 12px; color: var(--to-blue); }
html body .to-qs-tech h3 { font-size: 48px; line-height: 1.17; margin: 16px 0 20px; color: inherit; }
.to-qs-tech p { margin: 0; font-size: 12px; line-height: 1.75; color: var(--to-muted); }

/* 04 · pourquoi : le programme et les langues */
.to-qs-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.to-qs-why > * { min-width: 0; }
html body .to-qs-why pre.to-code { font-family: var(--to-mono); font-size: 16px; line-height: 1.5; margin: 0; padding: 24px 28px; background: var(--to-blue); border: 2px solid var(--to-ink); box-shadow: 8px 8px 0 var(--to-ink); white-space: pre; overflow-x: auto; }
.to-qs-langs { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.to-qs-langs li { font-size: 12px; line-height: 1; padding: 8px 10px 7px; border: 2px solid var(--to-ink); background: #fff; }
.to-qs-langs li.is-key { background: var(--to-yellow); }

.to-qs-end { margin: 120px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 40px; background: var(--to-yellow); border: 2px solid var(--to-ink); }
html body .to-qs-end h3 { font-size: 32px; margin: 0 0 12px; }
.to-qs-end p { margin: 0; }
.to-qs-end-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
html body .to-qs-end .to-link { margin-top: 0; }

@media (max-width: 1099px) {
  .to-qs-head, .to-qs-why { grid-template-columns: 1fr; gap: 40px; }
  .to-qs-mon { max-width: 560px; }
  html body .to-qs-head h1 { font-size: 32px; }
  .to-qs-id { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .to-qs-id li, .to-qs-id li + li { border-right: 0; border-bottom: 2px dotted var(--to-rule); padding-left: 0; }
  .to-qs-tech { grid-template-columns: 1fr; }
  .to-qs-tech > div + div { border-left: 0; border-top: 2px solid var(--to-ink); }
  .to-qs-end { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html body .to-qs-head h1 { font-size: 24px; }
  .to-qs-id { grid-template-columns: 1fr; }
  .to-qs-list-top, .to-qs-run { padding-left: 16px; padding-right: 16px; font-size: 12px; }
  .to-qs-list li { grid-template-columns: 56px minmax(0, 1fr); padding: 16px; }
  .to-qs-kw { display: none; }
  .to-qs-y { font-size: 16px; }
  .to-qs-list b { font-size: 16px; }
  .to-qs-list p { font-size: 12px; }
  html body .to-qs-tech h3 { font-size: 32px; }
  html body .to-qs-why pre.to-code { font-size: 12px; padding: 16px; }
  .to-qs-end { padding: 24px; margin-top: 80px; }
  html body .to-qs-end h3 { font-size: 24px; }
}