/* Les frises verticales de Vision : l'historique d'un dossier, d'un client, d'un salarié,
   d'un bilan (ol.hist-l), le parcours de souscription d'un dossier (ol.parc) et les
   versions d'une pièce (ol.vchaine). Sorties de assets/style.css le 28-09.

   L'auteur, le 28-09 : « tu fais juste un point avec une couleur pour dire le traitement
   à faire. ne pas casser timeline ». La règle, la même pour toutes les frises :
   1. 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 ;
   2. l'état se dit par le point, une classe sur le li, la même dans les trois listes :
      fait      point plein gris foncé (passé, franchi, reçu, envoyé) ;
      ici       point plein bleu, plus grand, halo bleu pâle, le texte sur un fond léger ;
      afaire    point plein ambre, halo ambre pâle, titre ambre (la prochaine chose à faire) ;
      attente   anneau ambre, centre blanc (on attend un autre : le client, un tiers) ;
      avenir    anneau gris, titre gris (les étapes d'après) ;
   3. les accents métier gardent leur sens : contrat (anneau bleu), sinistre (anneau
      rouge), passe (sinistre d'avant l'outil, point plein gris). Sans classe : anneau gris.
      Un accent l'emporte sur fait ; avenir, attente, afaire et ici l'emportent sur tout.

   Un point se dessine par quatre variables posées sur le li : --pt (sa taille), --pt-fond,
   --pt-bord (l'anneau, 2 px) et --pt-halo. Les couleurs ambre sont des jetons de la charte
   (--afaire, --afaire-w, --afaire-t, dans :root de assets/style.css).

   assets/style.css est refait depuis la démo MAIF par _outils/decouper.py, qui y remet
   les anciennes règles : chaque règle d'ici redit ce qu'elle pose, et redit les sélecteurs
   plus lourds de l'ancienne feuille (li.ici, :last-child, les accents), pour l'emporter
   même quand elles reviennent. */

/* La ligne de contexte sous le titre : du texte, pas une frise. */
.frise-ligne { margin:-4px 0 14px; font-size:12.5px; color:var(--ink-soft); }

/* ---- Les états, communs aux trois listes ---- */
.hist-l > li, .arr-parc .parc > li, .vchaine > li { --pt:10px; --pt-fond:var(--bg); --pt-bord:var(--muted); --pt-halo:transparent; }
.vchaine > li { --pt-fond:var(--surface); }
/* Le parcours garde son dessin tant qu'il n'a pas d'état : des points pleins, le dernier bleu. */
.arr-parc .parc > li { --pt:8px; --pt-fond:var(--line); --pt-bord:var(--line); }
.arr-parc .parc > li:last-child { --pt-fond:var(--primary); --pt-bord:var(--primary); }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.fait { --pt-fond:var(--ink-soft); --pt-bord:var(--ink-soft); }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.contrat { --pt-fond:var(--bg); --pt-bord:var(--primary); }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.sinistre { --pt-fond:var(--bg); --pt-bord:var(--hi); }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.passe { --pt-fond:var(--muted); --pt-bord:var(--muted); }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.avenir { --pt-fond:var(--surface); --pt-bord:var(--muted); --pt-halo:transparent; }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.attente { --pt-fond:var(--surface); --pt-bord:var(--afaire); --pt-halo:transparent; }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.afaire { --pt:12px; --pt-fond:var(--afaire); --pt-bord:var(--afaire); --pt-halo:var(--afaire-w); }
:is(.hist-l, .arr-parc .parc, .vchaine) > li.ici { --pt:14px; --pt-fond:var(--primary); --pt-bord:var(--primary); --pt-halo:var(--primary-weak); }

/* ---- L'historique : date, point, texte. Le trait part du centre du point et descend
   jusqu'au centre du point suivant (9 px sous le haut de chaque ligne) ; le dernier n'en
   a pas. Chaque ligne isole son dessin : le trait passe sous le point, jamais dessus. ---- */
.hist-l { list-style:none; margin:6px 0 0; padding:0; }
.hist-l li { position:relative; isolation:isolate; display:grid; grid-template-columns:78px 12px minmax(0,1fr); gap:0 12px; padding:0 0 14px; font-size:12.5px; }
/* Plus de bandeau sous « ici » : sa marge et son retrait cassaient le trait (10 px de trou). */
.hist-l li.ici { margin:0; padding:0 0 14px; background:none; border-radius:0; }
.hist-l li::before, .hist-l li.ici::before { content:""; position:absolute; left:95px; top:9px; bottom:-9px; width:2px;
  background:var(--line); z-index:-1; }
.hist-l li:last-child::before { display:none; }
.hist-l .hist-d { color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; padding-top:1px; }
.hist-l .pt, .hist-l li.contrat .pt, .hist-l li.sinistre .pt, .hist-l li.passe .pt, .hist-l li.ici .pt {
  justify-self:center; width:var(--pt); height:var(--pt); margin-top:calc(9px - var(--pt) / 2); border-radius:50%;
  background:var(--pt-fond); box-shadow:inset 0 0 0 2px var(--pt-bord), 0 0 0 3px var(--pt-halo); }
.hist-l .hist-t { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.hist-l .hist-t b { font-weight:600; color:var(--ink); }
.hist-l .hist-t span { color:var(--muted); font-size:12px; }
.hist-l .hist-t i { font-style:normal; font-size:11.5px; color:var(--muted); margin-left:auto; }
/* Ce qu'on regarde : un fond léger derrière le texte seul, loin du trait. */
.hist-l li.ici .hist-t { background:var(--surface-2); border-radius:4px; box-shadow:0 0 0 5px var(--surface-2); }
.hist-l li[data-go] { cursor:pointer; } .hist-l li[data-go]:hover b { color:var(--primary); text-decoration:underline; }

/* ---- Les versions d'une pièce : scan déposé, original demandé, original reçu. Le trait
   tombe 1 px à droite du bord de la liste, les points sont centrés dessus. ---- */
.vchaine { list-style:none; margin:0 0 10px; padding:0 0 0 16px; border-left:0; }
.vchaine li { position:relative; isolation:isolate; padding:0 0 9px 8px; font-size:12.5px; } .vchaine li:last-child { padding-bottom:0; }
.vchaine li::before, .vchaine li.ici::before { content:""; position:absolute; left:calc(-15px - var(--pt) / 2); top:calc(10px - var(--pt) / 2);
  width:var(--pt); height:var(--pt); border:0; border-radius:50%; background:var(--pt-fond);
  box-shadow:inset 0 0 0 2px var(--pt-bord), 0 0 0 3px var(--pt-halo); }
.vchaine li::after { content:""; position:absolute; left:-16px; top:10px; bottom:-10px; width:2px; background:var(--line); z-index:-1; }
.vchaine li:last-child::after { display:none; }
.vchaine li b { display:block; }
.vchaine li span { display:block; color:var(--muted); font-size:11.5px; } .vchaine li a { font-size:11.5px; color:var(--primary); cursor:pointer; }

/* ---- Le parcours de souscription d'un dossier : des étapes datées, chacune s'ouvre sur
   son message. Le trait ne longe plus le message ouvert de la dernière étape. ---- */
.arr-parc .parc { list-style:none; margin:12px 0 0; padding:0 0 0 2px; border-left:0; }
.arr-parc .parc li { position:relative; isolation:isolate; padding:0 0 12px 18px; font-size:13px; line-height:1.55; color:var(--ink-soft); }
.arr-parc .parc li:last-child { padding-bottom:0; }
.arr-parc .parc li::before, .arr-parc .parc li:last-child::before { content:""; position:absolute; left:calc(-1px - var(--pt) / 2);
  top:calc(10px - var(--pt) / 2); width:var(--pt); height:var(--pt); border-radius:50%; background:var(--pt-fond);
  box-shadow:inset 0 0 0 2px var(--pt-bord), 0 0 0 3px var(--pt-halo); }
.arr-parc .parc li::after { content:""; position:absolute; left:-2px; top:10px; bottom:-10px; width:2px; background:var(--line); z-index:-1; }
.arr-parc .parc li:last-child::after { display:none; }
.arr-parc .parc .q { display:inline-block; min-width:78px; color:var(--muted); font-variant-numeric:tabular-nums; }
.arr-parc .parc-e { display:flex; gap:0; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer; }
.arr-parc .parc-e > span:last-of-type { flex:1; }
.arr-parc .parc-e i { font-style:normal; color:var(--muted); margin-left:8px; transition:transform .15s; }
.arr-parc .parc-e:hover > span:last-of-type { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.arr-parc .parc li.on .parc-e i { transform:rotate(90deg); }
.arr-parc .parc li.on .parc-e > span:last-of-type { color:var(--ink); font-weight:600; }
.arr-parc .parc-msg { margin:8px 0 2px 78px; padding:10px 12px; background:var(--surface-2); border-radius:8px; font-size:12.5px; line-height:1.55; }
.arr-parc .parc-msg[hidden] { display:none; }
.arr-parc .parc-dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0; }
.arr-parc .parc-dl dt { color:var(--muted); }
.arr-parc .parc-dl dd { margin:0; color:var(--ink); }
.arr-parc .parc-piece { display:flex; gap:12px; align-items:flex-start; }
.arr-parc .parc-piece img { width:64px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.arr-parc .parc-mail .arr-tete { margin-bottom:6px; }
.arr-parc .parc-mail p { margin:0 0 6px; }
/* La suite, après la demande envoyée : pas une étape qui s'ouvre, un point qui dit ce qui
   reste (la validation à faire, ce qu'on attend, le contrat à émettre). */
.arr-parc .parc-s { display:flex; }
.arr-parc .parc-s > span:last-of-type { flex:1; }
.arr-parc .parc-s .parc-d { margin-left:8px; font-size:12px; font-weight:400; color:var(--muted); }
.arr-parc .parc-note { margin:12px 0 0; padding:10px 12px; background:var(--surface-2); border-radius:8px; font-size:12.5px; line-height:1.6; color:var(--ink-soft); }

/* ---- Le titre dit l'état avec le point : ambre pour ce qui est à faire, gris pour ce qui
   vient après. Posé après « li.on », pour qu'une étape ouverte garde sa couleur. ---- */
.hist-l li.afaire .hist-t b, .vchaine li.afaire b,
.arr-parc .parc li.afaire .parc-e > span:last-of-type, .arr-parc .parc li.afaire .parc-s > span:last-of-type { color:var(--afaire-t); }
.arr-parc .parc li.afaire .parc-s > span:last-of-type { font-weight:600; }
.hist-l li.avenir .hist-t b, .vchaine li.avenir b,
.arr-parc .parc li.avenir .parc-e > span:last-of-type, .arr-parc .parc li.avenir .parc-s > span:last-of-type { color:var(--muted); font-weight:500; }