@php
    $pct   = $pct ?? null;
    $color = $pct === null
        ? '#94a3b8'
        : ($pct > 50 ? '#10b981' : ($pct > 20 ? '#f59e0b' : '#ef4444'));
    $fillW = $pct !== null ? max(0, min(20, (int) round($pct / 100 * 20))) : 0;
    $label = $pct !== null ? $pct . ' %' : '—';
@endphp
<span style="display:inline-flex;align-items:center;gap:3px;" title="{{ $label }}">
    <svg width="28" height="14" viewBox="0 0 28 14" style="flex-shrink:0;">
        {{-- Corps --}}
        <rect x="0.5" y="0.5" width="23" height="13" rx="2"
              fill="none" stroke="{{ $color }}" stroke-width="1.2"/>
        {{-- Borne + --}}
        <rect x="24" y="4.5" width="3" height="5" rx="1.5" fill="{{ $color }}"/>
        {{-- Remplissage --}}
        @if($pct !== null)
        <rect x="2" y="2.5" width="{{ $fillW }}" height="9" rx="1" fill="{{ $color }}"/>
        @endif
    </svg>
    <span style="font-size:0.78rem;font-weight:600;color:{{ $color }};line-height:1;">{{ $label }}</span>
</span>