{{--
    Page Acheter — portage fidele de maquettes/Acheter.dc.html.

    Donnees fournies par AcheterController@index :
    - $biens          : biens filtres/tries (deja calcules par le CRM, voir
                         CrmClientInterface::biens())
    - $nombreBiens     : count($biens)
    - $communes        : referentiel des 262 communes wallonnes, indexe par
                          cle normalisee (cle => ['nom','cle','province','d'],
                          voir resources/data/communes-wallonie.php)
    - $comptesParCommune : nombre de biens par commune sur la liste COMPLETE
                          (non filtree), comme les compteurs de la carte de
                          la maquette qui ne dependent pas des filtres actifs
    - $provinces       : cle => libelle (5 provinces wallonnes, utilise pour
                          grouper la liste de communes et pour le filtre
                          provinces[] conserve en compatibilite, voir
                          AcheterController)
    - $types           : cle => libelle (select "Type de bien")
    - $disponibilites  : cle => libelle (select "Disponibilite")
    - $tris            : cle => libelle (select "Trier par")
    - $filtres         : valeurs normalisees pour pre-remplir le formulaire
                          (localite, budget_max, type, chambres_min,
                          disponibilite, provinces[], communes[], tri)

    Filtres en GET vers route('acheter') : rechargement serveur complet
    (pas d'AJAX), conforme a la consigne du lot.

    NEWSLETTER : dans la maquette (bloc "NEWSLETTER" de Acheter.dc.html),
    le champ email + bouton "Recevoir les nouveautes" ne sont relies a aucun
    on-submit dans DCLogic (purement visuel, aucune action reelle dans la
    source). Aucun endpoint backend d'inscription newsletter n'existe dans ce
    lot (StoreMessageContactRequest exige telephone + type_besoin, semantique
    differente). Le bloc est donc reproduit a l'identique visuellement mais
    reste non fonctionnel, fidele au comportement de la maquette source.
    A signaler si une vraie inscription newsletter est souhaitee.
--}}
@extends('layouts.site', ['active' => 'acheter'])

@section('titre', 'Acheter - Biome Constructions')

@php
    $localite = $filtres['localite'];
    $budgetMax = (int) $filtres['budget_max'];
    $typeActif = $filtres['type'];
    $chambresMin = (int) $filtres['chambres_min'];
    $dispoActive = $filtres['disponibilite'];
    $provincesActives = $filtres['provinces'];
    $communesActives = $filtres['communes'];
    $triActif = $filtres['tri'];

    $plafondBudget = 1000000;

    $hasFiltres = $localite !== ''
        || $provincesActives !== []
        || $communesActives !== []
        || $budgetMax < $plafondBudget
        || $typeActif !== 'all'
        || $chambresMin > 0
        || $dispoActive !== 'all';

    $fmtEuro = static fn (int $n): string => number_format($n, 0, ',', '.').' €';
    $budgetLabel = $budgetMax >= $plafondBudget ? '1.000.000 € et +' : $fmtEuro($budgetMax);

    $countLabel = $nombreBiens.' '.($nombreBiens > 1 ? 'biens' : 'bien');

    // Liste ACTIONNABLE : uniquement les communes ayant au moins un bien
    // (les 262 completes restent dans le SVG plus bas), groupees par
    // province (cle province => [cle commune => nom commune]), triees par
    // ordre alphabetique du nom dans chaque groupe. Les 262 communes ne sont
    // jamais toutes listees ici (pas de sens commercial).
    $communesParProvince = [];
    foreach ($communes as $cleCommune => $commune) {
        if (($comptesParCommune[$cleCommune] ?? 0) < 1) {
            continue;
        }
        $communesParProvince[$commune['province']][$cleCommune] = $commune['nom'];
    }
    foreach ($communesParProvince as $cleProvince => $liste) {
        asort($communesParProvince[$cleProvince]);
    }
@endphp

@section('contenu')
    <x-sticky-actions callback hide-biens />

    {{-- MODALES : "etre rappele" (generique, sans bien) et "planifier une
         visite" par bien (une modale par bien present dans $biens, pour que
         le bouton "Planifier" de chaque PropertyCard cible la bonne, via
         data-ouvre-modale + data-bien-id cote JS). --}}
    <x-modale-lead type="rappel" />
    @foreach ($biens as $bien)
        <x-modale-lead type="visite" :bien-id="$bien['id']" :bien-titre="$bien['titre'] ?? ($bien['localite'].' - Lot '.$bien['lot'])" />
    @endforeach

    {{-- HERO --}}
    <section style="position:relative;background:linear-gradient(180deg,#F4F8FD,#EAF1FA);overflow:hidden;">
        @php $imgHero = \App\Support\MediaSite::url($contenu->contenu('hero.image')); @endphp
        @if ($imgHero)
            <img src="{{ $imgHero }}" alt="" aria-hidden="true" style="position:absolute;right:0;top:0;width:46%;height:100%;object-fit:cover;display:block;">
        @else
            <div style="position:absolute;right:0;top:0;width:46%;height:100%;display:flex;align-items:center;justify-content:center;opacity:.5;background:#DCE8F7;color:#5C6B7E;font-size:13px;">Int&eacute;rieur lumineux</div>
        @endif
        <div style="position:absolute;inset:0;background:linear-gradient(90deg,#EAF1FA 50%,rgba(234,241,250,.4) 78%,rgba(234,241,250,0));"></div>
        <div class="biome-conteneur" style="position:relative;max-width:var(--largeur-conteneur);margin:0 auto;padding:56px 32px 40px;">
            <h1 class="biome-titre-hero" style="font-family:var(--police-titres);font-size:46px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 12px;letter-spacing:-1px;">Nos biens &agrave; vendre</h1>
            <p style="font-size:20px;color:#3D5573;margin:0 0 6px;font-weight:600;">{{ $countLabel }} disponibles</p>
            <p style="font-size:16px;color:#52617A;margin:0;">Trouvez le bien qui correspond &agrave; votre projet de vie.</p>
        </div>
    </section>

    {{--
        BOUTON "FILTRER" MOBILE/TABLETTE (<=1024px, decision client 2026-07-03).
        Le formulaire de filtres desktop (ci-dessous) est repris tel quel et
        transforme en tiroir plein ecran sous 1024px (classe
        .biome-filtres-tiroir-mobile, voir mobile.css) : pas de duplication du
        formulaire, un seul DOM, un seul submit. Ce bouton (.biome-visible-mobile,
        masque en desktop) pilote l'ouverture via initTiroirFiltres() (site.js),
        meme pattern que le tiroir du menu burger (data-ouvre-*/data-tiroir-*).
    --}}
    <section class="biome-visible-mobile" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:0 16px;">
        <button
            type="button"
            data-ouvre-tiroir-filtres
            aria-expanded="false"
            aria-controls="biome-tiroir-filtres"
            style="width:100%;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin-top:-20px;position:relative;z-index:5;background:var(--couleur-texte-fonce);color:#fff;border:none;border-radius:9px;padding:12px 16px;font-family:var(--police-titres);font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 14px 40px rgba(18,42,74,.1);"
        >
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2ZM9 4v14M15 6v14"/></svg>
            Filtrer
            @if ($hasFiltres)
                <span style="background:var(--couleur-bleu-principal);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:2px 8px;">actifs</span>
            @endif
        </button>
    </section>

    {{-- FILTER BAR --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:0 32px;">
        <form
            id="biome-tiroir-filtres"
            data-tiroir-filtres
            action="{{ route('acheter') }}"
            method="GET"
            class="biome-filtres-tiroir-mobile"
            style="background:#fff;border:1px solid var(--couleur-bordure-header);border-radius:16px;box-shadow:0 14px 40px rgba(18,42,74,.1);padding:22px;margin-top:-28px;position:relative;z-index:5;"
        >
            {{--
                Entete du tiroir (mobile/tablette uniquement, .biome-visible-mobile) :
                titre + croix de fermeture. N'existe pas en desktop (aucun sens dans
                la barre de filtres horizontale d'origine).
            --}}
            <div class="biome-visible-mobile" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
                <h2 style="font-family:var(--police-titres);font-size:18px;font-weight:700;color:var(--couleur-texte-fonce);margin:0;">Filtrer les biens</h2>
                <button
                    type="button"
                    data-ferme-tiroir-filtres
                    aria-label="Fermer les filtres"
                    style="display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0;"
                >
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-texte-fonce)" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
                </button>
            </div>
            <div class="biome-grille-5" style="display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr 1fr auto;gap:16px;align-items:end;">
                <div>
                    <label for="filtre-loc" style="display:block;font-size:12px;font-weight:700;color:#7A8699;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;">Localisation</label>
                    <div style="display:flex;align-items:center;gap:8px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;height:46px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2" aria-hidden="true"><path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z"/><circle cx="12" cy="10" r="2.2"/></svg>
                        <input type="text" id="filtre-loc" name="loc" value="{{ $localite }}" placeholder="Ville, commune, code postal" style="border:none;outline:none;font-family:var(--police-texte);font-size:14.5px;color:var(--couleur-texte-titre-carte);width:100%;background:transparent;">
                        {{-- Bouton toggle carte SVG : masque sous 1024px, le panneau
                             (liste de communes a cocher) est toujours visible dans
                             le tiroir mobile, voir plus bas. --}}
                        <button type="button" data-toggle-carte-communes class="biome-masquer-tablette-mobile" aria-expanded="{{ $communesActives !== [] ? 'true' : 'false' }}" aria-controls="panneau-carte-communes" title="Choisir sur la carte" style="border:none;background:none;cursor:pointer;display:flex;align-items:center;color:{{ $communesActives !== [] ? 'var(--couleur-bleu-principal)' : '#9AA6B6' }};padding:0;flex:none;">
                            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2ZM9 4v14M15 6v14"/></svg>
                        </button>
                    </div>
                </div>
                <div>
                    <label for="filtre-budget" style="display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:700;color:#7A8699;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;">Budget max.<span data-budget-affichage style="color:var(--couleur-bleu-principal);font-size:13px;text-transform:none;letter-spacing:0;">{{ $budgetLabel }}</span></label>
                    <div style="height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box;">
                        <input type="range" data-curseur-budget id="filtre-budget" name="budget" min="0" max="{{ $plafondBudget }}" step="25000" value="{{ $budgetMax }}" style="width:100%;accent-color:var(--couleur-bleu-principal);cursor:pointer;">
                    </div>
                </div>
                <div>
                    <label for="filtre-type" style="display:block;font-size:12px;font-weight:700;color:#7A8699;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;">Type de bien</label>
                    <select id="filtre-type" name="type" style="width:100%;height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;font-family:var(--police-texte);font-size:14.5px;color:var(--couleur-texte-titre-carte);background:#fff;cursor:pointer;">
                        @foreach ($types as $cle => $libelle)
                            <option value="{{ $cle }}" @selected($typeActif === $cle)>{{ $libelle }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="filtre-beds" style="display:block;font-size:12px;font-weight:700;color:#7A8699;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;">Chambres</label>
                    <select id="filtre-beds" name="beds" style="width:100%;height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;font-family:var(--police-texte);font-size:14.5px;color:var(--couleur-texte-titre-carte);background:#fff;cursor:pointer;">
                        <option value="0" @selected($chambresMin === 0)>Toutes</option>
                        <option value="2" @selected($chambresMin === 2)>2+</option>
                        <option value="3" @selected($chambresMin === 3)>3+</option>
                        <option value="4" @selected($chambresMin === 4)>4+</option>
                    </select>
                </div>
                <div>
                    <label for="filtre-dispo" style="display:block;font-size:12px;font-weight:700;color:#7A8699;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;">Disponibilit&eacute;</label>
                    <select id="filtre-dispo" name="dispo" style="width:100%;height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;font-family:var(--police-texte);font-size:14.5px;color:var(--couleur-texte-titre-carte);background:#fff;cursor:pointer;">
                        @foreach ($disponibilites as $cle => $libelle)
                            <option value="{{ $cle }}" @selected($dispoActive === $cle)>{{ $libelle }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="biome-masquer-tablette-mobile" style="height:46px;display:inline-flex;align-items:center;gap:8px;background:var(--couleur-texte-fonce);color:#fff;border:none;border-radius:9px;padding:0 22px;font-family:var(--police-titres);font-size:14.5px;font-weight:600;cursor:pointer;">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                    Rechercher
                </button>
            </div>

            {{--
                Bouton "Voir les X biens" — mobile/tablette uniquement
                (.biome-visible-mobile). Remplace le bouton "Rechercher" desktop
                (masque ci-dessus) : meme submit, meme formulaire, juste un
                libelle et une position (pied de tiroir plein ecran) adaptes.
            --}}
            <button type="submit" class="biome-visible-mobile" style="width:100%;margin-top:18px;height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:9px;padding:0 22px;font-family:var(--police-titres);font-size:15px;font-weight:600;cursor:pointer;">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                Voir les {{ $nombreBiens }} {{ $nombreBiens > 1 ? 'biens' : 'bien' }}
            </button>

            @if ($communesActives !== [])
                <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;">
                    <span style="font-size:12.5px;color:#7A8699;font-weight:700;">Communes s&eacute;lectionn&eacute;es :</span>
                    @foreach ($communesActives as $cleCommune)
                        <span style="display:inline-flex;align-items:center;gap:7px;background:var(--couleur-fond-survol-bleu-clair);color:var(--couleur-bleu-principal);border-radius:20px;padding:6px 12px;font-size:13px;font-weight:700;">{{ $communes[$cleCommune]['nom'] ?? $cleCommune }}</span>
                    @endforeach
                    <a href="{{ route('acheter', array_diff_key(request()->query(), ['communes' => null])) }}" style="font-family:var(--police-texte);font-size:12.5px;font-weight:600;color:#7A8699;text-decoration:underline;">Tout effacer</a>
                </div>
            @endif

            {{--
                CARTE DES COMMUNES : repliee par defaut (desktop), ouverte via JS
                (data-toggle-carte-communes). Remplace l'ancienne carte par
                province (5 formes abstraites) par une vraie carte de Wallonie
                (262 communes, resources/data/communes-wallonie.php, viewBox
                1000x572 : NE PAS MODIFIER les traces "d" sans validation, voir
                CLAUDE.md). Une seule case a cocher reelle par commune : celles
                ayant au moins un bien vivent dans la liste actionnable
                ci-dessous (visible, groupee par province) ; les autres (0 bien)
                sont des cases "muettes" (bloc cache juste apres la liste). Le
                SVG et les boutons-communes pilotent tous les deux la meme case
                via data-commune, pour rester synchronises (voir
                initCarteCommunes() dans site.js). Submit reel au changement
                (pas d'AJAX), conforme a la consigne du lot.

                MOBILE/TABLETTE (<=1024px, decision client 2026-07-03) : le SVG a
                des cibles trop petites au doigt (262 formes). Le SVG est masque
                (.biome-masquer-tablette-mobile) et le panneau est TOUJOURS visible
                dans le tiroir de filtres (.biome-panneau-communes-mobile force
                son display, independamment du data-panneau-carte-communes
                desktop qui reste gere par JS/toggle) : seule la liste de cases a
                cocher (deja presente dans le DOM pour le desktop, reutilisee telle
                quelle) reste utilisable, en 1 colonne, scrollable.
            --}}
            <div data-panneau-carte-communes id="panneau-carte-communes" class="biome-panneau-communes-mobile" style="display:none;margin-top:18px;border-top:1px solid var(--couleur-bordure-separateur);padding-top:20px;grid-template-columns:auto 1fr;gap:32px;align-items:center;">
                <svg viewBox="0 0 1000 572" class="biome-masquer-tablette-mobile" role="img" aria-label="Carte des communes de Wallonie" style="width:480px;max-width:100%;height:auto;">
                    @foreach ($communes as $cleCommune => $commune)
                        @php
                            // L'etat "selectionnee" est pilote par une classe CSS
                            // (surbrillance en direct sans rechargement, voir site.js /
                            // site.css) : le fill de base reste bleu (commune avec biens)
                            // ou gris, la classe --selectionnee le passe en bleu fonce
                            // par-dessus. La selection ne s'applique qu'au clic sur
                            // "Rechercher".
                            $selectionnee = in_array($cleCommune, $communesActives, true);
                            $compte = $comptesParCommune[$cleCommune] ?? 0;
                            $aDesBiens = $compte > 0;
                            $remplissage = $aDesBiens ? 'var(--couleur-bleu-principal)' : '#E9EEF4';
                            $classesForme = trim(($aDesBiens ? 'biome-commune-forme--avec-biens ' : '').($selectionnee ? 'biome-commune-forme--selectionnee' : ''));
                            $libelleCompte = $compte > 0 ? ($compte.' '.($compte > 1 ? 'biens' : 'bien')) : 'aucun bien';
                        @endphp
                        <path
                            data-commune-forme="{{ $cleCommune }}"
                            data-nom="{{ $commune['nom'] }}"
                            data-prov="{{ $commune['province'] }}"
                            @if ($classesForme !== '') class="{{ $classesForme }}" @endif
                            d="{{ $commune['d'] }}"
                            fill="{{ $remplissage }}"
                            stroke="#ffffff"
                            stroke-width="0.6"
                            style="cursor:pointer;"
                        ><title>{{ $commune['nom'] }} — {{ $libelleCompte }}</title></path>
                    @endforeach
                </svg>
                <div>
                    <h3 style="font-family:var(--police-titres);font-size:18px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 6px;">S&eacute;lectionnez une ou plusieurs communes</h3>
                    <p class="biome-masquer-tablette-mobile" style="font-size:14px;color:#52617A;margin:0 0 16px;line-height:1.5;">Selectionnez une ou plusieurs communes sur la carte ou dans la liste, puis appuyez sur Rechercher.</p>
                    <div style="max-height:360px;overflow-y:auto;padding-right:6px;">
                        @if ($communesParProvince === [])
                            <p style="font-size:13.5px;color:#7A8699;margin:0;">Aucun bien disponible actuellement.</p>
                        @endif
                        {{-- Ordre canonique des provinces (celui de $provinces,
                             identique a l'ancienne carte), independant de l'ordre
                             du referentiel des 262 communes. --}}
                        @foreach ($provinces as $cleProvince => $libelleProvince)
                            @continue(empty($communesParProvince[$cleProvince]))
                            @php
                                $listeCommunes = $communesParProvince[$cleProvince];
                                $sousTotal = array_sum(array_intersect_key($comptesParCommune, $listeCommunes));
                            @endphp
                            <div style="display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px;">
                                <span style="font-family:var(--police-titres);font-size:12px;font-weight:700;color:#7A8699;text-transform:uppercase;letter-spacing:.5px;">{{ $libelleProvince }}</span>
                                <span style="font-size:12px;color:#9AA6B6;font-weight:600;">{{ $sousTotal }} {{ $sousTotal > 1 ? 'biens' : 'bien' }}</span>
                            </div>
                            <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:9px;">
                                @foreach ($listeCommunes as $cleCommune => $nomCommune)
                                    @php
                                        $selectionnee = in_array($cleCommune, $communesActives, true);
                                        $compte = $comptesParCommune[$cleCommune] ?? 0;
                                        $libelleCompte = $compte.' '.($compte > 1 ? 'biens' : 'bien');
                                        $couleurPoint = $selectionnee ? 'var(--couleur-bleu-fonce)' : 'var(--couleur-bleu-principal)';
                                    @endphp
                                    <label data-commune-bouton="{{ $cleCommune }}" @class(['biome-commune-bouton', 'biome-commune-bouton--selectionnee' => $selectionnee]) style="display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:9px;padding:10px 13px;cursor:pointer;font-family:var(--police-texte);font-size:13.5px;font-weight:700;color:var(--couleur-texte-fonce);">
                                        <input type="checkbox" data-commune-case name="communes[]" value="{{ $cleCommune }}" @checked($selectionnee) style="width:16px;height:16px;flex:none;">
                                        <span style="display:flex;align-items:center;gap:8px;flex:1;"><span style="width:11px;height:11px;border-radius:3px;background:{{ $couleurPoint }};flex:none;"></span>{{ $nomCommune }}</span>
                                        <span style="font-size:12px;color:#7A8699;font-weight:600;white-space:nowrap;">{{ $libelleCompte }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @endforeach
                    </div>

                    {{-- Cases a cocher "muettes" pour les communes SANS bien :
                         n'apparaissent pas dans la liste actionnable ci-dessus
                         (aucun interet a lister une commune sans bien), mais
                         restent cliquables depuis la carte SVG (qui couvre les
                         262 communes) : ce bloc garantit qu'un input reel
                         existe pour chacune d'elles, pour que le clic sur la
                         carte reste synchronisable et soumette bien
                         "communes[]", meme sans bien correspondant (voir
                         consigne du lot : "autorise meme si 0 bien"). --}}
                    <div style="display:none;">
                        @foreach ($communes as $cleCommune => $commune)
                            @continue(($comptesParCommune[$cleCommune] ?? 0) > 0)
                            <input type="checkbox" data-commune-case name="communes[]" value="{{ $cleCommune }}" @checked(in_array($cleCommune, $communesActives, true))>
                        @endforeach
                    </div>
                </div>
            </div>
        </form>
    </section>

    {{-- TOOLBAR --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:28px 32px 0;">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:14px;">
                <span style="font-family:var(--police-titres);font-size:17px;font-weight:700;color:var(--couleur-texte-fonce);">{{ $countLabel }} trouv&eacute;s</span>
                @if ($hasFiltres)
                    <a href="{{ route('acheter') }}" style="font-family:var(--police-texte);font-size:13.5px;font-weight:600;color:var(--couleur-bleu-principal);text-decoration:underline;">Effacer les filtres</a>
                @endif
            </div>
            <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                {{-- Bascule "Mes favoris" : filtre la liste sur les biens marques
                     d'un coeur, memorises cote navigateur (localStorage). Le clic
                     recharge la page avec ?favoris=... (ou le retire), gere en JS
                     (data-toggle-favoris). Visible aussi en mobile/tablette. --}}
                <button type="button" data-toggle-favoris aria-pressed="{{ $favorisActif ? 'true' : 'false' }}"
                    style="display:inline-flex;align-items:center;gap:8px;height:40px;border-radius:9px;padding:0 15px;font-family:var(--police-texte);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--transition-standard),color var(--transition-standard),border-color var(--transition-standard);{{ $favorisActif ? 'background:var(--couleur-bleu-principal);color:#fff;border:1.5px solid var(--couleur-bleu-principal);' : 'background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid #DCE3EC;' }}">
                    <svg data-icone-toggle-favoris width="16" height="16" viewBox="0 0 24 24" fill="{{ $favorisActif ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.5-7-9.5A3.8 3.8 0 0 1 12 7a3.8 3.8 0 0 1 7 3.5C19 15.5 12 20 12 20Z"/></svg>
                    Mes favoris<span data-favoris-compte aria-hidden="true"></span>
                </button>
                <div style="display:flex;align-items:center;gap:8px;min-width:0;">
                    <span style="font-family:var(--police-texte);font-size:13.5px;font-weight:600;color:#7A8699;white-space:nowrap;">Trier par</span>
                    <select name="sort" form="formulaire-tri" onchange="this.form.requestSubmit()" style="height:40px;min-width:0;max-width:100%;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 32px 0 12px;font-family:var(--police-texte);font-size:13.5px;font-weight:600;color:var(--couleur-texte-fonce);background:#fff;cursor:pointer;">
                        @foreach ($tris as $cle => $libelle)
                            <option value="{{ $cle }}" @selected($triActif === $cle)>{{ $libelle }}</option>
                        @endforeach
                    </select>
                </div>
                {{--
                    Bascule liste/carte : masquee sous 1024px (decision client
                    2026-07-03). Seule la vue liste est proposee en mobile/tablette
                    (voir aussi la section VUE CARTE plus bas, egalement masquee).
                --}}
                <div class="biome-masquer-tablette-mobile" style="display:flex;align-items:center;gap:10px;background:#F1F5FA;border-radius:10px;padding:4px;">
                    <button type="button" data-vue-liste aria-pressed="true" style="display:inline-flex;align-items:center;gap:7px;border:none;border-radius:7px;padding:9px 16px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;background:#fff;color:var(--couleur-texte-titre-carte);box-shadow:0 2px 8px rgba(18,42,74,.1);">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="4" width="7" height="7" rx="1"/><rect x="14" y="4" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                        Vue en liste
                    </button>
                    <button type="button" data-vue-carte aria-pressed="false" style="display:inline-flex;align-items:center;gap:7px;border:none;border-radius:7px;padding:9px 16px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;background:transparent;color:var(--couleur-texte-attenue);">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2ZM9 4v14M15 6v14"/></svg>
                        Vue sur la carte
                    </button>
                </div>
            </div>
        </div>
    </section>

    {{-- Formulaire dedie au select "Trier par" (soumission GET independante du
         formulaire de filtres, mais reprenant les memes parametres actifs). --}}
    <form id="formulaire-tri" action="{{ route('acheter') }}" method="GET" style="display:none;">
        @if ($localite !== '') <input type="hidden" name="loc" value="{{ $localite }}"> @endif
        <input type="hidden" name="budget" value="{{ $budgetMax }}">
        <input type="hidden" name="type" value="{{ $typeActif }}">
        <input type="hidden" name="beds" value="{{ $chambresMin }}">
        <input type="hidden" name="dispo" value="{{ $dispoActive }}">
        @foreach ($provincesActives as $cleProvince)
            <input type="hidden" name="provinces[]" value="{{ $cleProvince }}">
        @endforeach
        @foreach ($communesActives as $cleCommune)
            <input type="hidden" name="communes[]" value="{{ $cleCommune }}">
        @endforeach
        {{-- Le tri conserve le mode "mes favoris" (on trie DANS ses favoris). --}}
        @if ($favorisActif)
            <input type="hidden" name="favoris" value="{{ implode(',', $favorisIds) }}">
        @endif
    </form>

    {{--
        RESULTS : VUE LISTE — decision client 2026-07-03 : 1 bien par ligne en
        mobile (cartes empilees pleine largeur). .biome-grille-3 applique le
        catalogue standard (3 colonnes desktop inchange -> 2 en tablette -> 1
        en mobile, voir docs/mobile-strategie.md).
    --}}
    <section data-panneau-vue-liste class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:26px 32px 16px;">
        @if ($nombreBiens > 0)
            <div data-grille-biens data-par-page="{{ $biensParPage }}" class="biome-grille-3" style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;">
                @include('pages.partials.biens-cartes', ['biens' => $biens])
            </div>
            @if ($aSuivante)
                <div style="text-align:center;margin-top:34px;">
                    <a
                        href="{{ route('acheter', array_merge(request()->query(), ['page' => $page + 1])) }}"
                        data-charger-plus
                        data-par-page="{{ $biensParPage }}"
                        data-page-suivante="{{ $page + 1 }}"
                        class="biome-charger-plus"
                        style="display:inline-flex;align-items:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;padding:14px 30px;font-family:var(--police-titres);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px rgba(28,91,184,.22);"
                    >
                        Charger plus de biens
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
                    </a>
                </div>
            @endif
        @elseif ($favorisActif)
            {{-- Etat vide specifique au mode "mes favoris" : soit aucun coeur
                 n'a ete pose, soit les favoris ne sont plus disponibles. --}}
            <div style="text-align:center;padding:60px 0;color:#7A8699;">
                <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#C6D2E2" stroke-width="1.6" stroke-linejoin="round" aria-hidden="true" style="margin-bottom:14px;"><path d="M12 20s-7-4.5-7-9.5A3.8 3.8 0 0 1 12 7a3.8 3.8 0 0 1 7 3.5C19 15.5 12 20 12 20Z"/></svg>
                <div style="font-family:var(--police-titres);font-size:20px;font-weight:600;color:var(--couleur-texte-fonce);margin-bottom:8px;">Vous n'avez pas encore de coup de c&oelig;ur</div>
                <p style="margin:0 0 18px;">Cliquez sur le c&oelig;ur d'un bien pour l'ajouter &agrave; vos favoris, puis retrouvez-les ici.</p>
                <a href="{{ route('acheter') }}" style="display:inline-block;background:var(--couleur-bleu-principal);color:#fff;border-radius:9px;padding:12px 22px;font-family:var(--police-titres);font-weight:600;text-decoration:none;">Voir tous les biens</a>
            </div>
        @else
            <div style="text-align:center;padding:60px 0;color:#7A8699;">
                <div style="font-family:var(--police-titres);font-size:20px;font-weight:600;color:var(--couleur-texte-fonce);margin-bottom:8px;">Aucun bien ne correspond</div>
                <p style="margin:0 0 18px;">Essayez d'&eacute;largir vos crit&egrave;res de recherche.</p>
                <a href="{{ route('acheter') }}" style="display:inline-block;background:var(--couleur-bleu-principal);color:#fff;border-radius:9px;padding:12px 22px;font-family:var(--police-titres);font-weight:600;text-decoration:none;">R&eacute;initialiser les filtres</a>
            </div>
        @endif
    </section>

    {{--
        RESULTS : VUE CARTE (masquee par defaut, bascule JS). Egalement
        masquee en dur sous 1024px (.biome-masquer-tablette-mobile) : le
        bouton de bascule qui l'affiche est lui-meme masque en mobile/tablette
        (voir TOOLBAR plus haut), ce filet de securite evite tout affichage
        residuel (ex: etat JS herite d'un redimensionnement de fenetre).
    --}}
    <section data-panneau-vue-carte class="biome-masquer-tablette-mobile biome-conteneur" style="display:none;max-width:var(--largeur-conteneur);margin:0 auto;padding:26px 32px 16px;">
        <div style="display:grid;grid-template-columns:1.7fr 1fr;gap:22px;height:640px;">
            <div style="position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--couleur-bordure-header);background:#EEF2F7;">
                <div data-carte-biens data-url-points="{{ route('acheter.carte', request()->query()) }}" style="position:absolute;inset:0;"></div>
            </div>
            <div style="overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px;">
                @foreach ($biens as $bien)
                    <a href="{{ route('bien.show', ['id' => $bien['id']]) }}" style="display:flex;gap:14px;background:#fff;border:1px solid var(--couleur-bordure-carte);border-radius:12px;padding:12px;text-decoration:none;box-shadow:0 4px 14px rgba(18,42,74,.05);">
                        @if (! empty($bien['photo_principale']))
                            <img src="{{ asset($bien['photo_principale']) }}" alt="{{ $bien['localite'] }}" loading="lazy" decoding="async" width="96" height="80" style="width:96px;height:80px;flex:none;display:block;border-radius:9px;object-fit:cover;">
                        @else
                            <div style="width:96px;height:80px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#EEF2F7;color:#9AA6B6;font-size:11px;">Photo</div>
                        @endif
                        <div style="min-width:0;">
                            <div style="font-size:12px;color:#7A8699;font-weight:600;">{{ $bien['localite'] }}</div>
                            <div style="font-family:var(--police-titres);font-size:15px;font-weight:600;color:var(--couleur-texte-titre-carte);">{{ $bien['titre'] ?? ($bien['localite'].' - Lot '.$bien['lot']) }}</div>
                            <div style="font-family:var(--police-titres);font-size:16px;font-weight:700;color:var(--couleur-bleu-principal);margin-top:2px;">{{ $bien['prix'] }}</div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- "Ne manquez aucune opportunite" : renvoie vers le formulaire de contact
         complet (nom/prenom/email/telephone) plutot qu'une simple saisie d'email,
         pour qualifier le prospect. --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:40px 32px 64px;">
        <div class="biome-acheter-newsletter" style="background:var(--couleur-bleu-fonce);border-radius:18px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:20px;">
                <span style="width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                </span>
                <div>
                    <h3 style="font-family:var(--police-titres);font-size:24px;font-weight:700;color:#fff;margin:0 0 6px;">Ne manquez aucune opportunit&eacute;</h3>
                    <p style="font-size:15px;color:#B3C2D6;margin:0;">Recevez nos nouveaux biens en avant-premi&egrave;re et soyez inform&eacute; des projets en cours.</p>
                </div>
            </div>
            <div class="biome-acheter-newsletter-champs" style="display:flex;gap:12px;flex:none;">
                <a href="{{ route('contact') }}" style="display:inline-flex;align-items:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;border-radius:10px;padding:0 28px;height:52px;font-family:var(--police-titres);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;">
                    Recevoir les nouveaut&eacute;s
                    <svg width="16" height="16" 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>
@endsection