/* Le fil d'actualité en direct (public/extra/fil.js). Un bandeau fin posé
   JUSTE au-dessus du comptoir (bottom mesuré en JS), en bas à gauche : il ne
   couvre ni le patron ni les boutons. Replié : une pastille ronde. */
#filX{
  position:fixed; left:8px; bottom:10px; z-index:10;
  display:flex; align-items:center; gap:0;
  width:var(--filX-l, min(460px, calc(100vw - 16px))); height:28px;
  background:rgba(14,21,18,.78); border:1px solid rgba(232,206,121,.28); border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  font:600 13px/1 Instrument Sans,system-ui,sans-serif; color:#F1E9D6;
  overflow:hidden; pointer-events:auto;
}
#filX[hidden]{display:none}
#filX .filX-bouton{
  flex:0 0 28px; width:28px; height:28px; padding:0; margin:0; border:0; border-radius:14px;
  background:transparent; color:inherit; cursor:pointer; position:relative; font-size:14px; line-height:28px;
}
#filX .filX-point{
  position:absolute; right:3px; top:3px; width:7px; height:7px; border-radius:50%;
  background:#E8CE79; box-shadow:0 0 6px #E8CE79; display:none;
}
#filX.nonlu .filX-point{display:block; animation:filXbat 1.2s ease-in-out infinite}
#filX .filX-piste{
  flex:1 1 auto; min-width:0; height:28px; overflow:hidden; position:relative; cursor:pointer;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 14px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 14px), transparent 100%);
}
#filX .filX-texte{
  position:absolute; left:4px; top:0; height:28px; line-height:28px; white-space:nowrap;
  will-change:transform;
}
#filX .filX-texte.arrive{animation:filXarrive .45s ease-out both}
#filX .filX-texte.defile{animation:filXarrive .45s ease-out both, filXdefile var(--duree,6s) linear 1.6s forwards}
#filX .filX-pseudo{font-weight:700}

/* les niveaux */
#filX[data-niveau="gros"] .filX-texte{color:#E8CE79}
#filX[data-niveau="legende"]{border-color:rgba(255,196,64,.75); background:rgba(42,26,6,.86)}
#filX[data-niveau="legende"] .filX-texte{color:#FFD76A; text-shadow:0 0 8px rgba(255,190,60,.55)}
#filX[data-niveau="patron"]{background:rgba(232,206,121,.94); border-color:#E8CE79}
#filX[data-niveau="patron"] .filX-texte, #filX[data-niveau="patron"] .filX-bouton{color:#17211c}
#filX.eclat{animation:filXeclat 1.4s ease-out 1}

/* replié, muet, rien à dire : la pastille seule */
#filX[data-etat="replie"], #filX[data-etat="muet"], #filX.vide{width:28px}
#filX[data-etat="replie"] .filX-piste, #filX[data-etat="muet"] .filX-piste, #filX.vide .filX-piste{display:none}
#filX[data-etat="replie"], #filX[data-etat="muet"], #filX.vide{background:rgba(14,21,18,.62)}
#filX[data-etat="muet"]{opacity:.55}
#filX[data-etat="replie"][data-niveau="patron"], #filX[data-etat="muet"][data-niveau="patron"]{background:rgba(14,21,18,.62)}
#filX[data-etat="replie"][data-niveau="patron"] .filX-bouton, #filX[data-etat="muet"][data-niveau="patron"] .filX-bouton{color:#F1E9D6}

/* l'historique */
#filXPanneau{
  position:fixed; left:8px; bottom:46px; z-index:31;
  width:min(360px, calc(100vw - 16px)); max-height:min(50vh, 420px);
  display:flex; flex-direction:column;
  background:rgba(14,21,18,.95); border:1px solid rgba(232,206,121,.35); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); color:#F1E9D6;
  font:500 13px/1.35 Instrument Sans,system-ui,sans-serif;
}
#filXPanneau[hidden]{display:none}
#filXPanneau .filX-tete{display:flex; align-items:center; justify-content:space-between; padding:9px 10px 6px 12px}
#filXPanneau .filX-tete b{font:600 15px/1.2 Georgia,serif; color:#E8CE79}
#filXPanneau .filX-fermer{border:0; background:transparent; color:#F1E9D6; font-size:20px; line-height:1; padding:2px 6px; cursor:pointer}
#filXPanneau .filX-choix{display:flex; gap:6px; padding:0 10px 8px}
#filXPanneau .filX-choix button{
  flex:1; padding:6px 4px; border-radius:8px; border:1px solid rgba(232,206,121,.3);
  background:rgba(255,255,255,.04); color:#F1E9D6; font:600 12px/1 Instrument Sans,system-ui,sans-serif; cursor:pointer;
}
#filXPanneau .filX-choix button.actif{background:#E8CE79; color:#17211c; border-color:#E8CE79}
#filXPanneau .filX-liste{list-style:none; margin:0; padding:0 6px 8px 10px; overflow-y:auto; overscroll-behavior:contain}
#filXPanneau .filX-liste li{display:flex; gap:8px; align-items:baseline; padding:5px 2px; border-top:1px solid rgba(255,255,255,.06)}
#filXPanneau .filX-liste li time{flex:0 0 auto; color:#93a89c; font-size:11px; font-variant-numeric:tabular-nums}
#filXPanneau .filX-liste li span{flex:1; min-width:0; overflow-wrap:anywhere}
#filXPanneau .filX-liste li em{font-style:normal}
#filXPanneau .filX-liste li.n-gros span{color:#E8CE79}
#filXPanneau .filX-liste li.n-legende span{color:#FFD76A; font-weight:700}
#filXPanneau .filX-liste li.n-patron span{color:#E8CE79; font-style:italic}
#filXPanneau .filX-rien{color:#93a89c; justify-content:center}

@keyframes filXarrive{from{transform:translateY(100%); opacity:0} to{transform:translateY(0); opacity:1}}
@keyframes filXdefile{from{transform:translateX(0)} to{transform:translateX(var(--decal,0))}}
@keyframes filXbat{0%,100%{opacity:1} 50%{opacity:.3}}
@keyframes filXeclat{0%{box-shadow:0 0 0 0 rgba(255,200,70,.9)} 100%{box-shadow:0 0 0 14px rgba(255,200,70,0)}}

@media (max-width:900px){
  #filX{font-size:12px; height:26px}
  #filX .filX-bouton{flex-basis:26px; width:26px; height:26px; line-height:26px}
  #filX .filX-piste, #filX .filX-texte{height:26px; line-height:26px}
  #filX[data-etat="replie"], #filX[data-etat="muet"], #filX.vide{width:26px}
}
@media (prefers-reduced-motion: reduce){
  #filX .filX-texte{animation:none !important; max-width:calc(100% - 8px); overflow:hidden; text-overflow:ellipsis}
  #filX.eclat, #filX.nonlu .filX-point{animation:none}
}