{{--
    La SAISONNALITÉ : douze mois, en pourcentage du mois le plus fort (v2.1 §4).

    C'est la réponse qui change le plus de choses dans le dossier : sans elle, la trésorerie
    étale les ventes à plat sur douze mois, et un projet de miel — qui vend en juillet et rien
    en janvier — paraît solvable toute l'année. Il ne l'est pas.

    Des curseurs, pas des champs : on montre la forme de l'année, on ne fait pas remplir un
    tableau. Le chiffre reste affiché en grand à côté, parce qu'un curseur seul ne se relit pas.
--}}
@php
    $moisCourts = app()->getLocale() === 'ar'
        ? ['ينا','فبر','مار','أبر','ماي','يون','يول','غشت','شتن','أكت','نون','دجن']
        : ['jan','fév','mar','avr','mai','juin','juil','août','sept','oct','nov','déc'];
@endphp

<p class="mt-4 text-center text-base text-encre-doux">{{ __('formation.saisonnalite_consigne') }}</p>

<div class="mt-3 space-y-2">
    @foreach ($moisCourts as $rang => $nom)
        {{-- py-1 : chaque rangée fait une quarantaine de pixels de haut, sinon le pouce attrape
             le curseur du mois d'à côté. Mesuré à 390 px. --}}
        <div class="flex items-center gap-3 py-1">
            <span class="w-12 shrink-0 text-base font-bold">{{ $nom }}</span>
            <input type="range" min="0" max="100" step="10"
                   wire:model.live="saisieSaisonnalite.{{ $rang }}"
                   class="h-6 min-w-0 flex-1 accent-primaire"
                   aria-label="{{ $nom }}">
            <span class="w-14 shrink-0 text-end text-base font-black tabular-nums">
                {{ (int) ($saisieSaisonnalite[$rang] ?? 0) }} %
            </span>
        </div>
    @endforeach
</div>