/* ===== TO2026 — pages « GEOS pour TO2026 » : le bureau, Plume, Abaque ===== */
.to-gs-hero { padding: 48px 0 0; }

/* la barre de menus de GEOS : des cases noires sur blanc, l'onglet courant en vidéo inverse */
.to-gs-bar { display: flex; flex-wrap: wrap; margin: 0 0 48px; border: 2px solid var(--to-ink); background: #fff; width: max-content; max-width: 100%; }
.to-gs-bar span, html body .to-gs-bar a { font-size: 16px; padding: 8px 16px 7px; border-right: 2px solid var(--to-ink); color: var(--to-ink); text-decoration: none; line-height: 1.2; }
html body .to-gs-bar a:last-child { border-right: 0; }
html body .to-gs-bar a:hover { background: #e6e4da; }
html body .to-gs-bar a[aria-current="page"] { background: var(--to-ink); color: #fff; }

.to-gs-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; }
html body .to-gs-head h1 { font-size: 48px; line-height: 1.17; margin: 0; }
html body .to-gs-head p { margin: 0; color: var(--to-muted); }

/* l'écran et la fiche */
.to-gs-show { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: start; margin: 56px 0 0; }
.to-gs-screen, .to-gs-menufig { margin: 0; border: 2px solid var(--to-ink); box-shadow: 8px 8px 0 var(--to-ink); background: #fff; }
.to-gs-screen figcaption { font-size: 12px; padding: 6px 12px; background: var(--to-ink); color: var(--to-paper); }
.to-gs-screen img, .to-gs-menufig img, .to-gs-app img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; image-rendering: pixelated; }
.to-gs-facts { border-top: 2px solid var(--to-ink); }
.to-gs-k { font-size: 12px; color: var(--to-muted); margin: 16px 0 8px; letter-spacing: .05em; }
.to-gs-facts dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); margin: 0 0 24px; }
.to-gs-facts dt, .to-gs-facts dd { margin: 0; padding: 10px 0; border-bottom: 2px dotted var(--to-rule); font-size: 12px; line-height: 1.6; }
.to-gs-facts dt { color: var(--to-blue); }
.to-gs-facts ol { margin: 0; padding: 0; list-style: none; counter-reset: o; }
.to-gs-facts ol li { counter-increment: o; display: grid; grid-template-columns: 28px minmax(0, 1fr); font-size: 12px; line-height: 1.75; margin: 0 0 8px; }
.to-gs-facts ol li::before { content: counter(o); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--to-ink); color: var(--to-yellow); font-size: 12px; }
html body .to-gs-facts code, html body .to-gs-last code { font-family: var(--to-mono); background: #fff; border: 1px solid var(--to-rule); padding: 1px 5px; color: var(--to-ink); }

/* fonctionnalités */
.to-gs-feats { 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-gs-feats li { padding: 24px 24px 0 0; }
.to-gs-feats b { display: block; font-weight: 400; font-size: 16px; margin-bottom: 12px; }
.to-gs-feats p { margin: 0; color: var(--to-muted); font-size: 12px; line-height: 1.75; }

/* les menus du programme, ouverts côte à côte */
.to-gs-menuwrap { margin: 96px 0 0; }
.to-gs-menuwrap.has-fig { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
html body .to-gs-menuwrap h3, html body .to-gs-fns h3 { font-size: 32px; margin: 0 0 16px; }
.to-gs-menuwrap p, .to-gs-fns p { color: var(--to-muted); margin: 0 0 24px; }
.to-gs-menus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; }
.to-gs-menus > li { margin: 0 -2px -2px 0; }
.to-gs-menus b { display: block; font-weight: 400; font-size: 16px; padding: 6px 12px 5px; border: 2px solid var(--to-ink); background: var(--to-ink); color: #fff; }
.to-gs-menus > li:first-child b { background: #fff; color: var(--to-ink); }
.to-gs-menus ul { list-style: none; margin: 0; padding: 0; border: 2px solid var(--to-ink); border-top: 0; background: #fff; box-shadow: 4px 4px 0 rgba(18,18,18,.18); }
.to-gs-menus ul li { font-size: 12px; padding: 7px 12px 6px; border-top: 1px solid var(--to-ink); white-space: nowrap; }
.to-gs-menus ul li:first-child { border-top: 0; }

/* fonctions d'Abaque */
.to-gs-fns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; margin: 96px 0 0; }
.to-gs-fns table { width: 100%; border-collapse: collapse; }
.to-gs-fns td { border: 2px solid var(--to-ink); padding: 10px 14px; background: #fff; font-size: 12px; line-height: 1.6; vertical-align: top; }
.to-gs-fns td:first-child { width: 1%; white-space: nowrap; }
html body .to-gs-fns code { font-family: var(--to-pixel); font-size: 16px; color: var(--to-blue); background: none; border: 0; padding: 0; }

/* les deux applications */
.to-gs-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 56px 0 0; }
html body .to-gs-app { display: block; text-decoration: none; color: var(--to-ink); background: #fff; border: 2px solid var(--to-ink); transition: transform .12s, box-shadow .12s; }
html body .to-gs-app:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--to-ink); }
.to-gs-app img { border-bottom: 2px solid var(--to-ink); }
.to-gs-app span { display: block; padding: 24px 28px 28px; }
.to-gs-app b { display: block; font-weight: 400; font-size: 32px; margin-bottom: 12px; }
.to-gs-app em { display: block; font-style: normal; font-size: 12px; line-height: 1.75; color: var(--to-muted); margin-bottom: 16px; }
.to-gs-app i { font-style: normal; color: var(--to-blue); font-size: 16px; }

/* sous le capot */
.to-gs-last { padding-bottom: 96px; }
.to-gs-last .to-split > *, .to-gs-fns > *, .to-gs-menuwrap > * { min-width: 0; }
html body .to-gs-code { font-family: var(--to-mono); font-size: 16px; line-height: 1.5; background: var(--to-blue); color: var(--to-yellow); padding: 20px 24px; margin: 8px 0 0; white-space: pre; overflow-x: auto; border: 2px solid var(--to-ink); }

@media (max-width: 1099px) {
  .to-gs-head, .to-gs-show, .to-gs-menuwrap.has-fig, .to-gs-fns { grid-template-columns: 1fr; gap: 32px; }
  html body .to-gs-head h1 { font-size: 32px; }
  .to-gs-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}
@media (max-width: 760px) {
  html body .to-gs-head h1 { font-size: 24px; }
  .to-gs-bar span, html body .to-gs-bar a { font-size: 12px; padding: 8px 10px 7px; }
  .to-gs-feats, .to-gs-apps { grid-template-columns: 1fr; }
  .to-gs-menus ul li { white-space: normal; }
  html body .to-gs-code { font-size: 12px; }
  .to-gs-fns td:first-child { white-space: normal; width: 40%; }
  html body .to-gs-fns code { font-size: 12px; }
}