{{--
    Aperçu — détail d'un élément, volet compact. Common sections (titre,
    statut, priorité, description, sous-tâches) render for every type; the
    "Statut / Priorité / Dates" chip row, the checklist, and the
    assignations block below have type-specific variants — see the
    `$element->type->code` checks. Built off the "Aperçu — détail d'un
    élément" mockup Artifact, but text inputs instead of contenteditable
    (more robust with wire:change than contenteditable+wire:blur), and
    read-only plain text instead of disabled-looking chips when `$editable`
    is false.
--}}
@php
    $element = $this->element();
    $editable = $this->canEdit();
    $ancestors = $this->ancestorChain();
@endphp

<div>
    {{-- `mode="event"` : ici on navigue sans quitter le volet. --}}
    <x-element-breadcrumb
        :element="$element"
        :ancestors="$ancestors"
        mode="event"
        class="mb-3.5"
    />
    {{-- Titre --}}
    @if ($editable)
        <input
            type="text"
            value="{{ $element->title }}"
            wire:change="updateTitle($event.target.value)"
            class="-mx-2 -mt-1 mb-1 w-full rounded-lg border border-transparent px-2 py-0.5 text-xl font-bold text-gray-950 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-white dark:hover:bg-white/5 dark:focus:bg-gray-900"
        />
    @else
        <h2 class="mb-1 text-xl font-bold text-gray-950 dark:text-white">{{ $element->title }}</h2>
    @endif
    <div class="flex items-center gap-2">
    @livewire('toggle-favorite', [
            'favoritableType' => \App\Models\ProjectElement::class,
            'favoritableId' => $element->id,
        ], key('fav-element-'.$element->id))
    <span class="rounded-md border border-gray-200 px-2 py-1 mr-1 text-[12px] font-bold tabular-nums text-gray-500 dark:border-white/10 dark:text-gray-400">
        {{ $element->code }}
    </span>
    @if ($element->type->code === 'milestone')
    <span class="el-type-badge el-type-{{ $element->type->code }}">{{ $this->milestoneKindLabel($element->milestone->milestone_kind) }}</span>
    @else
    <span class="el-type-badge el-type-{{ $element->type->code }}">{{ $element->type->label }}</span>    
    @endif
    @if($element->completed_at)
    <span class="el-status-badge el-status-done">
        Terminé le {{ $element->completed_at->translatedFormat('d/m/Y') }}
    </span>
    @endif
    </div>
    
    {{-- Follow / Report / Statut / Priorité / Dates  --}}
    <div class="grid grid-cols-2 mt-7 gap-3">
        <div class="flex col-span-1">
            @livewire('toggle-follow', [
                'followableType' => \App\Models\ProjectElement::class,
                'followableId' => $element->id,
                'width_adjusted' => 'w-full',
            ], key('follow-element-'.$element->id))
        </div>
        <div class="col-span-1">
            <x-report.button :element="$element" class="justify-center w-full"/>
        </div>
        <hr class="my-1 border-gray-100 dark:border-white/10 col-span-2" />
        @if ($element->project_id === null)
        <div class="flex flex-col gap-1.5 col-span-2">
            <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Ranger dans un projet</span>
            @if ($editable)
            <x-filament::dropdown placement="bottom-start" width="56">
                <x-slot name="trigger">
                    <button
                        type="button"
                        class="inline-flex w-full sm:w-fit items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                    >
                        <x-filament::icon icon="heroicon-o-inbox-arrow-down" class="h-3.5 w-3.5 text-gray-400" />
                        À ranger — choisir un projet
                        <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400 ml-auto" />
                    </button>
                </x-slot>
                <x-filament::dropdown.list>
                    @forelse ($this->rankableProjects() as $project)
                        <x-filament::dropdown.list.item wire:click="assignToProject({{ $project->id }})">
                            {{ $project->name }}
                        </x-filament::dropdown.list.item>
                    @empty
                        <x-filament::dropdown.list.item disabled>Aucun projet</x-filament::dropdown.list.item>
                    @endforelse
                </x-filament::dropdown.list>
            </x-filament::dropdown>
            @else
            <span class="el-status-badge el-status-todo w-fit">À ranger</span>
            @endif
        </div>
        @endif
        <div class="flex flex-col gap-1.5 col-span-1">
            <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Statut</span>
            @if ($editable)
            <x-filament::dropdown placement="bottom-start" width="48">
                <x-slot name="trigger">
                    <button
                        type="button"
                        class="inline-flex w-full sm:w-fit  items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                    >
                        <span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background-color: var(--{{ $this->statusColor($element->status->category) }}-500)"></span>
                        {{ $element->status->label }}
                        <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400 ml-auto" />
                    </button>
                </x-slot>
                <x-filament::dropdown.list>
                    @foreach ($this->availableStatuses() as $status)
                        <x-filament::dropdown.list.item
                            wire:click="setStatus({{ $status->id }})"
                            :icon="$this->statusIcon($status->category)"
                            :color="$this->statusColor($status->category)"
                        >
                            {{ $status->label }}
                        </x-filament::dropdown.list.item>
                    @endforeach
                </x-filament::dropdown.list>
            </x-filament::dropdown>
            @else
            <span class="el-status-badge el-status-{{ $element->status->category }}">{{ $element->status->label }}</span>
            @endif
        </div>
        <div class="flex flex-col gap-1.5 col-span-1">
            <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Priorité</span>
            @if ($editable)
            <x-filament::dropdown placement="bottom-start" width="48">
                <x-slot name="trigger">
                    <button
                        type="button"
                        class="inline-flex w-full sm:w-fit  items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                    >
                        <x-filament::icon icon="heroicon-o-flag" class="h-3.5 w-3.5" style="color: var(--{{ $this->priorityColor($element->priority) }}-500)" />
                        {{ $this->priorityLabel($element->priority) }}
                        <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400 ml-auto" />
                    </button>
                </x-slot>
                <x-filament::dropdown.list>
                    @foreach ([null, 'urgent', 'high', 'medium', 'low'] as $priority)
                        @php $priorityArg = $priority === null ? 'null' : "'".$priority."'"; @endphp
                        <x-filament::dropdown.list.item
                            wire:click="setPriority({{ $priorityArg }})"
                            icon="heroicon-o-flag"
                            :color="$this->priorityColor($priority)"
                        >
                            {{ $this->priorityLabel($priority) }}
                        </x-filament::dropdown.list.item>
                    @endforeach
                </x-filament::dropdown.list>
            </x-filament::dropdown>
            @else
                @if ($element->priority)
                    <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
                        <x-filament::icon icon="heroicon-o-flag" class="h-3.5 w-3.5" style="color: var(--{{ $this->priorityColor($element->priority) }}-500)" />
                        {{ $this->priorityLabel($element->priority) }}
                    </span>
                @endif
            @endif
        </div>
        @if ($element->type->code !== 'meeting')
            <div class="flex flex-col gap-1.5 col-span-1">
                <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Début</span>
                @if ($editable)
                <input
                    type="date"
                    value="{{ $element->start_date?->toDateString() }}"
                    wire:change="updateStartDate($event.target.value)"
                    @class([
                            'w-full sm:w-fit rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold dark:border-white/10 dark:bg-gray-900',
                            'text-gray-700 dark:text-gray-200' => $element->start_date != null,
                            'text-gray-300 dark:text-gray-600' => $element->start_date == null,
                    ])
                />
                @else
                <span class="text-xs text-gray-500 dark:text-gray-400">{{ $element->start_date?->translatedFormat('d/m/Y') ?? '—' }}</span>
                @endif
            </div>
            <div class="flex flex-col gap-1.5 col-span-1">
                <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Echéance</span>
                @if ($editable)
                <input
                    type="date"
                    value="{{ $element->due_date?->toDateString() }}"
                    wire:change="updateDueDate($event.target.value)"
                    @class([
                        'w-full sm:w-fit rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold dark:border-white/10 dark:bg-gray-900',
                        'text-gray-700 dark:text-gray-200' => $element->due_date != null,
                        'text-gray-300 dark:text-gray-600' => $element->due_date == null,
                    ])
                />
                @else
                <span class="text-xs text-gray-500 dark:text-gray-400">{{ $element->due_date?->translatedFormat('d/m/Y') ?? '—' }}</span>
                @endif
            </div>
        @else
            @if ($element->meeting)
                @if ($editable && ! $element->meeting->outlook_event_id)
                    <div class="flex flex-col gap-1.5 col-span-1">
                        <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Début</span>
                        <input
                            type="datetime-local"
                            value="{{ $element->meeting->starts_at?->format('Y-m-d\TH:i') }}"
                            wire:change="updateMeetingStartsAt($event.target.value)"
                            @class([
                                    'w-full sm:w-fit rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold dark:border-white/10 dark:bg-gray-900',
                                    'text-gray-700 dark:text-gray-200' => $element->meeting->starts_at != null,
                                    'text-gray-300 dark:text-gray-600' => $element->meeting->starts_at == null,
                            ])
                        />
                    </div>
                    <div class="flex flex-col gap-1.5 col-span-1">
                        <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Fin</span>
                        <input
                            type="datetime-local"
                            value="{{ $element->meeting->ends_at?->format('Y-m-d\TH:i') }}"
                            wire:change="updateMeetingEndsAt($event.target.value)"
                            @class([
                                    'w-full sm:w-fit rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold dark:border-white/10 dark:bg-gray-900',
                                    'text-gray-700 dark:text-gray-200' => $element->meeting->ends_at != null,
                                    'text-gray-300 dark:text-gray-600' => $element->meeting->ends_at == null,
                            ])
                        />
                    </div>
                @else
                    <div class="flex flex-col gap-1.5 col-span-2">
                        <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Horaire</span>
                        <span class="text-sm text-gray-700 dark:text-gray-300">
                            {{ $element->meeting->starts_at?->translatedFormat('j M · H:i') }} – {{ $element->meeting->ends_at?->translatedFormat('H:i') }}
                        </span>
                        @if ($element->meeting->outlook_event_id)
                            <span class="text-[11px] text-gray-400 dark:text-gray-500">Synchronisée depuis Outlook</span>
                        @endif
                    </div>
                @endif
            @endif
        @endif
        @if ($this->isMisaligned())
        <span class="inline-flex col-span-2 items-center gap-1 text-xs font-medium text-warning-600 dark:text-warning-400">
            <x-filament::icon icon="heroicon-o-exclamation-triangle" class="h-3.5 w-3.5" />
            Dates désalignées
        </span>
        @endif
    </div>



    {{-- ACCES REUNIONS --}}

    <div class="mb-6 flex flex-wrap gap-2">

        {{--
            Réunion : l'horaire s'édite dans le bloc Début/Échéance ci-dessus
            (updateMeetingStartsAt()/updateMeetingEndsAt()) — ce badge n'en
            est qu'un résumé compact, toujours en lecture seule, affiché ici
            aux côtés du lieu et du lien de visio.
        --}}
        @if ($element->type->code === 'meeting' && $element->meeting)
            <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
                <x-filament::icon icon="heroicon-o-clock" class="h-3.5 w-3.5 text-gray-400" />
                {{ $element->meeting->starts_at?->translatedFormat('j M · H:i') }} – {{ $element->meeting->ends_at?->translatedFormat('H:i') }}
            </span>
            @if ($element->meeting->is_cancelled)
                <span class="inline-flex items-center gap-1.5 rounded-full bg-danger-50 px-3 py-1.5 text-xs font-semibold text-danger-700 dark:bg-danger-500/10 dark:text-danger-400">
                    Annulée
                </span>
            @endif
            @if ($element->meeting->location)
                <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
                    <x-filament::icon icon="heroicon-o-map-pin" class="h-3.5 w-3.5 text-gray-400" />
                    {{ $element->meeting->location }}
                </span>
            @endif
            @if ($element->meeting->online_meeting_url)
                <a
                    href="{{ $element->meeting->online_meeting_url }}"
                    target="_blank"
                    rel="noopener"
                    class="inline-flex items-center gap-1.5 rounded-full bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-500"
                >
                    <x-filament::icon icon="heroicon-o-video-camera" class="h-3.5 w-3.5" />
                    Rejoindre la visio
                </a>
            @endif
        @endif
    </div>
    {{--
        Description — stored as HTML (ProjectElementForm's field is a
        RichEditor), but this first pass edits it as plain text (matching
        the mockup's plain contenteditable, not a WYSIWYG toolbar): existing
        HTML is rendered properly for reading, but stripped down to plain
        text as soon as it's edited here, which flattens any formatting.
        Fine as a v1 simplification, not as the final behaviour.
    --}}
    <div class="mb-6">
        <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Description</div>
        @if ($editable)
            <textarea
                wire:change="updateDescription($event.target.value)"
                placeholder="Ajouter une description…"
                rows="3"
                class="-mx-2.5 -my-2 w-full resize-none rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-700 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-gray-200 dark:hover:bg-white/5 dark:focus:bg-gray-900 [field-sizing:content]"
            >{{ trim(html_entity_decode(strip_tags($element->description ?? ''))) }}</textarea>
        @elseif ($element->description)
            {{-- Sanitized at render time — see project-detail.blade.php's note on
                 why the raw RichEditor payload is never trusted. No
                 @tailwindcss/typography plugin installed — relies on the browser's
                 own default styling for <p>/<ul>/<strong>/etc. --}}
            <div class="text-sm text-gray-700 dark:text-gray-200">
                {!! \Illuminate\Support\Str::sanitizeHtml($element->description) !!}
            </div>
        @else
            <p class="text-sm text-gray-400 dark:text-gray-500">Aucune description.</p>
        @endif
    </div>


    {{-- FIN DES ATTRIBUTS COMMUNS --}}
    
    <hr class="my-1.5 border-gray-100 dark:border-white/10" />
    
    {{-- ATTRIBUTS PARTICULIERS AU TYPE D' --}}
    

    {{-- TASK --}}
    {{-- Checklist --}}
    @if ($element->type->code === 'task' && $element->task)
        @php
            $checklist = $element->task->checklist ?? [];
            $checklistTotal = count($checklist);
            $checklistDone = collect($checklist)->where('done', true)->count();
        @endphp
        <div class="mb-6">
            <div class="mb-2.5 flex items-center justify-between">
                <span class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Checklist</span>
                @if ($checklistTotal > 0)
                    <span class="text-xs font-semibold tabular-nums text-gray-400 dark:text-gray-500">{{ $checklistDone }}/{{ $checklistTotal }}</span>
                @endif
            </div>

            @if ($checklistTotal > 0)
                <div class="mb-3 h-1 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
                    <div class="h-full rounded-full bg-success-500" style="width: {{ $checklistDone / $checklistTotal * 100 }}%"></div>
                </div>
            @endif

            <div class="space-y-0.5">
                @foreach ($checklist as $index => $item)
                    <div class="group flex items-center gap-2.5 rounded-lg px-1 py-1.5 hover:bg-gray-50 dark:hover:bg-white/5">
                        <button
                            type="button"
                            wire:click="toggleChecklistItem({{ $index }})"
                            @class([
                                'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[1.5px]',
                                'border-success-500 bg-success-500' => $item['done'],
                                'border-gray-300 dark:border-gray-600' => ! $item['done'],
                            ])
                        >
                            @if ($item['done'])
                                <x-filament::icon icon="heroicon-o-check" class="h-2.5 w-2.5 text-white" />
                            @endif
                        </button>
                        <span
                            @class([
                                'flex-1 text-sm',
                                'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $item['done'],
                                'text-gray-950 dark:text-white' => ! $item['done'],
                            ])
                        >
                            {{ $item['label'] }}
                        </span>
                        @if ($editable)
                            <button
                                type="button"
                                wire:click="mountAction('promoteChecklistItem', { index: {{ $index }} })"
                                title="Transformer en sous-élément"
                                aria-label="Transformer en sous-élément"
                                class="shrink-0 rounded-md p-1 text-gray-500 opacity-0 hover:bg-gray-100 hover:text-gray-700 group-hover:opacity-100 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"
                            >
                                <x-filament::icon icon="heroicon-o-squares-plus" class="h-5 w-5" />
                            </button>
                            <button
                                type="button"
                                wire:click="deleteChecklistItem({{ $index }})"
                                wire:confirm="Supprimer cet élément de la checklist ?"
                                aria-label="Supprimer"
                                class="shrink-0 rounded-md p-1 text-gray-500 opacity-0 hover:bg-danger-50 hover:text-danger-600 group-hover:opacity-100 dark:text-gray-400 dark:hover:bg-danger-500/10"
                            >
                                <x-filament::icon icon="heroicon-o-x-mark" class="h-5 w-5" />
                            </button>
                        @endif
                    </div>
                @endforeach
            </div>

            @if ($editable)
                <div class="mt-2 flex items-center gap-2">
                    <x-filament::icon icon="heroicon-o-plus" class="h-3.5 w-3.5 shrink-0 text-gray-400" />
                    {{--
                        Coller une liste (plusieurs lignes) crée une entrée de
                        checklist par ligne — voir addChecklistItemsFromPastedList().
                        Un collage d'une seule ligne suit le chemin normal
                        (remplit le champ, Entrée valide comme d'habitude).
                    --}}
                    <input
                        type="text"
                        placeholder="Ajouter un élément…"
                        wire:keydown.enter="addChecklistItem($event.target.value); $event.target.value = ''"
                        wire:loading.attr="disabled"
                        wire:target="addChecklistItem"
                        x-on:paste="
                            const text = $event.clipboardData.getData('text/plain');
                            if (text.split(/\r\n|\r|\n/).filter(line => line.trim() !== '').length > 1) {
                                $event.preventDefault();
                                $wire.addChecklistItemsFromPastedList(text);
                                $event.target.value = '';
                            }
                        "
                        class="w-full rounded-lg border border-dashed border-gray-200 bg-transparent px-2.5 py-1.5 text-sm text-gray-950 placeholder:text-gray-400 focus:border-solid focus:border-primary-500 focus:bg-white focus:ring-0 focus:outline-none dark:border-white/10 dark:text-white dark:focus:bg-gray-900 disabled:opacity-50"
                    />
                </div>
            @endif
        </div>
    @endif

    {{-- FIN TASK --}}

    {{-- Jalon / Livrable / Objectif --}}
    @if ($element->type->code === 'milestone' && $element->milestone)
        @php $milestone = $element->milestone; @endphp
        <div class="mb-6">
            <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Validation</div>

            <div class="mb-3 flex flex-wrap items-center gap-2">
                @if ($editable)
                    <x-filament::dropdown placement="bottom-start" width="40">
                        <x-slot name="trigger">
                            <button
                                type="button"
                                class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                            >
                                {{ $this->milestoneKindLabel($milestone->milestone_kind) }}
                                <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400" />
                            </button>
                        </x-slot>
                        <x-filament::dropdown.list>
                            @foreach (['jalon', 'livrable', 'objectif'] as $kind)
                                <x-filament::dropdown.list.item wire:click="setMilestoneKind('{{ $kind }}')">
                                    {{ $this->milestoneKindLabel($kind) }}
                                </x-filament::dropdown.list.item>
                            @endforeach
                        </x-filament::dropdown.list>
                    </x-filament::dropdown>
                @else
                    <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
                        {{ $this->milestoneKindLabel($milestone->milestone_kind) }}
                    </span>
                @endif

                {{-- Jalon majeur (JOS-192) : ceux que la frise du tableau de bord projet affiche. --}}
                @if ($editable)
                    <button
                        type="button"
                        wire:click="toggleMilestoneMajor"
                        aria-pressed="{{ $milestone->is_major ? 'true' : 'false' }}"
                        @class([
                            'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold',
                            'border-primary-200 bg-primary-50 text-primary-700 hover:bg-primary-100 dark:border-primary-500/30 dark:bg-primary-500/10 dark:text-primary-300' => $milestone->is_major,
                            'border-gray-200 bg-white text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5' => ! $milestone->is_major,
                        ])
                    >
                        <x-filament::icon :icon="$milestone->is_major ? 'heroicon-s-star' : 'heroicon-o-star'" class="h-3.5 w-3.5" />
                        {{ $milestone->is_major ? 'Jalon majeur' : 'Marquer comme majeur' }}
                    </button>
                @elseif ($milestone->is_major)
                    <span class="inline-flex items-center gap-1.5 rounded-full border border-primary-200 bg-primary-50 px-3 py-1.5 text-xs font-semibold text-primary-700 dark:border-primary-500/30 dark:bg-primary-500/10 dark:text-primary-300">
                        <x-filament::icon icon="heroicon-s-star" class="h-3.5 w-3.5" />
                        Jalon majeur
                    </span>
                @endif

                @if ($milestone->validated_at)
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-success-50 px-3 py-1.5 text-xs font-semibold text-success-700 dark:bg-success-500/10 dark:text-success-400">
                        <x-filament::icon icon="heroicon-o-check-badge" class="h-3.5 w-3.5" />
                        Validé{{ $milestone->validator ? ' par '.$milestone->validator->full_name : '' }} le {{ $milestone->validated_at->translatedFormat('j M') }}
                    </span>
                @endif

                @if ($editable)
                    <button
                        type="button"
                        wire:click="toggleMilestoneValidation"
                        wire:confirm="{{ $milestone->validated_at ? 'Annuler la validation de ce jalon ?' : '' }}"
                        class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                    >
                        {{ $milestone->validated_at ? 'Annuler la validation' : 'Marquer comme validé' }}
                    </button>
                @endif
            </div>

            <div class="mb-1.5 text-xs font-semibold text-gray-500 dark:text-gray-400">Critères de validation</div>
            @if ($editable)
                <textarea
                    wire:change="updateValidationCriteria($event.target.value)"
                    placeholder="Ajouter les critères de validation…"
                    rows="2"
                    class="-mx-2.5 -my-2 w-full resize-none rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-700 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-gray-200 dark:hover:bg-white/5 dark:focus:bg-gray-900 [field-sizing:content]"
                >{{ $milestone->validation_criteria }}</textarea>
            @elseif ($milestone->validation_criteria)
                <p class="text-sm text-gray-700 dark:text-gray-200">{{ $milestone->validation_criteria }}</p>
            @else
                <p class="text-sm text-gray-400 dark:text-gray-500">Aucun critère renseigné.</p>
            @endif
        </div>
    @endif

    {{-- FIN Jalon / Livrable / Objectif --}}

    {{-- CHANTIER --}}
    @if ($element->type->code === 'chantier' && $element->chantier)
        @php $chantier = $element->chantier; @endphp
        <div class="grid grid-cols-2 mt-5 gap-3">
            <div class="flex flex-col gap-2 col-span-2">
                <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Couleur</span>
                @if ($editable)
                    <x-filament::dropdown placement="bottom-start" width="xs">
                        <x-slot name="trigger">
                            <button
                                type="button"
                                class="inline-flex w-full sm:w-fit items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                            >
                                <span
                                    class="h-2.5 w-2.5 shrink-0 rounded-full border border-gray-200 dark:border-white/20"
                                    style="background-color: {{ $element->chantier->color?->css() ?? 'transparent' }}"
                                ></span>
                                {{ $element->chantier->color?->label() ?? 'Couleur' }}
                                <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400 ml-auto" />
                            </button>
                        </x-slot>
                        <div class="p-2">
                            <div class="grid grid-cols-6 gap-1.5">
                                @foreach ($this->chantierColors() as $option)
                                    <button
                                        type="button"
                                        wire:click="setChantierColor('{{ $option->value }}')"
                                        title="{{ $option->label() }}"
                                        @class([
                                            'h-6 w-6 rounded-full border-2 transition',
                                            'border-gray-900 dark:border-white' => $element->chantier->color === $option,
                                            'border-transparent hover:scale-110' => $element->chantier->color !== $option,
                                        ])
                                        style="background-color: {{ $option->css() }}"
                                    ></button>
                                @endforeach
                            </div>
                            @if ($element->chantier->color !== null)
                                <button
                                    type="button"
                                    wire:click="setChantierColor(null)"
                                    class="mt-2 w-full sm:w-fit  text-left text-xs text-gray-500 hover:underline dark:text-gray-400"
                                >
                                    Retirer la couleur
                                </button>
                            @endif
                        </div>
                    </x-filament::dropdown>
                @else
                    <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
                        <span class="h-2.5 w-2.5 shrink-0 rounded-full" style="background-color: {{ $element->chantier->color->css() }}"></span>
                        {{ $element->chantier->color->label() }}
                    </span>
                @endif
            </div>
            <div class="flex flex-col gap-2 col-span-2">
                <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Note budgétaire</span>
                @if ($editable)
                    <input
                        type="text"
                        value="{{ $chantier->budget_note }}"
                        wire:change="updateBudgetNote($event.target.value)"
                        placeholder="Ajouter une note budgétaire…"
                        class="-mx-2 -my-1 w-full rounded-lg border border-transparent px-2 py-1 text-sm text-gray-700 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-gray-200 dark:hover:bg-white/5 dark:focus:bg-gray-900"
                    />
                @elseif ($chantier->budget_note)
                    <p class="text-sm text-gray-700 dark:text-gray-200">{{ $chantier->budget_note }}</p>
                @else
                    <p class="text-sm text-gray-400 dark:text-gray-500">Aucune note budgétaire.</p>
                @endif
            </div>
        </div>

        {{-- Risques (JOS-164, lot 3) — voir/ajouter ici, modifier depuis l'onglet Risques du projet. --}}
        <div class="mt-5">
            <div class="mb-2 flex items-center justify-between">
                <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Risques</span>
                @if ($editable)
                    <button
                        type="button"
                        wire:click="openAddChantierRisk"
                        class="text-xs font-semibold text-primary-600 hover:underline dark:text-primary-400"
                    >
                        + Ajouter
                    </button>
                @endif
            </div>
            @php $chantierRisks = $this->chantierRisks(); @endphp
            @if ($chantierRisks->isEmpty())
                <p class="text-sm text-gray-400 dark:text-gray-500">Aucun risque identifié pour l'instant.</p>
            @else
                <div class="flex flex-col gap-1.5">
                    @foreach ($chantierRisks as $risk)
                        @php $level = $risk->level(); @endphp
                        <div wire:key="chantier-risk-{{ $risk->id }}" class="flex items-center gap-2 rounded-lg border border-gray-100 px-2.5 py-1.5 dark:border-white/5">
                            <span class="rounded-full px-2 py-0.5 text-[11px] font-bold tabular-nums {{ $level->badgeClasses() }}">
                                {{ $risk->score() }}
                            </span>
                            <span class="min-w-0 flex-1 truncate text-sm text-gray-700 dark:text-gray-200">{{ $risk->title }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- SWOT (JOS-164) — voir/ajouter ici, modifier depuis l'onglet SWOT du projet. --}}
        <div class="mt-5">
            <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">SWOT</span>
            @php $chantierSwot = $this->chantierSwotEntries(); @endphp
            <div class="mt-2 grid grid-cols-2 gap-2">
                @foreach (\App\Services\Swot\SwotQuadrant::cases() as $quadrant)
                    <div class="rounded-lg border border-gray-100 p-2 dark:border-white/5">
                        <div class="mb-1 flex items-center justify-between">
                            <span @class(['text-[10px] font-bold uppercase', $quadrant->headingClasses()])>{{ $quadrant->getLabel() }}</span>
                            @if ($editable)
                                <button type="button" wire:click="openAddChantierSwotEntry('{{ $quadrant->value }}')" class="text-[10px] font-semibold text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
                                    +
                                </button>
                            @endif
                        </div>
                        @forelse ($chantierSwot[$quadrant->value] as $entry)
                            <p wire:key="chantier-swot-{{ $entry->id }}" class="mb-1 truncate text-xs text-gray-600 dark:text-gray-300" title="{{ $entry->content }}">
                                {{ $entry->content }}
                            </p>
                        @empty
                            <p class="text-xs text-gray-300 dark:text-gray-600">—</p>
                        @endforelse
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Sous-tâches --}}
    @if ($element->type->allows_children)
        <div class="mb-6 mt-5">
            <div class="mb-2.5 flex items-center justify-between">
                <span class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Sous-tâches</span>
                @if ($element->children->isNotEmpty())
                    <span class="text-xs font-semibold tabular-nums text-gray-400 dark:text-gray-500">
                        {{ $element->children->where('status.category', 'done')->count() }}/{{ $element->children->count() }}
                    </span>
                @endif
            </div>

            <div class="space-y-0.5">
                @foreach ($element->children as $child)
                    @php $isDone = $child->status->category === 'done'; @endphp
                    <button
                        type="button"
                        wire:click="navigateTo({{ $child->id }})"
                        class="flex w-full items-center gap-2.5 rounded-lg px-1 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-white/5"
                    >
                        <span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background-color: var(--{{ $this->statusColor($child->status->category) }}-500)"></span>
                        <span
                            @class([
                                'flex-1 truncate text-sm font-medium',
                                'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $isDone,
                                'text-gray-950 dark:text-white' => ! $isDone,
                            ])
                        >
                            {{ $child->title }}
                        </span>
                        <span class="shrink-0 text-xs font-bold" style="color: var(--{{ $this->statusColor($child->status->category) }}-500)">
                            {{ $child->status->label }}
                        </span>
                    </button>
                @endforeach
            </div>

            @if ($editable)
                <div class="mt-2 flex items-center gap-2">
                    <x-filament::icon icon="heroicon-o-plus" class="h-3.5 w-3.5 shrink-0 text-gray-400" />
                    <input
                        type="text"
                        placeholder="Ajouter une sous-tâche…"
                        wire:keydown.enter="addSubtask($event.target.value); $event.target.value = ''"
                        wire:loading.attr="disabled"
                        wire:target="addSubtask"
                        class="w-full rounded-lg border border-dashed border-gray-200 bg-transparent px-2.5 py-1.5 text-sm text-gray-950 placeholder:text-gray-400 focus:border-solid focus:border-primary-500 focus:bg-white focus:ring-0 focus:outline-none dark:border-white/10 dark:text-white dark:focus:bg-gray-900 disabled:opacity-50"
                    />
                </div>
            @endif
        </div>
    @endif

    {{--
        Réunion : Organisateur + Participants plutôt que le bloc RACI ci-
        dessous — une réunion n'a pas d'"assignés" à proprement parler, et
        `$element->assignees` reste vide pour ce type dans ProjectElementForm
        (pas de section "Assignations" affichée quand on édite une réunion).
    --}}
    @if ($element->type->code === 'meeting' && $element->meeting)
        @php $seriesPosition = $this->seriesPosition(); @endphp
        <div class="mb-2">
            @if ($element->meeting->series_id !== null)
                <div class="mb-3 flex items-center justify-between rounded-lg bg-gray-50 px-3 py-2 dark:bg-white/5">
                    <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-600 dark:text-gray-300">
                        <x-filament::icon icon="heroicon-o-arrow-path" class="h-3.5 w-3.5" />
                        Réunion récurrente ({{ $seriesPosition[0] }}/{{ $seriesPosition[1] }})
                    </span>
                    @if ($editable && $element->meeting->outlook_event_id === null)
                        <button
                            type="button"
                            wire:click="mountAction('editRecurrence')"
                            class="text-[11px] font-semibold text-primary-600 hover:underline dark:text-primary-400"
                        >
                            Modifier
                        </button>
                    @endif
                </div>
            @elseif ($editable && $element->meeting->starts_at !== null && $element->meeting->outlook_event_id === null)
                <div class="mb-3">
                    <button
                        type="button"
                        wire:click="mountAction('makeRecurring')"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5"
                    >
                        <x-filament::icon icon="heroicon-o-arrow-path" class="h-3.5 w-3.5" />
                        Rendre récurrente
                    </button>
                </div>
            @endif

            @if ($element->meeting->starts_at !== null)
                <div class="mb-3">
                    <x-meeting-minutes.button :element="$element" />
                </div>
            @endif

            {{--
                Distinct de la Description ci-dessus : celle-ci dit à quoi sert
                la réunion (commun à une série), l'ordre du jour dit ce qu'on y
                traite (propre à chaque occurrence) — voir CLAUDE.md.
            --}}
            <div class="mb-4">
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Ordre du jour</div>
                @if ($editable)
                    <textarea
                        wire:change="updateMeetingAgenda($event.target.value)"
                        placeholder="Ajouter un ordre du jour…"
                        rows="3"
                        class="-mx-2.5 -my-2 w-full resize-none rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-700 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-gray-200 dark:hover:bg-white/5 dark:focus:bg-gray-900 [field-sizing:content]"
                    >{{ $element->meeting->agenda }}</textarea>
                @elseif ($element->meeting->agenda)
                    <p class="text-sm whitespace-pre-line text-gray-700 dark:text-gray-200">{{ $element->meeting->agenda }}</p>
                @else
                    <p class="text-sm text-gray-400 dark:text-gray-500">Aucun ordre du jour.</p>
                @endif
            </div>

            @if ($editable && $element->meeting->outlook_event_id === null)
                <div class="mb-3">
                    <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Lieu</div>
                    <input
                        type="text"
                        value="{{ $element->meeting->location }}"
                        placeholder="Ajouter un lieu…"
                        wire:change="updateMeetingLocation($event.target.value)"
                        class="-mx-2.5 -my-2 w-full rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-700 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-gray-200 dark:hover:bg-white/5 dark:focus:bg-gray-900"
                    />
                </div>
                <div class="mb-3">
                    <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Lien visio</div>
                    <input
                        type="text"
                        value="{{ $element->meeting->online_meeting_url }}"
                        placeholder="Ajouter un lien…"
                        wire:change="updateMeetingOnlineMeetingUrl($event.target.value)"
                        class="-mx-2.5 -my-2 w-full rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-700 hover:bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:text-gray-200 dark:hover:bg-white/5 dark:focus:bg-gray-900"
                    />
                </div>
            @endif

            <div class="mb-3">
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Organisateur</div>
                @if ($editable && $element->meeting->outlook_event_id === null)
                    <select
                        wire:change="updateMeetingOrganizer($event.target.value === '' ? null : $event.target.value)"
                        class="apercu-chip-field w-full rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200"
                    >
                        <option value="">—</option>
                        @foreach ($this->workspacePeople() as $person)
                            <option value="{{ $person->id }}" @selected($element->meeting->organizer_id === $person->id)>{{ $person->full_name }}</option>
                        @endforeach
                    </select>
                @elseif ($element->meeting->organizer)
                    <div class="flex items-center gap-2.5">
                        <span
                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
                            style="background-color: {{ $element->meeting->organizer->avatar_color ?? '#9CA3AF' }}"
                        >
                            {{ $element->meeting->organizer->initials }}
                        </span>
                        <span class="text-sm font-semibold text-gray-950 dark:text-white">{{ $element->meeting->organizer->full_name }}</span>
                    </div>
                @else
                    <p class="text-sm text-gray-400 dark:text-gray-500">—</p>
                @endif
            </div>

            <div>
                <div class="mb-2.5 flex items-center justify-between">
                    <span class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Participants</span>
                    @if ($editable && $element->meeting->series_id !== null)
                        <button
                            type="button"
                            wire:click="applyAttendeesToFollowing"
                            class="text-[11px] font-semibold text-primary-600 hover:underline dark:text-primary-400"
                        >
                            Appliquer aux suivantes
                        </button>
                    @endif
                </div>
                <div class="space-y-2">
                    @foreach ($element->meeting->attendees as $attendee)
                        <div class="group flex items-center gap-2.5">
                            <span
                                class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
                                style="background-color: {{ $attendee->person->avatar_color ?? '#9CA3AF' }}"
                            >
                                {{ $attendee->person->initials ?? mb_strtoupper(mb_substr($attendee->display_name ?? $attendee->email ?? '?', 0, 1)) }}
                            </span>
                            <span class="text-sm font-semibold text-gray-950 dark:text-white">
                                {{ $attendee->person->full_name ?? $attendee->display_name ?? $attendee->email }}
                            </span>
                            @if ($attendee->attendee_type === 'optional')
                                <span class="ml-auto rounded-full bg-gray-100 px-2.5 py-1 text-[11px] font-bold text-gray-500 dark:bg-white/5 dark:text-gray-400">Optionnel</span>
                            @endif
                            @if ($editable)
                                <button
                                    type="button"
                                    wire:click="removeAttendee({{ $attendee->id }})"
                                    class="{{ $attendee->attendee_type === 'optional' ? '' : 'ml-auto' }} shrink-0 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-danger-500"
                                >
                                    <x-filament::icon icon="heroicon-o-x-mark" class="h-3.5 w-3.5" />
                                </button>
                            @endif
                        </div>
                    @endforeach
                    @if ($element->meeting->attendees->isEmpty())
                        <p class="text-sm text-gray-400 dark:text-gray-500">Aucun participant.</p>
                    @endif
                </div>

                @if ($editable)
                    <div class="mt-2">
                        <input
                            type="text"
                            wire:model.live.debounce.300ms="attendeeSearch"
                            placeholder="Ajouter un participant…"
                            class="w-full rounded-lg border border-dashed border-gray-200 bg-transparent px-2.5 py-1.5 text-sm text-gray-950 placeholder:text-gray-400 focus:border-solid focus:border-primary-500 focus:bg-white focus:ring-0 focus:outline-none dark:border-white/10 dark:text-white dark:focus:bg-gray-900"
                        />
                        @if (trim($attendeeSearch) !== '')
                            <div class="mt-1 space-y-0.5">
                                @foreach ($this->searchAttendeeCandidates($attendeeSearch) as $candidate)
                                    <button
                                        type="button"
                                        wire:click="addAttendee({{ $candidate->id }}); $wire.attendeeSearch = ''"
                                        class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5"
                                    >
                                        {{ $candidate->full_name }}
                                    </button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    @endif
    <div class="grid grid-cols-2 mt-7 gap-3">
    {{--
        Assignations RACI — même popover/logique que view-project-element.blade.php
        (backend partagé via HasElementDetail), pour ne jamais avoir à
        maintenir deux implémentations de la même fonctionnalité. Le "+" et
        le popover d'édition ne s'affichent que si `$editable` ; en lecture
        seule, la liste des assignés reste visible sans le picker.
    --}}
    @if ($element->type->code !== 'meeting')
    <div class="col-span-2 sm:col-span-1">
        <div class="mb-2 flex flex-col gap-1.5">
            
            <div class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Assignations</div>

            <div class="flex items-center">
                @foreach ($element->assignees as $assignee)
                    <div
                        class="relative -ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 border-white text-[11px] font-bold text-white first:ml-0 dark:border-gray-900"
                        style="background-color: {{ $assignee->avatar_color ?? '#9CA3AF' }}"
                        title="{{ $assignee->full_name }} ({{ $this->raciLabel($assignee->pivot->role) }})"
                    >
                        {{ $assignee->initials }}
                        <span class="absolute -right-1 -bottom-1 flex h-3.5 w-3.5 items-center justify-center rounded-full border border-white bg-white text-[8px] font-extrabold text-gray-500 dark:border-gray-900 dark:bg-gray-900 dark:text-gray-400">
                            {{ mb_strtoupper(mb_substr($assignee->pivot->role, 0, 1)) }}
                        </span>
                    </div>
                @endforeach

                @if ($editable)
                    {{--
                        `x-filament::dropdown` (floating-ui, `flip` on by
                        default) plutôt qu'un `<div x-show>` positionné en
                        `top-full` : ce dernier sortait de l'écran — ou du
                        panel Aperçu, qui défile — dès que le déclencheur
                        était en bas, obligeant à défiler pour voir le
                        popover.

                        `wire:key` est **obligatoire** ici, pas cosmétique :
                        c'est lui qui fait poser `wire:ignore.self` sur le
                        panneau (voir dropdown/index.blade.php du package).
                        Sans lui, la recherche (`wire:model.live` juste en
                        dessous) déclenche une requête à chaque frappe, et le
                        morph Livewire qui suit réécrit le panneau sur son
                        rendu serveur — `display: none` — fermant le popover
                        au premier caractère tapé. Régression réelle, repérée
                        après coup : jamais testée frappe-au-clavier pendant
                        que le popover était ouvert.
                    --}}
                    <x-filament::dropdown placement="bottom-start" width="sm" wire:key="assignees-dropdown-{{ $element->id }}">
                        <x-slot name="trigger">
                            <button
                                type="button"
                                x-ref="assignTrigger"
                                aria-label="Ajouter une personne"
                                class="-ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-[1.5px] border-dashed border-gray-300 text-gray-400 hover:border-primary-400 hover:text-primary-600 dark:border-gray-600"
                            >
                                <x-filament::icon icon="heroicon-o-plus" class="h-3.5 w-3.5" />
                            </button>
                        </x-slot>

                        {{--
                            Le vrai responsable du saut vers le haut, trouvé
                            en lisant `public/vendor/livewire/livewire.js` :
                            le panel Aperçu est piégé par un focus-trap
                            (bibliothèque `focus-trap`, embarquée par le
                            plugin focus d'Alpine que Livewire empaquette).
                            Ce piège observe le DOM (`MutationObserver`) et,
                            dès que le nœud qu'il croit "le plus récemment
                            focus" disparaît, refocalise de force le premier
                            élément « focusable » du panel — near le haut de
                            la modale. Cliquer un nom ici focus le bouton
                            (comportement par défaut de Chrome/Firefox sur un
                            `<button>` — **pas** de Safari, qui ne focus
                            jamais un bouton au clic : d'où le "ça marche sous
                            Safari" observé). Le morph Livewire qui suit
                            retire ensuite ce bouton du DOM (le popover bascule
                            de la recherche vers l'étape "choisir le rôle"),
                            le piège le voit disparaître et refocalise le haut
                            de la modale — et le navigateur scrolle pour
                            amener cet élément fraîchement focus dans le
                            viewport, ramenant tout en haut.

                            Fix : déplacer le focus vers le bouton "+" — qui,
                            lui, ne quitte jamais le DOM quel que soit l'état
                            du popover, et reste déjà visible à l'écran — dès
                            le clic, en JS synchrone, donc avant même que la
                            requête Livewire ne parte. Le bouton cliqué n'est
                            alors plus le nœud "le plus récemment focus" au
                            moment où il disparaît : le piège n'a plus rien à
                            secourir, et ne scrolle nulle part. `overflow-anchor`
                            plus haut n'y était pour rien — pure fausse piste,
                            gardée par prudence mais pas la cause réelle.
                        --}}
                        <div class="p-2.5" x-on:click.capture="$event.target.closest('button') && $refs.assignTrigger.focus()">
                            @if ($creatingContact)
                                <div class="flex flex-col gap-1.5">
                                    <input
                                        type="text"
                                        wire:model="newContactName"
                                        placeholder="Prénom Nom"
                                        class="w-full rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-xs text-gray-950 dark:border-white/10 dark:bg-white/5 dark:text-white"
                                    />
                                    @error('newContactName') <p class="text-[11px] text-danger-600 dark:text-danger-400">{{ $message }}</p> @enderror

                                    <input
                                        type="email"
                                        wire:model="newContactEmail"
                                        placeholder="Email (facultatif)"
                                        class="w-full rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-xs text-gray-950 dark:border-white/10 dark:bg-white/5 dark:text-white"
                                    />
                                    @error('newContactEmail') <p class="text-[11px] text-danger-600 dark:text-danger-400">{{ $message }}</p> @enderror

                                    {{-- Un contact n'a pas de compte : `Notifier::isEligible()` l'exclut déjà, donc pas de rôle à confirmer ici — aucune notification en jeu. --}}
                                    <p class="text-[11px] text-gray-400 dark:text-gray-500">Un contact n'a pas de compte Joseph — il ne reçoit aucune notification tant que personne ne l'y invite.</p>

                                    <div class="mt-1 flex justify-end gap-1.5">
                                        <button type="button" wire:click="cancelCreatingContact" class="rounded-lg px-2 py-1 text-[11px] font-semibold text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-white/5">
                                            Annuler
                                        </button>
                                        <button type="button" wire:click="createContactAndAssign" class="rounded-lg bg-primary-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-primary-500">
                                            Créer et assigner
                                        </button>
                                    </div>
                                </div>
                            @elseif ($pendingAssigneeId !== null)
                                {{--
                                    L'étape de confirmation du rôle avant
                                    écriture : cliquer un nom ne notifie plus
                                    personne tout seul, il ouvre juste ce
                                    choix — une seule écriture (donc une seule
                                    notification) part au clic "Ajouter".
                                --}}
                                @php $pendingAssignee = $this->pendingAssignee(); @endphp
                                <div class="flex flex-col gap-2">
                                    <div class="flex items-center gap-2">
                                        <span
                                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
                                            style="background-color: {{ $pendingAssignee?->avatar_color ?? '#9CA3AF' }}"
                                        >
                                            {{ $pendingAssignee?->initials }}
                                        </span>
                                        <span class="flex-1 text-[13px] font-semibold text-gray-950 dark:text-white">{{ $pendingAssignee?->full_name }}</span>
                                    </div>

                                    <label class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                                        Rôle
                                        <select
                                            wire:model="pendingAssigneeRole"
                                            class="mt-1 w-full rounded-lg border-gray-200 bg-gray-50 text-xs font-semibold normal-case dark:border-white/10 dark:bg-white/5 dark:text-gray-200"
                                        >
                                            @foreach (['responsible', 'accountable', 'consulted', 'informed'] as $role)
                                                <option value="{{ $role }}">{{ $this->raciLabel($role) }}</option>
                                            @endforeach
                                        </select>
                                    </label>

                                    <div class="mt-1 flex justify-end gap-1.5">
                                        <button type="button" wire:click="cancelPendingAssignee" class="rounded-lg px-2 py-1 text-[11px] font-semibold text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-white/5">
                                            Annuler
                                        </button>
                                        <button type="button" wire:click="confirmPendingAssignee" class="rounded-lg bg-primary-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-primary-500">
                                            Ajouter
                                        </button>
                                    </div>
                                </div>
                            @else
                                <input
                                    type="text"
                                    wire:model.live.debounce.300ms="assigneeSearch"
                                    placeholder="Rechercher une personne…"
                                    class="mb-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-xs text-gray-950 dark:border-white/10 dark:bg-white/5 dark:text-white"
                                />

                                @php $assigneeResults = $this->searchPeople($assigneeSearch ?? ''); @endphp

                                @foreach ($assigneeResults as $person)
                                    <button
                                        type="button"
                                        wire:click="selectAssignee({{ $person->id }})"
                                        class="flex w-full items-center gap-2 rounded-lg px-1.5 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-white/5"
                                    >
                                        <span
                                            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
                                            style="background-color: {{ $person->avatar_color ?? '#9CA3AF' }}"
                                        >
                                            {{ $person->initials }}
                                        </span>
                                        <span class="flex-1 text-[13px] font-semibold text-gray-950 dark:text-white">{{ $person->full_name }}</span>
                                    </button>
                                @endforeach

                                @if ($assigneeResults->isEmpty() && trim($assigneeSearch ?? '') !== '')
                                    <button
                                        type="button"
                                        wire:click="startCreatingContact"
                                        class="flex w-full items-center gap-2 rounded-lg px-1.5 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-white/5"
                                    >
                                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-[1.5px] border-dashed border-primary-300 text-primary-500 dark:border-primary-500/40 dark:text-primary-400">
                                            <x-filament::icon icon="heroicon-o-plus" class="h-3 w-3" />
                                        </span>
                                        <span class="flex-1 text-[13px] font-semibold text-primary-600 dark:text-primary-400">Créer « {{ $assigneeSearch }} » comme contact</span>
                                    </button>
                                @endif
                            @endif

                            @if ($element->assignees->isNotEmpty())
                                <hr class="my-1.5 border-gray-100 dark:border-white/10" />
                                @foreach ($element->assignees as $assignee)
                                    <div class="flex items-center gap-2 rounded-lg px-1.5 py-1.5">
                                        <span
                                            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
                                            style="background-color: {{ $assignee->avatar_color ?? '#9CA3AF' }}"
                                        >
                                            {{ $assignee->initials }}
                                        </span>
                                        <span class="flex-1 text-[13px] font-semibold text-gray-950 dark:text-white">{{ $assignee->full_name }}</span>
                                        <select
                                            wire:change="setAssigneeRole({{ $assignee->id }}, $event.target.value)"
                                            class="rounded-md border-gray-200 bg-gray-50 text-[11px] font-semibold dark:border-white/10 dark:bg-white/5 dark:text-gray-200"
                                        >
                                            @foreach (['responsible', 'accountable', 'consulted', 'informed'] as $role)
                                                <option value="{{ $role }}" @selected($assignee->pivot->role === $role)>{{ $this->raciLabel($role) }}</option>
                                            @endforeach
                                        </select>
                                        <button
                                            type="button"
                                            wire:click="removeAssignee({{ $assignee->id }})"
                                            aria-label="Retirer"
                                            class="text-gray-400 hover:text-danger-600"
                                        >
                                            <x-filament::icon icon="heroicon-o-x-mark" class="h-3.5 w-3.5" />
                                        </button>
                                    </div>
                                @endforeach
                            @endif

                            <div class="mt-1.5 border-t border-gray-100 pt-2 text-[11px] text-gray-400 dark:border-white/10 dark:text-gray-500">
                                R = Responsable · A = Approbateur · C = Consulté · I = Informé
                            </div>
                        </div>
                    </x-filament::dropdown>
                @endif
            </div>

            @if ($element->assignees->isNotEmpty())
                <div class="text-[12.5px] text-gray-500 dark:text-gray-400">
                    {{ $element->assignees->map(fn ($a) => $a->full_name.' ('.$this->raciLabel($a->pivot->role).')')->join(', ') }}
                </div>
            @endif
        </div>
    </div>
    @endif
    <div class="col-span-2 sm:col-span-1">
        <div class="flex flex-col gap-1.5 col-span-2">
            <div class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Charge estimée</div>
            @if ($element->type->code === 'milestone' || $element->type->code === 'task' )
                @if ($editable)
                    <div class="flex items-center gap-1.5">
                        <input
                            type="number"
                            min="0"
                            step="0.5"
                            value="{{ $element->estimated_effort_hours }}"
                            wire:change="updateEstimatedEffort($event.target.value)"
                            class="w-20 rounded-full border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200"
                        />
                        <span class="text-xs text-gray-500 dark:text-gray-400">heures</span>
                    </div>
                @else
                    <span class="text-xs text-gray-500 dark:text-gray-400">{{ $element->estimated_effort_hours() !== null ? $element->estimated_effort_hours().' heures' : '—' }}</span>
                @endif
            @else
                    <span class="text-xs text-gray-500 dark:text-gray-400">{{ $element->estimated_effort_hours() !== null ? $element->estimated_effort_hours().' heures' : '—' }}</span>
            @endif
        </div>
    </div>
    {{--
        Dépendances — même écriture (DependencyLinker) et même détection de
        violation que le MCP, voir HasElementDetail. « Dépend de » se crée
        depuis ici ; « Bloque » ne se retire que — pour en ajouter un, ouvrir
        l'autre élément et y poser son propre prérequis.
    --}}
    <div class="mt-4 flex flex-col gap-2">
        <div class="flex items-center justify-between">
            <span class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Dépend de</span>
            @if ($editable && $element->project_id !== null)
                <x-filament::dropdown placement="bottom-end" width="sm" wire:key="dependency-dropdown-{{ $element->id }}">
                    <x-slot name="trigger">
                        <button
                            type="button"
                            aria-label="Ajouter une dépendance"
                            class="flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-dashed border-gray-300 text-gray-400 hover:border-primary-400 hover:text-primary-600 dark:border-gray-600"
                        >
                            <x-filament::icon icon="heroicon-o-plus" class="h-3.5 w-3.5" />
                        </button>
                    </x-slot>
                    <div class="w-64 p-2.5">
                        @if ($pendingDependencyId !== null)
                            @php $pendingDependency = $this->pendingDependencyCandidate(); @endphp
                            <div class="flex flex-col gap-2">
                                <span class="text-[13px] font-semibold text-gray-950 dark:text-white">{{ $pendingDependency?->title }}</span>
                                <label class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                                    Type
                                    <select wire:model="pendingDependencyType" class="mt-1 w-full rounded-lg border-gray-200 bg-gray-50 text-xs font-semibold normal-case dark:border-white/10 dark:bg-white/5 dark:text-gray-200">
                                        @foreach (['finish_to_start', 'start_to_start', 'finish_to_finish', 'start_to_finish'] as $type)
                                            <option value="{{ $type }}">{{ $this->dependencyTypeLabel($type) }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                                    Décalage (jours)
                                    <input type="number" wire:model="pendingDependencyLagDays" class="mt-1 w-full rounded-lg border-gray-200 bg-gray-50 text-xs font-semibold dark:border-white/10 dark:bg-white/5 dark:text-gray-200" />
                                </label>
                                <div class="mt-1 flex justify-end gap-1.5">
                                    <button type="button" wire:click="cancelPendingDependency" class="rounded-lg px-2 py-1 text-[11px] font-semibold text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-white/5">
                                        Annuler
                                    </button>
                                    <button type="button" wire:click="confirmPendingDependency" class="rounded-lg bg-primary-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-primary-500">
                                        Ajouter
                                    </button>
                                </div>
                            </div>
                        @else
                            <input
                                type="text"
                                wire:model.live.debounce.300ms="dependencySearch"
                                placeholder="Rechercher un élément…"
                                class="mb-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-xs text-gray-950 dark:border-white/10 dark:bg-white/5 dark:text-white"
                            />
                            @php $dependencyResults = $this->searchDependencyCandidates($dependencySearch ?? ''); @endphp
                            @forelse ($dependencyResults as $candidate)
                                <button
                                    type="button"
                                    wire:click="selectDependencyCandidate({{ $candidate->id }})"
                                    class="flex w-full items-center gap-2 rounded-lg px-1.5 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-white/5"
                                >
                                    <span class="flex-1 truncate text-[13px] font-semibold text-gray-950 dark:text-white">{{ $candidate->title }}</span>
                                    <span class="shrink-0 text-[11px] text-gray-400">{{ $candidate->code }}</span>
                                </button>
                            @empty
                                <p class="px-1.5 py-1 text-[11px] text-gray-400 dark:text-gray-500">Aucun résultat</p>
                            @endforelse
                        @endif
                    </div>
                </x-filament::dropdown>
            @endif
        </div>

        @php $elementDependencies = $this->dependencies(); @endphp
        @forelse ($elementDependencies as $dependency)
            <div @class([
                'flex items-center gap-2 rounded-lg border px-2.5 py-1.5',
                'border-danger-300 dark:border-danger-500/40' => $dependency->isViolated(),
                'border-gray-200 dark:border-white/10' => ! $dependency->isViolated(),
            ])>
                @if ($dependency->isViolated())
                    <span x-tooltip="{ content: @js($this->dependencyViolationReason($dependency)), theme: $store.theme, placement: 'top' }">
                        <x-filament::icon icon="heroicon-o-exclamation-triangle" class="h-3.5 w-3.5 shrink-0 text-danger-500" />
                    </span>
                @else
                    <x-filament::icon icon="heroicon-o-link" class="h-3.5 w-3.5 shrink-0 text-gray-400" />
                @endif
                <div class="min-w-0 flex-1">
                    <a
                        href="{{ $this->dependencyElementUrl($dependency->prerequisite) }}"
                        class="block truncate text-[13px] font-semibold text-gray-950 hover:text-primary-600 hover:underline dark:text-white dark:hover:text-primary-400"
                        x-tooltip="{ content: @js($dependency->prerequisite->title), theme: $store.theme, placement: 'top' }"
                    >
                        {{ $dependency->prerequisite->title }}
                    </a>
                    <div class="text-[11px] text-gray-400">
                        {{ $dependency->prerequisite->code }} · {{ $this->dependencyTypeLabel($dependency->dependency_type) }}@if ($dependency->lag_days) · +{{ $dependency->lag_days }}j @endif
                    </div>
                </div>
                @if ($editable)
                    <button type="button" wire:click="removeDependency({{ $dependency->id }})" aria-label="Retirer" class="shrink-0 text-gray-400 hover:text-danger-600">
                        <x-filament::icon icon="heroicon-o-x-mark" class="h-3.5 w-3.5" />
                    </button>
                @endif
            </div>
        @empty
            <p class="text-[12px] text-gray-400 dark:text-gray-500">Aucune dépendance.</p>
        @endforelse

        @php $elementDependents = $this->dependents(); @endphp
        @if ($elementDependents->isNotEmpty())
            <span class="mt-1 text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">Bloque</span>
            @foreach ($elementDependents as $dependency)
                <div class="flex items-center gap-2 rounded-lg border border-gray-200 px-2.5 py-1.5 dark:border-white/10">
                    <x-filament::icon icon="heroicon-o-link" class="h-3.5 w-3.5 shrink-0 text-gray-400" />
                    <div class="min-w-0 flex-1">
                        <a
                            href="{{ $this->dependencyElementUrl($dependency->element) }}"
                            class="block truncate text-[13px] font-semibold text-gray-950 hover:text-primary-600 hover:underline dark:text-white dark:hover:text-primary-400"
                            x-tooltip="{ content: @js($dependency->element->title), theme: $store.theme, placement: 'top' }"
                        >
                            {{ $dependency->element->title }}
                        </a>
                        <div class="text-[11px] text-gray-400">{{ $dependency->element->code }} · {{ $this->dependencyTypeLabel($dependency->dependency_type) }}</div>
                    </div>
                    @if ($editable)
                        <button type="button" wire:click="removeDependent({{ $dependency->id }})" aria-label="Retirer" class="shrink-0 text-gray-400 hover:text-danger-600">
                            <x-filament::icon icon="heroicon-o-x-mark" class="h-3.5 w-3.5" />
                        </button>
                    @endif
                </div>
            @endforeach
        @endif
    </div>
    {{--
        Pas le fil complet ici — juste un compteur, qui renvoie vers la page
        dédiée où App\Livewire\Comments\CommentThread affiche/édite vraiment
        les commentaires. `elementExpandUrl()` vient de HasApercu (déjà
        utilisé pour le bouton "agrandir" du panel), pas dupliqué ici.
    --}}
    @php $commentsCount = $this->commentsCount(); @endphp
    @if ($commentsCount > 0)
        <a
            href="{{ $this->elementExpandUrl($element->id) }}"
            class="mt-4 flex items-center gap-1.5 text-xs font-semibold text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400"
        >
            <x-filament::icon icon="heroicon-o-chat-bubble-left" class="h-3.5 w-3.5" />
            {{ $commentsCount }} {{ $commentsCount > 1 ? 'commentaires' : 'commentaire' }}
        </a>
    @endif

    @if ($element->type->code === 'chantier')
        @include('livewire.apercu.partials.add-chantier-risk-modal')
        @include('livewire.apercu.partials.add-chantier-swot-modal')
    @endif

    @include('livewire.apercu.partials.meeting-scope-modal')

    {{--
        Peint le modal de `promoteChecklistItemAction()` — un composant
        Livewire simple (contrairement à une page Filament) ne le reçoit pas
        gratuitement de son layout, voir quick-create-task.blade.php pour le
        même besoin.
    --}}
    <x-filament-actions::modals />
</div>