/* ═══════════════════════════════════════════════════════════════════════
   PG-CONTROLS — curseurs et barres de défilement au dessin du site
   ───────────────────────────────────────────────────────────────────────
   Un <input type="range"> ou une barre de défilement « de base » trahit le
   navigateur au milieu d'une page qui, partout ailleurs, est PentaGuess.
   Les barres apparaissent n'importe où dès que la fenêtre rétrécit (une
   liste de salons, la bande des skins du Puzzle, la page entière) : ce
   fichier est donc chargé sur TOUTES les pages, pas seulement celles qui ont
   un curseur.  Modèle : le bloc « Sliders — style PentaGuess » de
   deferlante_v2.html. Le remplissage doré du curseur (webkit) est peint par
   pg-controls.js (variable --val) ; Firefox a ::-moz-range-progress.
   Thème : or par défaut, rouge sur les pages Valorant (html.pg-valo, posé par
   pg-controls.js d'après l'URL).  CLAUDE.md § 5, règle SLIDER du checker.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --pgc-a:#C8AA6E;            /* accent : or (Valorant : rouge) */
  --pgc-b:#785A28;            /* accent sombre */
  --pgc-l:#F0E6D3;            /* accent clair */
  --pgc-rgb:200,170,110;      /* l'accent en rgb, pour les transparences */
  --pgc-l-rgb:240,230,211;
}
html.pg-valo{ --pgc-a:#FF4655; --pgc-b:#7A1620; --pgc-l:#FFD7DB; --pgc-rgb:255,70,85; --pgc-l-rgb:255,215,219; }

/* ── Curseurs ─────────────────────────────────────────────────────────── */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:8px;border-radius:5px;outline:none;cursor:pointer;margin:6px 0;
  background:linear-gradient(90deg,var(--pgc-l) 0%,var(--pgc-a) var(--val,50%),rgba(var(--pgc-rgb),.16) var(--val,50%),rgba(var(--pgc-rgb),.16) 100%);
  border:1px solid rgba(var(--pgc-rgb),.32);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 0 8px rgba(var(--pgc-rgb),.10);
}
input[type=range]:disabled{opacity:.45;cursor:default;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6e0,var(--pgc-a) 55%,var(--pgc-b));
  border:1px solid var(--pgc-b);
  box-shadow:0 0 8px rgba(var(--pgc-rgb),.6),0 1px 3px rgba(0,0,0,.6);cursor:pointer;transition:box-shadow .12s;
}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 13px rgba(var(--pgc-l-rgb),.9),0 1px 3px rgba(0,0,0,.6);}
input[type=range]::-moz-range-track{height:8px;border-radius:5px;background:rgba(var(--pgc-rgb),.16);border:1px solid rgba(var(--pgc-rgb),.32);}
input[type=range]::-moz-range-progress{height:8px;border-radius:5px;background:linear-gradient(90deg,var(--pgc-l),var(--pgc-a));}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6e0,var(--pgc-a) 55%,var(--pgc-b));
  border:1px solid var(--pgc-b);box-shadow:0 0 8px rgba(var(--pgc-rgb),.6);cursor:pointer;
}

/* ── Barres de défilement ─────────────────────────────────────────────── */
/* Firefox : les deux propriétés standard. ⚠️ Réservées aux moteurs qui n'ont
   pas ::-webkit-scrollbar — Chrome (≥ 121) les comprend aussi, et dès qu'elles
   sont posées il IGNORE tout style ::-webkit-scrollbar de l'élément : on
   perdrait notre poignée dégradée, et les pages qui cachent une barre de
   carrousel (`::-webkit-scrollbar{display:none}`) la verraient réapparaître.
   Pour la même raison, ne pas écrire `scrollbar-width:thin` dans une page. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--pgc-b) rgba(1,10,19,.55);}
}
/* WebKit / Blink : piste sombre, poignée dégradée qui s'éclaire au survol. */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(1,10,19,.55);border-radius:6px;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--pgc-a),var(--pgc-b));border-radius:6px;border:2px solid rgba(1,10,19,.75);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--pgc-l),var(--pgc-a));}
::-webkit-scrollbar-corner{background:rgba(1,10,19,.55);}