/* =====================================================================
   Le bandeau d'aperçu — une seule feuille, chargée par les pages qui
   montrent le produit.

   Rien n'est en vente. Le mint n'existe pas, aucun contrat n'est déployé,
   et tant que c'est vrai le site doit le dire sans qu'on ait à cliquer
   pour le découvrir. Le bandeau est en CSS pur et en dur dans le HTML :
   une mention de cette nature ne doit dépendre ni de JavaScript, ni du
   moment où le script se charge.

   Le jour où le mint ouvre, on retire le <link> et le <div> des pages —
   ce fichier n'a aucune autre responsabilité.
   ===================================================================== */

:root { --preview-h: 2.1rem; }

.preview-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  min-height: var(--preview-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.35rem 1rem;
  background: #1A1206;
  border-bottom: 1px solid #6B4E18;
  color: #E9C87E;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
}

.preview-bar b { color: #F5DFA8; font-weight: 700; }
.preview-bar a { color: #F5DFA8; text-underline-offset: 2px; }
.preview-bar a:hover { color: #FFF; }

/* Le texte long passe à la ligne sur mobile plutôt que d'être tronqué :
   une mention qu'on ne peut pas lire en entier ne vaut rien. */
.preview-bar span { display: inline-block; }

/* On dégage la hauteur du bandeau pour le flux normal… */
body { padding-top: var(--preview-h); }

/* …et pour les en-têtes qui se collent en haut. `header.top` est sticky
   sur /workers et /gallery, fixed sur la page d'accueil : dans les deux
   cas c'est la même propriété qu'il faut décaler.

   Le !important n'est pas de la paresse. Chaque page porte son propre
   bloc <style> inline, qui vient forcément après cette feuille dans la
   cascade et y redéclare `header.top { top: 0 }` à spécificité égale.
   Sans lui, l'en-tête recouvre le bandeau — et un avertissement qu'on ne
   voit pas ne sert à rien. */
header.top { top: var(--preview-h) !important; }

/* ---------------------------------------------------------------------
   La mention légale en pied de page.

   Texte de référence : docs/DISCLAIMER.md, recopié verbatim. Le style vit
   ici parce que cette feuille est chargée par toutes les pages concernées
   et que la mention ne doit dépendre d'aucune feuille propre à une page.
   `node tools/check-disclaimer.js` échoue si une copie dérive.
   --------------------------------------------------------------------- */
.disclaimer {
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--dim, #6E6A61);
  max-width: 74ch;
  margin-bottom: 1.2rem;
}
.disclaimer strong { color: var(--muted, #8A8578); }

/* ---------------------------------------------------------------------
   Variante « application » — la carte, la galerie plein écran.

   Ces pages-là ne défilent pas : `body` est en overflow:hidden, le canvas
   est dimensionné en JS sur innerWidth/innerHeight, et toute l'interface
   est en position:fixed. Un padding sur body y décalerait le rendu et
   ferait apparaître une barre de défilement. On ne réserve donc rien : on
   décale seulement ce qui se colle au bord haut.
   --------------------------------------------------------------------- */
body:has(.preview-bar.app) { padding-top: 0; }

.preview-bar.app ~ .hud-top { top: var(--preview-h); }
.preview-bar.app ~ .bar.top { top: calc(var(--preview-h) + 0.6rem); }

/* En mode vitrine la carte est une iframe derrière le texte de la page
   d'accueil, qui porte déjà son propre bandeau : un second, à l'intérieur
   du cadre, ne ferait que répéter la même phrase en plus petit. */
body.showcase .preview-bar { display: none; }

/* Sous 600 px la phrase passe sur deux lignes : la hauteur réservée doit
   suivre, sinon l'en-tête vient se glisser sous le bandeau. Le bandeau
   étant au-dessus dans l'ordre d'empilement, c'est la nav qui serait
   masquée, jamais l'avertissement — mais autant que les deux tiennent. */
@media (max-width: 600px) {
  :root { --preview-h: 3.9rem; }
  .preview-bar { font-size: 0.55rem; letter-spacing: 0.1em; }
}