/* Scène « La supervision » — Assistance & maintenance. À plat : traits, aplats, bordures fines. Classes préfixées sv-. */
.sv-tableau, .sv-voyant, .sv-file, .sv-lien, .sv-ticket { position: absolute; left: 0; top: 0; }
.sv-voyant i, .sv-ticket i { display: block; font-style: normal; }

/* Le tableau : un panneau, son titre, le bilan en clair */
.sv-tableau { border: 1px solid var(--line-fort); border-radius: 14px; background: var(--surface); }
.sv-tb-tete { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; white-space: nowrap; line-height: 1; }
.sv-tb-tete b, .sv-f-titre { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-bilan { font-size: 17px; font-weight: 700; color: var(--accent-texte); opacity: 0; transition: opacity var(--d-2); }
.sv-bilan.alerte { color: var(--ambre-texte); }

/* Un voyant : point d’état, nom, mot d’état, tracé */
.sv-voyant { border-top: 1px solid var(--line); }
.sv-point { position: absolute; left: 18px; top: 20px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-fort); }
.sv-point i { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--accent); opacity: 0; will-change: transform, opacity; }
.sv-nom { position: absolute; left: 40px; top: 16px; font-size: 14.5px; font-weight: 700; line-height: 20px; color: var(--ink); white-space: nowrap; }
.sv-etat { position: absolute; right: 18px; top: 16px; font-size: 12px; font-weight: 700; line-height: 20px; color: var(--muted); white-space: nowrap; }
.sv-barre { position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 2px 2px 0; background: var(--ambre); opacity: 0; }
.sv-voyant.alerte .sv-point i, .sv-voyant.alerte .sv-tete { background: var(--ambre); }
.sv-voyant.alerte .sv-etat { color: var(--ambre-texte); }
/* Temps fort : l’incident est résolu, l’état du voyant passe en aplat (il bat une fois, piloté par le JS) */
.sv-etat.sv-retabli { top: 14px; padding: 0 11px; border-radius: var(--r-pilule); background: var(--accent-fonce); color: #fff; font-size: 12.5px; line-height: 24px; }

/* Le tracé : un ruban qui défile derrière une fenêtre ; le point au bord droit est « maintenant » */
.sv-trace { position: absolute; }
.sv-fen, .sv-volet { position: absolute; inset: 0; overflow: hidden; }
.sv-volet, .sv-ruban { will-change: transform; }
.sv-ruban { position: absolute; left: 0; top: 0; }
.sv-ruban svg { display: block; max-width: none; }
.sv-ruban path { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.sv-ruban .sv-irr { stroke: var(--ambre); }
.sv-ruban .sv-irr.passe { stroke: var(--line-fort); }
.sv-tete { position: absolute; left: 100%; top: 0; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent); opacity: 0; will-change: transform; }

/* La place des tickets : vide tant que personne ne suit */
.sv-file { border: 1px dashed var(--line-fort); border-radius: 14px; }
.sv-f-titre { position: absolute; left: 16px; top: 0; display: flex; align-items: center; line-height: 1; }
.sv-vide { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1; white-space: nowrap; }
.sv-file.manque { border-color: var(--ambre); }
.sv-file.manque .sv-vide { color: var(--ambre-texte); }
.sv-lien { border-radius: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 0; }

/* Le ticket */
.sv-ticket { border: 1px solid var(--line-fort); border-radius: 12px; background: var(--surface); opacity: 0; will-change: transform, opacity; }
.sv-ticket.resolu { border-color: var(--accent); }
.sv-t-tete { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; line-height: 1; white-space: nowrap; }
.sv-t-tete span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-t-tete b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.sv-t-point { position: absolute; right: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ambre); }
.sv-ticket.resolu .sv-t-point { background: var(--accent); }
.sv-t-sep { position: absolute; left: 16px; right: 16px; height: 1px; background: var(--line); }

/* Sa frise : trois états reliés ; chacun se coche, le fil avance */
.sv-pas { position: absolute; width: 0; height: 0; }
.sv-rond { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-fort); background: var(--surface); }
.sv-rond .sv-plein { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-fonce); opacity: 0; will-change: transform, opacity; }
.sv-plein svg { width: 62%; height: 62%; fill: none; stroke: var(--sur-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-pas span { position: absolute; left: 26px; top: -10px; font-size: 13.5px; font-weight: 700; line-height: 20px; color: var(--muted); white-space: nowrap; }
.sv-pas.fait span { color: var(--ink); }
.sv-fil { position: absolute; border-radius: 1px; background: var(--line); overflow: hidden; }
.sv-fil i { position: absolute; inset: 0; background: var(--accent-fonce); transform: scaleY(0); transform-origin: 0 0; will-change: transform; }

/* Relief : le tableau et la place des tickets sont le support ; les tracés sont posés sur le tableau ; le ticket, lui, se manipule. */
.sv-voyant { transform-style: preserve-3d; }
.sv-trace { translate: 0 0 calc(12px * var(--relief)); }
.sv-ticket { translate: 0 0 calc(34px * var(--relief)); }

/* Petit écran : deux voyants en tuiles, le ticket dessous, la frise à l’horizontale */
.sv-compact .sv-voyant { border: 1px solid var(--line-fort); border-radius: 12px; background: var(--surface); }
.sv-compact .sv-barre { inset: -1px; width: auto; border-radius: 12px; background: none; border: 1px solid var(--ambre); }
.sv-compact .sv-point { left: 12px; top: 15px; width: 10px; height: 10px; }
.sv-compact .sv-nom { left: 29px; top: 10px; font-size: 12.5px; }
.sv-compact .sv-etat { left: 29px; right: auto; top: 30px; font-size: 11px; line-height: 16px; }
.sv-compact .sv-etat.sv-retabli { top: 29px; padding: 0 8px; font-size: 11px; line-height: 18px; }
.sv-compact .sv-ruban path { stroke-width: 2; }
.sv-compact .sv-tete { width: 7px; height: 7px; margin: -3.5px; }
/* Relief compact : les deux tuiles sont posées sur le fond, leur tracé un peu au-dessus ; le lien part de la tuile ; le ticket reste le plus haut */
.sv-compact .sv-voyant, .sv-compact .sv-lien { translate: 0 0 calc(12px * var(--relief)); }
.sv-compact .sv-trace { translate: 0 0 calc(8px * var(--relief)); }
.sv-compact .sv-ticket { translate: 0 0 calc(24px * var(--relief)); }
.sv-compact .sv-file, .sv-compact .sv-ticket { border-radius: 12px; }
.sv-compact .sv-vide { font-size: 12px; }
.sv-compact .sv-lien { transform: scaleY(0); }
.sv-compact .sv-t-tete { left: 14px; right: 14px; top: 0; height: 42px; flex-direction: row; align-items: center; gap: 0; }
.sv-compact .sv-t-tete b { order: -1; font-size: 13px; }
.sv-compact .sv-t-tete span { margin-left: auto; margin-right: 18px; }
.sv-compact .sv-t-point { top: 50%; margin-top: -4.5px; }
.sv-compact .sv-t-sep { left: 14px; right: 14px; }
.sv-compact .sv-rond { left: -11px; top: -11px; width: 22px; height: 22px; }
.sv-compact .sv-pas span { left: 0; top: 17px; font-size: 12px; translate: -50% 0; }
.sv-compact .sv-fil i { transform: scaleX(0); }