{{--
    « Est-ce que c'est bien ça que tu as voulu dire ? » (v2.1 §6)

    L'IA a rangé les mots d'une réponse dictée. Le bénéficiaire lit — ou écoute — les deux versions
    et tranche. Rien n'est écrit sans son oui.

    ⚠️ Quoi qu'il décide, l'ENREGISTREMENT est conservé, et la transcription brute avec lui. Le
    formateur pourra toujours revenir à ce qui a été réellement dit ; c'est la seule preuve qui
    vaille sur un dossier qui va devant un financeur.

    ⚠️ Et si la proposition avait introduit un chiffre absent de la réponse, cet écran ne
    s'afficherait pas du tout : l'application l'aurait rejetée avant, sans que personne ait à le
    remarquer.
--}}
<div class="rounded-2xl border-2 border-corail/50 bg-corail/10 p-3 text-center">
    <p class="text-base font-extrabold">{{ __('formation.cest_bien_ca') }}</p>
    <p class="mt-1 text-sm text-encre-doux">{{ __('formation.mise_en_forme_explication') }}</p>
</div>

<div class="carte mt-3">
    <p class="text-sm font-bold uppercase tracking-wide text-encre-doux">{{ __('formation.tes_mots') }}</p>
    <div class="mt-1 flex items-start gap-3">
        <p class="min-w-0 flex-1 text-base leading-relaxed">{{ $reponse?->transcription }}</p>
        <x-formation.ecouter :texte="$reponse?->transcription ?? ''" />
    </div>
</div>

<div class="carte mt-3 border-2 border-primaire/50">
    <p class="text-sm font-bold uppercase tracking-wide text-primaire">{{ __('formation.remis_au_propre') }}</p>
    <div class="mt-1 flex items-start gap-3">
        <p class="min-w-0 flex-1 text-base font-bold leading-relaxed">{{ $miseEnForme }}</p>
        <x-formation.ecouter :texte="$miseEnForme" />
    </div>
</div>

<x-slot:action>
    <div class="flex gap-2">
        {{-- Garder ses mots est un choix normal, pas un repli : le bouton fait exactement la même
             taille que l'autre. `basis-1/2` et non `flex-1` : le bouton principal porte un
             width:100% qui l'emportait sur la base zéro, et le rendait moitié plus large. --}}
        <button type="button" wire:click="refuserMiseEnForme" class="bouton-secondaire w-full basis-1/2">
            {{ __('formation.garde_mes_mots') }}
        </button>
        <button type="button" wire:click="accepterMiseEnForme" class="bouton-principal basis-1/2">
            {{ __('formation.oui_cest_ca') }}
        </button>
    </div>
</x-slot:action>