{{--
    Page Partenaires & Sous-traitants — portage fidele de
    maquettes/Partenaires.dc.html.

    Cette page n'affiche PAS de liste de partenaires (conforme a la maquette).
    Les partenaires sont geres en admin (CRUD Partenaire) et s'affichent dans
    le carrousel dedie de la page d'Accueil.

    Formulaire de candidature partenaire : POST route('leads.partenaire.store')
    (StoreCandidaturePartenaireRequest -> champs societe, personne_contact,
    telephone, email, metier, zone_intervention, message). Erreurs affichees
    via @error + old(), message de succes via session('succes')
    (CandidaturePartenaireController::store()).

    Modale "Etre rappele" : reutilise <x-modale-lead type="rappel" />,
    declenchee par le bloc "Etre contacte" du sticky-actions (variante
    partner) et remplace fidelement la modale "openContact" de la maquette
    d'origine (memes libelles : titre, sous-titre, CTA "Etre rappele").

    Contenu statique de la maquette (pas de champs backend correspondants a
    ce jour, repris tel quel) : "Pourquoi travailler avec Biome ?",
    "Metiers recherches", "Comment se deroule notre collaboration ?" et les
    "benefits" du bloc CTA final.
--}}
{{--
    Ecart corrige (recette pixel-perfect) : la maquette Partenaires.dc.html
    passe active="" au Header (aucun lien de nav du haut mis en evidence,
    contrairement aux autres pages). Le portage initial passait 'partenaires'
    par erreur, ce qui coloriait a tort le lien "Partenaires & Sous-traitants"
    en bleu (--couleur-bleu-principal) alors que la maquette source le laisse
    en --couleur-texte-fonce comme les autres. Aligne ici sur la maquette.
--}}
@extends('layouts.site')

@section('titre', 'Partenaires & Sous-traitants - Biome Constructions')

