/*
 * Bandeau de la BASE TEST (rfi.goomgrill.ch) — 20.10.2026.
 *
 * Ce fichier n'est PAS dans l'application : nginx le sert lui-même
 * (/__base-test.css) et l'injecte dans chaque page HTML du domaine de test
 * (sub_filter sur </head>, voir deploy/nginx-rfi.conf). L'image Docker est
 * donc strictement celle de la prod, et app.rfi.ch ne peut jamais l'afficher.
 *
 * Tout passe par des pseudo-éléments : aucun nœud n'est ajouté au DOM, React
 * n'a rien à réconcilier à l'hydratation.
 *   html::before  le fond rouge de la barre du haut
 *   body::before  le texte qui défile dessus, en quatre langues
 *   html::after   le cadre rouge autour de l'écran
 */

:root {
  --base-test-barre: 34px;
}

html::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--base-test-barre);
  background: repeating-linear-gradient(-45deg, #c40000 0 22px, #a30000 22px 44px);
  z-index: 2147483646;
  pointer-events: none;
}

body::before {
  content: "⚠ BASE TEST — MODIFICATIONS NON CONSERVÉES  ·  ⚠ TEST DATABASE — CHANGES ARE NOT KEPT  ·  ⚠ BASE DE PRUEBA — LOS CAMBIOS NO SE GUARDAN  ·  ⚠ TESTDATENBANK — ÄNDERUNGEN WERDEN NICHT GESPEICHERT  ·  ⚠ BASE TEST — MODIFICATIONS NON CONSERVÉES  ·  ⚠ TEST DATABASE — CHANGES ARE NOT KEPT  ·  ⚠ BASE DE PRUEBA — LOS CAMBIOS NO SE GUARDAN  ·  ⚠ TESTDATENBANK — ÄNDERUNGEN WERDEN NICHT GESPEICHERT  ·  ";
  position: fixed;
  top: 0;
  left: 0;
  height: var(--base-test-barre);
  line-height: var(--base-test-barre);
  white-space: pre;
  color: #fff;
  font: 800 14px/var(--base-test-barre) system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  z-index: 2147483647;
  pointer-events: none;
  /* Le texte est écrit deux fois : glisser de -50 % ramène exactement au départ. */
  animation: base-test-defile 60s linear infinite;
}

@keyframes base-test-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 5px solid #c40000;
  z-index: 2147483645;
  pointer-events: none;
}

/* La barre est posée PAR-DESSUS la page : on pousse le contenu d'autant. */
body {
  padding-top: var(--base-test-barre) !important;
}

/* La barre latérale (md:fixed inset-y-0) partirait sous la barre rouge. */
aside.md\:fixed {
  top: var(--base-test-barre) !important;
}