@php
    use App\Livewire\Portail\Inscription;
    use App\Support\PieceIdentite;

    $public = $mode === 'public';
    $physique = $type === 'personne_physique';
    // v1.17.0 — l'association : dénomination, objet, situation, récépissé ; « le président ».
    $association = $type === 'association';
    $declaree = $association && $situation === 'declaree';
    $attendue = $this->pieceAttendue();
    $passeport = $piece_type === PieceIdentite::PASSEPORT;
    $etapes = [
        1 => [$physique ? 'L\'entreprise' : ($association ? 'L\'association' : 'La société'), $etape > 1 ? ($physique ? trim($rep_prenom.' '.$rep_nom_famille) : ($association ? $raison_sociale : trim($raison_sociale.' · '.($forme_juridique === 'Autre' ? $forme_autre : $forme_juridique), ' ·'))) : ($physique ? 'Activité' : ($association ? 'Dénomination, objet' : 'Dénomination, forme'))],
        2 => [$physique ? 'Le titulaire' : ($association ? 'Le président' : 'Le gérant'), $etape > 2 ? trim($rep_prenom.' '.$rep_nom_famille) : ($association ? 'Identité, bureau' : 'Identité, associés')],
        3 => ['Les pièces', 'Contrôle'],
        // v1.15.0 §B — la formule et ses options en dernier, puis l'envoi.
        4 => ['Formule & options', $offre ? dh($offre['montant_ttc'], 0).' TTC / '.\App\Support\Prestations::periode($offre['periodicite']) : 'Et l\'envoi'],
    ];
    $titres = [1 => $etapes[1][0], 2 => $etapes[2][0], 3 => 'Vos pièces', 4 => 'Formule & options'];
    $nbEtapes = Inscription::ETAPES;
    // Les points à corriger, dans l'ordre de l'écran.
    $cles = collect($errors->keys())->map(fn ($k) => preg_replace('/^associes\.\d+\..*$/', 'associes', $k))->unique();
    $libellesErreurs = collect([
            'pieceSociete' => 'la pièce de la société', 'raison_sociale' => 'la dénomination', 'forme_juridique' => 'la forme juridique', 'forme_autre' => 'la forme juridique',
            'activite' => $association ? 'l\'objet' : 'l\'activité', 'rc' => 'le n° de RC',
            'recepisse_numero' => 'le n° du récépissé', 'recepisse_date' => 'la date du récépissé', 'recepisse_nature' => 'la nature du récépissé', 'recepisse_autorite' => 'l\'autorité', 'rc_ville' => 'la ville du RC', 'formuleId' => 'la formule',
            'cinRecto' => 'la photo de la pièce', 'cinVerso' => 'le verso', 'rep_prenom' => 'le prénom', 'rep_nom_famille' => 'le nom', 'rep_piece_numero' => 'le n° de la pièce',
            'rep_telephone' => 'le téléphone', 'rep_email' => 'l\'e-mail', 'rep_adresse' => 'l\'adresse personnelle', 'options' => 'les options',
            'associes' => $association ? 'les membres du bureau' : 'les associés',
            'ppe_precision' => 'la fonction exercée', 'consentement' => 'la case de consentement',
        ])->only($cles->all())->unique()->values();
    // v1.14.1 — un PDF scanné en recto : les deux faces y sont, le verso devient facultatif.
    $rectoPdf = ($transit['cin_recto']['controles']['format'] ?? null) === 'PDF';
    $faces = $passeport ? ['cin_recto' => ['cinRecto', 'Page d\'identité']] : ['cin_recto' => ['cinRecto', $rectoPdf ? 'Recto et verso' : 'Recto'], 'cin_verso' => ['cinVerso', 'Verso']];
    $pieceSociete = $attendue['libelle'] ?? 'Certificat négatif';
    $controleDe = function (?array $piece): array {
        $points = (array) ($piece['controles']['points'] ?? []);

        if ($points !== []) {
            return ['warn', $points[0]['libelle']];
        }

        $pages = (int) ($piece['controles']['mesures']['pages'] ?? 0);

        return ['ok', ($piece['controles']['format'] ?? null) === 'PDF' && $pages > 0 ? 'PDF lisible · '.$pages.' page'.($pages > 1 ? 's' : '') : 'Lisible et entière'];
    };
    $pieceRecue = $transit['societe'] ?? null;
    $vars = ['avertissements' => $avertissements, 'confirmes' => $confirmes];
@endphp
<div @class(['pt-insc-cabinet' => ! $public])>
    @if (! $public)
        {{-- v1.16.0 §D5 — le cabinet : Les pièces · Vérifier · Formule et envoi. --}}
        <div class="pt-wrap">@include('portail.partiels.nouveau-client-express')</div>
    @else
    @if ($public)
        <header class="pt-bar">
            <a href="{{ route('portail.racine') }}" aria-label="Retour à l'accueil"><x-portail.logo/></a>
            <span class="sep"></span>
            <span class="titre">Demande de domiciliation</span>
            <span class="grow"></span>
            @if ($jeton)
                <span class="pt-chip g"><x-portail.icone nom="check"/>Brouillon enregistré</span>
            @endif
            <a href="{{ route('portail.racine') }}" class="quitter">Quitter</a>
        </header>
        <header class="pt-mbar">
            @if ($etape > 1)
                <button type="button" class="pt-back" wire:click="revenir" aria-label="Étape précédente"><x-portail.icone nom="back"/></button>
            @else
                <a href="{{ route('portail.racine') }}" class="pt-back" aria-label="Retour"><x-portail.icone nom="back"/></a>
            @endif
            <div class="grow"><b>{{ $titres[$etape] }}</b><span class="s">Étape {{ $etape }} sur {{ $nbEtapes }}{{ $jeton ? ' · brouillon enregistré' : '' }}</span></div>
            <x-portail.logo variante="sigle"/>
        </header>
    @endif
    <div class="pt-mprog" aria-hidden="true">@for ($i = 1; $i <= $nbEtapes; $i++)<i @class(['on' => $etape >= $i])></i>@endfor</div>

    <div class="pt-wrap">
        @unless ($public)
            <div class="pt-head"><div><h1 class="pt-h2">Nouveau client</h1><p class="pt-lead">La demande part au client, vous en copie ; MOBDIE vérifie les pièces.</p></div></div>
        @endunless

        <nav class="pt-stepper" aria-label="Étapes">
            @foreach ($etapes as $n => [$libelle, $detail])
                @if ($n > 1)<span @class(['trait', 'fait' => $etape >= $n])></span>@endif
                @if ($n < $etape)
                    <button type="button" class="step" wire:click="revenir({{ $n }})" style="border:0;background:none;padding:0;cursor:pointer;text-align:left">
                        <span class="pt-dot fait"><x-portail.icone nom="check"/></span><span><b>{{ $libelle }}</b><span>{{ $detail }}</span></span>
                    </button>
                @else
                    <div class="step" @if ($n === $etape) aria-current="step" @endif>
                        <span @class(['pt-dot', 'en' => $n === $etape, 'a' => $n > $etape])>{{ $n }}</span>
                        <span><b @if ($n > $etape) style="color:#55505F" @endif>{{ $libelle }}</b><span>{{ $detail }}</span></span>
                    </div>
                @endif
            @endforeach
        </nav>

        @if ($cabinetDuLien)
            {{-- v1.13.0 — la demande sera rattachée au cabinet du lien. --}}
            <div class="pt-alert v"><x-portail.icone nom="users"/><span>Avec votre cabinet <b>{{ $cabinetDuLien->raison_sociale }}</b>, qui suivra votre dossier.</span></div>
        @endif

        <div class="pt-cols">
            <section class="pt-main-col">
                <div class="pt-form">

                {{-- ===================== Étape 1 — la société ===================== --}}
                @if ($etape === 1)
                    <div class="pt-form-t">
                        <h1>{{ $titres[1] }}</h1>
                        <p class="pt-lead">{{ match (true) {
                            $physique => 'L\'activité que vous exercerez à cette adresse.',
                            $association => 'Commencez par '.$attendue['article'].' : la dénomination et l\'objet se remplissent seuls.',
                            default => 'Commencez par '.$attendue['article'].' : la dénomination, la forme et l\'activité se remplissent seules.',
                        } }}</p>
                    </div>

                    <fieldset class="pt-field">
                        <legend>Qui se domicilie ?</legend>
                        <div class="pt-seg" role="radiogroup" aria-label="Qui se domicilie">
                            @foreach (Inscription::TYPES as $cle => $libelle)
                                <button type="button" wire:click="choisirType('{{ $cle }}')" @class(['on' => $type === $cle]) role="radio" aria-checked="{{ $type === $cle ? 'true' : 'false' }}">
                                    {{ $libelle }}<span>{{ ['en_creation' => 'Certificat négatif', 'immatriculee' => 'Registre de commerce', 'personne_physique' => 'Sans société', 'association' => 'Statuts, récépissé'][$cle] }}</span>
                                </button>
                            @endforeach
                        </div>
                    </fieldset>

                    @if ($association)
                        {{-- v1.17.0 — l'association : déclarée (récépissé) ou en cours (statuts). --}}
                        <fieldset class="pt-field">
                            <legend>Où en est l'association ?</legend>
                            <div class="pt-seg" role="radiogroup" aria-label="Situation de l'association">
                                @foreach (Inscription::SITUATIONS as $cle => $libelle)
                                    <button type="button" wire:click="choisirSituation('{{ $cle }}')" @class(['on' => $situation === $cle]) role="radio" aria-checked="{{ $situation === $cle ? 'true' : 'false' }}">
                                        {{ $libelle }}<span>{{ ['en_cours' => 'Ses statuts', 'declaree' => 'Son récépissé'][$cle] }}</span>
                                    </button>
                                @endforeach
                            </div>
                        </fieldset>
                    @endif

                    @unless ($physique)
                        {{-- v1.14.1 — la pièce de la société d'abord, lue comme la CIN. --}}
                        <div style="display:flex;flex-direction:column;gap:12px" id="champ-pieceSociete">
                            @php $errSoc = $errors->first('pieceSociete'); @endphp
                            @if ($pieceRecue && ! $errSoc)
                                @php [$tonS, $msgS] = $controleDe($pieceRecue); @endphp
                                <div @class(['pt-scan', 'ok' => $tonS === 'ok', 'warn' => $tonS === 'warn'])>
                                    <span class="pt-vignette"><x-portail.icone nom="doc"/></span>
                                    <span style="flex:1 1 auto;min-width:0">
                                        <span style="display:flex;justify-content:space-between;gap:10px">
                                            <span class="t">{{ $pieceSociete }}</span>
                                            <label class="pt-lien pt-depot">Remplacer
                                                <input type="file" wire:model="pieceSociete" accept="image/*,application/pdf,.heic,.heif" aria-label="Remplacer : {{ $pieceSociete }}">
                                            </label>
                                        </span>
                                        <span class="d" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $pieceRecue['original_name'] ?? 'Reçu' }}</span>
                                        <span class="pt-controle {{ $tonS }}"><x-portail.icone :nom="$tonS === 'ok' ? 'check' : 'warn'"/>{{ $msgS }}</span>
                                    </span>
                                </div>
                            @else
                                <label @class(['pt-scan', 'err' => $errSoc])>
                                    <span class="pt-ic {{ $errSoc ? 'r' : 'v' }} lg"><x-portail.icone nom="cam" taille="22"/></span>
                                    <span><span class="t">Photographier {{ $attendue['article'] }}</span>
                                        <span class="d">{{ $errSoc ?: ($association ? 'Photo ou PDF. La dénomination et l\'objet se remplissent seuls.' : 'Photo ou PDF. La dénomination, la forme et l\'activité se remplissent seules.') }}</span></span>
                                    <input type="file" wire:model="pieceSociete" accept="image/*,application/pdf,.heic,.heif" aria-label="Photo : {{ $pieceSociete }}">
                                </label>
                            @endif
                            <div wire:loading wire:target="pieceSociete" class="pt-alert v"><x-portail.icone nom="clock"/><span>Contrôle de la pièce…</span></div>
                            @if ($this->litEncore('societe'))
                                {{-- v1.17.0 §E — la lecture tourne hors de la requête : l'écran vient la chercher. --}}
                                <div wire:poll.2s="relireLesLectures" class="pt-alert v"><x-portail.icone nom="scan"/><span>Lecture de la pièce… Vous pouvez continuer à saisir : les champs vides se rempliront.</span></div>
                            @endif
                            @if ($luSurSociete !== [])
                                <div style="display:flex;flex-direction:column;gap:8px">
                                    <p class="pt-lu-t"><x-portail.icone nom="scan"/>Lu sur {{ $association ? $attendue['article'] : ($type === 'immatriculee' ? 'le registre de commerce' : 'le certificat') }} — vérifiez</p>
                                    <div class="pt-lu trois">
                                        <div><p>Dénomination</p><p>{{ $luSurSociete['raison_sociale'] ?? '—' }}</p></div>
                                        @if ($association)
                                            <div><p>Objet</p><p>{{ $luSurSociete['activite'] ?? '—' }}</p></div>
                                            @if ($declaree)
                                                <div><p>Récépissé</p><p>{{ trim(($luSurSociete['recepisse_numero'] ?? '—').(($luSurSociete['recepisse_date'] ?? null) ? ' du '.\Illuminate\Support\Carbon::parse($luSurSociete['recepisse_date'])->format('d/m/Y') : '')) }}</p></div>
                                            @endif
                                        @else
                                            <div><p>Forme juridique</p><p>{{ $luSurSociete['forme_juridique'] ?? '—' }}</p></div>
                                            <div><p>Activité</p><p>{{ $luSurSociete['activite'] ?? '—' }}</p></div>
                                        @endif
                                    </div>
                                </div>
                            @elseif ($pieceRecue && in_array($lectureSociete, ['echec', 'rien'], true))
                                <p class="pt-hint" style="margin:0">La pièce n'a pas pu être lue automatiquement : saisissez les champs ci-dessous.</p>
                            @endif
                        </div>

                        <div>
                            @include('portail.partiels.champ', $vars + ['champ' => 'raison_sociale', 'libelle' => 'Dénomination', 'aide' => 'Majuscules mises automatiquement.', 'attrs' => 'autocomplete="organization"'])
                            @if (($avertissements['raison_sociale'] ?? null) === 'doublon' && ! $errors->has('raison_sociale'))
                                <div class="pt-alert b" style="margin-top:10px">
                                    <x-portail.icone nom="info"/>
                                    <div class="grow"><b>{{ $association ? 'Une association' : 'Une société' }} « {{ $raison_sociale }} » est déjà domiciliée chez MOBDIE.</b><br>C'est la vôtre ? Accédez à votre espace : rien à refaire. Sinon, continuez.</div>
                                    @if ($public)<a class="pt-btn o sm" href="{{ route('portail.connexion') }}">Mon espace</a>@endif
                                </div>
                            @endif
                        </div>

                        @unless ($association)
                        <fieldset class="pt-field">
                            <legend>Forme juridique</legend>
                            <div class="pt-puces">
                                @foreach (Inscription::FORMES as $forme)
                                    <button type="button" @class(['pt-puce', 'on' => $forme_juridique === $forme]) aria-pressed="{{ $forme_juridique === $forme ? 'true' : 'false' }}" wire:click="choisirForme('{{ $forme }}')">{{ $forme }}</button>
                                @endforeach
                            </div>
                            @if ($forme_juridique === 'Autre')
                                <input class="pt-input @error('forme_autre') err @enderror" style="margin-top:8px" placeholder="Laquelle ?" aria-label="Autre forme juridique" wire:model.blur.live="forme_autre">
                                @error('forme_autre')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                            @endif
                            @error('forme_juridique')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                            @if (! $errors->has('forme_juridique') && ($avertissements['forme_juridique'] ?? null))
                                <p class="pt-msg warn"><x-portail.icone nom="warn"/><span>{{ $avertissements['forme_juridique'] }}</span></p>
                            @elseif (! $errors->has('forme_juridique') && ($confirmes['forme_juridique'] ?? null))
                                <p class="pt-msg ok"><x-portail.icone nom="check"/><span>{{ $confirmes['forme_juridique'] }}</span></p>
                            @endif
                        </fieldset>
                        @endunless
                    @endunless

                    @if ($association)
                        @include('portail.partiels.champ', $vars + ['champ' => 'activite', 'libelle' => 'Objet', 'aide' => 'En quelques mots, l\'objet de l\'association, tel que ses statuts le disent.'])
                    @else
                        @include('portail.partiels.champ', $vars + ['champ' => 'activite', 'libelle' => 'Activité', 'aide' => 'En quelques mots, ce que fera '.($physique ? 'votre entreprise' : 'la société').'.'])
                    @endif

                    @if ($declaree)
                        {{-- v1.17.0 — le récépissé de déclaration du siège (dahir n° 1-58-376, art. 5). --}}
                        <div class="pt-grille2">
                            @include('portail.partiels.champ', $vars + ['champ' => 'recepisse_numero', 'libelle' => 'N° du récépissé', 'attrs' => 'autocomplete="off"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'recepisse_date', 'libelle' => 'Date du récépissé', 'saisie' => 'date'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'recepisse_autorite', 'libelle' => 'Délivré par', 'exemple' => 'Pachalik de Fès', 'aide' => 'L\'autorité locale où la déclaration a été déposée (pachalik, caïdat…).', 'classe' => 'plein'])
                        </div>
                        <fieldset class="pt-field" id="champ-recepisse_nature">
                            <legend>Récépissé</legend>
                            <div class="pt-puces">
                                @foreach (\App\Support\Domiciliation::naturesRecepisse() as $cle => $libelle)
                                    <button type="button" @class(['pt-puce', 'on' => $recepisse_nature === $cle]) aria-pressed="{{ $recepisse_nature === $cle ? 'true' : 'false' }}" wire:click="$set('recepisse_nature', '{{ $cle }}')">{{ ucfirst($libelle) }}</button>
                                @endforeach
                            </div>
                            @error('recepisse_nature')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                        </fieldset>
                    @endif

                    @if ($type === 'immatriculee')
                        <div class="pt-grille2">
                            @include('portail.partiels.champ', $vars + ['champ' => 'rc', 'libelle' => 'N° de RC', 'exemple' => '72917', 'attrs' => 'inputmode="numeric" autocomplete="off"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'rc_ville', 'libelle' => 'Ville du tribunal', 'aide' => 'Là où la société est immatriculée.', 'attrs' => 'list="villes-rc" autocomplete="off"'])
                        </div>
                        <datalist id="villes-rc">@foreach (\App\Support\Saisie::villesRc() as $ville)<option value="{{ $ville }}">@endforeach</datalist>
                    @endif
                @endif

                {{-- ===================== Étape 2 — le gérant ===================== --}}
                @if ($etape === 2)
                    <div class="pt-form-t">
                        <h1>{{ $titres[2] }}</h1>
                        <p class="pt-lead">Commencez par la pièce d'identité : nom et numéro se remplissent seuls.</p>
                    </div>

                    <div style="display:flex;flex-direction:column;gap:14px">
                        <h2 class="pt-h3" style="font-size:18px">Sa pièce d'identité</h2>
                        <div class="pt-puces" role="group" aria-label="Type de pièce">
                            @foreach (Inscription::PIECES as $cle => $libelle)
                                <button type="button" @class(['pt-puce', 'on' => $piece_type === $cle]) aria-pressed="{{ $piece_type === $cle ? 'true' : 'false' }}" wire:click="choisirPiece('{{ $cle }}')">{{ $libelle }}</button>
                            @endforeach
                        </div>
                        <div class="pt-faces">
                            @foreach ($faces as $role => [$propriete, $face])
                                @php $recu = $transit[$role] ?? null; $err = $errors->first($propriete); @endphp
                                <div>
                                    @if ($recu && ! $err)
                                        @php [$ton, $message] = $controleDe($recu); @endphp
                                        <div @class(['pt-scan', 'ok' => $ton === 'ok', 'warn' => $ton === 'warn'])>
                                            <span class="pt-vignette"><x-portail.icone nom="id"/></span>
                                            <span style="flex:1 1 auto;min-width:0">
                                                <span style="display:flex;justify-content:space-between;gap:10px">
                                                    <span class="t">{{ $face }}</span>
                                                    <label class="pt-lien pt-depot">Remplacer
                                                        <input type="file" wire:model="{{ $propriete }}" accept="image/*,application/pdf,.heic,.heif" aria-label="Remplacer : {{ $face }}">
                                                    </label>
                                                </span>
                                                <span class="d" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $recu['original_name'] ?? 'Reçu' }}</span>
                                                <span class="pt-controle {{ $ton }}"><x-portail.icone :nom="$ton === 'ok' ? 'check' : 'warn'"/>{{ $message }}</span>
                                            </span>
                                        </div>
                                    @elseif ($role === 'cin_verso' && $rectoPdf && ! $err)
                                        {{-- v1.14.1 — le PDF porte déjà le verso, le plus souvent. --}}
                                        <label class="pt-scan" style="border-style:dashed">
                                            <span class="pt-ic n lg"><x-portail.icone nom="check" taille="22"/></span>
                                            <span><span class="t">Verso : dans votre PDF</span>
                                                <span class="d">S'il n'y est pas, ajoutez-le ici (photo ou PDF).</span></span>
                                            <input type="file" wire:model="{{ $propriete }}" accept="image/*,application/pdf,.heic,.heif" aria-label="Ajouter le verso">
                                        </label>
                                    @else
                                        <label @class(['pt-scan', 'err' => $err])>
                                            <span class="pt-ic {{ $err ? 'r' : 'v' }} lg"><x-portail.icone nom="cam" taille="22"/></span>
                                            <span><span class="t">Photographier {{ $passeport ? 'la page d\'identité' : 'le '.mb_strtolower($face) }}</span>
                                                <span class="d">{{ $err ?: ($role === 'cin_recto' ? ($passeport ? 'Nom et numéro se remplissent seuls.' : 'Ou déposez le PDF scanné recto-verso. Nom et numéro se remplissent seuls.') : 'Les deux faces sont demandées.') }}</span></span>
                                            <input type="file" wire:model="{{ $propriete }}" accept="image/*,application/pdf,.heic,.heif" aria-label="Photo : {{ $face }}">
                                        </label>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div wire:loading wire:target="cinRecto,cinVerso" class="pt-alert v"><x-portail.icone nom="clock"/><span>Contrôle de la pièce…</span></div>
                        @if ($this->litEncore('cin'))
                            <div wire:poll.2s="relireLesLectures" class="pt-alert v"><x-portail.icone nom="scan"/><span>Lecture de votre {{ Inscription::PIECES[$piece_type] ?? 'pièce' }}… Vous pouvez continuer à saisir : les champs vides se rempliront.</span></div>
                        @endif
                        @if (array_filter($luSurPiece) !== [])
                            <div style="display:flex;flex-direction:column;gap:8px">
                                <p class="pt-lu-t"><x-portail.icone nom="scan"/>Lu sur la pièce — vérifiez</p>
                                <div class="pt-lu">
                                    <div><p>Nom</p><p>{{ $luSurPiece['rep_nom_famille'] ?? '—' }}</p></div>
                                    <div><p>Prénom</p><p>{{ $luSurPiece['rep_prenom'] ?? '—' }}</p></div>
                                    <div><p>N° de la pièce</p><p>{{ $luSurPiece['rep_piece_numero'] ?? '—' }}</p></div>
                                    <div><p>Pièce</p><p>{{ Inscription::PIECES[$piece_type] }}</p></div>
                                </div>
                            </div>
                        @elseif ($lecture === 'echec' || $lecture === 'rien')
                            <p class="pt-hint" style="margin:0">La pièce n'a pas pu être lue automatiquement : saisissez les champs ci-dessous.</p>
                        @endif
                    </div>

                    <div class="pt-sec-f">
                        <h2>{{ $physique ? 'Votre identité et vos coordonnées' : ($association ? 'Identité et coordonnées du président' : 'Son identité et ses coordonnées') }}</h2>
                        <div class="pt-grille2">
                            @include('portail.partiels.champ', $vars + ['champ' => 'rep_prenom', 'libelle' => 'Prénom', 'attrs' => 'autocomplete="given-name"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'rep_nom_famille', 'libelle' => 'Nom', 'attrs' => 'autocomplete="family-name"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'rep_piece_numero', 'libelle' => 'N° de '.(['cin' => 'CIN', 'passeport' => 'passeport', 'carte_sejour' => 'la carte de séjour'][$piece_type] ?? 'la pièce'), 'exemple' => $piece_type === 'cin' ? 'AB123456' : null, 'attrs' => 'autocapitalize="characters" autocomplete="off"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'rep_telephone', 'libelle' => 'Téléphone', 'saisie' => 'tel', 'exemple' => '06 61 23 45 67', 'aide' => 'Marocain, ou étranger avec son indicatif (+33…).', 'attrs' => 'inputmode="tel" autocomplete="tel"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'rep_email', 'libelle' => 'E-mail', 'saisie' => 'email', 'classe' => 'plein', 'exemple' => 'nom@exemple.ma', 'aide' => 'Le projet de contrat, le devis et vos codes de connexion y arrivent.', 'attrs' => 'inputmode="email" autocapitalize="off" autocomplete="email"'])
                            @include('portail.partiels.champ', $vars + ['champ' => 'rep_adresse', 'libelle' => 'Adresse personnelle', 'classe' => 'plein', 'exemple' => '12, rue Ibn Sina, Agdal, Rabat', 'aide' => 'Nous vous écrirons ici, jamais à l\'adresse de domiciliation.', 'attrs' => 'autocomplete="street-address"'])
                        </div>
                    </div>

                    @unless ($physique)
                        <div class="pt-sec-f" id="champ-associes">
                            @if ($association)
                                {{-- v1.17.0 — loi 43-05 : ceux qui dirigent ou contrôlent l'association ; le président y est d'office. --}}
                                <h2>Les personnes qui dirigent ou contrôlent l'association</h2>
                                <p class="pt-hint" style="margin:0">Président, trésorier, membres du bureau. {{ trim($rep_prenom.' '.$rep_nom_famille) ?: 'Le président' }} y figure d'office, comme président.</p>
                                <label class="pt-switch">
                                    <span><span class="t">Le président est seul à la diriger</span><span class="d">Sinon, indiquez chaque membre du bureau, avec sa fonction.</span></span>
                                    <input type="checkbox" wire:model.live="seulAssocie">
                                </label>
                            @else
                            <h2>Les associés</h2>
                            <label class="pt-switch">
                                <span><span class="t">Le gérant est le seul associé</span><span class="d">Sinon, indiquez chaque associé qui détient 25 % ou plus du capital ou des droits de vote.</span></span>
                                <input type="checkbox" wire:model.live="seulAssocie">
                            </label>
                            @endif
                            @unless ($seulAssocie)
                                @php $total = \App\Support\Saisie::totalDesParts($associes); @endphp
                                <div style="display:flex;flex-direction:column;gap:12px">
                                    @foreach ($associes as $i => $associe)
                                        <div class="pt-associe" wire:key="associe-{{ $i }}">
                                            <div class="pt-field">
                                                <label for="associe-{{ $i }}-nom">Nom</label>
                                                <input id="associe-{{ $i }}-nom" class="pt-input @error('associes.'.$i.'.nom') err @enderror" wire:model.blur.live="associes.{{ $i }}.nom">
                                                @error('associes.'.$i.'.nom')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                                            </div>
                                            <div class="pt-field">
                                                <label for="associe-{{ $i }}-piece">N° de CIN</label>
                                                <input id="associe-{{ $i }}-piece" class="pt-input @error('associes.'.$i.'.piece_numero') err @enderror" wire:model.blur.live="associes.{{ $i }}.piece_numero" autocapitalize="characters">
                                                @error('associes.'.$i.'.piece_numero')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                                            </div>
                                            @if ($association)
                                                <div class="pt-field">
                                                    <label for="associe-{{ $i }}-fonction">Fonction</label>
                                                    <input id="associe-{{ $i }}-fonction" class="pt-input @error('associes.'.$i.'.fonction') err @enderror" placeholder="Trésorier, secrétaire…" wire:model.blur.live="associes.{{ $i }}.fonction">
                                                    @error('associes.'.$i.'.fonction')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                                                </div>
                                            @else
                                            <div class="pt-field">
                                                <label for="associe-{{ $i }}-part">Part</label>
                                                <div class="pt-prefixe fin"><span>%</span><input id="associe-{{ $i }}-part" class="pt-input @error('associes.'.$i.'.part') err @enderror @if ($total > 100) err @endif" inputmode="decimal" wire:model.blur.live="associes.{{ $i }}.part"></div>
                                                @error('associes.'.$i.'.part')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                                            </div>
                                            @endif
                                            @if (count($associes) > 1)
                                                <button type="button" class="retirer" wire:click="retirerAssocie({{ $i }})" aria-label="Retirer {{ $association ? 'le membre' : 'l\'associé' }} {{ $i + 1 }}"><x-portail.icone nom="x"/><span class="pt-seul-mobile">Retirer</span></button>
                                            @else
                                                <span></span>
                                            @endif
                                        </div>
                                    @endforeach
                                    @if ($association)
                                        @error('associes')<p class="pt-msg err" style="margin:0"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                                        <button type="button" class="pt-btn o sm" style="align-self:flex-start" wire:click="ajouterAssocie"><x-portail.icone nom="plus"/>Ajouter un membre du bureau</button>
                                    @else
                                    <div style="display:flex;flex-direction:column;gap:6px">
                                        <div style="display:flex;justify-content:space-between;font-weight:700"><span>Total des parts</span><span @if ($total > 100) style="color:var(--err-txt)" @endif>{{ Inscription::pourcent($total) }}</span></div>
                                        <div class="pt-jauge"><span style="width:{{ min(100, $total) }}%;background:{{ $total > 100 ? 'var(--err-border)' : 'var(--violet)' }}"></span></div>
                                        @error('associes')<p class="pt-msg err" style="margin:0"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                                    </div>
                                    <button type="button" class="pt-btn o sm" style="align-self:flex-start" wire:click="ajouterAssocie"><x-portail.icone nom="plus"/>Ajouter un associé</button>
                                    @endif
                                </div>
                            @endunless
                        </div>
                    @endunless

                    <div class="pt-sec-f" style="gap:12px">
                        <label class="pt-switch">
                            <span><span class="t">Personne politiquement exposée</span><span class="d">Exerce ou a exercé une fonction publique importante, ou en est un proche.</span></span>
                            <input type="checkbox" wire:model.live="ppe">
                        </label>
                        @if ($ppe)
                            @include('portail.partiels.champ', $vars + ['champ' => 'ppe_precision', 'libelle' => 'Laquelle ?'])
                        @endif
                    </div>
                @endif

                {{-- ===================== Étape 3 — les pièces et l'envoi ===================== --}}
                @if ($etape === 3)
                    <div class="pt-form-t">
                        <h1>Vos pièces</h1>
                        <p class="pt-lead">Chaque pièce est contrôlée dès son dépôt.</p>
                    </div>

                    <div class="pt-lines">
                        @php $recto = $transit['cin_recto'] ?? null; $verso = $transit['cin_verso'] ?? null; @endphp
                        @if ($recto)
                            @php [$tonR, $msgR] = $controleDe($recto); [$tonV, $msgV] = $verso ? $controleDe($verso) : ['ok', null]; $aReprendre = $tonR === 'warn' || $tonV === 'warn'; @endphp
                            <div @class(['pt-line', 'attention' => $aReprendre])>
                                <span class="pt-ic {{ $aReprendre ? 'o' : 'g' }}"><x-portail.icone nom="id"/></span>
                                <div class="grow">
                                    <div class="tt">{{ Inscription::PIECES[$piece_type] }}{{ $passeport ? '' : ' — recto et verso' }}</div>
                                    <div class="pt-controles">
                                        <span class="pt-controle {{ $tonR }}"><x-portail.icone :nom="$tonR === 'ok' ? 'check' : 'warn'"/>{{ $passeport ? '' : ($rectoPdf ? 'Recto et verso : ' : 'Recto : ') }}{{ $msgR }}</span>
                                        @if ($verso)<span class="pt-controle {{ $tonV }}"><x-portail.icone :nom="$tonV === 'ok' ? 'check' : 'warn'"/>Verso : {{ $msgV }}</span>@endif
                                    </div>
                                </div>
                                <span class="end court"><span class="pt-chip {{ $aReprendre ? 'o' : 'g' }}">{{ $aReprendre ? 'À vérifier' : 'Conforme' }}</span>
                                    <button type="button" class="pt-btn o sm" wire:click="revenir(2)">{{ $aReprendre ? 'Reprendre' : 'Voir' }}</button></span>
                            </div>
                        @else
                            <div class="pt-line alerte">
                                <span class="pt-ic r"><x-portail.icone nom="warn"/></span>
                                <div class="grow"><div class="tt">Pièce d'identité</div><div class="dd r">Manquante : ajoutez-la à l'étape 2</div></div>
                                <span class="end court"><button type="button" class="pt-btn p sm" wire:click="revenir(2)">Ajouter</button></span>
                            </div>
                        @endif

                        @unless ($physique)
                            @php $societe = $transit['societe'] ?? null; $errSoc = $errors->first('pieceSociete'); @endphp
                            @if ($societe && ! $errSoc)
                                @php [$tonS, $msgS] = $controleDe($societe); @endphp
                                <div @class(['pt-line', 'attention' => $tonS === 'warn'])>
                                    <span class="pt-ic {{ $tonS === 'warn' ? 'o' : 'g' }}"><x-portail.icone nom="doc"/></span>
                                    <div class="grow">
                                        <div class="tt">{{ $pieceSociete }}</div>
                                        <div class="pt-controles"><span class="pt-controle {{ $tonS }}"><x-portail.icone :nom="$tonS === 'ok' ? 'check' : 'warn'"/>{{ $msgS }}</span></div>
                                    </div>
                                    <span class="end court"><span class="pt-chip {{ $tonS === 'warn' ? 'o' : 'g' }}">{{ $tonS === 'warn' ? 'À vérifier' : 'Conforme' }}</span>
                                        {{-- v1.14.1 — elle se remplace à l'étape 1, où sa lecture se voit et se compare. --}}
                                        <button type="button" class="pt-btn o sm" wire:click="revenir(1)">Remplacer</button></span>
                                </div>
                            @else
                                <div @class(['pt-line', 'alerte' => $errSoc])>
                                    <span class="pt-ic {{ $errSoc ? 'r' : 'v' }}"><x-portail.icone nom="doc"/></span>
                                    <div class="grow"><div class="tt">{{ $pieceSociete }}</div><div @class(['dd', 'r' => $errSoc])>{{ $errSoc ?: 'Manquante : ajoutez-la à l\'étape 1' }}</div></div>
                                    <span class="end court"><button type="button" class="pt-btn p sm" wire:click="revenir(1)">Ajouter</button></span>
                                </div>
                            @endif
                        @endunless
                    </div>

                    <div class="pt-alert b">
                        <x-portail.icone nom="info"/>
                        <span>Une photo peu nette ne bloque pas l'envoi : MOBDIE la vérifiera et vous dira quoi refaire. Une pièce manquante ou illisible bloque l'envoi.</span>
                    </div>

                    <div class="pt-lines">
                        <div class="pt-card-t"><h2>Récapitulatif</h2></div>
                        @if ($association)
                        <div class="pt-recap"><span class="k">Association</span>
                            <span class="grow">{{ $raison_sociale }} · {{ Inscription::SITUATIONS[$situation] }}{{ $declaree && $recepisse_numero ? ', récépissé n° '.$recepisse_numero : '' }}</span>
                        @else
                        <div class="pt-recap"><span class="k">{{ $physique ? 'Entreprise' : 'Société' }}</span>
                            <span class="grow">{{ $physique ? mb_strtoupper(trim($rep_prenom.' '.$rep_nom_famille)) : $raison_sociale }}{{ ! $physique && $forme_juridique ? ' · '.($forme_juridique === 'Autre' ? $forme_autre : $forme_juridique) : '' }} · {{ Inscription::TYPES[$type] }}{{ $type === 'immatriculee' ? ', RC '.$rc.' ('.$rc_ville.')' : '' }}</span>
                        @endif
                            <button type="button" class="pt-lien" wire:click="revenir(1)">Modifier</button></div>
                        <div class="pt-recap"><span class="k">{{ $etapes[2][0] }}</span>
                            <span class="grow">{{ trim($rep_prenom.' '.$rep_nom_famille) }} · {{ Inscription::PIECES[$piece_type] }} {{ $rep_piece_numero }} · {{ $rep_telephone }} · {{ $rep_email }}</span>
                            <button type="button" class="pt-lien" wire:click="revenir(2)">Modifier</button></div>
                        @if (! $physique && ! $seulAssocie)
                            <div class="pt-recap"><span class="k">{{ $association ? 'Bureau' : 'Associés' }}</span>
                                <span class="grow">{{ collect($associes)->map(fn ($a) => trim(($a['nom'] ?? '').' '.($association ? (($a['fonction'] ?? '') !== '' ? '('.$a['fonction'].')' : '') : (($a['part'] ?? '') !== '' ? $a['part'].' %' : ''))))->filter()->implode(' · ') }}</span>
                                <button type="button" class="pt-lien" wire:click="revenir(2)">Modifier</button></div>
                        @endif
                    </div>
                @endif

                {{-- ===================== Étape 4 — la formule, les options, l'envoi (v1.15.0) ===================== --}}
                @if ($etape === 4)
                    @include('portail.partiels.formule-et-options')
                @endif

                <div class="pt-pied-f">
                    @if ($libellesErreurs->isNotEmpty())
                        <button type="button" class="pt-alert r pt-resume-err" role="alert" onclick="window.ptPremiereErreur()">
                            <x-portail.icone nom="alert"/>
                            <span><b>{{ $libellesErreurs->count() }} point{{ $libellesErreurs->count() > 1 ? 's' : '' }} à corriger :</b> {{ $libellesErreurs->implode(', ') }}.</span>
                        </button>
                    @endif
                    <div class="boutons">
                        @if ($etape > 1)
                            <button type="button" class="pt-btn o" wire:click="revenir"><x-portail.icone nom="back"/>Retour</button>
                        @elseif ($public)
                            <a class="pt-btn o" href="{{ route('portail.racine') }}"><x-portail.icone nom="back"/>Retour</a>
                        @else
                            <span></span>
                        @endif
                        @if ($etape < $nbEtapes)
                            <button type="button" class="pt-btn p" wire:click="continuer" wire:loading.attr="disabled">Continuer<x-portail.icone nom="chevron"/></button>
                        @else
                            <button type="button" class="pt-btn p lg" wire:click="envoyer" wire:loading.attr="disabled" @disabled(! $consentement)>
                                <span wire:loading.remove wire:target="envoyer">Envoyer {{ $public ? 'ma demande' : 'la demande' }}</span>
                                <span wire:loading wire:target="envoyer">Envoi…</span>
                            </button>
                        @endif
                    </div>
                </div>
                </div>
            </section>

            <aside class="pt-aside">
                @if ($etape === $nbEtapes && $offre)
                    <div style="position:sticky;top:16px;display:flex;flex-direction:column;gap:16px">
                        @include('portail.partiels.redevance')
                    </div>
                @elseif ($formule)
                    <div class="pt-cote">
                        <p class="k">Votre formule</p>
                        <div class="ligne"><span>{{ $formule->libelle }}</span><span>{{ dh($formule->montant_ttc, 0) }}</span></div>
                        <p class="pt-muted">TTC, {{ $formule->libellePeriode() }}. Vous la confirmerez, avec ses options, à la dernière étape.</p>
                    </div>
                @endif
                @if ($etape === 1)
                    <div class="pt-cote">
                        <p class="k">À portée de main</p>
                        @if ($physique)
                            <p>À l'étape 2 : votre pièce d'identité, recto et verso — ou un PDF scanné recto-verso.</p>
                        @elseif ($association)
                            <p>{{ $declaree ? 'Le récépissé de déclaration, en photo ou en PDF : la dénomination, l\'objet et le récépissé se lisent dessus.' : 'Les statuts de l\'association, en photo ou en PDF : la dénomination et l\'objet se lisent dessus.' }}</p>
                            <p>À l'étape 2 : la pièce d'identité du président, recto et verso — ou un PDF scanné recto-verso.</p>
                        @else
                            <p>{{ $type === 'immatriculee' ? 'Le registre de commerce (modèle J), en photo ou en PDF : la dénomination, la forme et l\'activité se lisent dessus.' : 'Le certificat négatif, en photo ou en PDF : la dénomination, la forme et l\'activité se lisent dessus.' }}</p>
                            <p>À l'étape 2 : la pièce d'identité du gérant, recto et verso — ou un PDF scanné recto-verso.</p>
                        @endif
                    </div>
                @elseif ($etape === 2)
                    <div class="pt-cote">
                        <p class="k">Pourquoi ces informations ?</p>
                        @if ($association)
                            <p>La loi impose d'identifier le président et ceux qui dirigent ou contrôlent l'association (loi 43-05).</p>
                        @else
                            <p>La loi impose d'identifier le gérant et les associés qui détiennent 25 % ou plus (Code de commerce, art. 544-4 ; loi 43-05).</p>
                        @endif
                        <p>Elles servent à votre seul contrat de domiciliation.</p>
                    </div>
                    <div class="pt-cote">
                        <p class="k">Contrôlé en direct</p>
                        <p>Chaque champ est vérifié dès que vous le quittez. Rien n'est perdu : le brouillon s'enregistre à chaque étape.</p>
                    </div>
                @elseif ($etape >= 3)
                    <div class="pt-cote" style="gap:14px">
                        <p class="k">Et ensuite ?</p>
                        <div class="pt-suite"><span class="n">1</span><p><b>Tout de suite</b> : le projet de contrat et le devis par e-mail.</p></div>
                        <div class="pt-suite"><span class="n">2</span><p><b>MOBDIE vérifie vos pièces</b> et vous appelle.</p></div>
                        <div class="pt-suite"><span class="n">3</span><p><b>Paiement</b>, puis le contrat légalisé et l'attestation de domiciliation.</p></div>
                    </div>
                    <div class="pt-cote">
                        <p class="k">Ce que nous contrôlons</p>
                        <p>Le vrai format du fichier, sa définition et sa netteté ; les deux faces de la pièce ; le nom et le numéro, comparés à ce que vous avez saisi.</p>
                    </div>
                @endif
                @if ($public)
                    <p class="pt-small pt-muted" style="padding:0 4px">Une question ? Écrivez à <a class="pt-lien" href="mailto:{{ setting('societe.email_domiciliation', 'domiciliation@mobdie.ma') }}">{{ setting('societe.email_domiciliation', 'domiciliation@mobdie.ma') }}</a></p>
                @endif
            </aside>
        </div>
    </div>
    @endif

@script
<script>
    // v1.14.0 — « Continuer » refusé : on amène le premier point à corriger sous les yeux.
    window.ptPremiereErreur = function () {
        const el = document.querySelector('.pt-form [aria-invalid=true], .pt-form .pt-scan.err, .pt-form .pt-input.err, .pt-form .pt-msg.err');
        if (! el) { return; }
        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
        if (el.matches('input') && window.matchMedia('(min-width: 901px)').matches) { el.focus({ preventScroll: true }); }
    };
    $wire.on('portail-a-corriger', () => setTimeout(window.ptPremiereErreur, 60));
</script>
@endscript
</div>