/* Scène « La délégation » — Prestations administratives. À plat : traits, aplats, bordures fines. Classes préfixées dg-. */
.dg-cote, .dg-poste, .dg-jauge, .dg-faits, .dg-tache, .dg-etat { position: absolute; left: 0; top: 0; }
.dg-poste, .dg-jauge, .dg-jauge i, .dg-pip, .dg-pip i, .dg-coche { display: block; font-style: normal; }

/* Les deux côtés : le bureau du client (en creux), le plan de travail d’EX’SIE (net, cerné d’accent) */
.dg-cote { border-radius: 16px; }
.dg-client { background: var(--bg-doux); border: 1px solid var(--line-fort); }
.dg-exsie { background: var(--surface); border: 2px solid var(--accent); }
.dg-nom { position: absolute; left: 17px; top: 19px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1; white-space: nowrap; }
.dg-exsie .dg-nom { left: 16px; top: 18px; color: var(--accent-texte); }

/* Le poste de travail : un emplacement, la jauge du traitement en cours */
.dg-poste { border: 1.5px dashed var(--line-fort); border-radius: 11px; }
.dg-jauge { border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; }
.dg-jauge i { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* Ce qui est traité : un point par tâche */
.dg-faits { display: flex; align-items: center; justify-content: space-between; transform: translateY(-50%); line-height: 1; white-space: nowrap; }
.dg-faits span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dg-faits div { display: flex; gap: 8px; }
.dg-pip { position: relative; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-fort); }
.dg-pip i { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--accent-fonce); opacity: 0; will-change: transform, opacity; }

/* Une tâche : son nom, et à droite sa marque (en retard, à valider, traitée) */
.dg-tache { display: flex; align-items: center; padding: 0 16px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.dg-tache b { font-weight: 700; }
.dg-tache.dg-tard { border-color: var(--ambre); }
.dg-tache.dg-attend { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* contour de 2 px, sans changer la boîte */
.dg-tache.dg-vol { box-shadow: var(--flottant); } /* seul objet qui flotte : la tâche en vol */
.dg-tache.dg-attend.dg-vol { box-shadow: inset 0 0 0 1px var(--accent), var(--flottant); }
.dg-marque { position: absolute; right: 11px; top: 50%; height: 24px; margin-top: -12px; padding: 0 10px; border-radius: var(--r-pilule); border: 1px solid var(--ambre); background: var(--surface); font-size: 11px; font-weight: 700; line-height: 22px; color: var(--ambre-texte); opacity: 0; }
.dg-accord { border: 1.5px solid var(--accent); line-height: 21px; color: var(--accent-texte); will-change: transform, opacity; }
.dg-coche { position: absolute; right: 11px; top: 50%; width: 24px; height: 24px; margin-top: -12px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-fonce); opacity: 0; will-change: transform, opacity; }
.dg-coche svg { display: block; width: 62%; height: 62%; fill: none; stroke: var(--sur-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Le témoin du client : un chiffre, deux mots */
.dg-etat { display: flex; align-items: baseline; gap: 7px; height: 38px; padding: 0 18px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 36px; white-space: nowrap; opacity: 0; transition: opacity var(--d-2); }
.dg-etat b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-etat b:empty { display: none; }
.dg-etat.alerte { color: var(--ambre-texte); border-color: var(--ambre); }
.dg-etat.accord { color: var(--accent-texte); border-color: var(--accent); }
/* Temps fort : tout est revenu, la paie est validée ; le témoin passe en aplat (il bat une fois, piloté par le JS) */
.dg-etat.fait { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.dg-etat.fait span { font-size: 14.5px; }

/* Relief : les deux côtés sont le support. Une tâche est posée (12 px, un cran de 5 px par tâche sous elle dans la pile),
   et monte jusqu’à 40 px pendant qu’elle voyage : --rang et --vol viennent du JS, la hauteur reste écrite ici. Le témoin est posé sur le bureau. */
.dg-tache { translate: 0 0 calc((12px + 5px * var(--rang, 0) + 28px * var(--vol, 0)) * var(--relief)); }
.dg-etat { translate: 0 0 calc(18px * var(--relief)); }

/* Petit écran : le client en haut, EX’SIE en bandeau dessous ; le témoin monte dans l’en-tête, les points de même */
.dg-compact .dg-cote { border-radius: 12px; }
.dg-compact .dg-nom { left: 13px; top: 15px; font-size: 11px; }
.dg-compact .dg-exsie .dg-nom { left: 12px; top: 14px; }
.dg-compact .dg-poste { border-radius: 8px; }
.dg-compact .dg-faits { justify-content: flex-end; }
.dg-compact .dg-faits div { gap: 6px; }
.dg-compact .dg-pip { width: 11px; height: 11px; }
.dg-compact .dg-tache { padding: 0 12px; border-radius: 8px; font-size: 12px; }
.dg-compact .dg-marque { right: 6px; height: 20px; margin-top: -10px; padding: 0 8px; font-size: 11px; line-height: 18px; }
.dg-compact .dg-accord { line-height: 17px; }
.dg-compact .dg-coche { right: 6px; width: 20px; height: 20px; margin-top: -10px; }
.dg-compact .dg-etat { gap: 5px; height: 26px; padding: 0 11px; font-size: 11px; line-height: 24px; }
.dg-compact .dg-etat b { font-size: 14px; }
.dg-compact .dg-etat.fait span { font-size: 11.5px; }
/* Relief plus bas : la scène est petite, une tâche trop haute sortirait de son côté */
.dg-compact .dg-tache { translate: 0 0 calc((8px + 3px * var(--rang, 0) + 20px * var(--vol, 0)) * var(--relief)); }
.dg-compact .dg-etat { translate: 0 0 calc(12px * var(--relief)); }