/* La frise d'une demande en une ligne d'états (frise.js, à côté).

   L'auteur, le 13-10 : « tu peux faire quelque chose de plus discret ». Fermée, la ligne n'est pas
   plus haute qu'une ligne de texte : des pastilles de 8 px reliées par un trait court, le nom de
   l'état et sa date. Les couleurs sont celles des frises de Vision (assets/frise.css) :
   fait       plein gris foncé ;
   afaire     plein ambre, halo ambre pâle, nom ambre : la prochaine chose à faire, pour qui regarde ;
   attente    anneau ambre : on attend un autre poste ;
   avenir     anneau gris, nom gris.
   Le trait qui mène à un état fait est gris foncé, celui qui mène à ce qui reste est clair. Trop
   longue pour sa place, la ligne défile chez elle (états, délai et historique ensemble), sans jamais
   passer à la ligne. Un état ouvert
   s'allume, et son détail s'ouvre dessous, sur toute la largeur. */
.fe { margin:2px 0 12px; font-size:11.5px; line-height:18px; color:var(--ink-soft); }
.fe-rang { display:flex; align-items:center; flex-wrap:nowrap; gap:10px; min-width:0; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; white-space:nowrap; }
.fe-rang::-webkit-scrollbar { display:none; }
.fe-rang.fondu-d { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.fe-rang.fondu-g { -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.fe-rang.fondu-g.fondu-d { -webkit-mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.fe-ligne { display:flex; align-items:center; flex-wrap:nowrap; flex:none; margin:0; padding:0; list-style:none; }

/* Un état : le trait qui y mène, la pastille, le nom, la date. */
.fe-p { --pt-fond:var(--surface); --pt-bord:var(--muted); --pt-halo:transparent;
  position:relative; flex:none; display:flex; align-items:center; }
.fe-p + .fe-p { padding-left:15px; }
.fe-p + .fe-p::before { content:""; position:absolute; left:2px; top:50%; width:11px; height:2px; margin-top:-1px; border-radius:1px; background:var(--line); }
.fe-p.fait + .fe-p.fait::before { background:var(--ink-soft); }
.fe-p button { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 4px 0 3px; border:0; border-radius:10px;
  background:none; font:inherit; color:inherit; cursor:pointer; white-space:nowrap; }
.fe-p button:hover, .fe-p button.on { background:var(--primary-weak); }
.fe-p i { flex:none; display:block; box-sizing:border-box; width:8px; height:8px; border-radius:50%;
  background:var(--pt-fond); border:2px solid var(--pt-bord); box-shadow:0 0 0 2px var(--pt-halo); }
.fe-n { color:var(--ink); }
.fe-q { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.fe-p.fait { --pt-fond:var(--ink-soft); --pt-bord:var(--ink-soft); }
.fe-p.afaire { --pt-fond:var(--afaire, #D97706); --pt-bord:var(--afaire, #D97706); --pt-halo:var(--afaire-w, #FDF0E3); }
.fe-p.attente { --pt-fond:var(--surface); --pt-bord:var(--afaire, #D97706); }
.fe-p.avenir { --pt-fond:var(--surface); --pt-bord:var(--muted); }
.fe-p.avenir .fe-n { color:var(--muted); }
.fe-p.cour .fe-n { font-weight:600; }
.fe-p.afaire .fe-n, .fe-p.attente .fe-n { color:var(--afaire-t, #B45309); }

/* Au bout : le délai de la famille en un mot (« reste 45 h »), puis les échanges d'avant. */
.fe-delai, .fe-hist { flex:none; height:20px; padding:0 7px; border:1px solid var(--line); border-radius:10px; background:none;
  font:inherit; font-size:11px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fe-delai:hover, .fe-hist:hover, .fe-delai.on, .fe-hist.on { background:var(--primary-weak); }
.fe-delai.ko { color:var(--hi, #b42318); border-color:currentColor; }

/* Le détail d'un état, dessous. Une variable par ligne : son nom à gauche, sa valeur à droite. Le
   détail est une seule grille : les listes (`.fe-dl`) n'y font pas leur propre colonne, pour que
   toutes les valeurs d'un état commencent au même endroit, même réparties sous plusieurs titres. */
.fe-det { margin:6px 0 2px; padding:8px 12px; background:var(--surface-2, #f5f6f8); border-radius:8px; font-size:12.5px; line-height:1.5;
  display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:3px 14px; }
.fe-det[hidden] { display:none; }
.fe-det > :not(.fe-dl) { grid-column:1 / -1; min-width:0; }
.fe-dt { margin-bottom:1px; }
.fe-dl { display:contents; }
.fe-dl dt { color:var(--muted); }
.fe-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.fe-dl .pill { font-size:11px; }
/* Certaines pastilles (« Hors périmètre », « Documents et attestations ») ont presque le fond du
   détail : un filet les montre, sans quoi leur texte paraît décalé de la colonne des valeurs. */
.fe-dl .pill { box-shadow:inset 0 0 0 1px var(--line); }
/* « Lue par Mia » : chaque partie de Mia sous son nom (Mia Indexer, Mia Search, Mia Scan), puis la revue. */
.fe-g { margin:5px 0 0; font-size:11.5px; color:var(--muted); }
.fe-dt + .fe-g { margin-top:0; }
.fe-g b { color:var(--ink-soft); font-weight:600; }
.fe-ko { font-size:11px; font-weight:600; color:var(--hi, #b42318); }
.fe-dl .bx-avis { font-size:11px; }
.fe-avant { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.fe-avant li { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
@media (max-width:560px){
  .fe-det { grid-template-columns:minmax(0, 1fr); row-gap:0; }
  .fe-dl dd { margin-bottom:4px; }
}