{# Step 3: Loading/Processing #}
<div class="moodia-step" data-moodia--stepper-target="step" data-step="3" style="display: none;">
    <div class="moodia-card">
        <div class="moodia-loading">
            {# Animation principale : Moodia → Robot #}
            <div class="transfer-animation">
                {# Moodia (émetteur) #}
                <div class="transfer-sender">
                    <div class="transfer-sender__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #0C81E4;"/>
                            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #0C81E4;"/>
                            <path d="M8 7h8M8 11h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="color: #0C81E4;"/>
                        </svg>
                    </div>
                    <span class="transfer-sender__label">Votre document</span>
                </div>

                {# Ligne avec particules animées #}
                <div class="transfer-line">
                    <div class="transfer-particle"></div>
                    <div class="transfer-particle"></div>
                    <div class="transfer-particle"></div>
                    <div class="transfer-particle"></div>
                    <div class="transfer-particle"></div>

                    {# Étape en cours au centre #}
                    <div class="transfer-line__step" data-moodia--step-3-analysis-target="stepLabel">
                        Extraction
                    </div>
                </div>

                {# Robot IA (récepteur) #}
                <div class="transfer-receiver">
                    <div class="transfer-receiver__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            {# Antenne #}
                            <circle cx="12" cy="2" r="1" fill="currentColor"/>
                            <line x1="12" y1="3" x2="12" y2="5" stroke="currentColor" stroke-width="2"/>
                            {# Tête #}
                            <rect x="7" y="5" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
                            {# Yeux #}
                            <circle cx="10" cy="9" r="1.5" fill="currentColor"/>
                            <circle cx="14" cy="9" r="1.5" fill="currentColor"/>
                            {# Bouche #}
                            <path d="M9 12 Q12 13.5 15 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none"/>
                            {# Corps #}
                            <rect x="9" y="15" width="6" height="5" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
                            {# Bras #}
                            <line x1="7" y1="16" x2="5" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            <line x1="17" y1="16" x2="19" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        {# Cercles de "pensée" #}
                        <div class="transfer-receiver__thinking">
                            <div class="thinking-dot"></div>
                            <div class="thinking-dot"></div>
                            <div class="thinking-dot"></div>
                        </div>
                    </div>
                    <span class="transfer-receiver__label">IA Moodia</span>
                </div>
            </div>
        </div>
    </div>
</div>