{{--
    Rendu public generique d'un formulaire personnalise multi-etapes (voir
    App\Models\Form et App\Http\Controllers\FormulairePublicController).

    REFONTE (Lot 1) : reproduction A L'IDENTIQUE de la maquette de reference
    fournie par le client (carte blanche centree sur fond degrade bleu,
    fichier Biome_Formulaire_Qualification_V2.html), mais rendue en
    GENERIQUE : cette vue s'appuie uniquement sur schema_json / settings_json,
    jamais sur des champs codes en dur. Palette et espacements exacts de la
    maquette, voir variables --fp-* posees sur .formulaire-public__carte
    ci-dessous (vars LOCALES a cette page, ne touchent pas public/css/tokens.css).

    Deviations documentees par rapport a la maquette source (voir contrat de
    reproduction transmis par le chef de projet) :
    - Police Segoe UI -> Poppins/Mulish (Google Fonts, coherent avec le reste
      du site) ; icones Tabler (CDN) -> SVG inline (aucune dependance CDN,
      contrainte CLAUDE.md/hebergement OVH).
    - Icones decoratives specifiques a la maquette (whatsapp/messenger/phone
      colores, badge "Verifie BCE") non reproduites : elles n'ont pas de sens
      pour un formulaire generique piloté par schema_json.
    - L'asterisque "*" des champs obligatoires n'est PAS colore en orange
      (mockup : .req) : il est genere par les 16 partiels
      resources/views/formulaires/champs/*.blade.php en texte brut
      concatene au label, sans span dedie. Le contrat de cette refonte
      interdit de modifier ces partiels (marquage partage avec le moteur
      conditionnel JS et le controleur) : l'asterisque reste donc dans la
      couleur du label. A valider avec le chef de projet si un span dedie
      doit etre ajoute dans un lot ulterieur.
    - .formulaire-public__carte-choix (partage par radio-cartes.blade.php ET
      checkbox-groupe.blade.php) est recolore a la charte du mockup, mais
      garde une mise en page en grille (pas de disposition empilee pleine
      largeur façon .radio-group) pour les cases a cocher multiples : seule
      la variante radio (un seul input[type=radio] par groupe) repasse en
      colonne pleine largeur façon maquette, via un selecteur CSS :has()
      cible sur le type d'input (voir plus bas). Choix documente ici plutot
      qu'improvise silencieusement.

    CONTRAT DE NOMMAGE (voir FormulairePublicController) — NE PAS CASSER :
    - reponses[<cle>] (scalaire) / reponses[<cle>][] (choix multiple)
    - fichiers[<cle>][] (toujours en tableau, y compris mono-fichier)
    - fichiers[upload_final][] (upload final)
    - utm[source|medium|campaign|content|term] (caches)
    - site_web (honeypot, cache, laisse strictement tel quel)

    Attributs JS de navigation (voir public/js/formulaires-public.js) —
    NE PAS RENOMMER : data-formulaire-public, data-formulaire-etapes,
    data-etape="N" (1-based dans le DOM), data-etape-suivante,
    data-etape-precedente, data-libelle-etape, data-barre-progression,
    data-rouvrir, data-etape-erreur (0-based, pose par le controleur).
    Nouveaux attributs (Lot 1) pour la progression visuelle façon maquette,
    lus par formulaires-public.js::afficherEtape() : data-prog-label (un par
    libelle d'etape, dans l'ordre) et data-prog-dot (un par pastille, meme
    ordre) — voir public/js/formulaires-public.js.

    Variables recues du controleur : $formulaire (App\Models\Form),
    $schema (array, deja resolu : version courante ou brouillon en apercu),
    $apercu (bool), $valeursUtm (array).
--}}
@extends('layouts.formulaire')

@section('titre', ($formulaire->title ?? 'Formulaire').' - Biome Constructions')

@php
    $etapes = (array) ($schema['etapes'] ?? []);
    $settings = (array) ($formulaire->settings_json ?? []);
    $uploadFinal = (array) ($settings['upload_final'] ?? []);
    $confirmation = (array) ($settings['confirmation'] ?? []);

    $etapeErreur = (int) session('etape_erreur', 0);
    $doitRouvrir = $errors->any() ? '1' : '0';
    $totalEtapes = count($etapes) + ((bool) ($uploadFinal['actif'] ?? false) ? 1 : 0);
    $afficheConfirmation = (bool) session('succes');

    // Logique conditionnelle (Phase 2) : seuls les champs portant AU MOINS
    // UNE condition sont transmis au moteur JS (voir
    // public/js/formulaires-public.js et App\Services\Formulaires\
    // EvaluateurConditions pour la semantique complete, partagee avec le
    // serveur). Un champ absent de cette carte reste toujours visible.
    $conditionsParChamp = [];
    foreach ($etapes as $etapeConditions) {
        foreach ((array) ($etapeConditions['champs'] ?? []) as $champConditions) {
            $conditions = (array) ($champConditions['conditions'] ?? []);
            if (empty($conditions) || empty($champConditions['cle'])) {
                continue;
            }

            $conditionsParChamp[$champConditions['cle']] = [
                'obligatoireBase' => (bool) ($champConditions['obligatoire'] ?? false),
                'conditions' => array_map(static fn (array $condition): array => [
                    'champ' => $condition['champ'] ?? null,
                    'operateur' => $condition['operateur'] ?? 'egal',
                    'valeur' => $condition['valeur'] ?? null,
                    'action' => $condition['action'] ?? null,
                ], $conditions),
            ];
        }
    }

    // Image d'en-tete optionnelle (Option A, alimentee par un lot ulterieur
    // du builder) : affichee au-dessus du bandeau degrade si renseignee.
    $entete = (array) ($settings['entete'] ?? []);
    $imageEntete = ! empty($entete['image'])
        ? \Illuminate\Support\Facades\Storage::disk('public')->url($entete['image'])
        : null;

    // Libelles de progression : un par etape du schema, plus l'etape
    // d'upload final optionnelle si active (contrainte : le nombre
    // d'etapes/dots/libelles doit inclure cette derniere etape).
    $libellesProgression = array_map(
        static fn (array $etape): string => (string) ($etape['titre'] ?? ''),
        $etapes
    );
    if ($uploadFinal['actif'] ?? false) {
        $libellesProgression[] = (string) ($uploadFinal['label'] ?? 'Photos et documents');
    }
@endphp

@push('styles')
<style>
    /*
     * Styles du rendu de formulaire personnalise — reproduction de la
     * maquette de reference (carte centree, fond degrade). Portee locale a
     * cette page (pile de styles de layouts/formulaire.blade.php) : ces
     * regles ne fuient vers aucune autre vue du site.
     */

    .formulaire-public { width: 100%; max-width: 640px; box-sizing: border-box; }

    .formulaire-public__apercu-bandeau {
        max-width: 640px; margin: 0 auto 16px; box-sizing: border-box;
        background: #FFF7E6; border: 1px solid #F5D28B; color: #8A5A00;
        padding: 12px 18px; border-radius: 10px; font-size: 13.5px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    }

    .formulaire-public__carte {
        /* Palette locale (vars scopees a la carte), extraite tel quel de la
           maquette de reference Biome_Formulaire_Qualification_V2.html. */
        --fp-navy: #1B3A6B;
        --fp-blue: #2D5FA6;
        --fp-light: #E8EFF8;
        --fp-pale: #F5F7FA;
        --fp-green: #1D9E75;
        --fp-dkgreen: #0F6E56;
        --fp-lgreen: #E1F5EE;
        --fp-border: #E2E8F0;
        --fp-muted: #6B7A99;
        --fp-sub: #9BB3D4;

        width: 100%; box-sizing: border-box;
        background: #fff; border-radius: 20px;
        box-shadow: 0 24px 80px rgba(27, 58, 107, .35);
        overflow: visible;
    }
    /* L'image d'en-tete optionnelle (Option A) n'a pas de coins arrondis a
       elle : c'est la carte qui doit clipper ses coins hauts. Sans image,
       overflow reste visible (aucun besoin de clipper). */
    .formulaire-public__carte--avec-image { overflow: hidden; }

    .formulaire-public__image-entete { display: block; width: 100%; height: auto; }

    /* EN-TETE (bandeau degrade) */
    .formulaire-public__hdr {
        background: linear-gradient(135deg, var(--fp-navy), var(--fp-blue));
        padding: 26px 28px 22px;
    }
    /* Coins hauts arrondis uniquement quand le bandeau est le premier
       element visuel de la carte (pas d'image d'en-tete au-dessus). */
    .formulaire-public__hdr:first-child { border-radius: 20px 20px 0 0; }

    .formulaire-public__logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .formulaire-public__logo-icon {
        width: 34px; height: 34px; background: rgba(255, 255, 255, .15); border-radius: 9px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .formulaire-public__logo-name { font-family: var(--police-titres); font-size: 15px; font-weight: 700; color: #fff; }
    .formulaire-public__logo-sub { font-size: 10px; color: rgba(255, 255, 255, .5); margin-top: 1px; }

    .formulaire-public__titre {
        font-family: var(--police-titres); font-size: 22px; font-weight: 700; color: #fff;
        margin: 0 0 5px; line-height: 1.3;
    }
    .formulaire-public__description { font-size: 13px; color: rgba(255, 255, 255, .6); line-height: 1.6; margin: 0; }

    .formulaire-public__progression { margin-top: 16px; }
    .formulaire-public__prog-labels { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
    .formulaire-public__prog-label { font-size: 11px; color: rgba(255, 255, 255, .4); transition: color .3s; }
    .formulaire-public__prog-label.on { color: #fff; font-weight: 600; }
    .formulaire-public__prog-label.done { color: rgba(255, 255, 255, .65); text-decoration: line-through; }
    .formulaire-public__progression-barre { background: rgba(255, 255, 255, .2); border-radius: 4px; height: 5px; overflow: hidden; }
    .formulaire-public__progression-remplissage { display: block; background: #fff; border-radius: 4px; height: 5px; width: 0; transition: width .4s ease; }

    /* Libelle "Etape X sur N" : conserve dans le DOM pour les lecteurs
       d'ecran (aria-live), masque visuellement (la maquette affiche des
       libelles d'etape + pastilles, pas ce texte). */
    .formulaire-public__sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    /* CORPS */
    .formulaire-public__body { padding: 24px 26px 28px; }

    .formulaire-public__dots { display: flex; justify-content: center; gap: 7px; padding: 0 0 16px; }
    .formulaire-public__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fp-border); transition: all .3s; }
    .formulaire-public__dot.on { background: var(--fp-navy); width: 26px; border-radius: 4px; }
    .formulaire-public__dot.done { background: var(--fp-dkgreen); }

    .formulaire-public__etape-titre {
        font-family: var(--police-titres); font-size: 13px; font-weight: 700; color: var(--fp-blue);
        text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px;
        display: flex; align-items: center; gap: 7px;
    }
    .formulaire-public__etape-titre:focus { outline: none; }
    .formulaire-public__etape-titre svg { flex-shrink: 0; }

    /* CHAMPS */
    .formulaire-public__champ {
        margin-bottom: 18px;
        /* Transition douce pour les champs bascules par le moteur
           conditionnel (voir public/js/formulaires-public.js,
           definirVisibiliteChamp) : fondu + leger glissement plutot qu'un
           display:none brutal. Sans effet sur les champs jamais masques. */
        transition: opacity var(--transition-standard) ease, transform var(--transition-standard) ease;
    }
    .formulaire-public__champ:last-child { margin-bottom: 0; }
    fieldset.formulaire-public__champ { border: none; padding: 0; min-width: 0; }
    .formulaire-public__label,
    .formulaire-public__legende { display: block; font-size: 13px; color: #3D4F6B; font-weight: 600; margin: 0 0 6px; padding: 0; }
    /* Asterisque des champs obligatoires : orange charte (mockup .req). */
    .formulaire-public__req { color: #D85A30; }
    .formulaire-public__mini-label { display: block; font-size: 11px; color: var(--fp-sub); font-weight: 700; margin: 0 0 5px; text-transform: uppercase; letter-spacing: .3px; }
    .formulaire-public__optionnel { color: var(--fp-sub); font-weight: 400; text-transform: none; letter-spacing: normal; }
    .formulaire-public__aide { display: block; font-size: 12px; color: var(--fp-sub); margin-top: 5px; line-height: 1.4; }
    .formulaire-public__erreur { display: block; color: #D64545; font-size: 12.5px; margin-top: 6px; }
    .formulaire-public__lien { color: var(--fp-blue); text-decoration: underline; }

    @media (prefers-reduced-motion: reduce) {
        .formulaire-public__champ { transition: none; }
    }

    .formulaire-public__input,
    .formulaire-public__champ select,
    .formulaire-public__champ textarea {
        width: 100%; box-sizing: border-box; background: var(--fp-pale); border: 1.5px solid var(--fp-border);
        border-radius: 9px; padding: 12px 14px; font-family: var(--police-texte); font-size: 14px;
        color: var(--fp-navy); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
    }
    .formulaire-public__champ select { cursor: pointer; appearance: none; -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239BB3D4'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px;
    }
    .formulaire-public__champ textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
    .formulaire-public__input:focus,
    .formulaire-public__champ select:focus,
    .formulaire-public__champ textarea:focus {
        border-color: var(--fp-blue);
        box-shadow: 0 0 0 3px rgba(45, 95, 166, .08);
    }
    .formulaire-public__input--erreur,
    .formulaire-public__champ select.formulaire-public__input--erreur,
    .formulaire-public__champ textarea.formulaire-public__input--erreur {
        border-color: #D64545;
    }

    .formulaire-public__fichier {
        display: block; width: 100%; box-sizing: border-box; border-radius: 9px; border: 1.5px dashed var(--fp-border);
        padding: 11px 14px; font-family: var(--police-texte); font-size: 13px; color: var(--fp-navy);
        background: var(--fp-pale); cursor: pointer; transition: border-color .15s ease;
    }
    .formulaire-public__fichier--erreur { border-color: #D64545; }
    .formulaire-public__fichier-note { display: block; font-size: 11px; color: var(--fp-sub); margin-top: 6px; }

    .formulaire-public__separateur { margin: 20px 0 18px; padding-top: 18px; border-top: 1px solid var(--fp-border); }
    .formulaire-public__separateur:first-child { border-top: none; padding-top: 0; margin-top: 0; }

    /* Sous-champs adresse (rue / n / code postal / localite / pays) */
    .formulaire-public__sous-champ-ligne { margin-bottom: 12px; }

    /* CASES A COCHER SIMPLES (cases.blade.php) : grille 2 colonnes facon
       maquette (.chk-grid / .chk). */
    .formulaire-public__options-cases {
        display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
    }
    .formulaire-public__case {
        display: flex; align-items: center; gap: 8px; background: var(--fp-pale);
        border: 1.5px solid var(--fp-border); border-radius: 8px; padding: 11px 12px;
        cursor: pointer; font-size: 13px; color: var(--fp-navy); transition: all .15s ease;
    }
    .formulaire-public__case:hover { border-color: var(--fp-sub); }
    .formulaire-public__case:has(input:checked) { background: #EEF4FC; border-color: var(--fp-blue); }
    .formulaire-public__case input { width: 16px; height: 16px; accent-color: var(--fp-navy); flex-shrink: 0; }
    .formulaire-public__case--erreur input { outline: 2px solid #D64545; outline-offset: 2px; border-radius: 3px; }

    /* CHOIX EN CARTES (radio-cartes.blade.php / checkbox-groupe.blade.php,
       classes partagees) : recolore a la charte de la maquette. Les cases
       multiples restent en grille responsive, les radios (un seul input par
       groupe) repassent en colonne pleine largeur facon .radio-group de la
       maquette — voir note de deviation documentee en tete de fichier. */
    .formulaire-public__options-cartes {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
    }
    .formulaire-public__options-cartes:has(input[type="radio"]) {
        grid-template-columns: 1fr; gap: 7px;
    }
    .formulaire-public__carte-choix { position: relative; display: block; cursor: pointer; }
    .formulaire-public__carte-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
    .formulaire-public__carte-choix span {
        display: flex; align-items: center; justify-content: center; text-align: center;
        min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--fp-border); border-radius: 8px;
        font-size: 14px; font-weight: 500; color: var(--fp-navy); background: var(--fp-pale);
        transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    .formulaire-public__options-cartes:has(input[type="radio"]) .formulaire-public__carte-choix span {
        justify-content: flex-start; text-align: left; padding: 13px 14px;
    }
    /* :checked+span assure le rendu correct meme si le JS ne charge pas ; la
       classe --actif (posee par formulaires-public.js) fait exactement la
       meme chose et reste redondante par robustesse (voir CLAUDE.md). */
    .formulaire-public__carte-choix input:checked + span,
    .formulaire-public__carte-choix--actif span {
        border: 1.5px solid var(--fp-blue);
        background: #EEF4FC;
        color: var(--fp-navy);
    }
    .formulaire-public__carte-choix input:focus-visible + span { outline: 2px solid var(--fp-blue); outline-offset: 2px; }

    .formulaire-public__options-cases,
    .formulaire-public__options-cartes { margin-top: 2px; }

    /* NAVIGATION */
    .formulaire-public__navigation { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
    .formulaire-public__bouton {
        border: none; border-radius: 9px; padding: 15px 18px; font-family: var(--police-titres); font-size: 15px; font-weight: 600;
        cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        transition: opacity .15s ease, background .15s ease; box-sizing: border-box;
    }
    .formulaire-public__bouton--principal { flex: 1 1 auto; min-width: 180px; background: linear-gradient(135deg, #1B3A6B, #2D5FA6); color: #fff; }
    .formulaire-public__bouton--principal:hover { opacity: .92; }
    .formulaire-public__bouton--principal:disabled { opacity: .55; cursor: not-allowed; }
    .formulaire-public__bouton--envoyer { flex: 1 1 auto; min-width: 180px; background: linear-gradient(135deg, #0F6E56, #1D9E75); color: #fff; }
    .formulaire-public__bouton--envoyer:hover { opacity: .92; }
    .formulaire-public__bouton--envoyer:disabled { opacity: .55; cursor: not-allowed; }
    .formulaire-public__bouton--secondaire { flex: 0 0 auto; background: #fff; color: #3D4F6B; border: 1.5px solid var(--fp-border); }
    .formulaire-public__bouton--secondaire:hover { background: var(--fp-pale); }
    .formulaire-public__bouton svg { flex: none; }

    .formulaire-public__honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

    /* CONFIRMATION (page finale, apres soumission) */
    .formulaire-public__confirmation { text-align: center; padding: 12px 0 4px; }
    .formulaire-public__confirmation-pastille {
        width: 64px; height: 64px; border-radius: 50%; background: var(--fp-lgreen);
        display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
    }
    .formulaire-public__confirmation-titre { font-family: var(--police-titres); font-size: 20px; font-weight: 700; color: var(--fp-navy); margin: 0 0 8px; }
    .formulaire-public__confirmation-texte { font-size: 13px; color: var(--fp-muted); line-height: 1.7; margin: 0 0 20px; }
    .formulaire-public__confirmation-bouton {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
        background: linear-gradient(135deg, #0F6E56, #1D9E75); color: #fff; border: none; border-radius: 9px;
        padding: 15px; font-family: var(--police-titres); font-size: 15px; font-weight: 600; text-decoration: none;
    }
    .formulaire-public__confirmation-bouton:hover { opacity: .92; }

    /* PIED DE CARTE */
    .formulaire-public__footer {
        text-align: center; padding: 10px 26px 16px; font-size: 10px; color: var(--fp-sub);
        border-top: 1px solid var(--fp-border);
    }
    .formulaire-public__footer svg { vertical-align: -1px; margin-right: 2px; }
    .formulaire-public__footer a { color: var(--fp-blue); text-decoration: none; }

    /* Media queries reprises de la maquette de reference (breakpoint 600px,
       specifique a cette page — pas les breakpoints 480/1024 du reste du
       site, cette page n'utilise pas mobile.css). */
    @media (max-width: 600px) {
        html, body { height: 100%; overflow: hidden; padding: 0; }
        body { align-items: stretch; }
        .formulaire-public { max-width: 100%; }
        .formulaire-public__carte {
            max-width: 100%; border-radius: 0; height: 100vh; height: 100dvh;
            display: flex; flex-direction: column; box-shadow: none;
        }
        .formulaire-public__hdr,
        .formulaire-public__hdr:first-child { flex-shrink: 0; padding: 18px 20px 16px; border-radius: 0; }
        .formulaire-public__titre { font-size: 18px; }
        .formulaire-public__description { font-size: 12px; }
        .formulaire-public__progression { margin-top: 12px; }
        .formulaire-public__logo-row { margin-bottom: 10px; }
        .formulaire-public__body { flex: 1; overflow-y: auto; padding: 16px 20px 0; display: flex; flex-direction: column; }
        .formulaire-public__navigation {
            position: sticky; bottom: 0; background: #fff; padding: 14px 0 20px;
            margin-top: auto; border-top: 1px solid #F0F4FA;
        }
        .formulaire-public__footer { flex-shrink: 0; padding: 8px 20px 12px; }
    }
</style>
@endpush

@section('contenu')
<div class="formulaire-public" data-formulaire-public data-etape-erreur="{{ $etapeErreur }}" data-rouvrir="{{ $doitRouvrir }}">

    @if ($apercu)
        <div class="formulaire-public__apercu-bandeau">
            Mode apercu{{ $formulaire->status !== 'published' ? ' — ce formulaire n\'est pas encore publie, la soumission est desactivee.' : ' — vous visualisez le brouillon de travail.' }}
        </div>
    @endif

    <div class="formulaire-public__carte @if ($imageEntete) formulaire-public__carte--avec-image @endif">

        @if ($imageEntete)
            <img src="{{ $imageEntete }}" alt="" class="formulaire-public__image-entete">
        @endif

        <div class="formulaire-public__hdr">
            <div class="formulaire-public__logo-row">
                <span class="formulaire-public__logo-icon" aria-hidden="true">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 21v-4h6v4"/></svg>
                </span>
                <div>
                    <div class="formulaire-public__logo-name">Biome Constructions</div>
                    <div class="formulaire-public__logo-sub">B&acirc;tir l'avenir en Wallonie</div>
                </div>
            </div>

            <h1 class="formulaire-public__titre">{{ $formulaire->title }}</h1>
            @if ($formulaire->description)
                <p class="formulaire-public__description">{{ $formulaire->description }}</p>
            @endif

            <div class="formulaire-public__progression">
                <span data-libelle-etape class="formulaire-public__sr-only" aria-live="polite">
                    Etape {{ $afficheConfirmation ? $totalEtapes : 1 }} sur {{ $totalEtapes }}
                </span>

                @if (count($libellesProgression) > 0)
                    <div class="formulaire-public__prog-labels">
                        @foreach ($libellesProgression as $index => $libelle)
                            <span
                                class="formulaire-public__prog-label @if ($afficheConfirmation) done @elseif ($index === 0) on @endif"
                                data-prog-label
                            >{{ $libelle }}</span>
                        @endforeach
                    </div>
                @endif

                <div
                    class="formulaire-public__progression-barre"
                    role="progressbar"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="{{ $afficheConfirmation ? 100 : ($totalEtapes > 0 ? round(100 / $totalEtapes) : 0) }}"
                    aria-label="Progression du formulaire"
                >
                    <div
                        data-barre-progression
                        class="formulaire-public__progression-remplissage"
                        style="width: {{ $afficheConfirmation ? 100 : ($totalEtapes > 0 ? round(100 / $totalEtapes) : 0) }}%;"
                    ></div>
                </div>
            </div>
        </div>

        <div class="formulaire-public__body">

            @if (count($libellesProgression) > 0)
                <div class="formulaire-public__dots">
                    @foreach ($libellesProgression as $index => $libelle)
                        <span
                            class="formulaire-public__dot @if ($afficheConfirmation) done @elseif ($index === 0) on @endif"
                            data-prog-dot
                        ></span>
                    @endforeach
                </div>
            @endif

            @if ($afficheConfirmation)
                <div class="formulaire-public__confirmation">
                    <span class="formulaire-public__confirmation-pastille" aria-hidden="true">
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#0F6E56" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg>
                    </span>
                    <h2 class="formulaire-public__confirmation-titre">{{ $confirmation['titre'] ?? 'Merci !' }}</h2>
                    <p class="formulaire-public__confirmation-texte">{{ session('succes') }}</p>
                    <a href="{{ route('accueil') }}" class="formulaire-public__confirmation-bouton">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11.5 12 4l9 7.5M5 10v10h5v-6h4v6h5V10"/></svg>
                        Retour a l'accueil
                    </a>
                </div>
            @else
                <form
                    action="{{ route('formulaires.public.submit', $formulaire->uuid) }}"
                    method="POST"
                    enctype="multipart/form-data"
                    data-formulaire-etapes
                    novalidate
                >
                    @csrf

                    {{-- Configuration de la logique conditionnelle (voir
                    public/js/formulaires-public.js), transmise au moteur JS.
                    Ne contient QUE les champs portant des conditions. --}}
                    <script type="application/json" data-formulaire-conditions>{!! json_encode($conditionsParChamp, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>

                    {{-- Honeypot : champ invisible pour un humain, piege a robots
                    (voir contrat de nommage dans FormulairePublicController). --}}
                    <div class="formulaire-public__honeypot" aria-hidden="true">
                        <label for="site_web">Ne pas remplir ce champ</label>
                        <input type="text" id="site_web" name="site_web" tabindex="-1" autocomplete="off">
                    </div>

                    {{-- Parametres UTM captes a l'affichage, retransmis a la soumission. --}}
                    <input type="hidden" name="utm[source]" value="{{ $valeursUtm['source'] ?? '' }}">
                    <input type="hidden" name="utm[medium]" value="{{ $valeursUtm['medium'] ?? '' }}">
                    <input type="hidden" name="utm[campaign]" value="{{ $valeursUtm['campaign'] ?? '' }}">
                    <input type="hidden" name="utm[content]" value="{{ $valeursUtm['content'] ?? '' }}">
                    <input type="hidden" name="utm[term]" value="{{ $valeursUtm['term'] ?? '' }}">

                    @foreach ($etapes as $indexEtape => $etape)
                        <div data-etape="{{ $indexEtape + 1 }}" @if ($indexEtape > 0) style="display:none;" @endif>
                            <h2 class="formulaire-public__etape-titre" tabindex="-1">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>
                                {{ $etape['titre'] ?? '' }}
                            </h2>

                            @foreach ((array) ($etape['champs'] ?? []) as $champ)
                                @include('formulaires.champs.'.($champ['type'] ?? 'texte'), ['champ' => $champ])
                            @endforeach

                            <div class="formulaire-public__navigation">
                                @if ($indexEtape > 0)
                                    <button type="button" data-etape-precedente class="formulaire-public__bouton formulaire-public__bouton--secondaire">
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 19l-7-7 7-7M4 12h16"/></svg>
                                        Retour
                                    </button>
                                @endif

                                @if ($indexEtape < count($etapes) - 1 || ($uploadFinal['actif'] ?? false))
                                    <button type="button" data-etape-suivante class="formulaire-public__bouton formulaire-public__bouton--principal">
                                        Continuer
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                                    </button>
                                @else
                                    <button type="submit" class="formulaire-public__bouton formulaire-public__bouton--envoyer" @if ($apercu && $formulaire->status !== 'published') disabled @endif>
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 12 16-8-6 16-2.5-6.5L4 12Z"/></svg>
                                        Envoyer ma demande
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach

                    @if ($uploadFinal['actif'] ?? false)
                        <div data-etape="{{ count($etapes) + 1 }}" style="display:none;">
                            <h2 class="formulaire-public__etape-titre" tabindex="-1">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>
                                {{ $uploadFinal['label'] ?? 'Photos et documents' }}
                            </h2>

                            <div class="formulaire-public__champ">
                                <label for="champ-upload-final" class="formulaire-public__label">{{ $uploadFinal['label'] ?? 'Photos et documents' }}</label>
                                <input
                                    type="file"
                                    id="champ-upload-final"
                                    name="fichiers[upload_final][]"
                                    multiple
                                    class="formulaire-public__fichier @error('fichiers.upload_final') formulaire-public__fichier--erreur @enderror"
                                    @if (! empty($uploadFinal['formats'])) accept="{{ collect(explode(',', $uploadFinal['formats']))->map(fn ($e) => '.'.trim($e))->implode(',') }}" @endif
                                >
                                <span class="formulaire-public__fichier-note">
                                    Formats acceptes : {{ $uploadFinal['formats'] ?? '—' }}
                                    ({{ $uploadFinal['max_mo'] ?? 10 }} Mo max par fichier, {{ $uploadFinal['max_fichiers'] ?? 10 }} fichiers max)
                                </span>
                                @error('fichiers.upload_final')<span class="formulaire-public__erreur" role="alert">{{ $message }}</span>@enderror
                                @error('fichiers.upload_final.*')<span class="formulaire-public__erreur" role="alert">{{ $message }}</span>@enderror
                            </div>

                            <div class="formulaire-public__navigation">
                                <button type="button" data-etape-precedente class="formulaire-public__bouton formulaire-public__bouton--secondaire">
                                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 19l-7-7 7-7M4 12h16"/></svg>
                                    Retour
                                </button>
                                <button type="submit" class="formulaire-public__bouton formulaire-public__bouton--envoyer" @if ($apercu && $formulaire->status !== 'published') disabled @endif>
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 12 16-8-6 16-2.5-6.5L4 12Z"/></svg>
                                    Envoyer ma demande
                                </button>
                            </div>
                        </div>
                    @endif
                </form>
            @endif
        </div>

        <div class="formulaire-public__footer">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
            Donnees traitees de facon confidentielle conformement au RGPD &middot; Biome Constructions &copy; {{ date('Y') }}
            <br>Contact : <a href="mailto:{{ config('site.email') }}">{{ config('site.email') }}</a> &middot; {{ config('site.telephone') }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/formulaires-public.js') }}" defer></script>
@endpush