/* France Simulator · système 16 bits partagé par l'écran titre, la sélection, le 20 h et le mandat. */
:root {
  color-scheme: dark;
  --px: 3px;
  --ink: #050c18;
  --night: #0a1830;
  --navy: #0f2344;
  --navy-2: #173262;
  --navy-3: #23468a;
  --ivory: #f8ecc8;
  --parchment: #d9c796;
  --muted: #a9b9d6;
  --gold: #f0bc4c;
  --gold-hi: #ffe694;
  --gold-lo: #a86f1f;
  --red: #e0483e;
  --blue: #3b6fe0;
  --green: #5cc46f;
  --deficit: #ff8372;
  --font-display: "Jersey 10", "Pixelify Sans", ui-monospace, monospace;
  --font-body: "Pixelify Sans", "Jersey 10", ui-sans-serif, system-ui, sans-serif;
  /* Petits textes : Jersey 10 reste net à 18 px, là où une sans pixel de 13 px devient illisible. */
  --font-small: 400 18px/1.15 var(--font-display);
  --step: steps(4, end);
  --frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c18' d='M1 0h7v1h1v7h-1v1h-7v-1h-1v-7h1z'/%3E%3Cpath fill='%23f0bc4c' d='M1 1h7v7h-7z'/%3E%3Cpath fill='%23ffe694' d='M1 1h6v1h-6zM1 2h1v5h-1z'/%3E%3Cpath fill='%23a86f1f' d='M2 7h6v1h-6zM7 2h1v5h-1z'/%3E%3Cpath fill='%23050c18' d='M2 2h5v5h-5z'/%3E%3C/svg%3E");
  --frame-steel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c18' d='M1 0h7v1h1v7h-1v1h-7v-1h-1v-7h1z'/%3E%3Cpath fill='%2323468a' d='M1 1h7v7h-7z'/%3E%3Cpath fill='%235f86d6' d='M1 1h6v1h-6zM1 2h1v5h-1z'/%3E%3Cpath fill='%23173262' d='M2 7h6v1h-6zM7 2h1v5h-1z'/%3E%3Cpath fill='%23050c18' d='M2 2h5v5h-5z'/%3E%3C/svg%3E");
  --button-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c18' d='M1 0h7v1h1v7h-1v1h-7v-1h-1v-7h1z'/%3E%3Cpath fill='%23f0bc4c' d='M1 1h7v7h-7z'/%3E%3Cpath fill='%23ffe694' d='M1 1h7v1h-7zM1 2h1v1h-1z'/%3E%3Cpath fill='%23a86f1f' d='M1 6h7v2h-7z'/%3E%3C/svg%3E");
  --button-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23050c18' d='M1 0h7v1h1v7h-1v1h-7v-1h-1v-7h1z'/%3E%3Cpath fill='%23173262' d='M1 1h7v7h-7z'/%3E%3Cpath fill='%2323468a' d='M1 1h7v1h-7zM1 2h1v1h-1z'/%3E%3Cpath fill='%230a1830' d='M1 6h7v2h-7z'/%3E%3C/svg%3E");
  --field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23a86f1f' d='M1 0h7v1h1v7h-1v1h-7v-1h-1v-7h1z'/%3E%3Cpath fill='%23050c18' d='M1 1h7v7h-7z'/%3E%3Cpath fill='%230a1830' d='M2 3h6v5h-6z'/%3E%3C/svg%3E");
}
@media (max-width: 700px) { :root { --px: 2px; } }

.px-art, .px-art img, img.px-art, canvas.px-art { image-rendering: pixelated; }

/* Cadres : un 9-slice vectoriel net, jamais de rayon ni de flou. */
.px-frame, .px-frame-steel {
  border: calc(var(--px) * 3) solid transparent;
  border-image: var(--frame-gold) 3 / calc(var(--px) * 3) stretch;
  background: var(--navy) padding-box;
  color: var(--ivory);
}
.px-frame-steel { border-image-source: var(--frame-steel); background-color: var(--night); }
.px-drop { filter: drop-shadow(0 calc(var(--px) * 2) 0 #02060e); }

.px-button {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--px) * 4);
  min-height: 48px; padding: calc(var(--px) * 2) calc(var(--px) * 6);
  border: calc(var(--px) * 3) solid transparent;
  border-image: var(--button-navy) 3 fill / calc(var(--px) * 3) stretch;
  background: none; color: var(--ivory); cursor: pointer; text-decoration: none;
  font: 400 26px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  filter: drop-shadow(0 calc(var(--px) * 2) 0 #02060e);
  transition: transform 80ms var(--step), filter 80ms var(--step);
}
.px-button.is-gold { border-image-source: var(--button-gold); color: var(--ink); }
.px-button:disabled, .px-button[aria-disabled="true"] { cursor: default; color: #7f8eaa; filter: drop-shadow(0 calc(var(--px) * 2) 0 #02060e) saturate(.4) brightness(.8); }
.px-button:active:not(:disabled) { transform: translateY(calc(var(--px) * 2)); filter: none; }
@media (hover: hover) and (pointer: fine) {
  .px-button:hover:not(:disabled) { filter: drop-shadow(0 calc(var(--px) * 2) 0 #02060e) brightness(1.18); }
  .px-button:hover:not(:disabled):not(.is-gold) { color: var(--gold-hi); }
}
.px-button:focus-visible, .px-focus:focus-visible { outline: var(--px) solid var(--ivory); outline-offset: var(--px); }

.px-title { font: 400 clamp(38px, 5vw, 72px)/.9 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--gold); text-shadow: 0 var(--px) 0 var(--gold-lo), var(--px) calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink); }
.px-label { font: 400 18px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.px-number { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Curseur de menu clignotant : le repère de manette des jeux 16 bits. */
.px-cursor { display: inline-block; width: calc(var(--px) * 4); height: calc(var(--px) * 7); flex: none; background: currentColor; clip-path: polygon(0 0, 25% 0, 25% 14.3%, 50% 14.3%, 50% 28.6%, 75% 28.6%, 75% 42.9%, 100% 42.9%, 100% 57.1%, 75% 57.1%, 75% 71.4%, 50% 71.4%, 50% 85.7%, 25% 85.7%, 25% 100%, 0 100%); }
.px-blink { animation: px-blink 900ms steps(1, end) infinite; }
@keyframes px-blink { 50% { opacity: 0; } }

/* Balayage cathodique, réservé aux surfaces qui sont des écrans de télévision. */
.px-crt { position: relative; }
.px-crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #02060e59 0 var(--px), #0000 var(--px) calc(var(--px) * 2)); mix-blend-mode: multiply; }

::selection { background: var(--gold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .px-blink { animation: none; } .px-button { transition: none; } }
.reduce-motion .px-blink { animation: none; }

/* Passage d'un écran à l'autre (titre, sélection, partie) : un fondu en paliers plutôt qu'un écran blanc. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms steps(4, end) both px-screen-out; }
::view-transition-new(root) { animation: 220ms steps(5, end) both px-screen-in; }
@keyframes px-screen-out { to { opacity: 0; } }
@keyframes px-screen-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }