/* Workflow d'un dossier (14/10/2026, js/06-workflow.js) : modèle du suivi de la page d'accueil. */
.wf { --n: 8; --pos: 0; --col: minmax(150px, 1fr); overflow-x: auto; padding-bottom: 6px; }
.wf-haut { position: relative; display: grid; grid-template-columns: repeat(var(--n), var(--col)); gap: 0 10px;
  min-width: calc(var(--n) * 160px); padding-top: 4px; }
.wf-rail { position: absolute; top: 25px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 4px;
  background: var(--line); border-radius: 4px; }
.wf-rail .rempli { position: absolute; inset: 0 auto 0 0; width: calc(var(--pos) * 100%); background: var(--acc); border-radius: 4px; }
.wf-phases { display: contents; }
.wf-phase { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.wf-pastille { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--panel);
  border: 2px solid var(--line); color: var(--mut); }
.wf-pastille .kp-ico { width: 22px; height: 22px; }
.wf-nom { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; line-height: 1.25; }
.wf-compte { display: inline-block; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.wf-phase.fait .wf-pastille { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.wf-phase.en_cours .wf-pastille { border-color: var(--acc); color: var(--acc); }
.wf-phase.en_cours .wf-nom { color: var(--acc); }
.wf-phase.a_venir .wf-nom { color: var(--mut); font-weight: 400; }
.wf-phase.incomplet .wf-pastille { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.wf-phase.incomplet .wf-nom::after { content: " · à régulariser"; font-weight: 400; color: var(--warn); }
.wf-phase.retard .wf-pastille { box-shadow: 0 0 0 3px var(--warn); }
.wf-phase.critique .wf-pastille { box-shadow: 0 0 0 3px var(--bad); }
.wf-phase.courante .wf-pastille { animation: wf-pouls 1.6s ease-out 3; }
@keyframes wf-pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); }
                      100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--acc) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wf-phase.courante .wf-pastille { animation: none; } }

