/* TuxAPE : feuille de style du site.

   Le modèle est WinAPE.net : un cadre clair posé sur un fond bleu, une barre
   de liens sous le bandeau, un menu à gauche et des boîtes à barre de titre.

   Accessibilité (WCAG 2.2 niveau AAA, RGAA) :
   - tout texte tient un contraste d'au moins 7:1 sur son fond, dans les deux
     thèmes ; les couleurs sont vérifiées par build.py ;
   - rien n'est dit par la couleur seule ;
   - les cibles hors du texte courant font au moins 44 px ;
   - les lignes de texte ne dépassent pas 80 caractères, sans justification. */

/* ---------- Couleurs ---------- */

:root {
  color-scheme: light;
  --page: #1b3a6b;
  --page-text: #ffffff;
  --frame: #ffffff;
  --line: #0d1526;
  --line-soft: #5b6779;
  --shadow: rgba(13, 21, 38, 0.35);
  --box: #eef1f5;
  --bar-a: #e9eef5;
  --bar-b: #bfcbdc;
  --bar-text: #0d1526;
  --text: #0d1526;
  --soft: #2f3a4d;
  --link: #0b3080;
  --visited: #4a1a78;
  --th: #cfd8e4;
  --td: #e2e7ee;
  --code: #dce3ed;
  --button: #0b3080;
  --button-hover: #061d52;
  --button-text: #ffffff;
  --yes: #0a4f1a;
  --no: #7d0f0f;
  --version: #7a3200;
  --focus-in: #000000;
  --focus-out: #ffd400;
  --screen: #000080;
  --screen-text: #ffff00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #060a14;
    --page-text: #f1f4f9;
    --frame: #0f1522;
    --line: #8792ab;
    --line-soft: #6b7896;
    --shadow: rgba(0, 0, 0, 0.6);
    --box: #171f31;
    --bar-a: #2c3855;
    --bar-b: #202a43;
    --bar-text: #f1f4f9;
    --text: #f1f4f9;
    --soft: #c9d0dc;
    --link: #a9c8ff;
    --visited: #d6b8ff;
    --th: #283350;
    --td: #1c2539;
    --code: #252f48;
    --button: #a9c8ff;
    --button-hover: #d0e0ff;
    --button-text: #06122e;
    --yes: #8fe3a2;
    --no: #ffb3b3;
    --version: #ffc58f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #060a14;
  --page-text: #f1f4f9;
  --frame: #0f1522;
  --line: #8792ab;
  --line-soft: #6b7896;
  --shadow: rgba(0, 0, 0, 0.6);
  --box: #171f31;
  --bar-a: #2c3855;
  --bar-b: #202a43;
  --bar-text: #f1f4f9;
  --text: #f1f4f9;
  --soft: #c9d0dc;
  --link: #a9c8ff;
  --visited: #d6b8ff;
  --th: #283350;
  --td: #1c2539;
  --code: #252f48;
  --button: #a9c8ff;
  --button-hover: #d0e0ff;
  --button-text: #06122e;
  --yes: #8fe3a2;
  --no: #ffb3b3;
  --version: #ffc58f;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0.75rem;
  background: var(--page);
  color: var(--text);
  font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:visited {
  color: var(--visited);
}

a:hover {
  text-decoration-thickness: 3px;
}

/* Deux anneaux, un sombre et un clair : le focus se voit sur tous les fonds. */
:focus-visible {
  outline: 3px solid var(--focus-out);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-in);
  border-radius: 2px;
}

h1,
h2,
h3 {
  line-height: 1.3;
}

p,
ul,
ol,
dl,
pre,
table,
figure {
  margin: 0 0 1rem;
}

p,
li,
dd,
dt {
  max-width: 80ch;
}

ul,
ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

code,
kbd,
pre,
samp {
  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;
  font-size: 0.95em;
}

code {
  background: var(--code);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

kbd {
  display: inline-block;
  background: var(--frame);
  border: 1px solid var(--line-soft);
  border-bottom-width: 3px;
  border-radius: 4px;
  padding: 0 0.4em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Un intitulé de l'interface de TuxAPE, qui est en anglais. */
.ui {
  font-weight: bold;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Liens d'évitement ---------- */

.skip-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.skip-links li {
  margin: 0;
}

.skip-links a {
  position: absolute;
  left: -200vw;
  top: 0.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: var(--frame);
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: 5px;
  font-weight: bold;
}

.skip-links a:focus {
  left: 0.5rem;
}

/* ---------- Cadre et bandeau ---------- */

.frame {
  max-width: 76rem;
  margin: 0 auto;
  background: var(--frame);
  border: 2px solid var(--line);
  border-radius: 8px;
}

/* Le bandeau est l'écran d'un CPC qui vient de démarrer : jaune sur bleu,
   dans les deux thèmes. */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--screen);
  color: var(--screen-text);
  border-radius: 6px 6px 0 0;
}

.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--screen-text);
  text-decoration: none;
}

.brand:visited {
  color: var(--screen-text);
}

.brand img {
  flex: 0 0 auto;
  width: 6.5rem;
  height: 6.5rem;
  border: 3px solid var(--screen-text);
  border-radius: 10px;
  background: #f2f0f1;
}

.banner-text {
  flex: 1 1 17rem;
  min-width: 0;
}

.wordmark {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
  fill: currentColor;
}

.tagline {
  margin: 0;
  max-width: none;
  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;
  font-weight: bold;
  line-height: 1.4;
}

.ready {
  margin: 0.4rem 0 0;
  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;
  font-weight: bold;
  line-height: 1.2;
}

.ready span {
  display: block;
  width: 0.7em;
  height: 1em;
  margin-top: 0.15rem;
  background: currentColor;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  font: inherit;
  font-weight: bold;
  color: var(--screen);
  background: var(--screen-text);
  border: 2px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0 3px 0 #000000;
  cursor: pointer;
}

.theme-toggle:hover {
  background: #ffffff;
}

/* L'état du bouton se lit aussi sans la couleur : une case, cochée ou non. */
.theme-toggle::before {
  content: "\2610";
  content: "\2610" / "";
  font-size: 1.25em;
  line-height: 1;
}

.theme-toggle[aria-pressed="true"]::before {
  content: "\2611";
  content: "\2611" / "";
}

.theme-toggle[hidden] {
  display: none;
}

/* Les trois couleurs du logo Amstrad. */
.stripes {
  height: 9px;
  background: linear-gradient(to bottom, #e00020 0 3px, #00a550 3px 6px, #0050d0 6px 9px);
}

/* ---------- Barre de liens ---------- */

.topnav {
  background: linear-gradient(var(--bar-a), var(--bar-b));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.topnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 0.5rem;
}

.topnav li {
  display: flex;
  align-items: center;
  margin: 0;
  max-width: none;
}

.topnav li + li::before {
  content: ":";
  content: ":" / "";
  color: var(--bar-text);
  font-weight: bold;
}

.topnav a,
.topnav a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  color: var(--bar-text);
  font-weight: bold;
  text-decoration: none;
}

.topnav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* La page en cours : soulignée d'un trait épais et précédée d'une flèche. */
.topnav a[aria-current="page"],
.sidemenu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.topnav a[aria-current="page"]::before,
.sidemenu a[aria-current="page"]::before {
  content: "\25B8\00A0";
  content: "\25B8\00A0" / "";
}

/* ---------- Mise en page ---------- */

.layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "menu main"
    "extras main";
  padding: 0.35rem;
}

.sidemenu {
  grid-area: menu;
}

main {
  grid-area: main;
  min-width: 0;
}

.extras {
  grid-area: extras;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  margin: 0.25rem 0.5rem 0;
  font-size: 0.95rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  margin: 0;
  max-width: none;
}

.breadcrumb li + li::before {
  content: "\203A";
  content: "\203A" / "";
  padding: 0 0.5rem;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- Boîtes ---------- */

.box {
  margin: 0.5rem;
  background: var(--box);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--shadow);
}

/* La barre de titre, avec trois touches de couleur à gauche comme celles
   d'un CPC 464 (dessin décoratif). */
.box-title {
  display: flow-root;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 4.4rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--bar-text);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 16'%3E%3Cg stroke='%23000' stroke-width='1'%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2' fill='%23e00020'/%3E%3Crect x='19.5' y='.5' width='15' height='15' rx='2' fill='%2300a550'/%3E%3Crect x='38.5' y='.5' width='15' height='15' rx='2' fill='%230050d0'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.55'%3E%3Crect x='2' y='2' width='12' height='3'/%3E%3Crect x='21' y='2' width='12' height='3'/%3E%3Crect x='40' y='2' width='12' height='3'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat 0.7rem center / 3.1rem auto,
    linear-gradient(var(--bar-a), var(--bar-b));
  border-bottom: 1px solid var(--line);
  border-radius: 5px 5px 0 0;
}

.box-title time,
.box-title .when {
  float: right;
  margin-left: 1rem;
  font-size: 0.9rem;
  font-weight: normal;
  line-height: 1.67;
}

.box-body {
  padding: 1rem 1.1rem 0.25rem;
}

.box-body > :last-child {
  margin-bottom: 0.9rem;
}

.box-body h2,
.box-body h3 {
  margin: 1.4rem 0 0.6rem;
  font-size: 1.05rem;
}

.box-body > h2:first-child,
.box-body > h3:first-child {
  margin-top: 0;
}

.lead {
  font-size: 1.05rem;
}

/* ---------- Menu de gauche ---------- */

.sidemenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidemenu li {
  margin: 0;
  max-width: none;
}

.sidemenu .box-body {
  padding: 0.4rem 0.5rem;
}

.sidemenu a,
.sidemenu a:visited {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}

.sidemenu a:hover {
  background: var(--td);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.menu-toggle {
  display: none;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.6rem;
  font: inherit;
  font-weight: bold;
  text-align: left;
  color: var(--text);
  background: var(--td);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  cursor: pointer;
}

.menu-toggle::after {
  content: "\25BE";
  content: "\25BE" / "";
  float: right;
}

.menu-toggle[aria-expanded="true"]::after {
  content: "\25B4";
  content: "\25B4" / "";
}

/* ---------- Dernière version ---------- */

.release {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}

.release:visited {
  color: var(--text);
}

.release img {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #f2f0f1;
}

.release-info {
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}

.release-new {
  display: inline-block;
  padding: 0 0.5rem;
  color: var(--frame);
  background: var(--text);
  border-radius: 3px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.release-label,
.release-number {
  display: block;
}

.release-number {
  color: var(--version);
  font-size: 1.25rem;
}

.release-go {
  display: block;
  margin-top: 0.3rem;
  text-decoration: underline;
}

.release:hover .release-go {
  text-decoration-thickness: 3px;
}

/* ---------- Boutons ---------- */

.button,
.button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.3rem 1rem;
  font: inherit;
  font-weight: bold;
  color: var(--button-text);
  background: var(--button);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 3px 0 var(--line);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--button-hover);
  text-decoration: underline;
}

/* Un lien seul sur sa ligne ou dans une cellule : une cible de 44 px. */
.tap {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}

.actions li {
  margin: 0;
}

/* ---------- Accueil ---------- */

.welcome {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.welcome-text {
  flex: 1 1 auto;
  min-width: 0;
}

.welcome-picture {
  flex: 0 0 18rem;
  margin: 0;
  padding: 0.5rem;
  background: var(--th);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  text-align: center;
}

.welcome-picture img {
  display: block;
  margin: 0 auto;
}

.welcome-picture figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

/* ---------- Tableaux ---------- */

.table-wrap {
  margin: 0 0 1rem;
  overflow-x: auto;
}

table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font: inherit;
}

caption {
  padding: 0 0 0.5rem;
  font-weight: bold;
  text-align: left;
}

th,
td {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--box);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--th);
}

td {
  background: var(--td);
}

tbody th {
  font-weight: bold;
}

.yes,
.no {
  font-weight: bold;
  white-space: nowrap;
}

.yes {
  color: var(--yes);
}

.no {
  color: var(--no);
}

/* ---------- Code ---------- */

.code-block {
  position: relative;
  margin: 0 0 1rem;
}

/* Une commande trop longue passe à la ligne : rien ne défile de côté. */
pre {
  margin: 0;
  padding: 0.8rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--code);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  line-height: 1.5;
}

pre code {
  padding: 0;
  background: none;
}

.copy {
  margin-top: 0.4rem;
}

.copy-status {
  margin-left: 0.75rem;
  font-weight: bold;
}

/* ---------- Captures ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.gallery li {
  margin: 0;
  max-width: none;
}

.shot {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: var(--td);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}

.shot .shot-title {
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 1rem;
  background: var(--th);
  border-radius: 3px 3px 0 0;
}

.shot a {
  display: block;
  padding: 0.5rem;
  text-align: center;
}

.shot img {
  display: block;
  margin: 0 auto;
  border: 1px solid var(--line-soft);
}

.shot figcaption {
  padding: 0 0.6rem 0.6rem;
}

.shot figcaption p {
  margin: 0;
}

.lightbox {
  width: min(96vw, 80rem);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  color: var(--text);
  background: var(--box);
  border: 2px solid var(--line);
  border-radius: 6px;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.lightbox-body {
  padding: 0.75rem;
  overflow: auto;
  max-height: calc(94vh - 4rem);
  text-align: center;
}

.lightbox-body img {
  max-height: 70vh;
  width: auto;
  border: 1px solid var(--line-soft);
}

.lightbox-body p {
  max-width: none;
  margin: 0.6rem 0 0;
  text-align: left;
}

.lightbox-close {
  min-height: 2.75rem;
  box-shadow: none;
}

/* ---------- Glossaire ---------- */

.glossary dt {
  margin-top: 1rem;
  font-weight: bold;
}

.glossary dd {
  margin: 0.2rem 0 0;
}

/* ---------- Pied de page ---------- */

.site-footer {
  max-width: 76rem;
  margin: 0.75rem auto 0;
  padding: 0.25rem 0.5rem 0.5rem;
  color: var(--page-text);
  text-align: center;
  font-size: 0.95rem;
}

.site-footer p {
  max-width: none;
  margin: 0 0 0.4rem;
}

.site-footer a,
.site-footer a:visited {
  color: var(--page-text);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin: 0;
  max-width: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 56rem) {
  body {
    padding: 0.4rem;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "menu"
      "main"
      "extras";
    padding: 0.15rem;
  }

  /* Le menu de gauche reprend tous les liens de la barre : elle s'efface. */
  .topnav {
    display: none;
  }

  .js .menu-toggle {
    display: block;
  }

  .welcome {
    flex-direction: column;
  }

  .welcome-picture {
    flex: 0 1 auto;
    align-self: center;
    max-width: 100%;
  }
}

@media (max-width: 30rem) {
  .box {
    margin: 0.4rem 0.25rem;
    box-shadow: 2px 2px 0 var(--shadow);
  }

  .box-body {
    padding: 0.8rem 0.75rem 0.1rem;
  }

  .banner {
    padding: 0.75rem;
  }

  .brand {
    gap: 0.75rem;
  }

  .brand img {
    width: 4.5rem;
    height: 4.5rem;
  }

  .box-title time,
  .box-title .when {
    display: block;
    float: none;
    margin-left: 0;
  }
}

/* ---------- Préférences de l'utilisateur ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (forced-colors: active) {
  .box-title {
    padding-left: 0.75rem;
  }

  .stripes {
    display: none;
  }

  .ready span {
    background: CanvasText;
  }
}

@media print {
  body {
    padding: 0;
    background: #ffffff;
    color: #000000;
  }

  .topnav,
  .sidemenu,
  .extras,
  .theme-toggle,
  .skip-links,
  .breadcrumb,
  .copy,
  .footer-links {
    display: none;
  }

  .layout {
    display: block;
  }

  .frame,
  .box {
    border-color: #000000;
    box-shadow: none;
  }

  .site-footer {
    color: #000000;
  }
}