@section('contenu')
    <x-sticky-actions partner />

    <x-modale-lead type="rappel" />

    @php
        $pourquoi = [
            ['titre' => 'Paiements rapides', 'texte' => 'Des paiements clairs et dans les d&eacute;lais.', 'icone' => 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 7v10M9.5 9.5h3a2 2 0 0 1 0 4h-3'],
            ['titre' => 'Chantiers r&eacute;guliers', 'texte' => 'Un volume de chantiers r&eacute;sidentiels toute l\'ann&eacute;e.', 'icone' => 'M3 11.2 12 4l9 7.2M5.4 10.2V20h13.2v-9.8'],
            ['titre' => 'Projets en Wallonie', 'texte' => 'Des chantiers proches de chez vous.', 'icone' => 'M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'],
            ['titre' => 'Relation durable', 'texte' => 'Nous construisons des partenariats sur le long terme.', 'icone' => 'M12 9.5c1.2-2 4.5-1.6 4.5 1 0 2-2.5 3.5-4.5 5-2-1.5-4.5-3-4.5-5 0-2.6 3.3-3 4.5-1ZM3 21l3-4h4M21 21l-3-4h-4M6 17v-2M18 17v-2'],
        ];

        // Grille des metiers recherches : 7 blocs explicites (icones finales
        // du client, plus de tableau generique), voir section METIERS
        // ci-dessous dans le gabarit.

        $etapes = [
            ['n' => '1', 'texte' => 'Vous nous contactez via le formulaire ou par t&eacute;l&eacute;phone.'],
            ['n' => '2', 'texte' => 'Nous &eacute;changeons sur votre activit&eacute; et vos disponibilit&eacute;s.'],
            ['n' => '3', 'texte' => 'Nous vous proposons un premier chantier adapt&eacute;.'],
            ['n' => '4', 'texte' => 'Si la collaboration est concluante, nous construisons ensemble sur le long terme.'],
        ];

        $benefices = [
            'Partenariat gagnant-gagnant',
            'Respect des engagements',
            'Collaboration simple et efficace',
        ];

        // Formulaire de qualification en 4 ETAPES (voir
        // App\Http\Requests\StoreCandidaturePartenaireRequest et
        // public/js/site.js::initFormulairePartenaireEtapes).
        //
        // Champs de CHAQUE etape : sert a savoir si les erreurs affichees
        // (@error plus bas) concernent bien cette soumission, et surtout a
        // ROUVRIR le formulaire sur la premiere etape en erreur (le visiteur
        // ne doit pas avoir a rechercher lui-meme ce qui coince).
        $champsParEtape = [
            1 => ['metiers', 'effectif', 'statut_professionnel', 'statut_professionnel_autre', 'telephone'],
            2 => ['zones', 'rayon_km', 'disponibilite', 'date_disponibilite'],
            3 => ['preferences_contact', 'travaille_promoteur', 'promoteurs_actuels', 'message'],
            4 => ['prenom', 'nom', 'societe', 'numero_tva', 'email', 'adresse', 'langue'],
        ];
        $champsCandidature = array_merge(...array_values($champsParEtape));
        $afficherErreurs = $errors->hasAny($champsCandidature);
        $afficherSucces = (bool) session('succes') && ! $afficherErreurs;

        // Premiere etape portant une erreur (1 par defaut).
        $etapeErreur = 1;
        foreach ($champsParEtape as $numero => $champs) {
            if ($errors->hasAny($champs)) {
                $etapeErreur = $numero;
                break;
            }
        }

        // Etape FACULTATIVE "photos de realisations" : proposee uniquement
        // juste apres l'envoi du profil (message de succes en flash) ET si la
        // session porte le jeton pose par le controleur. Voir
        // App\Http\Controllers\Leads\CandidaturePartenaireController.
        $peutJoindrePhotos = $afficherSucces && session()->has(
            App\Http\Controllers\Leads\CandidaturePartenaireController::CLE_SESSION_PHOTOS
        );

        // Listes de reference. Source unique : config/site.php (les memes
        // servent a la validation cote serveur).
        $metiersOptions = config('site.partenaire.metiers', []);
        $zonesOptions = config('site.partenaire.zones', []);
        $effectifsOptions = config('site.partenaire.effectifs', []);
        $rayonsOptions = config('site.partenaire.rayons', []);
        $disponibilitesOptions = config('site.partenaire.disponibilites', []);
        $preferencesOptions = config('site.partenaire.preferences_contact', []);
        $statutsProOptions = config('site.partenaire.statuts_professionnels', []);
        $languesOptions = config('site.partenaire.langues', []);
        $photosContraintes = config('site.partenaire.photos', []);

        // Valeurs deja saisies, a repopuler apres une erreur de validation.
        $metiersChoisis = (array) old('metiers', []);
        $zonesChoisies = (array) old('zones', []);
        $preferencesChoisies = (array) old('preferences_contact', []);
        $dispoChoisie = (string) old('disponibilite', 'immediate');
        $promoteurChoisi = (string) old('travaille_promoteur', '1');
        $statutProChoisi = (string) old('statut_professionnel', '');

        // Styles partages des champs (memes valeurs qu'avant, factorisees :
        // 4 etapes multiplient le nombre de champs, les repeter a l'identique
        // rendrait la vue illisible et les ecarts invisibles).
        $bordure = fn (string ...$champs): string => $errors->hasAny($champs) ? '#D64545' : '#DCE3EC';
        $styleChamp = fn (string $champ): string => 'width:100%;box-sizing:border-box;height:50px;border:1.5px solid '.$bordure($champ).';border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;color:var(--couleur-texte-titre-carte);background:#fff;';
        $styleErreur = 'display:block;color:#D64545;font-size:12px;margin-top:5px;';
        $styleLabel = 'display:block;font-family:var(--police-texte);font-size:14px;font-weight:600;color:var(--couleur-texte-titre-carte);margin-bottom:6px;';
        $styleFieldset = fn (string ...$champs): string => 'border:1.5px solid '.$bordure(...$champs).';border-radius:9px;padding:12px 16px 14px;margin:0;min-width:0;';
        $styleLegende = 'padding:0 6px;font-family:var(--police-texte);font-size:14px;font-weight:600;color:var(--couleur-texte-titre-carte);';
        $styleCase = 'display:flex;align-items:center;gap:9px;font-family:var(--police-texte);font-size:14.5px;color:var(--couleur-texte-titre-carte);cursor:pointer;';
        $styleInputCase = 'width:17px;height:17px;flex:none;accent-color:var(--couleur-bleu-principal);cursor:pointer;';
        $styleBoutonPrincipal = 'display:flex;align-items:center;justify-content:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;height:54px;padding:0 26px;font-family:var(--police-titres);font-size:16px;font-weight:600;cursor:pointer;';
        $styleBoutonSecondaire = 'display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--couleur-texte-titre-carte);border:1.5px solid #DCE3EC;border-radius:10px;height:54px;padding:0 22px;font-family:var(--police-titres);font-size:15px;font-weight:600;cursor:pointer;';
    @endphp

    {{-- HERO --}}
    <section style="position:relative;background:var(--couleur-bleu-fonce);overflow:hidden;">
        @php $imgHero = \App\Support\MediaSite::url($contenu->contenu('hero.image')); @endphp
        @if ($imgHero)
            <img class="biome-hero-image-laterale" src="{{ $imgHero }}" alt="Partenaires Biome" style="position:absolute;right:0;top:0;width:50%;height:100%;object-fit:cover;display:block;">
        @else
            <div class="biome-hero-image-laterale" style="position:absolute;right:0;top:0;width:50%;height:100%;display:flex;align-items:center;justify-content:center;background:#16335A;color:#7E92AE;font-size:14px;">Poign&eacute;e de main sur un chantier</div>
        @endif
        <div style="position:absolute;inset:0;background:linear-gradient(90deg,#0E2440 46%,rgba(14,36,64,.55) 66%,rgba(14,36,64,0));"></div>
        <div class="biome-conteneur" style="position:relative;max-width:var(--largeur-conteneur);margin:0 auto;padding:72px 32px;">
            <div style="max-width:560px;">
                <span style="font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#7FB0EE;">Partenaires &amp; sous-traitants</span>
                <h1 class="biome-titre-hero" style="font-family:var(--police-titres);font-size:46px;font-weight:800;color:#fff;margin:10px 0 16px;letter-spacing:-1px;line-height:1.08;">Devenez partenaire de Biome Constructions</h1>
                <p style="font-size:18px;line-height:1.6;color:#C3D2E6;margin:0 0 30px;">Nous collaborons avec des professionnels fiables pour construire des logements de qualit&eacute; partout en Wallonie.</p>
                <a href="#part-form" style="display:inline-flex;align-items:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;font-family:var(--police-titres);font-size:16px;font-weight:600;padding:16px 28px;border-radius:var(--rayon-bouton-grand);text-decoration:none;cursor:pointer;">
                    Devenir partenaire
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
            </div>
        </div>
    </section>

    {{-- FORMULAIRE + POURQUOI --}}
    <section id="part-form" class="biome-conteneur biome-grille-2" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:64px 32px 16px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;">
        <div>
            <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:28px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 6px;letter-spacing:-.5px;">Int&eacute;ress&eacute; par une collaboration ?</h2>
            <p style="font-size:15.5px;color:var(--couleur-texte-fonce);margin:0 0 24px;">Faites-vous conna&icirc;tre, notre &eacute;quipe vous recontacte rapidement.</p>

            @if ($afficherSucces)
                {{-- Bandeau de confirmation --}}
                <div style="background:var(--couleur-fond-survol-bleu-clair);border:1px solid #C9DBF3;border-radius:var(--rayon-carte);padding:{{ $peutJoindrePhotos ? '26px 28px' : '36px' }};display:flex;gap:16px;align-items:{{ $peutJoindrePhotos ? 'flex-start' : 'center' }};flex-direction:{{ $peutJoindrePhotos ? 'row' : 'column' }};text-align:{{ $peutJoindrePhotos ? 'left' : 'center' }};">
                    <span style="width:{{ $peutJoindrePhotos ? '44px' : '60px' }};height:{{ $peutJoindrePhotos ? '44px' : '60px' }};flex:none;border-radius:50%;background:var(--couleur-bleu-principal);display:inline-flex;align-items:center;justify-content:center;">
                        <svg width="{{ $peutJoindrePhotos ? 22 : 30 }}" height="{{ $peutJoindrePhotos ? 22 : 30 }}" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" aria-hidden="true"><path d="m5 12 4 4 10-10"/></svg>
                    </span>
                    <div>
                        <h3 style="font-family:var(--police-titres);font-size:{{ $peutJoindrePhotos ? '18px' : '21px' }};font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 6px;">Profil enregistr&eacute;&nbsp;!</h3>
                        <p style="font-size:15px;color:var(--couleur-texte-fonce);margin:0;">{{ session('succes') }}</p>
                    </div>
                </div>

                @if ($peutJoindrePhotos)
                    {{--
                        ETAPE FACULTATIVE : photos de realisations, proposee
                        APRES l'enregistrement (le profil est deja en base,
                        quoi qu'il arrive ici). Reprend l'argument du plugin
                        WordPress : voir le travail accompli aide l'equipe a
                        qualifier, donc a rappeler plus vite.
                    --}}
                    <form action="{{ route('leads.partenaire.photos') }}" method="POST" enctype="multipart/form-data" style="margin-top:18px;display:flex;flex-direction:column;gap:14px;">
                        @csrf
                        <x-anti-spam />

                        <div style="text-align:center;padding:4px 0 2px;">
                            <h3 style="font-family:var(--police-titres);font-size:19px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Montrez-nous vos r&eacute;alisations</h3>
                            <p style="font-size:14.5px;line-height:1.6;color:var(--couleur-texte-attenue);margin:0;">C'est facultatif, mais voir votre travail nous aide &agrave; vous proposer les bons chantiers.</p>
                        </div>

                        <label style="display:block;border:1.5px dashed {{ $errors->hasAny(['photos', 'photos.*']) ? '#D64545' : '#C9D5E4' }};border-radius:var(--rayon-carte);background:#F7FAFD;padding:26px 20px;text-align:center;cursor:pointer;">
                            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.7" aria-hidden="true" style="display:block;margin:0 auto 10px;"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m4 17 5-4 4 3 3-2 4 3"/></svg>
                            <span style="display:block;font-family:var(--police-titres);font-size:15.5px;font-weight:600;color:var(--couleur-texte-fonce);margin-bottom:4px;">Choisir des photos</span>
                            <span style="display:block;font-size:13px;color:var(--couleur-texte-attenue);">{{-- Mise en majuscules AVANT la jonction : strtoupper() sur le
                                 separateur produirait "&MIDDOT;", entite HTML invalide. --}}
                            {!! implode(' &middot; ', array_map('strtoupper', (array) ($photosContraintes['formats'] ?? []))) !!} &middot; {{ $photosContraintes['max_mo'] ?? 10 }}&nbsp;Mo max par photo &middot; {{ $photosContraintes['max_fichiers'] ?? 12 }}&nbsp;photos max</span>
                            <input type="file" name="photos[]" multiple accept="image/*" style="display:none;" data-champ-photos>
                            <span style="display:block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--couleur-bleu-principal);" data-compteur-photos></span>
                        </label>
                        @error('photos')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        @foreach ($errors->get('photos.*') as $messagesPhoto)
                            <span style="{{ $styleErreur }}">{{ $messagesPhoto[0] }}</span>
                        @endforeach

                        <button type="submit" style="{{ $styleBoutonPrincipal }}">
                            Envoyer mes photos
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                        </button>
                        <a href="{{ route('partenaires') }}" style="text-align:center;font-size:13.5px;color:var(--couleur-texte-attenue);text-decoration:underline;">Passer &mdash; je ferai &ccedil;a plus tard</a>
                    </form>
                @endif
            @else
                {{--
                    Formulaire de qualification en 4 etapes. Navigation, barre
                    de progression et champs conditionnels : voir
                    public/js/site.js::initFormulairePartenaireEtapes().
                    NE PAS RENOMMER les attributs data-* : ils sont le contrat
                    avec ce script.
                    Sans JavaScript, les 4 etapes restent toutes visibles (le
                    script est le seul a les masquer) et le formulaire s'envoie
                    d'un bloc : aucun champ ne devient inaccessible.
                --}}
                <form action="{{ route('leads.partenaire.store') }}" method="POST" novalidate
                      data-formulaire-partenaire-etapes
                      data-etape-erreur="{{ $etapeErreur }}"
                      data-url-partiel="{{ route('leads.partenaire.partiel') }}"
                      style="display:flex;flex-direction:column;gap:16px;">
                    @csrf
                    <x-anti-spam />
                    {{--
                        Id de la candidature creee a la validation de l'etape 1
                        (enregistrement partiel, pose par site.js) : la
                        soumission finale complete la MEME ligne au lieu d'en
                        creer une seconde.
                    --}}
                    <input type="hidden" name="candidature_partielle_id" value="{{ old('candidature_partielle_id') }}">

                    {{--
                        Progression, posee sur un BANDEAU COLORE : c'est la
                        seule surface franchement coloree du parcours, et elle
                        remplace une barre sur fond blanc qui se remarquait peu.
                        Les teintes des libelles viennent des variables
                        --prog-atteinte / --prog-restante definies sur le
                        bandeau (voir site.css) : le script les lit avec un
                        repli, il reste donc utilisable sur fond clair ailleurs.
                        NE PAS RENOMMER les attributs data-*.
                    --}}
                    <div class="biome-form-bandeau">
                        <div style="display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;">
                            <span class="biome-form-bandeau-titre">Votre candidature</span>
                            <span class="biome-form-bandeau-indice"><span data-libelle-etape>&Eacute;tape 1 sur 4</span> &middot; environ 2 minutes</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;gap:6px;margin-bottom:8px;">
                            @foreach (['M&eacute;tiers', 'Zone &amp; dispo', 'Collaboration', 'Identit&eacute;'] as $libelleEtape)
                                <span data-prog-label style="font-family:var(--police-texte);font-size:12px;font-weight:600;color:var(--prog-restante);transition:color .3s ease;">{!! $libelleEtape !!}</span>
                            @endforeach
                        </div>
                        <div style="background:rgba(255,255,255,.22);border-radius:4px;height:5px;overflow:hidden;">
                            <span data-barre-progression style="display:block;background:var(--couleur-texte-clair);border-radius:4px;height:5px;width:25%;transition:width .4s ease;"></span>
                        </div>
                    </div>

                    {{-- ETAPE 1 : metiers et capacite --}}
                    <div data-etape="1" style="display:flex;flex-direction:column;gap:14px;">
                        <div>
                            <fieldset style="{{ $styleFieldset('metiers') }}">
                                <legend style="{{ $styleLegende }}">Votre m&eacute;tier <span style="color:#D64545;">*</span> <span style="font-weight:400;color:#7A8699;">(plusieurs choix possibles)</span></legend>
                                <div class="biome-choix-groupe">
                                    @foreach ($metiersOptions as $option)
                                        <label class="biome-choix">
                                            <input type="checkbox" name="metiers[]" value="{{ $option }}" @checked(in_array($option, $metiersChoisis, true)) data-groupe-obligatoire="metiers">
                                            <span>{{ $option }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </fieldset>
                            @error('metiers')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                            <span data-erreur-groupe="metiers" style="{{ $styleErreur }}display:none;">S&eacute;lectionnez au moins un m&eacute;tier.</span>
                        </div>

                        <div>
                            <label for="part-effectif" style="{{ $styleLabel }}">Nombre d'ouvriers disponibles <span style="color:#D64545;">*</span></label>
                            <select id="part-effectif" name="effectif" required style="{{ $styleChamp('effectif') }}">
                                <option value="">Choisissez&hellip;</option>
                                @foreach ($effectifsOptions as $cle => $libelle)
                                    <option value="{{ $cle }}" @selected(old('effectif') === (string) $cle)>{{ $libelle }}</option>
                                @endforeach
                            </select>
                            @error('effectif')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <fieldset style="{{ $styleFieldset('statut_professionnel') }}">
                                <legend style="{{ $styleLegende }}">Statut professionnel <span style="color:#D64545;">*</span></legend>
                                <div class="biome-choix-grille" style="--colonnes:2;">
                                    @foreach ($statutsProOptions as $cle => $libelle)
                                        <label class="biome-choix">
                                            {{-- 'required' sur un groupe RADIO exige qu'UNE option soit
                                                 cochee (contrairement aux cases a cocher, ou il les exigerait
                                                 toutes) : c'est donc la bonne contrainte native ici, et ce
                                                 groupe n'a volontairement pas de valeur par defaut. --}}
                                            <input type="radio" name="statut_professionnel" value="{{ $cle }}" @checked($statutProChoisi === (string) $cle) required data-radio-statut-pro>
                                            <span>{{ $libelle }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </fieldset>
                            @error('statut_professionnel')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        {{-- Conditionnel : uniquement si "Autre" --}}
                        <div data-si-statut-autre style="display:{{ $statutProChoisi === 'autre' ? 'block' : 'none' }};">
                            <label for="part-statut-autre" style="{{ $styleLabel }}">Pr&eacute;cisez votre statut <span style="color:#D64545;">*</span></label>
                            <input type="text" id="part-statut-autre" name="statut_professionnel_autre" value="{{ old('statut_professionnel_autre') }}" placeholder="Votre situation professionnelle" style="{{ $styleChamp('statut_professionnel_autre') }}">
                            @error('statut_professionnel_autre')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        {{--
                            TELEPHONE demande des l'etape 1, comme sur le
                            formulaire en ligne. C'est ce qui rend
                            l'enregistrement partiel utile : un candidat qui
                            abandonne aux etapes suivantes reste joignable. Il
                            n'est donc PAS redemande a l'etape 4 (un seul champ,
                            une seule valeur, aucun risque de divergence).
                        --}}
                        <div>
                            <label for="part-telephone" style="{{ $styleLabel }}">Votre num&eacute;ro de GSM / t&eacute;l&eacute;phone <span style="color:#D64545;">*</span></label>
                            <span class="biome-champ-prefixe @error('telephone') biome-champ-prefixe--erreur @enderror">
                                <span aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg></span>
                                <input type="tel" id="part-telephone" name="telephone" value="{{ old('telephone') }}" placeholder="+32 4XX XX XX XX" required autocomplete="tel">
                            </span>
                            @error('telephone')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div class="biome-form-actions" style="display:flex;justify-content:flex-end;">
                            <button type="button" data-etape-suivante="2" style="{{ $styleBoutonPrincipal }}">
                                Suivant
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                            </button>
                        </div>
                    </div>

                    {{-- ETAPE 2 : zone et disponibilite --}}
                    <div data-etape="2" style="display:none;flex-direction:column;gap:14px;">
                        <div>
                            <fieldset style="{{ $styleFieldset('zones') }}">
                                <legend style="{{ $styleLegende }}">Zone d'intervention <span style="color:#D64545;">*</span> <span style="font-weight:400;color:#7A8699;">(plusieurs choix possibles)</span></legend>
                                <div class="biome-choix-groupe">
                                    @foreach ($zonesOptions as $option)
                                        <label class="biome-choix">
                                            <input type="checkbox" name="zones[]" value="{{ $option }}" @checked(in_array($option, $zonesChoisies, true)) data-groupe-obligatoire="zones">
                                            <span>{{ $option }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </fieldset>
                            @error('zones')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                            <span data-erreur-groupe="zones" style="{{ $styleErreur }}display:none;">S&eacute;lectionnez au moins une zone d'intervention.</span>
                        </div>

                        <div>
                            <label for="part-rayon" style="{{ $styleLabel }}">Rayon maximum autour de votre si&egrave;ge</label>
                            <select id="part-rayon" name="rayon_km" style="{{ $styleChamp('rayon_km') }}">
                                @foreach ($rayonsOptions as $cle => $libelle)
                                    <option value="{{ $cle }}" @selected((string) old('rayon_km', '80') === (string) $cle)>{{ $libelle }}</option>
                                @endforeach
                            </select>
                            @error('rayon_km')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <fieldset style="{{ $styleFieldset('disponibilite') }}">
                                <legend style="{{ $styleLegende }}">Disponibilit&eacute; <span style="color:#D64545;">*</span></legend>
                                <div class="biome-choix-grille" style="--colonnes:1;">
                                    @foreach ($disponibilitesOptions as $cle => $libelle)
                                        <label class="biome-choix">
                                            <input type="radio" name="disponibilite" value="{{ $cle }}" @checked($dispoChoisie === (string) $cle) data-radio-disponibilite>
                                            <span>{{ $libelle }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </fieldset>
                            @error('disponibilite')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        {{-- Conditionnel : uniquement si "Disponible a partir du..." --}}
                        <div data-si-dispo-date style="display:{{ $dispoChoisie === 'date' ? 'block' : 'none' }};">
                            <label for="part-dispo-date" style="{{ $styleLabel }}">Date de disponibilit&eacute; <span style="color:#D64545;">*</span></label>
                            <input type="date" id="part-dispo-date" name="date_disponibilite" value="{{ old('date_disponibilite') }}" min="{{ now()->toDateString() }}" style="{{ $styleChamp('date_disponibilite') }}">
                            @error('date_disponibilite')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div class="biome-form-actions" style="display:flex;justify-content:space-between;gap:12px;">
                            <button type="button" data-etape-precedente="1" style="{{ $styleBoutonSecondaire }}">
                                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
                                Retour
                            </button>
                            <button type="button" data-etape-suivante="3" style="{{ $styleBoutonPrincipal }}">
                                Suivant
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                            </button>
                        </div>
                    </div>

                    {{-- ETAPE 3 : collaboration --}}
                    <div data-etape="3" style="display:none;flex-direction:column;gap:14px;">
                        <div>
                            <fieldset style="{{ $styleFieldset('preferences_contact') }}">
                                <legend style="{{ $styleLegende }}">Comment pr&eacute;f&eacute;rez-vous &ecirc;tre contact&eacute; ? <span style="color:#D64545;">*</span> <span style="font-weight:400;color:#7A8699;">(plusieurs choix possibles)</span></legend>
                                <div class="biome-choix-groupe">
                                    @foreach ($preferencesOptions as $cle => $libelle)
                                        <label class="biome-choix">
                                            <input type="checkbox" name="preferences_contact[]" value="{{ $cle }}" @checked(in_array((string) $cle, $preferencesChoisies, true)) data-groupe-obligatoire="preferences_contact">
                                            <span>{{ $libelle }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </fieldset>
                            @error('preferences_contact')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                            <span data-erreur-groupe="preferences_contact" style="{{ $styleErreur }}display:none;">Indiquez au moins un moyen de vous contacter.</span>
                        </div>

                        <div>
                            <fieldset style="{{ $styleFieldset('travaille_promoteur') }}">
                                <legend style="{{ $styleLegende }}">Travaillez-vous d&eacute;j&agrave; pour d'autres promoteurs ?</legend>
                                <div class="biome-choix-grille" style="--colonnes:2;max-width:260px;">
                                    <label class="biome-choix">
                                        <input type="radio" name="travaille_promoteur" value="1" @checked($promoteurChoisi === '1') data-radio-promoteur>
                                        <span>Oui</span>
                                    </label>
                                    <label class="biome-choix">
                                        <input type="radio" name="travaille_promoteur" value="0" @checked($promoteurChoisi === '0') data-radio-promoteur>
                                        <span>Non</span>
                                    </label>
                                </div>
                            </fieldset>
                        </div>

                        {{-- Conditionnel : uniquement si "Oui" --}}
                        <div data-si-promoteur-oui style="display:{{ $promoteurChoisi === '0' ? 'none' : 'block' }};">
                            <label for="part-promoteurs" style="{{ $styleLabel }}">Lesquels ? <span style="font-weight:400;color:#7A8699;">(pour information uniquement)</span></label>
                            <input type="text" id="part-promoteurs" name="promoteurs_actuels" value="{{ old('promoteurs_actuels') }}" style="{{ $styleChamp('promoteurs_actuels') }}">
                            @error('promoteurs_actuels')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label for="part-message" style="{{ $styleLabel }}">Remarques libres</label>
                            <textarea id="part-message" name="message" rows="4" placeholder="Sp&eacute;cialit&eacute;s, contraintes, &eacute;quipements, r&eacute;f&eacute;rences&hellip;" style="width:100%;box-sizing:border-box;min-height:100px;border:1.5px solid {{ $bordure('message') }};border-radius:9px;padding:12px 14px;font-family:var(--police-texte);font-size:15px;outline:none;resize:vertical;">{{ old('message') }}</textarea>
                            @error('message')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div class="biome-form-actions" style="display:flex;justify-content:space-between;gap:12px;">
                            <button type="button" data-etape-precedente="2" style="{{ $styleBoutonSecondaire }}">
                                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
                                Retour
                            </button>
                            <button type="button" data-etape-suivante="4" style="{{ $styleBoutonPrincipal }}">
                                Suivant
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                            </button>
                        </div>
                    </div>

                    {{-- ETAPE 4 : identite --}}
                    <div data-etape="4" style="display:none;flex-direction:column;gap:14px;">
                        <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                            <div>
                                <label for="part-prenom" style="{{ $styleLabel }}">Pr&eacute;nom <span style="color:#D64545;">*</span></label>
                                <input type="text" id="part-prenom" name="prenom" value="{{ old('prenom') }}" required autocomplete="given-name" style="{{ $styleChamp('prenom') }}">
                                @error('prenom')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                            </div>
                            <div>
                                <label for="part-nom" style="{{ $styleLabel }}">Nom <span style="color:#D64545;">*</span></label>
                                <input type="text" id="part-nom" name="nom" value="{{ old('nom') }}" required autocomplete="family-name" style="{{ $styleChamp('nom') }}">
                                @error('nom')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                            </div>
                        </div>

                        <div>
                            <label for="part-societe" style="{{ $styleLabel }}">Nom de la soci&eacute;t&eacute; <span style="font-weight:400;color:#7A8699;">(facultatif)</span></label>
                            <input type="text" id="part-societe" name="societe" value="{{ old('societe') }}" autocomplete="organization" style="{{ $styleChamp('societe') }}">
                            @error('societe')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label for="part-tva" style="{{ $styleLabel }}">N&deg; de TVA / BCE <span style="font-weight:400;color:#7A8699;">(facultatif)</span></label>
                            <input type="text" id="part-tva" name="numero_tva" value="{{ old('numero_tva') }}" placeholder="BE 0123.456.789" autocomplete="off" style="{{ $styleChamp('numero_tva') }}">
                            @error('numero_tva')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label for="part-email" style="{{ $styleLabel }}">E-mail <span style="font-weight:400;color:#7A8699;">(facultatif)</span></label>
                            <input type="email" id="part-email" name="email" value="{{ old('email') }}" autocomplete="email" style="{{ $styleChamp('email') }}">
                            @error('email')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label for="part-adresse" style="{{ $styleLabel }}">Adresse du si&egrave;ge <span style="font-weight:400;color:#7A8699;">(facultatif)</span></label>
                            <input type="text" id="part-adresse" name="adresse" value="{{ old('adresse') }}" autocomplete="street-address" style="{{ $styleChamp('adresse') }}">
                            @error('adresse')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label for="part-langue" style="{{ $styleLabel }}">Langue de travail <span style="color:#D64545;">*</span></label>
                            <select id="part-langue" name="langue" required style="{{ $styleChamp('langue') }}">
                                <option value="">Choisissez&hellip;</option>
                                @foreach ($languesOptions as $cle => $libelle)
                                    <option value="{{ $cle }}" @selected(old('langue') === (string) $cle)>{{ $libelle }}</option>
                                @endforeach
                            </select>
                            @error('langue')<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                        </div>

                        <div class="biome-form-actions" style="display:flex;justify-content:space-between;gap:12px;">
                            <button type="button" data-etape-precedente="3" style="{{ $styleBoutonSecondaire }}">
                                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
                                Retour
                            </button>
                            <button type="submit" style="{{ $styleBoutonPrincipal }}">
                                Envoyer mon profil
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4 10-10"/></svg>
                            </button>
                        </div>
                    </div>

                    <div style="display:flex;align-items:center;gap:9px;color:var(--couleur-texte-fonce);font-size:13px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2" 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>
                        Vos informations sont confidentielles et ne seront jamais partag&eacute;es.
                    </div>
                </form>
            @endif
        </div>

        <div>
            <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:24px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 24px;letter-spacing:-.5px;">Pourquoi travailler avec Biome ?</h2>
            <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:18px;">
                @foreach ($pourquoi as $w)
                    <div style="background:#fff;border:1px solid var(--couleur-bordure-carte);border-radius:var(--rayon-carte);padding:24px;box-shadow:var(--ombre-carte);">
                        <span style="width:48px;height:48px;border-radius:12px;background:var(--couleur-fond-survol-bleu-clair);display:flex;align-items:center;justify-content:center;margin-bottom:14px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.9" aria-hidden="true"><path d="{{ $w['icone'] }}"/></svg>
                        </span>
                        <h3 style="font-family:var(--police-titres);font-size:16px;font-weight:600;color:var(--couleur-texte-fonce);margin:0 0 6px;">{!! $w['titre'] !!}</h3>
                        <p style="font-size:13.5px;line-height:1.5;color:var(--couleur-texte-fonce);margin:0;">{!! $w['texte'] !!}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- METIERS RECHERCHES --}}
    <section style="background:#F6F9FC;border-top:1px solid #EBF0F6;border-bottom:1px solid #EBF0F6;margin-top:48px;">
        <div class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:54px 32px;text-align:center;">
            <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:28px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 36px;letter-spacing:-.5px;">M&eacute;tiers recherch&eacute;s</h2>
            <div class="biome-grille-7" style="display:grid;grid-template-columns:repeat(7,1fr);gap:14px;">
                {{-- Macons --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="14" rx="1"/><path d="M3.5 12h17M10 5v7M16 5v7M7 12v7M13 12v7"/></svg>
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">Ma&ccedil;ons</span>
                </div>
                {{-- Couvreurs --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <svg width="32" height="32" viewBox="0 0 64 44" fill="none" aria-hidden="true"><path d="M4 32 36 10 62 32" stroke="var(--couleur-bleu-principal)" stroke-width="5.6" stroke-linejoin="round"/><path d="M14.5 11.5 H21.5 V18.4 L14.5 24.2 Z" fill="var(--couleur-bleu-principal)"/></svg>
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">Couvreurs</span>
                </div>
                {{-- Electriciens --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4.5 13H11l-1 9 8.5-11H12l1-9Z"/></svg>
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">&Eacute;lectriciens</span>
                </div>
                {{-- Plafonneurs : logo client, PNG --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <img src="{{ asset('images/icones/icone-plafonneur.png') }}" alt="Plafonneurs" style="width:40px;height:auto;display:block;">
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">Plafonneurs</span>
                </div>
                {{-- Menuisiers --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="3" width="14" height="18" rx="1.2"/><rect x="6.6" y="4.6" width="10.8" height="14.8" rx="0.6"/><path d="M12 4.6v14.8M6.6 12h10.8"/><path d="M8 6.4l1.6-1.4M8.2 8.4l2.2-2"/><path d="M13.2 6.4l1.6-1.4M13.4 8.4l2.2-2"/><path d="M8 13.8l1.6-1.4M8.2 15.8l2.2-2"/><path d="M13.2 13.8l1.6-1.4M13.4 15.8l2.2-2"/></svg>
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">Menuisiers</span>
                </div>
                {{-- Terrassiers : logo client, PNG --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <img src="{{ asset('images/icones/icone-terrassier.png') }}" alt="Terrassiers" style="width:40px;height:auto;display:block;">
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">Terrassiers</span>
                </div>
                {{-- Architectes --}}
                <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                    <span style="width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid var(--couleur-bordure-header);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.8"/><path d="M11 6.5 5 20M13 6.5 19 20M9 15h6"/></svg>
                    </span>
                    <span style="font-family:var(--police-titres);font-size:12.5px;font-weight:600;color:var(--couleur-texte-fonce);">Architectes</span>
                </div>
            </div>
        </div>
    </section>

    {{-- PROCESS --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur-etroit);margin:0 auto;padding:68px 32px 16px;text-align:center;">
        <h2 class="biome-titre-section" style="font-family:var(--police-titres);font-size:30px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 50px;letter-spacing:-.5px;">Comment se d&eacute;roule notre collaboration ?</h2>
        <div class="biome-grille-4" style="position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;">
            <div class="biome-masquer-tablette-mobile" style="position:absolute;top:26px;left:12%;right:12%;height:2px;background:#D6E0EC;"></div>
            @foreach ($etapes as $etape)
                <div style="position:relative;display:flex;flex-direction:column;align-items:center;">
                    <span style="width:54px;height:54px;border-radius:50%;background:var(--couleur-bleu-principal);color:#fff;font-family:var(--police-titres);font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(28,91,184,.32);">{{ $etape['n'] }}</span>
                    <p style="font-size:14.5px;line-height:1.55;color:var(--couleur-texte-fonce);margin:18px 0 0;max-width:200px;">{!! $etape['texte'] !!}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- CTA FINAL --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:48px 32px 64px;">
        <div style="background:var(--couleur-fond-survol-bleu-clair);border-radius:var(--rayon-carte-tres-grande);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:22px;">
                <span style="width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 20px rgba(18,42,74,.08);">
                    <img src="{{ asset('images/icones/icone-partenariat.png') }}" alt="Partenariat" style="width:36px;height:auto;display:block;">
                </span>
                <div>
                    <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:23px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 14px;letter-spacing:-.4px;line-height:1.25;">Vous cherchez un partenaire s&eacute;rieux et organis&eacute; ?<br>Construisons ensemble des projets de qualit&eacute;.</h2>
                    <a href="#part-form" style="display:inline-flex;align-items:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;font-family:var(--police-titres);font-size:15px;font-weight:600;padding:13px 26px;border-radius:var(--rayon-bouton);text-decoration:none;cursor:pointer;">
                        Devenir partenaire
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                    </a>
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:14px;">
                @foreach ($benefices as $benefice)
                    <div style="display:flex;align-items:center;gap:11px;font-size:15px;color:var(--couleur-texte-fonce);font-weight:600;">
                        <span style="width:24px;height:24px;border-radius:50%;border:1.5px solid var(--couleur-bleu-principal);display:flex;align-items:center;justify-content:center;flex:none;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2.4" aria-hidden="true"><path d="m5 12 4 4 10-10"/></svg>
                        </span>
                        {{ $benefice }}
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection