/* La frise d'une demande (js/frise.js), et celle d'une candidature (js/recrutement.js de
   Vision), qui emploie la même ligne.

   L'auteur, le 28-09 : « tu fais juste un point avec une couleur pour dire le traitement
   à faire. ne pas casser timeline ». Un seul trait, du centre du premier point au centre
   du dernier, qui passe par le centre de chaque point ; rien n'est posé dans la ligne.
   L'état se dit par le point, avec les couleurs des frises verticales de Vision
   (assets/frise_verticale.css) :
   fait       plein gris foncé : reçu, envoyé, étape franchie ;
   ici        plein bleu, plus grand, halo bleu pâle : ce message ;
   afaire     plein ambre, halo ambre pâle, titre ambre : la prochaine chose à faire ;
   attente    anneau ambre : on attend quelqu'un d'autre (le candidat) ;
   avenir     anneau gris, titre gris : les étapes d'après ;
   retenue et ecartee : l'issue d'une candidature, plein vert ou plein rouge.
   Un point se dessine par quatre variables posées sur le bouton : --pt (sa taille),
   --pt-fond, --pt-bord (l'anneau, 2 px) et --pt-halo. Les couleurs ambre sont des jetons
   de la charte ; la valeur de repli tient si la charte recopiée ne les porte pas.

   La date a une hauteur fixe : le point est à la même hauteur qu'il ait une date ou non.
   Trop large pour sa carte, la ligne défile dedans, sans jamais passer à la ligne. */
.fr { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px 8px; margin:0 0 14px; }
.fr-ligne { display:flex; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.fr-ligne.fondu-d { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.fr-ligne.fondu-g { -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.fr-ligne.fondu-g.fondu-d { -webkit-mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* Tous les points ont la même largeur : le trait de chacun part du centre du point
   d'avant (-50 %) et s'arrête au sien. Le premier n'en tire pas, le dernier n'en
   prolonge pas. Le trait passe au-dessus du fond d'un point ouvert, sous les points. */
.fr-p { --pt:10px; --pt-fond:var(--surface); --pt-bord:var(--muted); --pt-halo:transparent;
  position:relative; flex:1 1 0; min-width:98px; max-width:150px; display:flex; flex-direction:column; align-items:center;
  padding:4px 2px 6px; border:0; border-radius:0; background:none; font:inherit; color:var(--ink-soft); cursor:pointer; text-align:center; }
.fr-p + .fr-p::before { content:""; position:absolute; top:30px; left:-50%; right:50%; height:2px; background:var(--line); }
.fr-q { display:block; height:16px; line-height:16px; margin-bottom:3px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fr-p i { position:relative; z-index:1; display:block; flex:none; width:16px; height:16px; }
.fr-p i::after { content:""; position:absolute; inset:0; margin:auto; box-sizing:border-box; width:var(--pt); height:var(--pt);
  border-radius:50%; background:var(--pt-fond); border:2px solid var(--pt-bord); box-shadow:0 0 0 3px var(--pt-halo); }

/* Les états. */
.fr-p.fait { --pt-fond:var(--ink-soft); --pt-bord:var(--ink-soft); }
.fr-p.ici { --pt:14px; --pt-fond:var(--primary); --pt-bord:var(--primary); --pt-halo:var(--primary-weak); }
.fr-p.afaire { --pt:12px; --pt-fond:var(--afaire, #D97706); --pt-bord:var(--afaire, #D97706); --pt-halo:var(--afaire-w, #FDF0E3); }
.fr-p.attente { --pt-fond:var(--surface); --pt-bord:var(--afaire, #D97706); }
.fr-p.avenir { --pt-fond:var(--surface); --pt-bord:var(--muted); }
.fr-p.retenue { --pt:12px; --pt-fond:var(--lo); --pt-bord:var(--lo); }
.fr-p.ecartee { --pt:12px; --pt-fond:var(--hi); --pt-bord:var(--hi); }

/* Le texte sous le point : un point survolé ou ouvert allume son texte, pas la ligne.
   Le titre tient en deux lignes, puis une ellipse ; ce qui dit qui tient le point passe
   à la ligne et n'est jamais coupé. Un mot ne se coupe pas non plus : la colonne de texte
   (98 px moins les marges, 88 px) loge le plus long des fils, « Remboursement » (87 px),
   et un mot plus long encore passerait à la ligne plutôt que d'être rogné. */
.fr-x { display:block; max-width:100%; margin-top:3px; padding:2px 3px; border-radius:6px; }
.fr-p:hover .fr-x, .fr-p.on .fr-x { background:var(--primary-weak); }
.fr-t { font-size:11.5px; line-height:1.3; font-weight:600; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }
.fr-p.ici .fr-t { color:var(--primary); }
.fr-p.afaire .fr-t { color:var(--afaire-t, #B45309); }
.fr-p.avenir .fr-t { color:var(--muted); font-weight:500; }
.fr-p.retenue .fr-t { color:var(--lo); }
.fr-p.ecartee .fr-t { color:var(--hi); }
.fr-s { display:block; font-size:10.5px; line-height:1.35; color:var(--muted); overflow-wrap:break-word; }

.fr-det { margin:6px 0 4px; padding:9px 12px; background:var(--surface-2, #f5f6f8); border-radius:8px; font-size:12.5px; line-height:1.55; }
.fr-det[hidden] { display:none; }
.fr-det p { margin:4px 0 0; }
.fr-l { display:flex; gap:9px; align-items:baseline; font-size:12.5px; line-height:1.5; }
.fr-genre { flex:none; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--line-soft, #eef0f4); color:var(--ink-soft); white-space:nowrap; }
.fr-genre.ko { background:#fdecec; color:#b42318; }
.fr-genre.att { background:#fdf0e3; color:#b45309; }