/* Socle commun. Grammaire des maquettes : bordures noires épaisses,
   ombres dures décalées, éléments légèrement penchés. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `height: 100%` figeait le document à la hauteur de la fenêtre : tout ce qui
   dépassait devenait inatteignable. `min-height` laisse la page grandir, et
   le masquage horizontal vit sur html pour ne pas transformer body en
   conteneur de défilement. */
html {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--rub);
  color: var(--wht);
  min-height: 100%;
  background:
    repeating-linear-gradient(-32deg, rgba(255,255,255,.022) 0 3px, transparent 3px 26px),
    radial-gradient(circle at 78% 12%, rgba(61,123,255,.22), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(255,174,46,.14), transparent 40%),
    var(--bg);
}

::selection { background: var(--yel); color: var(--blk); }

/* Ascenseurs jaune sur noir, même grammaire que le reste : aplat franc,
   contour noir épais, pas de dégradé.

   Deux syntaxes, et elles s'excluent : dès que `scrollbar-color` est posé,
   Chrome bascule sur le rendu standard et ignore tout `::-webkit-scrollbar`.
   Or la norme ne sait ni border ni radius. On donne donc la norme à Firefox,
   et on la neutralise là où `::-webkit-scrollbar` existe — c'est-à-dire chez
   Chrome, qui reçoit la version dessinée. */
* {
  scrollbar-color: var(--yel) var(--blk);
}
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-color: auto; }
}
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: var(--blk);
  box-shadow: inset 1px 0 0 rgba(255, 248, 236, .12);
}
::-webkit-scrollbar-thumb {
  background: var(--yel);
  border: 3px solid var(--blk);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--amb); }
::-webkit-scrollbar-thumb:active { background: var(--amb2); }
/* Le carré du coin, sinon rendu en gris système entre deux ascenseurs. */
::-webkit-scrollbar-corner { background: var(--blk); }

.logo3d {
  font-family: var(--bang);
  font-size: 64px;
  letter-spacing: .04em;
  line-height: 1;
  transform: rotate(-2deg);
  color: var(--wht);
  text-shadow:
    2px 2px 0 var(--blk), 4px 4px 0 var(--blk), 6px 6px 0 var(--blu),
    8px 8px 0 var(--blk), 0 0 34px rgba(61,123,255,.55);
}
.logo3d span {
  color: var(--amb);
  text-shadow:
    2px 2px 0 var(--blk), 4px 4px 0 var(--blk), 6px 6px 0 var(--red), 8px 8px 0 var(--blk);
}

.splash {
  /* 100vh et non 100% : la page peut grandir au-delà de la fenêtre sans que
     le centrage vertical rogne le haut du contenu. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px 20px;
  text-align: center;
}

.baseline {
  font-family: var(--mark);
  font-size: 20px;
  color: var(--yel);
  transform: rotate(-1.5deg);
}

.panel {
  background: var(--cream);
  color: var(--blk);
  border: 4px solid var(--blk);
  box-shadow: 8px 8px 0 rgba(0,0,0,.55);
  transform: rotate(.6deg);
  padding: 22px 26px;
  max-width: 560px;
}
.panel h2 {
  font-family: var(--bang);
  font-size: 26px;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.panel p { font-size: 14px; line-height: 1.55; font-weight: 500; }

.cta {
  display: inline-block;
  font-family: var(--rub);
  font-weight: 900;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blk);
  background: var(--yel);
  border: 3px solid var(--blk);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 11px 22px;
  transform: skewX(-4deg);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta:hover { transform: skewX(-4deg) translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(0,0,0,.6); }

.sync {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 9px 12px;
  border: 3px solid var(--blk);
  font-size: 13px;
  font-weight: 500;
}
.sync.running { background: var(--wht); }
.sync.done { background: var(--blu); color: var(--wht); }
.sync .spark {
  width: 11px; height: 11px; flex: none;
  background: var(--blu); border: 2px solid var(--blk); border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.5); background: var(--yel); } }

.tokens {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 6px;
}
.tokens th {
  text-align: left;
  font-weight: 900;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--blk);
  padding: 4px 6px;
}
.tokens td { padding: 5px 6px; border-bottom: 1px solid rgba(22,19,31,.2); }
.tokens tr.revoked { opacity: .45; text-decoration: line-through; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.cmd {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  background: var(--blk);
  color: var(--wht);
  border: 3px solid var(--blk);
  padding: 10px 12px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: pre;
}

.tag {
  display: inline-block;
  background: var(--blk);
  color: var(--wht);
  font-weight: 900;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 6px 14px;
  border: 3px solid var(--wht);
  transform: skewX(-8deg);
}
.tag b { color: var(--yel); }

/* ── Page document (données & confidentialité) ───────────────────────────
   Publique, souvent lue par quelqu'un qui vérifie quelque chose — un
   relecteur de store, un joueur inquiet. La lisibilité passe avant le
   décor : mesure courte, interlignage large, et l'identité réduite aux
   couleurs et aux titres. */
.doc {
  max-width: 78ch;
  margin: 0 auto;
  padding: 34px 24px 80px;
  color: var(--wht);
}
.doc h1 {
  font-family: var(--bang);
  font-size: 42px;
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--wht);
  text-shadow: 3px 3px 0 var(--blk), 6px 6px 0 var(--blu);
  transform: rotate(-1.4deg);
  margin-bottom: 14px;
}
.doc h2 {
  font-family: var(--bang);
  font-size: 25px;
  letter-spacing: .05em;
  color: var(--yel);
  margin: 36px 0 8px;
}
.doc h3 {
  font-weight: 900;
  font-style: italic;
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--blu2);
  margin: 20px 0 4px;
}
.doc p, .doc li { font-weight: 500; font-size: 15px; line-height: 1.65 }
.doc p { margin-bottom: 10px }
.doc ul { margin: 6px 0 12px 22px }
.doc li { margin-bottom: 6px }
.doc b { font-weight: 900 }
.doc a { color: var(--yel) }
.doc-date { font-weight: 700; font-size: 12.5px; color: #7C86AD; margin-bottom: 22px }
.doc-chapo {
  background: rgba(61, 123, 255, .12);
  border-left: 4px solid var(--blu);
  padding: 12px 16px;
  margin-bottom: 8px;
}
/* Ce paragraphe admet une lacune : il doit se voir, pas se cacher. */
.doc-franchise {
  background: rgba(255, 174, 46, .12);
  border-left: 4px solid var(--amb);
  padding: 12px 16px;
}
.doc-retour {
  font-family: var(--bang);
  font-size: 17px;
  letter-spacing: .05em;
  margin: 26px 0 0;
}
.doc-retour:first-child { margin: 0 0 18px }
.doc-retour a { text-decoration: none }