{{-- Anatomie d'un numéro d'article. Partagée par la grille de lecture et la
     page d'entrée du Livre VI : la clé de lecture doit s'offrir là où le
     lecteur arrive, pas seulement sur une page qu'il faut penser à ouvrir. --}}
@inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')

{{-- L'anatomie du numéro : le cœur de la page. Tout le reste en découle. --}}
        <section class="mt-8 rounded-2xl border-2 border-rep-blue bg-surface p-6" aria-labelledby="anatomie">
            <h2 id="anatomie" class="text-xs font-bold uppercase tracking-wider text-rep-blue">Anatomie d'un numéro</h2>

            <div class="mt-4 flex flex-wrap items-end gap-x-1 gap-y-2 font-sans text-4xl font-bold tabular-nums text-title sm:text-5xl">
                @foreach ([['L', 'nature'], ['6', 'livre'], ['2', 'titre'], ['6', 'chapitre'], ['-30', 'rang']] as [$car, $role])
                    <span class="flex flex-col items-center">
                        <span class="{{ $loop->index === 4 ? 'text-muted' : 'text-rep-red' }}">{{ $car }}</span>
                        <span class="mt-1 h-1 w-full rounded bg-rep-blue/40"></span>
                        <span class="mt-1.5 font-sans text-[10px] font-bold uppercase tracking-wider text-muted">{{ $role }}</span>
                    </span>
                @endforeach
            </div>

            <dl class="mt-6 grid gap-x-6 gap-y-2 text-[15px] sm:grid-cols-2">
                @foreach ([
                    ['L', 'Législatif : la loi, par opposition au décret'],
                    ['6', 'Livre VI : des difficultés des entreprises'],
                    ['2', 'Titre II : la sauvegarde'],
                    ['6', 'Chapitre VI : le plan'],
                    ['30', "Trentième article du chapitre"],
                ] as [$cle, $sens])
                    <div class="flex gap-3 border-b border-line py-1.5">
                        <dt class="w-8 flex-none font-mono font-bold text-rep-red">{{ $cle }}</dt>
                        <dd class="text-ink">{{ $sens }}</dd>
                    </div>
                @endforeach
            </dl>

            <p class="mt-4 text-[15px] leading-relaxed text-ink">
                {!! $renderer->html("Autrement dit, [[L626-30]] parle du **plan de sauvegarde** avant même qu'on l'ait ouvert.") !!}
            </p>
        </section>