/* huiledecode — le fil de code, version 3 (prototype 24, base du site) : compléments de shared/fil.css */

/* sans attente : le texte est déjà là, en filigrane ; le fil l'encre */
html.fl-js .fl-w .fl-c:not(.fl-d):not(.fl-g){color:inherit!important;-webkit-text-fill-color:currentColor;opacity:.22}
html.fl-js .fl-w .ctas{opacity:.3;transform:none}
html.fl-js .fl-w.fl-done .ctas{opacity:1}
html.fl-js .fl-w .list{border-top-color:rgba(240,160,75,.06)}
html.fl-js .fl-w .list li{border-bottom-color:rgba(240,160,75,.06)}
html.fl-js .fl-w.fl-done .list,html.fl-js .fl-w.fl-done .list li{border-color:var(--line)}

/* les fils sont dessinés par la goutte (WebGL), donc sous le texte :
   la vignette passe dans la 3D (sinon elle les assombrirait dans la marge),
   le dégradé de l'en-tête s'arrête au-dessus des pistes des broches,
   et sur téléphone le panneau sombre du texte ne masque plus le bus */
.scene .vig{display:none}
@media (min-width:861px){.top::before{inset:0 0 auto;height:62px;background:linear-gradient(#050403 0,#050403 58%,rgba(5,4,3,0))}}
@media (max-width:860px){[data-fil=circuit] .chap .in{background:none}}

/* compteur (?hud) : rendu par la goutte ou calque 2D, touche R pour comparer */
.fl2-hud{position:fixed;right:var(--gutter);bottom:20px;z-index:90;min-width:280px;padding:12px 14px 11px;background:rgba(5,4,3,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--line);clip-path:var(--chamfer);font:400 10.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted)}
.fl2-hud b{display:block;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.fl2-hud button{position:absolute;right:12px;top:9px;border:0;cursor:pointer;padding:5px 8px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bg);background:var(--amber)}
.fl2-hud button.old{background:#ff8279}
.fl2-hud dl{display:grid;grid-template-columns:1fr auto;gap:1px 18px;margin:0}
.fl2-hud dd{margin:0;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:860px){.fl2-hud{right:8px;bottom:8px;min-width:0}}