.wf-corps { display: grid; grid-template-columns: repeat(var(--n), var(--col)); gap: 0 10px; min-width: calc(var(--n) * 160px);
  margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.wf-colonne { min-width: 0; }
.wf-colonne.a_venir { opacity: .85; }
.wf-titre { display: none; }
.wf-etapes { list-style: none; margin: 0; padding: 0; position: relative; }
.wf-etape { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 0 8px; padding: 0 0 12px; font-size: 12px; }
.wf-etape::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.wf-etape:last-child::before { display: none; }
.wf-etape.fait::before, .wf-etape.retard::before, .wf-etape.critique::before, .wf-etape.deduit::before { background: var(--acc); }
.wf-point { grid-row: span 3; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); z-index: 1; }
.wf-etape.fait .wf-point { background: var(--acc); border-color: var(--acc); }
.wf-etape.retard .wf-point { background: var(--warn); border-color: var(--warn); }
.wf-etape.critique .wf-point { background: var(--bad); border-color: var(--bad); }
.wf-etape.encours .wf-point { border-color: var(--acc); }
.wf-etape.deduit .wf-point, .wf-etape.na .wf-point { border-style: dashed; border-color: var(--acc); }
.wf-etape.na, .wf-etape.hors { opacity: .55; }
.wf-lib { font-weight: 600; line-height: 1.3; }
.wf-date { font-variant-numeric: tabular-nums; }
.wf-etape.fait .wf-date { font-weight: 700; }
.wf-etape.deduit .wf-date { font-style: italic; color: var(--mut); }
.wf-source { font-size: 11px; color: var(--mut); }
.wf-ecart { font-size: 11px; font-weight: 700; }
.wf-ecart.ok { color: var(--ok); }
.wf-ecart.retard { color: var(--warn); }
.wf-ecart.critique { color: var(--bad); }
.wf-etape.cliquable { cursor: pointer; border-radius: 6px; }
.wf-etape.cliquable:hover .wf-lib, .wf-etape.cliquable:focus-visible .wf-lib { color: var(--acc); text-decoration: underline; }
.wf-etape.cliquable:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* conteneur qui avance sur le rail (comme la page d'accueil) */
.wf-mobile { position: absolute; top: -34px; left: calc(var(--pos) * 100%); transform: translateX(-50%); color: var(--acc); z-index: 2; }
.wf-mobile i { display: block; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.wf-haut { margin-top: 30px; }

/* animation : rail, conteneur, phases allumées une à une, puis étapes */
.wf.anim .wf-rail .rempli { width: 0; }
.wf.anim .wf-mobile { left: 0; opacity: 0; }
.wf.anim .wf-phase { opacity: .35; }
.wf.anim .wf-phase .wf-pastille { background: var(--panel); border-color: var(--line); color: var(--mut); box-shadow: none; animation: none; }
.wf.anim .wf-etape { opacity: 0; transform: translateY(6px); }
.wf.anim.vue .wf-rail .rempli { width: calc(var(--pos) * 100%); transition: width var(--duree, 2s) linear; }
.wf.anim.vue .wf-mobile { left: calc(var(--pos) * 100%); opacity: 1; transition: left var(--duree, 2s) linear, opacity .3s ease; }
.wf.anim.vue .wf-phase { opacity: 1; transition: opacity .35s ease var(--d, 0s); }
.wf.anim.vue .wf-phase .wf-pastille { transition: background .35s ease var(--d, 0s), border-color .35s ease var(--d, 0s),
  color .35s ease var(--d, 0s), box-shadow .35s ease var(--d, 0s); }
.wf.anim.vue .wf-phase.fait .wf-pastille { background: var(--acc); border-color: var(--acc); color: var(--acc-ink);
  animation: wf-allume .5s cubic-bezier(.2, .9, .3, 1.4) var(--d, 0s) both; }
.wf.anim.vue .wf-phase.en_cours .wf-pastille { border-color: var(--acc); color: var(--acc); }
.wf.anim.vue .wf-phase.incomplet .wf-pastille { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.wf.anim.vue .wf-phase.retard .wf-pastille { box-shadow: 0 0 0 3px var(--warn); }
.wf.anim.vue .wf-phase.critique .wf-pastille { box-shadow: 0 0 0 3px var(--bad); }
.wf.anim.vue .wf-phase.courante.en_cours .wf-pastille { animation: wf-pouls 1.6s ease-out calc(var(--d, 0s) + .3s) 3; }
.wf.anim.vue .wf-etape { opacity: 1; transform: none; transition: opacity .35s ease var(--d, 0s), transform .35s ease var(--d, 0s); }
.wf.anim.vue .wf-etape.na, .wf.anim.vue .wf-etape.hors { opacity: .55; }
@keyframes wf-allume { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* petits écrans : workflow vertical, chaque phase suivie de ses étapes */
@media (max-width: 760px) {
  .wf { overflow: visible; }
  .wf-haut { display: none; }
  .wf-corps { display: block; min-width: 0; margin-top: 0; border-top: 0; padding-top: 0; }
  .wf-titre { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 14px; }
  .wf-titre .kp-ico { width: 20px; height: 20px; color: var(--acc); }
  .wf-titre .wf-compte { margin-left: auto; }
  .wf-colonne { padding-left: 4px; }
}
.wf-titre .wf-pastille { width: 34px; height: 34px; flex: none; }
.wf-titre .wf-pastille .kp-ico { width: 18px; height: 18px; color: inherit; }
.wf-colonne.fait .wf-titre .wf-pastille { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.wf-colonne.en_cours .wf-titre .wf-pastille { border-color: var(--acc); color: var(--acc); }
.wf-colonne.incomplet .wf-titre .wf-pastille { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.wf-colonne.retard .wf-titre .wf-pastille { box-shadow: 0 0 0 3px var(--warn); }
.wf-colonne.critique .wf-titre .wf-pastille { box-shadow: 0 0 0 3px var(--bad); }
.wf-colonne.a_venir .wf-titre { color: var(--mut); }

/* 15/10/2026 : frise verticale au choix (préférence de la personne) : phases l'une sous l'autre sur un rail,
   étapes en retrait sous chaque phase */
.wf.wf-v { overflow: visible; }
.wf.wf-v .wf-haut { display: none; }
.wf.wf-v .wf-corps { display: block; min-width: 0; margin-top: 0; border-top: 0; padding-top: 0; }
.wf.wf-v .wf-colonne { position: relative; padding: 0 0 6px 0; }
.wf.wf-v .wf-colonne::before { content: ""; position: absolute; left: 16px; top: 40px; bottom: -8px; width: 4px; border-radius: 4px; background: var(--line); }
.wf.wf-v .wf-colonne:last-child::before { display: none; }
.wf.wf-v .wf-colonne.fait::before, .wf.wf-v .wf-colonne.incomplet::before { background: var(--acc); }
.wf.wf-v .wf-titre { display: flex; align-items: center; gap: 10px; margin: 8px 0 8px; font-size: 14px; position: relative; z-index: 1; }
.wf.wf-v .wf-titre .wf-compte { margin-left: auto; }
.wf.wf-v .wf-colonne.courante .wf-titre { color: var(--acc); }
.wf.wf-v .wf-etapes { margin-left: 44px; max-width: 760px; }
.wf.wf-v .wf-etape { font-size: 13px; }

/* prochaine étape à faire : couleur dédiée (distincte de « fait », du retard et du critique) */
:root[data-theme="light"] { --prochaine: #6a3fb5; --prochaine-bg: #efe8fb; }
:root[data-theme="dark"] { --prochaine: #b79cf0; --prochaine-bg: #2a2140; }
.wf-etape.prochaine { background: var(--prochaine-bg); border-radius: 8px; padding: 6px 8px 8px; margin: 0 -8px 6px; box-shadow: inset 3px 0 0 var(--prochaine); }
.wf-etape.prochaine::before { display: none; }
.wf-etape.prochaine .wf-point { border-color: var(--prochaine); background: var(--prochaine); box-shadow: 0 0 0 3px var(--prochaine-bg), 0 0 0 5px var(--prochaine); }
.wf-etape.prochaine .wf-lib { color: var(--prochaine); }
.wf-prochaine { display: block; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; color: var(--prochaine); margin-bottom: 1px; }
.wf.anim.vue .wf-etape.prochaine .wf-point { animation: wf-prochaine 1.8s ease-in-out calc(var(--d, 0s) + .4s) 3; }
@keyframes wf-prochaine { 50% { box-shadow: 0 0 0 3px var(--prochaine-bg), 0 0 0 8px var(--prochaine); } }
@media (prefers-reduced-motion: reduce) { .wf.anim.vue .wf-etape.prochaine .wf-point { animation: none; } }
.wf-bascule { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wf-bascule button { border: 0; background: none; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--mut); cursor: pointer; }
.wf-bascule button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
.wf-bascule button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
@media print { .wf, .wf-haut, .wf-corps { overflow: visible; min-width: 0; }
  .wf.anim .wf-phase, .wf.anim .wf-etape { opacity: 1; transform: none; } .wf-mobile { display: none; } }

/* échéances de validité (14/10/2026) : icône attention / critique */
.wf-echeance { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.wf-echeance.attention { color: var(--warn); background: var(--warn-bg); }
.wf-echeance.critique { color: var(--bad); background: var(--bad-bg); }
.echeance-ico { display: inline-block; margin-right: 4px; font-size: 15px; line-height: 1; cursor: help; }
.echeance-ico.attention { color: var(--warn); }
.echeance-ico.critique { color: var(--bad); }

/* 15/10/2026 : commentaire de situation en tête de la fiche dossier */
.situation { margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--acc); background: var(--hl); border-radius: 6px; }
.situation p { line-height: 1.45; }