/* videobots : mire de calage — l'unique thème CLAIR de la galaxie (les 7 autres sont sombres).
   Papier de mire bleuté, quadrillage de réglage, barres R·V·B, panneaux = écrans à cadre noir,
   galerie = pellicule perforée, intitulés en capitales condensées.
   Surcharge uniquement les variables et les sélecteurs de style.css (aucune image, aucune police
   externe, aucun script) ; retour arrière = retirer le <link>. */
:root{
  color-scheme:light;
  --bg:#e4e8ef; --panel:#fbfcfe; --border:#12141c;
  --fg:#12141c; --fg-dim:#363b4a; --muted:#5a6173;
  --white:#12141c; --red:#d4141c; --teal:#12141c; --cyan:#1736c9;
  --blue:#1736c9; --blue-light:#1736c9; --teal-dark:#0c1a6b; --error:#c4101a;
  --rvb:repeating-linear-gradient(90deg,#e0141c 0 28px,#12a52a 28px 56px,#1736e6 56px 84px,#12141c 84px 98px);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 50% 0,transparent 0 220px,rgba(18,20,28,.07) 221px 223px,transparent 224px 340px,rgba(18,20,28,.06) 341px 343px,transparent 344px),
    linear-gradient(rgba(18,20,28,.055) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(18,20,28,.055) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(180deg,#eef1f6,#dce1ea) fixed;
  color:var(--fg);
  font-family:"Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
input,select,textarea,button{font-family:inherit}

/* en-tête : barres de mire */
.topbar{
  color:var(--fg);border:0;border-top:0;border-bottom:12px solid transparent;
  border-image:var(--rvb) 1;
  background:transparent;padding:8px 4px 10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.topbar a{color:var(--blue);text-decoration:none;border-bottom:2px solid var(--red)}
h1{color:var(--fg);letter-spacing:.32em;text-transform:uppercase;font-weight:700}
h1 strong{color:var(--fg);font-weight:800}
h1::after{content:"";display:block;height:6px;margin-top:8px;background:var(--rvb)}
.manifesto{
  background:var(--panel);border:2px solid var(--fg);border-radius:4px;padding:14px 16px;margin-bottom:18px;
  box-shadow:6px 6px 0 var(--fg);color:var(--fg-dim);line-height:1.55;
}
.manifesto .nuancier{
  font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  background:linear-gradient(90deg,#e0141c,#12a52a,#1736e6);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* panneaux : écrans à cadre noir */
.panel{
  background:var(--panel);color:var(--fg);
  border:10px solid #1a1d27;border-radius:22px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 40px rgba(23,54,230,.07),0 10px 0 -4px #bfc6d3,0 14px 22px rgba(18,20,28,.28);
}
.panel.error{border-color:var(--error);color:var(--error)}
label{color:var(--fg);text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}
.hint,.gallery-empty{color:var(--muted);text-transform:none;letter-spacing:0}
input[type="text"],input[type="number"],select,input,textarea{
  background:#fff;color:var(--fg);border:2px solid var(--fg);border-radius:3px;border-bottom-width:5px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,54,230,.25)}
.suggest-box{background:#fff;border:2px solid var(--fg);border-top:0}
.suggest-item{color:var(--fg);border-top:1px solid #d3d8e2}
.suggest-item:hover{background:#e9ecf4;color:var(--fg)}

/* bouton : REC */
button{
  background:#12141c;color:#fff;border:0;border-radius:3px;text-transform:uppercase;letter-spacing:.22em;font-weight:800;
  border-bottom:7px solid transparent;border-image:var(--rvb) 1;
}
button::before{content:"● ";color:#ff2a32}
button:hover:not(:disabled){background:#1736e6;border-color:transparent}
.gallery-item::before,.gallery-item::after{content:none}
.loading .hint{color:var(--fg-dim)}
.fallback-note{color:var(--blue)}
.result img{border:3px solid var(--fg);border-radius:3px;background:#12141c}

/* galerie : pellicule perforée */
.gallery-heading{color:var(--fg);text-transform:uppercase;letter-spacing:.2em}
.gallery-item{
  position:relative;background:#14161e;border:0;border-radius:2px;padding:14px 5px 0;
  box-shadow:0 3px 0 #0a0b10;
}
.gallery-item::before,.gallery-item::after{
  content:"";position:absolute;left:0;right:0;height:7px;display:block;
  background:repeating-linear-gradient(90deg,transparent 0 3px,#dfe3ea 3px 8px,transparent 8px 13px);
}
.gallery-item::before{top:4px}
.gallery-item::after{bottom:4px}
.gallery-item img{border-radius:1px}
.gallery-caption{padding:6px 2px 16px}
.gallery-pseudo{color:#f3f4f8}
.gallery-query{color:#8fa4ff}
.gallery-date{color:#a3a9b8}
.gallery-item:hover,.gallery-item.playing{box-shadow:0 0 0 3px var(--blue),0 3px 0 #0a0b10}

/* pied de page */
footer{
  color:var(--fg-dim);background:transparent;border-top:8px solid transparent;border-image:var(--rvb) 1;
  padding-top:14px;margin-top:10px;
}
footer a{color:var(--blue)}
@media (prefers-reduced-motion:no-preference){
  button:hover:not(:disabled)::before{animation:rec .9s steps(2,jump-none) infinite}
  @keyframes rec{50%{opacity:.15}}
}
@media (max-width:480px){
  .panel{border-width:7px;border-radius:16px}
  .manifesto{box-shadow:4px 4px 0 var(--fg)}
}

/* lien bien visible vers le site voisin (rvbbot) */
.voisin{margin:14px 0 0}
.voisin-lien{
  display:inline-block;padding:11px 18px;background:#12141c;color:#fff;text-decoration:none;border-radius:3px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:800;font-size:.85rem;
  border-bottom:6px solid transparent;border-image:var(--rvb) 1;
}
.voisin-lien:hover{background:var(--blue);color:#fff}
progress{accent-color:#1736e6;height:14px}