/* huiledecode — les tornades de code (prototype 26) : compléments de shared/fil.css, fil3.css et holo.css.
   Les pistes des broches sont remplacées par des tornades de bouts de code dessinées par la goutte (shared/tornade.js). */

/* sans animation (goutte absente : pas de WebGL), les broches ne sont jamais placées : le menu de l'en-tête reste seul */
html:not(.fl-js) .fl-pins{display:none}

/* les lettres des titres peuvent plier une à une : chaque copie arrachée par la tornade les tire un instant vers le bas */
html.fl-js .fl-pin .fl-c{display:inline-block;transform-origin:50% 20%}

/* le titre aspiré : il reste lisible ; une lueur de la couleur du service coule de ses lettres vers la bouche */
html.fl-js .fl-pin.tw-suck{color:var(--ink)}
html.fl-js .fl-pin.tw-suck span{text-shadow:0 4px 9px color-mix(in srgb,var(--svc) 50%,transparent)}

/* le dégradé de l'en-tête (il cache le texte qui défile sous le logo) s'ouvre sous les titres des broches :
   sinon il couvrirait la bouche des tornades et les lettres aspirées. Le haut de la bande reste couvert. */
@media (min-width:861px){
  html.fl-js .top::before{
    -webkit-mask-image:linear-gradient(#000 0,#000 18px,transparent 30px),linear-gradient(90deg,#000 0,#000 calc(var(--tw-x0,-900px) - 40px),transparent var(--tw-x0,-900px),transparent var(--tw-x1,-899px),#000 calc(var(--tw-x1,-899px) + 40px),#000 100%);
    mask-image:linear-gradient(#000 0,#000 18px,transparent 30px),linear-gradient(90deg,#000 0,#000 calc(var(--tw-x0,-900px) - 40px),transparent var(--tw-x0,-900px),transparent var(--tw-x1,-899px),#000 calc(var(--tw-x1,-899px) + 40px),#000 100%)}
}