{{--
    Page Bien (detail) — portage fidele de maquettes/Bien.dc.html.
    Note : pas de x-sticky-actions sur cette page, conformement a la
    maquette (aucun dc-import StickyActions dans Bien.dc.html).

    Donnees fournies par BienController@show :
    - $bien           : detail du bien (voir app/Services/Crm/fixtures/biens.php
                         pour la liste exacte des champs)
    - $photos         : galerie du bien (vide si le CRM n'en fournit pas
                         encore pour ce bien, cas de tous les biens sauf
                         ach-1 dans les fixtures actuelles)
    - $biensSimilaires: jusqu'a 3 biens (hors le bien courant)

    PDF "detail du prix" : route('bien.pdf-prix') sert la fiche poussee par le
    CRM, mais UNIQUEMENT apres que le visiteur a rempli le formulaire "Recevoir
    le detail du prix" pour CE bien (deblocage en session, sinon 403 - voir
    BienController::pdfPrix()).

    Plans : les fixtures CRM actuelles n'exposent aucun champ "plans"
    (recherche faite dans app/Services/Crm/fixtures/biens.php : absent).
    La maquette affichait 3 vignettes "Rez-de-chaussee / Etage / Implantation
    terrain" toujours en placeholder (image-slot, jamais d'image reelle dans
    la source non plus). Cette page reproduit donc le meme bloc de secours
    (placeholders neutres), fidele au comportement de la maquette. A signaler
    si le CRM doit un jour fournir de vrais plans.

    Situation (carte) : la maquette utilise un image-slot "Carte - {location}"
    (jamais d'image reelle non plus dans la source). Reproduit ici en
    placeholder neutre, conforme a la maquette.
--}}
@extends('layouts.site')

@section('titre', ($bien['titre'] ?? ($bien['localite'].' - Lot '.$bien['lot'])).' - Biome Constructions')

@php
    // Indicateur "vendu" (voir MiroirCrmClient::bien()) : absent chez
    // FixtureCrmClient, d'ou le repli a false. Le bien reste consultable
    // pendant un delai apres la vente (CRM_DELAI_VENDU_JOURS), avec un
    // bandeau discret plutot que le statut de disponibilite habituel.
    $estVendu = (bool) ($bien['vendu'] ?? false);

    $titre = $bien['titre'] ?? ($bien['localite'].' - Lot '.$bien['lot']);
    $dispoLabel = $estVendu
        ? 'Vendu'
        : ($bien['disponibilite'] === 'construction' ? 'En construction' : 'Disponible immédiatement');
    $badge = $estVendu
        ? 'Vendu'
        : ($bien['disponibilite'] === 'construction' ? 'En construction' : 'Nouvelle construction');

    $heroFacts = [
        ['icone' => 'M3.5 3.5h17v17h-17zM8 8l8 8M8 8h3M8 8v3M16 16h-3M16 16v-3', 'valeur' => $bien['surface_habitable'], 'libelle' => 'Surface habitable'],
        ['icone' => 'M3 17v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 14h18M6 10V8a1 1 0 0 1 1-1h3', 'valeur' => $bien['chambres'], 'libelle' => 'Chambres'],
        ['icone' => 'M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-3ZM6 12V6a2 2 0 0 1 2-2 2 2 0 0 1 2 2', 'valeur' => $bien['salles_de_bain'], 'libelle' => 'Salle de bain'],
        ['icone' => 'M3 20h18M5 20l3-8 4 4 3-6 4 10', 'valeur' => $bien['terrain'], 'libelle' => 'Superficie terrain'],
        ['icone' => 'M9 12.5l2 2 4-4.5M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z', 'valeur' => 'PEB '.$bien['peb'], 'libelle' => 'Très performant'],
    ];

    // Bloc "Pourquoi choisir cette maison". Cartes UNIVERSELLES (vraies pour
    // toute construction neuve Biome) toujours affichees ; cartes d'EQUIPEMENT
    // (chauffage par le sol, photovoltaique, cuisine equipee) affichees
    // UNIQUEMENT si le bien les possede reellement (donnees CRM par bien, voir
    // MiroirCrmClient / EnregistreurBienMiroir). Le sous-titre PEB s'adapte a la
    // lettre pour ne pas affirmer "tres basse energie" a tort.
    $pebLettre = strtoupper((string) ($bien['peb'] ?? ''));
    $pebBasseEnergie = $pebLettre !== '' && (str_starts_with($pebLettre, 'A') || str_starts_with($pebLettre, 'B'));

    $atouts = [
        ['titre' => 'Construction', 'sous' => 'neuve', 'icone' => 'M3 11.5 11 4.5l8 7M5.2 9.8V20h11.6V9.6M18.5 3.5v4M16.5 5.5h4'],
    ];
    if ($pebLettre !== '') {
        $atouts[] = ['titre' => 'PEB '.$pebLettre, 'sous' => $pebBasseEnergie ? 'Très basse énergie' : 'Performance énergétique', 'icone' => 'M13 2 4.5 13H11l-1 9 8.5-11H12l1-9Z'];
    }
    // Carte chauffage : on affiche le TYPE de chauffage pousse par le CRM
    // (rubrique CHAUFFAGE de l'API -> technique.chauffage), ex. "Pompe a
    // chaleur". Repli sur "par le sol" si seul le booleen chauffage_sol est
    // fourni. e() car le sous-titre est rendu en {!! !!} (valeur CRM = a echapper).
    $chauffageType = trim((string) ($bien['chauffage'] ?? ''));
    $iconeChauffage = 'M3 14.5h18v5.5h-18zM9 14.5V20M15 14.5V20M7 11.5V6.5M7 6.5 5.6 7.9M7 6.5l1.4 1.4M12 11V5.5M12 5.5 10.6 6.9M12 5.5l1.4 1.4M17 11.5V6.5M17 6.5l-1.4 1.4M17 6.5l1.4 1.4';
    if ($chauffageType !== '') {
        $atouts[] = ['titre' => 'Chauffage', 'sous' => e($chauffageType), 'icone' => $iconeChauffage];
    } elseif ($bien['chauffage_sol'] ?? false) {
        $atouts[] = ['titre' => 'Chauffage', 'sous' => 'par le sol', 'icone' => $iconeChauffage];
    }
    if ($bien['panneaux_photovoltaiques'] ?? false) {
        $atouts[] = ['titre' => 'Panneaux', 'sous' => 'photovoltaïques', 'icone' => 'M9.6 6a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 1 0 -4.8 0M12 1.8v1.2M6.4 6H7.6M16.4 6h1.2M8.1 3.1l.9.9M15.9 3.1l-.9.9M3.5 12h17v8h-17zM3.5 16h17M9 12v8M15 12v8'];
    }
    if ($bien['cuisine_equipee'] ?? false) {
        $atouts[] = ['titre' => 'Cuisine', 'sous' => 'équipée', 'icone' => 'M6 3v6a1.7 1.7 0 0 0 3.4 0V3M7.7 9v12M16.4 3c-1.5.4-2.5 2.3-2.5 4.9 0 2 1 3.3 2.5 3.3M16.4 3v18'];
    }
    $atouts[] = ['titre' => 'Garantie', 'sous' => '10 ans', 'icone' => 'M9 12.5l2 2 4-4.5M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z'];

    $facadesCourt = str_replace(['Maison ', 'Appartement neuf', 'Penthouse neuf'], ['', 'Appartement', 'Penthouse'], $bien['facades']);

    $specs = [
        ['cle' => 'Type de bien', 'valeur' => ucfirst($bien['type']), 'icone' => 'M3 11.2 12 4l9 7.2M5.4 10.2V20h13.2v-9.8'],
        ['cle' => 'Façades', 'valeur' => $facadesCourt, 'icone' => 'M4 21V8l8-5 8 5v13M9 21v-6h6v6'],
        ['cle' => 'Surface habitable', 'valeur' => $bien['surface_habitable'], 'icone' => 'M3.5 3.5h17v17h-17zM8 8l8 8M8 8h3M8 8v3M16 16h-3M16 16v-3'],
        ['cle' => 'Superficie terrain', 'valeur' => $bien['terrain'], 'icone' => 'M3 20h18M5 20l3-8 4 4 3-6 4 10'],
        ['cle' => 'Chambres', 'valeur' => $bien['chambres'], 'icone' => 'M3 17v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 14h18'],
        ['cle' => 'Salle de bain', 'valeur' => $bien['salles_de_bain'], 'icone' => 'M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-3Z'],
        ['cle' => 'Année de construction', 'valeur' => $bien['annee'], 'icone' => 'M8 3v4M16 3v4M4 8h16v12H4zM4 11h16'],
        ['cle' => 'PEB', 'valeur' => $bien['peb'], 'icone' => 'M13 2 4.5 13H11l-1 9 8.5-11H12l1-9Z'],
        ['cle' => 'Disponibilité', 'valeur' => $dispoLabel, 'icone' => 'M12 8v4l3 2M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z'],
        ['cle' => 'Orientation du terrain', 'valeur' => $bien['orientation'], 'icone' => 'M3 12a9 9 0 1 0 18 0 9 9 0 1 0 -18 0M15.6 8.4 13.3 13.3 8.4 15.6l2.3-4.9 4.9-2.3Z'],
    ];

    // Points d'interet : ceux pousses par le CRM (champ 'situation', mappe en
    // points_interet {type, duree}) priment ; a defaut (bien sans donnee, ou
    // fixtures) on affiche un placeholder neutre. Chaque item = libelle (type,
    // en avant), detail (duree, en gris dessous), icone (chemin SVG). Le CRM ne
    // fournit pas d'icone : on la choisit selon le type (repli pin generique) ;
    // ses textes bruts sont echappes (e()) avant l'affichage en {!! !!}.
    $iconesPoi = [
        'ecole' => 'M12 3 2 8l10 5 10-5-10-5ZM5 11v5l7 4 7-4v-5',
        'commerce' => 'M4 7h16l-1 13H5L4 7ZM8 7V5a4 4 0 0 1 8 0v2',
        'autoroute' => 'M5 20 9 4h6l4 16M9 9h6M8 14h8',
        'gare' => 'M5 16V6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v10M5 16h14M5 16l-2 4M19 16l2 4M9 9h6',
        'ville' => 'M3 21h18M6 21V8l6-4 6 4v13M10 21v-5h4v5',
        'pin' => 'M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z',
    ];
    $iconePourType = function (string $type) use ($iconesPoi): string {
        $t = \App\Services\Crm\FiltreBiens::cleCommune($type); // minuscule + sans accents
        return match (true) {
            str_contains($t, 'ecole') || str_contains($t, 'school') || str_contains($t, 'creche') || str_contains($t, 'universit') || str_contains($t, 'college') || str_contains($t, 'athenee') => $iconesPoi['ecole'],
            str_contains($t, 'commerc') || str_contains($t, 'magasin') || str_contains($t, 'shop') || str_contains($t, 'super') || str_contains($t, 'boutique') => $iconesPoi['commerce'],
            str_contains($t, 'autoroute') || str_contains($t, 'ring') || str_contains($t, 'sortie') || preg_match('/\be\d/', $t) === 1 || preg_match('/\bn\d/', $t) === 1 => $iconesPoi['autoroute'],
            str_contains($t, 'gare') || str_contains($t, 'train') || str_contains($t, 'sncb') || str_contains($t, 'station') => $iconesPoi['gare'],
            str_contains($t, 'centre') || str_contains($t, 'ville') || str_contains($t, 'city') => $iconesPoi['ville'],
            default => $iconesPoi['pin'],
        };
    };
    $nearby = ! empty($bien['points_interet'])
        ? array_map(fn (array $poi): array => [
            'libelle' => e($poi['type'] !== '' ? $poi['type'] : $poi['duree']),
            'detail' => $poi['type'] !== '' ? e($poi['duree']) : '',
            'icone' => $iconePourType($poi['type']),
        ], $bien['points_interet'])
        : [
            ['libelle' => 'École primaire', 'detail' => 'à 3 min', 'icone' => $iconesPoi['ecole']],
            ['libelle' => 'Commerces', 'detail' => 'à 5 min', 'icone' => $iconesPoi['commerce']],
            ['libelle' => 'Accès autoroute', 'detail' => 'à 8 min', 'icone' => $iconesPoi['autoroute']],
            ['libelle' => 'Gare', 'detail' => 'à 10 min', 'icone' => $iconesPoi['gare']],
            ['libelle' => 'Centre-ville', 'detail' => 'à 12 min', 'icone' => $iconesPoi['ville']],
        ];

    $confiance = [
        ['titre' => 'Entreprise locale', 'sous' => 'à taille humaine', 'icone' => 'M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'],
        ['titre' => 'Maisons basse énergie', 'sous' => '(PEB A)', 'icone' => 'M13 2 4.5 13H11l-1 9 8.5-11H12l1-9Z'],
        ['titre' => 'Matériaux de qualité', 'sous' => 'et finitions soignées', 'icone' => 'M12 2l2.4 6.9H22l-5.8 4.3 2.2 6.8L12 16l-6.4 4 2.2-6.8L2 8.9h7.6L12 2Z'],
        ['titre' => 'Garantie décennale', 'sous' => '', 'icone' => 'M9 12.5l2 2 4-4.5M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z'],
    ];

    // Description : le vrai texte pousse par le CRM (champ 'descriptif', deja
    // decoupe en paragraphes surs par MiroirCrmClient) prime ; a defaut (bien
    // sans descriptif, ou fixtures), on compose un texte generique.
    $description = ! empty($bien['description'])
        ? array_values($bien['description'])
        : [
            'Située dans le charmant secteur de '.$bien['localite'].', cette '.mb_strtolower($bien['facades']).' en cours de réalisation séduira par ses volumes généreux, sa luminosité remarquable et son environnement paisible.',
            "Implantée sur un terrain orienté ".$bien['orientation'].", elle bénéficie d'une vue dégagée et offre un cadre où calme, nature et confort se rencontrent.",
            "La maison est vendue entièrement terminée, avec une cuisine équipée, des finitions soignées et des équipements performants répondant aux exigences actuelles de confort et d'économies d'énergie.",
        ];

    // Rendu robuste quel que soit le nombre de paragraphes : les 2 premiers
    // visibles, le reste sous "Lire la description complete".
    $descriptionVisibles = array_slice($description, 0, 2);
    $descriptionCachees = array_slice($description, 2);

    // Vignettes : TOUTES les photos (le clic sur une vignette la place en grand
    // format ; la bande defile via les fleches / le swipe tactile).
    $vignettes = $photos;

    // Fiche prix (PDF) : telechargeable UNIQUEMENT si le CRM en a pousse une ET
    // que le visiteur a rempli le formulaire "Recevoir le detail du prix" pour
    // CE bien (deblocage memorise en session, voir DemandeInfoBienController et
    // BienController::pdfPrix). Sinon on affiche le declencheur du formulaire.
    $fichePrixDebloquee = ! empty($bien['fiche_prix_pdf'])
        && ! empty(((array) session('fiches_prix_debloquees', []))[$bien['id']] ?? null);

    // Carte de situation. $carte = {lat, lon} fournis par le controleur
    // (coordonnees du CRM, ou geocodage de l'adresse), null si indisponible.
    // Integration OpenStreetMap (gratuit, sans cle, RGPD : aucun cookie/tracker) ;
    // le bouton "Ouvrir dans Google Maps" ouvre l'app Google (par coordonnees si
    // connues, sinon par adresse).
    $carteRequete = ($carte !== null)
        ? $carte['lat'].','.$carte['lon']
        : trim((string) (! empty($bien['adresse']) ? $bien['adresse'] : $bien['localite']));
    $carteLien = 'https://www.google.com/maps/search/?api=1&query='.urlencode($carteRequete);
    $carteEmbedOsm = null;
    if ($carte !== null) {
        // Petite fenetre (bbox) autour du point + marqueur.
        $bbox = ($carte['lon'] - 0.014).','.($carte['lat'] - 0.008).','.($carte['lon'] + 0.014).','.($carte['lat'] + 0.008);
        $carteEmbedOsm = 'https://www.openstreetmap.org/export/embed.html?bbox='.urlencode($bbox)
            .'&layer=mapnik&marker='.urlencode($carte['lat'].','.$carte['lon']);
    }
@endphp

@section('contenu')
    {{-- MODALES : les 5 demandes possibles sur cette page. --}}
    <x-modale-lead type="visite" :bien-id="$bien['id']" :bien-titre="$titre" />
    <x-modale-lead type="rappel" :bien-id="$bien['id']" :bien-titre="$titre" />
    <x-modale-lead type="infos" :bien-id="$bien['id']" :bien-titre="$titre" />
    <x-modale-lead type="brochure" :bien-id="$bien['id']" :bien-titre="$titre" />
    <x-modale-lead type="prix" :bien-id="$bien['id']" :bien-titre="$titre" :fiche-prix-disponible="! empty($bien['fiche_prix_pdf'])" />

    {{-- LIGHTBOX GALERIE --}}
    <div data-lightbox style="position:fixed;inset:0;z-index:80;background:rgba(8,20,38,.95);display:none;flex-direction:column;" role="dialog" aria-modal="true" aria-label="Galerie photo de {{ $titre }}">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;">
            <span data-lightbox-libelle style="color:#fff;font-family:var(--police-titres);font-weight:700;font-size:16px;"></span>
            <span data-lightbox-compteur style="color:#A9BAD4;font-family:var(--police-texte);font-size:14px;font-weight:600;"></span>
            <button type="button" data-lightbox-fermer aria-label="Fermer la galerie" style="border:none;background:rgba(255,255,255,.12);width:40px;height:40px;border-radius:50%;cursor:pointer;color:#fff;font-size:22px;line-height:1;">&times;</button>
        </div>
        <div style="flex:1;display:flex;align-items:center;gap:18px;padding:0 26px 36px;min-height:0;">
            <button type="button" data-lightbox-precedent aria-label="Photo pr&eacute;c&eacute;dente" style="width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
            </button>
            <img data-lightbox-image src="" alt="" style="flex:1;height:100%;object-fit:contain;display:none;border-radius:14px;">
            <button type="button" data-lightbox-suivant aria-label="Photo suivante" style="width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
            </button>
        </div>
    </div>

    {{-- BREADCRUMB --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:22px 32px 0;">
        <div style="display:flex;align-items:center;gap:9px;font-family:var(--police-texte);font-size:13.5px;color:#7A8699;flex-wrap:wrap;">
            <a href="{{ route('accueil') }}" style="color:#7A8699;text-decoration:none;font-weight:600;">Accueil</a><span>&rsaquo;</span>
            <a href="{{ route('acheter') }}" style="color:#7A8699;text-decoration:none;font-weight:600;">Nos biens &agrave; vendre</a><span>&rsaquo;</span>
            <span style="font-weight:600;">{{ $bien['localite'] }}</span><span>&rsaquo;</span>
            <span style="color:var(--couleur-bleu-principal);font-weight:700;">{{ $titre }}</span>
        </div>
    </section>

    {{--
        MAIN GRID — .biome-bien-grille-principale (nouvelle classe, lot mobile
        M3) : ratio 1fr 360px specifique a cette page (pas dans le catalogue
        .biome-grille-N standard). Decision client 2026-07-03 : la sidebar
        (prix, CTA, formulaire) passe SOUS le contenu principal en mobile
        (1 colonne) ; l'ordre DOM (galerie/contenu puis <aside>) place deja
        naturellement la sidebar apres le contenu, aucune reorganisation JS
        necessaire. Voir plus bas la barre prix sticky basse mobile qui
        compense la perte de visibilite permanente du prix.
    --}}
    <section class="biome-conteneur biome-bien-grille-principale" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:18px 32px 0;display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;">
        {{-- LEFT MAIN (min-width:0 : autorise la colonne 1fr a se contraindre
             pour que la bande de vignettes defile au lieu d'elargir la page). --}}
        <div data-galerie-bien style="min-width:0;">
            {{-- HERO IMAGE (clic -> galerie plein ecran ; l'image affichee est
                 pilotee par les vignettes cliquables ci-dessous). --}}
            <div data-galerie-hero class="biome-bien-hero-image" style="position:relative;height:540px;border-radius:16px;overflow:hidden;box-shadow:0 14px 36px rgba(18,42,74,.12);cursor:pointer;">
                @if ($photos !== [])
                    <img data-galerie-hero-image src="{{ asset($photos[0]['src']) }}" alt="{{ $titre }}" decoding="async" fetchpriority="high" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;">
                @else
                    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#EEF2F7;color:#9AA6B6;font-size:14px;">{{ $titre }}</div>
                @endif
                <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,36,64,.05) 40%,rgba(14,36,64,.35) 66%,rgba(14,36,64,.82) 100%);"></div>
                <span style="position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);color:var(--couleur-texte-fonce);font-family:var(--police-titres);font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:8px;box-shadow:0 4px 12px rgba(18,42,74,.18);">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
                    Voir les photos
                </span>
                <span style="position:absolute;top:18px;left:18px;background:{{ $estVendu ? '#5C6B7E' : 'var(--couleur-bleu-fonce)' }};color:#fff;font-family:var(--police-texte);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:7px 13px;border-radius:6px;">{{ $badge }}</span>
                <span class="biome-bien-hero-compteur" style="position:absolute;bottom:128px;right:18px;display:flex;align-items:center;gap:6px;background:rgba(14,36,64,.7);color:#fff;font-family:var(--police-texte);font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:7px;">
                    <svg width="14" height="14" 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 9h18"/></svg>
                    <span data-galerie-compteur>{{ $photos !== [] ? ('1 / '.count($photos)) : '1 / 1' }}</span>
                </span>
                <div style="position:absolute;left:0;right:0;bottom:0;padding:0 24px 0;">
                    <div class="biome-bien-hero-entete" style="padding-bottom:14px;">
                        {{--
                            Titre H1 de la galerie : 38px desktop, correspond
                            exactement au palier .biome-titre-section-lg du
                            catalogue (38px -> 30/26px), pas .biome-titre-hero
                            (52/50/48/46px -> 40/30px, pense pour des H1 plus
                            grands que celui-ci sur les autres pages).
                        --}}
                        <h1 class="biome-titre-section-lg" style="font-family:var(--police-titres);font-size:38px;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-.5px;">{{ $titre }}</h1>
                        <div style="display:flex;align-items:center;gap:7px;color:#DCE6F2;font-size:14.5px;font-weight:600;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FC2EE" 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>
                            {{ $bien['adresse'] }}
                        </div>
                    </div>
                    {{--
                        Bandeau heroFacts (surface/chambres/sdb/terrain/PEB) : 5
                        blocs en ligne a largeur egale (flex:1), illisibles sous
                        1024px (texte tronque/superpose). .biome-bien-hero-facts
                        (nouvelle classe) passe en grille 2 colonnes sous 1024px,
                        1 colonne en mobile pur (voir mobile.css).
                    --}}
                    <div class="biome-bien-hero-facts" style="display:flex;background:rgba(14,36,64,.78);border-top:1px solid rgba(255,255,255,.14);margin:0 -24px;padding:14px 24px;">
                        @foreach ($heroFacts as $i => $f)
                            <div style="flex:1;display:flex;align-items:center;gap:10px;border-left:{{ $i === 0 ? 'none' : '1px solid rgba(255,255,255,.16)' }};padding-left:{{ $i === 0 ? '0' : '16px' }};">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9FC2EE" stroke-width="1.8" style="flex:none;" aria-hidden="true"><path d="{{ $f['icone'] }}"/></svg>
                                <div>
                                    <div style="font-family:var(--police-titres);font-size:15px;font-weight:700;color:#fff;line-height:1.1;">{{ $f['valeur'] }}</div>
                                    <div style="font-size:11.5px;color:#A9BAD4;">{!! $f['libelle'] !!}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{--
                THUMBNAILS — bande de vignettes (TOUTES les photos) en scroll
                horizontal. Le clic sur une vignette (data-galerie-vignette)
                place la photo dans la grande image (hero) ; le clic sur le hero
                ouvre la lightbox plein ecran (voir initGalerieBien). Les fleches
                desktop (data-galerie-defiler) font defiler la bande ; sous
                1024px .biome-bien-vignettes passe en overflow-x:auto + scroll-
                snap (mobile.css) et le swipe tactile remplace les fleches
                (masquees). Largeur fixe des vignettes = confort au doigt.
            --}}
            @if ($vignettes !== [])
                <div style="display:flex;align-items:center;gap:12px;margin-top:16px;">
                    <button type="button" data-galerie-defiler="-1" aria-label="Vignettes pr&eacute;c&eacute;dentes" class="biome-masquer-tablette-mobile" style="width:38px;height:38px;border-radius:50%;background:var(--couleur-bleu-fonce);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M15 6l-6 6 6 6"/></svg>
                    </button>
                    <div data-galerie-bande class="biome-bien-vignettes biome-galerie-bande" style="flex:1;min-width:0;display:flex;gap:12px;overflow-x:auto;">
                        @foreach ($vignettes as $i => $vignette)
                            <div data-galerie-vignette data-galerie-index="{{ $i }}" data-galerie-src="{{ asset($vignette['src']) }}" data-galerie-label="{{ $vignette['label'] }}" style="flex:0 0 120px;cursor:pointer;border-radius:10px;">
                                <img src="{{ asset($vignette['src']) }}" alt="{{ $vignette['label'] }}" loading="lazy" decoding="async" style="width:100%;height:84px;object-fit:cover;display:block;border-radius:10px;">
                            </div>
                        @endforeach
                    </div>
                    <button type="button" data-galerie-defiler="1" aria-label="Vignettes suivantes" class="biome-masquer-tablette-mobile" style="width:38px;height:38px;border-radius:50%;background:var(--couleur-bleu-fonce);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>
                    </button>
                </div>
            @endif

            {{-- POURQUOI CHOISIR --}}
            <h2 class="biome-titre-section" style="font-family:var(--police-titres);font-size:24px;font-weight:800;color:var(--couleur-texte-fonce);margin:42px 0 20px;letter-spacing:-.5px;">Pourquoi choisir cette maison ?</h2>
            <div class="biome-grille-6" style="display:grid;grid-template-columns:repeat({{ count($atouts) }},1fr);gap:14px;">
                @foreach ($atouts as $atout)
                    <div style="border:1px solid var(--couleur-bordure-carte);border-radius:12px;padding:18px 10px;text-align:center;box-shadow:0 4px 14px rgba(18,42,74,.04);">
                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.7" style="margin-bottom:10px;" aria-hidden="true"><path d="{{ $atout['icone'] }}"/></svg>
                        <div style="font-family:var(--police-titres);font-size:13px;font-weight:700;color:var(--couleur-texte-fonce);line-height:1.25;">{{ $atout['titre'] }}</div>
                        <div style="font-size:11.5px;color:#7A8699;margin-top:3px;">{!! $atout['sous'] !!}</div>
                    </div>
                @endforeach
            </div>
            <div style="display:flex;justify-content:center;margin-top:20px;">
                <button type="button" data-ouvre-modale="infos" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--couleur-bleu-principal);color:var(--couleur-bleu-principal);background:#fff;border-radius:9px;padding:12px 22px;font-family:var(--police-titres);font-size:14px;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"><path d="M21 11.5a8.5 8.5 0 0 1-12.2 7.6L3 21l1.9-5.8A8.5 8.5 0 1 1 21 11.5Z"/></svg>
                    Demander plus d'informations
                </button>
            </div>

            {{-- DESCRIPTION + INFOS --}}
            <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:42px;">
                <div>
                    <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:22px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 16px;letter-spacing:-.5px;">Description du bien</h2>
                    @foreach ($descriptionVisibles as $paragraphe)
                        <p style="font-size:15px;line-height:1.7;color:#52617A;margin:0 0 14px;">{!! $paragraphe !!}</p>
                    @endforeach
                    @if ($descriptionCachees !== [])
                        <div data-description-etendue style="display:none;">
                            @foreach ($descriptionCachees as $paragraphe)
                                <p style="font-size:15px;line-height:1.7;color:#52617A;margin:0 0 14px;">{!! $paragraphe !!}</p>
                            @endforeach
                        </div>
                        <button type="button" data-toggle-description style="margin-top:6px;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--couleur-bordure-bouton-secondaire);background:#fff;color:var(--couleur-texte-fonce);border-radius:9px;padding:11px 18px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;">Lire la description compl&egrave;te</button>
                    @endif
                </div>
                <div>
                    <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:22px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 16px;letter-spacing:-.5px;">Informations cl&eacute;s</h2>
                    <div>
                        @foreach ($specs as $spec)
                            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--couleur-bordure-separateur);">
                                <span style="display:flex;align-items:center;gap:9px;font-size:14px;color:#7A8699;font-weight:600;">
                                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.8" aria-hidden="true"><path d="{{ $spec['icone'] }}"/></svg>
                                    {!! $spec['cle'] !!}
                                </span>
                                <span style="font-family:var(--police-titres);font-size:14px;color:var(--couleur-texte-fonce);font-weight:700;">{{ $spec['valeur'] }}</span>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" data-ouvre-modale="infos" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="margin-top:18px;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--couleur-bleu-principal);color:var(--couleur-bleu-principal);background:#fff;border-radius:9px;padding:11px 18px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;">Demander plus d'informations</button>
                </div>
            </div>

            {{--
                PLANS COMMERCIAUX : UN seul PDF pousse par le CRM (document type
                'plans', voir MiroirCrmClient::urlPlansPdf). Section affichee
                UNIQUEMENT si le PDF a ete recu -> plus de vignettes fictives.
            --}}
            @if (! empty($bien['plans_pdf']))
                <h2 class="biome-titre-section" style="font-family:var(--police-titres);font-size:24px;font-weight:800;color:var(--couleur-texte-fonce);margin:46px 0 6px;letter-spacing:-.5px;">Plans de la maison</h2>
                <p style="font-size:15px;color:#52617A;margin:0 0 20px;">T&eacute;l&eacute;chargez les plans commerciaux de cette maison.</p>
                <div class="biome-bien-grille-plans" style="display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;">
                    <a href="{{ asset($bien['plans_pdf']) }}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:10px;background:var(--couleur-bleu-principal);color:#fff;border-radius:12px;padding:16px 26px;font-family:var(--police-titres);font-size:15px;font-weight:600;text-decoration:none;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3v12M8 11l4 4 4-4M5 21h14"/></svg>
                        T&eacute;l&eacute;charger les plans (PDF)
                    </a>
                    <div style="background:var(--couleur-fond-survol-bleu-clair);border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:center;flex:1;min-width:260px;">
                        <h3 style="font-family:var(--police-titres);font-size:16px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Une question sur les plans ?</h3>
                        <p style="font-size:13.5px;color:#52617A;margin:0 0 16px;line-height:1.5;">Notre &eacute;quipe est &agrave; votre disposition pour vous aider &agrave; vous projeter.</p>
                        <a href="{{ route('contact') }}" style="display:inline-flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid var(--couleur-bordure-bouton-secondaire);border-radius:9px;padding:11px 16px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;text-decoration:none;align-self:flex-start;">
                            Nous contacter
                            <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>
            @endif

            {{--
                SITUATION : points d'interet pousses par le CRM (champ
                'situation') quand ils existent, sinon placeholder neutre (voir
                $nearby plus haut). Ratio specifique (0.9fr 1.4fr 0.9fr) :
                classe .biome-bien-grille-situation.
            --}}
            <h2 class="biome-titre-section" style="font-family:var(--police-titres);font-size:24px;font-weight:800;color:var(--couleur-texte-fonce);margin:46px 0 20px;letter-spacing:-.5px;">Situation du bien</h2>
            <div class="biome-bien-grille-situation" style="display:grid;grid-template-columns:0.9fr 1.4fr 0.9fr;gap:16px;align-items:stretch;">
                <div style="background:#F6F9FC;border:1px solid #EBF0F6;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;justify-content:center;">
                    @foreach ($nearby as $n)
                        <div style="display:flex;align-items:flex-start;gap:11px;">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.8" style="flex:none;margin-top:1px;" aria-hidden="true"><path d="{{ $n['icone'] }}"/></svg>
                            <div style="min-width:0;line-height:1.3;">
                                <div style="font-size:14px;color:#2B3B52;font-weight:600;">{!! $n['libelle'] !!}</div>
                                @if (! empty($n['detail']))
                                    <div style="font-size:12.5px;color:#7A8699;font-weight:500;margin-top:1px;">{!! $n['detail'] !!}</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                <div style="position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--couleur-bordure-header);min-height:260px;background:#EEF2F7;">
                    @if ($carteEmbedOsm !== null)
                        <iframe
                            src="{{ $carteEmbedOsm }}"
                            title="Carte &mdash; {{ $bien['localite'] }}"
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                            style="position:absolute;inset:0;width:100%;height:100%;border:0;display:block;"
                        ></iframe>
                    @else
                        <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9AA6B6;font-size:13px;">Carte &mdash; {{ $bien['localite'] }}</div>
                    @endif
                    <a href="{{ $carteLien }}" target="_blank" rel="noopener" style="position:absolute;bottom:14px;left:14px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--couleur-texte-fonce);border-radius:8px;padding:10px 14px;font-family:var(--police-titres);font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 6px 16px rgba(18,42,74,.18);">
                        Ouvrir dans Google Maps
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
                    </a>
                </div>
                <div style="background:var(--couleur-fond-survol-bleu-clair);border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:center;">
                    <h3 style="font-family:var(--police-titres);font-size:16px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Envie de visiter ?</h3>
                    <p style="font-size:13.5px;color:#52617A;margin:0 0 16px;line-height:1.5;">D&eacute;couvrez l'environnement et le potentiel de ce bien sur place.</p>
                    <button type="button" data-ouvre-modale="visite" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="display:inline-flex;align-items:center;gap:8px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:9px;padding:11px 16px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></svg>
                        Planifier une visite
                    </button>
                </div>
            </div>
        </div>

        {{--
            RIGHT SIDEBAR — decision client 2026-07-03 : passe SOUS le contenu
            principal en mobile (grille parente .biome-bien-grille-principale a
            1 colonne, voir plus haut). L'ordre DOM (galerie/contenu avant cet
            <aside>) place deja naturellement la sidebar en dessous, aucune
            classe specifique necessaire ici. Voir la barre prix sticky basse
            (.biome-bien-barre-prix-mobile, juste apres cette section) qui
            garde le prix + un CTA visibles en permanence malgre ce
            deplacement.
        --}}
        <aside style="display:flex;flex-direction:column;gap:16px;">
            <div style="background:var(--couleur-bleu-fonce);border-radius:16px;padding:24px;">
                <div style="font-family:var(--police-texte);font-size:14px;color:#A9BAD4;font-weight:600;">&Agrave; partir de</div>
                <div style="font-family:var(--police-titres);font-size:34px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:14px;">{{ $bien['prix'] }}<span style="font-size:18px;">*</span></div>
                @if ($fichePrixDebloquee)
                    {{-- Formulaire "Recevoir le detail du prix" deja rempli pour
                         ce bien : la fiche prix (PDF) est debloquee. --}}
                    <a
                        href="{{ route('bien.pdf-prix', ['id' => $bien['id']]) }}"
                        target="_blank"
                        rel="noopener"
                        style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--couleur-bleu-fonce);border:none;border-radius:9px;padding:11px;font-family:var(--police-titres);font-size:13.5px;font-weight:700;text-decoration:none;margin-bottom:16px;"
                    >
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3v12M7 11l5 4 5-4M5 21h14"/></svg>
                        T&eacute;l&eacute;charger le d&eacute;tail du prix (PDF)
                    </a>
                @else
                    <button
                        type="button"
                        data-ouvre-modale="prix"
                        data-bien-id="{{ $bien['id'] }}"
                        data-bien-titre="{{ $titre }}"
                        style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:11px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:16px;"
                    >
                        D&eacute;tail du prix
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                @endif
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                    <span style="font-family:var(--police-texte);font-size:14px;color:#DCE6F2;font-weight:600;">{{ $bien['facades'] }}</span>
                    <span style="background:var(--couleur-bleu-principal);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.5px;">PEB {{ $bien['peb'] }}</span>
                </div>
                <div style="display:flex;align-items:center;gap:9px;">
                    <span style="width:9px;height:9px;border-radius:50%;background:{{ $estVendu ? '#8A93A3' : '#3FA3FF' }};"></span>
                    <span style="font-size:14px;color:#fff;font-weight:600;">{{ $dispoLabel }}</span>
                </div>
            </div>

            <div style="display:flex;flex-direction:column;gap:10px;">
                <button type="button" data-ouvre-modale="brochure" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="display:flex;align-items:center;gap:11px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;padding:14px 18px;font-family:var(--police-titres);font-size:14.5px;font-weight:600;cursor:pointer;width:100%;text-align:left;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>
                    Recevoir la brochure
                </button>
                <button type="button" data-ouvre-modale="visite" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="display:flex;align-items:center;gap:11px;background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid var(--couleur-bordure-bouton-secondaire);border-radius:10px;padding:14px 18px;font-family:var(--police-titres);font-size:14.5px;font-weight:600;cursor:pointer;width:100%;text-align:left;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></svg>
                    Planifier une visite
                </button>
                <button type="button" data-ouvre-modale="rappel" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="display:flex;align-items:center;gap:11px;background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid var(--couleur-bordure-bouton-secondaire);border-radius:10px;padding:14px 18px;font-family:var(--police-titres);font-size:14.5px;font-weight:600;cursor:pointer;width:100%;text-align:left;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M6.5 4h-2A1.5 1.5 0 0 0 3 5.5C3 13.5 10.5 21 18.5 21A1.5 1.5 0 0 0 20 19.5v-2a1.5 1.5 0 0 0-1.2-1.47l-2.5-.5a1.5 1.5 0 0 0-1.5.66l-.7 1.05A11.3 11.3 0 0 1 7.3 12.9l1.05-.7a1.5 1.5 0 0 0 .66-1.5l-.5-2.5A1.5 1.5 0 0 0 6.5 4Z"/></svg>
                    &Ecirc;tre rappel&eacute;
                </button>
                <p style="font-size:11.5px;color:#52617A;line-height:1.5;margin:4px 0 0;">* Hors frais et hors TVA</p>
            </div>

            {{-- FORM sidebar : "Interesse par ce bien ?" => leads.info-bien.store type=infos --}}
            <div id="form" style="background:#fff;border:1px solid var(--couleur-bordure-header);border-radius:16px;box-shadow:0 10px 30px rgba(18,42,74,.07);padding:24px;">
                <h3 style="font-family:var(--police-titres);font-size:18px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 4px;letter-spacing:-.3px;">Int&eacute;ress&eacute; par ce bien ?</h3>
                <p style="font-size:13.5px;color:#7A8699;margin:0 0 18px;">Recevez toutes les informations</p>

                @php
                    $erreurFormSidebar = $errors->hasAny(['nom', 'email', 'telephone', 'souhaits', 'message']) && old('type') === 'infos' && old('depuis') === 'sidebar';
                @endphp

                @if (session('succes') && old('type', session('origine_modale')) === 'infos' && old('depuis', session('origine_depuis')) === 'sidebar')
                    <div style="text-align:center;padding:12px 0;">
                        <span style="width:56px;height:56px;border-radius:50%;background:var(--couleur-bleu-principal);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;">
                            <svg width="28" height="28" 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>
                        <h4 style="font-family:var(--police-titres);font-size:19px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Demande envoy&eacute;e !</h4>
                        <p style="font-size:14px;color:#52617A;margin:0;line-height:1.55;">Merci, un conseiller Biome vous recontacte rapidement au sujet de {{ $titre }}.</p>
                    </div>
                @else
                    <form action="{{ route('leads.info-bien.store') }}" method="POST" novalidate>
                        @csrf
                        <x-anti-spam />
                        <input type="hidden" name="type" value="infos">
                        <input type="hidden" name="depuis" value="sidebar">
                        <input type="hidden" name="bien_id" value="{{ $bien['id'] }}">

                        <label for="sidebar-nom" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Nom*</label>
                        <input type="text" id="sidebar-nom" name="nom" value="{{ old('nom') }}" placeholder="Votre nom" required style="width:100%;box-sizing:border-box;height:46px;border:1.5px solid {{ $erreurFormSidebar && $errors->has('nom') ? '#D64545' : '#DCE3EC' }};border-radius:9px;padding:0 13px;font-family:var(--police-texte);font-size:14.5px;outline:none;margin-bottom:13px;">

                        <label for="sidebar-prenom" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Pr&eacute;nom*</label>
                        <input type="text" id="sidebar-prenom" name="prenom" value="{{ old('prenom') }}" placeholder="Votre pr&eacute;nom" required style="width:100%;box-sizing:border-box;height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 13px;font-family:var(--police-texte);font-size:14.5px;outline:none;margin-bottom:13px;">

                        <label for="sidebar-email" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">E-mail*</label>
                        <input type="email" id="sidebar-email" name="email" value="{{ old('email') }}" placeholder="Votre e-mail" required style="width:100%;box-sizing:border-box;height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 13px;font-family:var(--police-texte);font-size:14.5px;outline:none;margin-bottom:13px;">

                        <label for="sidebar-tel" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">T&eacute;l&eacute;phone*</label>
                        <input type="tel" id="sidebar-tel" name="telephone" value="{{ old('telephone') }}" placeholder="Votre num&eacute;ro de t&eacute;l&eacute;phone" required style="width:100%;box-sizing:border-box;height:46px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 13px;font-family:var(--police-texte);font-size:14.5px;outline:none;margin-bottom:16px;">

                        <div style="font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:10px;">Je souhaite :</div>
                        <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:16px;">
                            @foreach (['brochure' => 'Recevoir la brochure', 'visite' => 'Planifier une visite', 'rappel' => 'Être rappelé'] as $cle => $libelle)
                                <label style="display:flex;align-items:center;gap:10px;font-size:14px;color:#3D5573;cursor:pointer;">
                                    <input type="checkbox" name="souhaits[]" value="{{ $cle }}" @checked(in_array($cle, (array) old('souhaits', []), true)) style="width:18px;height:18px;flex:none;">
                                    {{ $libelle }}
                                </label>
                            @endforeach
                        </div>

                        <label for="sidebar-msg" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Votre message*</label>
                        <textarea id="sidebar-msg" name="message" placeholder="Votre message&hellip;" required style="width:100%;box-sizing:border-box;height:84px;border:1.5px solid #DCE3EC;border-radius:9px;padding:11px 13px;font-family:var(--police-texte);font-size:14.5px;outline:none;resize:none;margin-bottom:16px;">{{ old('message') }}</textarea>

                        <button type="submit" style="width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--couleur-bleu-fonce);color:#fff;border:none;border-radius:10px;height:50px;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"><path d="m4 12 16-8-6 16-2.5-6.5L4 12Z"/></svg>
                            Envoyer ma demande
                        </button>
                        <div style="display:flex;align-items:center;gap:9px;margin-top:14px;color:#9AA6B6;font-size:12px;">
                            <svg width="15" height="15" 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 donn&eacute;es sont trait&eacute;es en toute confidentialit&eacute;.
                        </div>
                    </form>
                @endif
            </div>

            <div style="background:var(--couleur-bleu-fonce);border-radius:16px;padding:22px;display:flex;align-items:center;gap:14px;">
                <span style="width:46px;height:46px;border-radius:11px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" aria-hidden="true"><path d="M6.5 4h-2A1.5 1.5 0 0 0 3 5.5C3 13.5 10.5 21 18.5 21A1.5 1.5 0 0 0 20 19.5v-2a1.5 1.5 0 0 0-1.2-1.47l-2.5-.5a1.5 1.5 0 0 0-1.5.66l-.7 1.05A11.3 11.3 0 0 1 7.3 12.9l1.05-.7a1.5 1.5 0 0 0 .66-1.5l-.5-2.5A1.5 1.5 0 0 0 6.5 4Z"/></svg>
                </span>
                <div>
                    <div style="font-family:var(--police-titres);font-size:14.5px;font-weight:700;color:#fff;">Besoin d'un conseil ?</div>
                    <div style="font-size:12.5px;color:#A9BAD4;margin-bottom:2px;">Appelez-nous directement</div>
                    <a href="tel:{{ config('site.telephone_lien') }}" style="font-size:14.5px;color:#fff;font-weight:700;text-decoration:none;">{{ config('site.telephone') }}</a>
                </div>
            </div>
        </aside>
    </section>

    {{--
        BARRE PRIX STICKY BASSE — mobile/tablette uniquement (<=1024px,
        decision client 2026-07-03). La sidebar (prix + CTA + formulaire)
        passe sous le contenu principal en mobile (grille a 1 colonne, voir
        plus haut) : ce recapitulatif compact (prix + "Planifier une visite")
        reste visible en permanence en bas de l'ecran, sans dupliquer le
        contenu de la sidebar (formulaire, autres CTA) qui reste inchange plus
        haut dans le DOM. Cible la meme modale "visite" que les CTA de la
        sidebar (data-ouvre-modale="visite", meme data-bien-id).

        Z-INDEX 45 : meme niveau que .biome-sticky-actions (lot M1) — cette
        page N'A PAS de <x-sticky-actions> (absent de Bien.dc.html, voir note
        en tete de fichier), donc aucun conflit d'empilement possible avec ce
        composant. Reste sous le tiroir menu burger (60) et les modales (70).

        PADDING-BOTTOM : cette page n'utilise pas le selecteur body:has(...)
        du lot M1 (reserve a .biome-sticky-actions). Regle dediee ajoutee dans
        mobile.css (body:has(.biome-bien-barre-prix-mobile)) pour ne pas
        masquer le footer, meme logique defensive.
    --}}
    <div class="biome-bien-barre-prix-mobile" style="display:none;">
        <div>
            <div style="font-size:11px;color:#A9BAD4;font-weight:600;">&Agrave; partir de</div>
            <div style="font-family:var(--police-titres);font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px;">{{ $bien['prix'] }}<span style="font-size:12px;">*</span></div>
        </div>
        <button type="button" data-ouvre-modale="visite" data-bien-id="{{ $bien['id'] }}" data-bien-titre="{{ $titre }}" style="display:inline-flex;align-items:center;gap:8px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:9px;padding:0 18px;height:44px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" aria-hidden="true"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></svg>
            Planifier une visite
        </button>
    </div>

    {{--
        SIMILAIRES — grille a ratio specifique (3 colonnes egales de cartes +
        1 colonne CTA) : nouvelle classe .biome-bien-grille-similaires.
    --}}
    @if ($biensSimilaires !== [])
        <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:56px 32px 0;">
            <h2 class="biome-titre-section" style="font-family:var(--police-titres);font-size:24px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 22px;letter-spacing:-.5px;">Vous pourriez &eacute;galement aimer</h2>
            <div class="biome-bien-grille-similaires" style="display:grid;grid-template-columns:repeat(3,1fr) 1fr;gap:18px;align-items:stretch;">
                @foreach ($biensSimilaires as $similaire)
                    <x-property-card :bien="$similaire" />
                @endforeach
                <div style="background:var(--couleur-fond-survol-bleu-clair);border-radius:14px;padding:24px;display:flex;flex-direction:column;justify-content:center;">
                    <h3 style="font-family:var(--police-titres);font-size:18px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Voir d'autres biens</h3>
                    <p style="font-size:13.5px;color:#52617A;margin:0 0 18px;line-height:1.5;">D&eacute;couvrez toutes nos opportunit&eacute;s dans votre r&eacute;gion.</p>
                    <a href="{{ route('acheter') }}" style="display:inline-flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid var(--couleur-bordure-bouton-secondaire);border-radius:9px;padding:12px 16px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;text-decoration:none;">
                        Voir tous nos biens
                        <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>
    @endif

    {{--
        CONFIANCE — grille externe a ratio specifique (1.6fr 1fr) : nouvelle
        classe .biome-bien-grille-confiance. Sous-grille interne (4 colonnes
        egales d'icones) : catalogue standard .biome-grille-4.
    --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:48px 32px 16px;">
        <div class="biome-bien-grille-confiance" style="background:#F6F9FC;border:1px solid #EBF0F6;border-radius:16px;padding:34px;display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:center;">
            <div>
                <h2 class="biome-titre-sous-section" style="font-family:var(--police-titres);font-size:22px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 22px;letter-spacing:-.5px;">Pourquoi faire confiance &agrave; Biome Constructions ?</h2>
                <div class="biome-grille-4" style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">
                    @foreach ($confiance as $c)
                        <div style="text-align:center;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.7" style="margin-bottom:8px;" aria-hidden="true"><path d="{{ $c['icone'] }}"/></svg>
                            <div style="font-family:var(--police-titres);font-size:12.5px;font-weight:700;color:var(--couleur-texte-fonce);line-height:1.25;">{{ $c['titre'] }}</div>
                            <div style="font-size:11px;color:#7A8699;margin-top:3px;">{!! $c['sous'] !!}</div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div style="border-left:1px solid #E0E8F1;padding-left:32px;">
                <h3 style="font-family:var(--police-titres);font-size:18px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Des questions ?</h3>
                <p style="font-size:14px;color:#52617A;margin:0 0 16px;line-height:1.55;">Notre &eacute;quipe vous accompagne &agrave; chaque &eacute;tape de votre projet.</p>
                <a href="{{ route('contact') }}" style="display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid var(--couleur-bordure-bouton-secondaire);border-radius:9px;padding:12px 18px;font-family:var(--police-titres);font-size:13.5px;font-weight:600;text-decoration:none;">
                    Nous contacter
                    <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>

    {{-- TERRAIN BAND --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:24px 32px 64px;">
        <div style="background:var(--couleur-bleu-fonce);border-radius:16px;padding:26px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:18px;">
                <span style="width:50px;height:50px;border-radius:12px;background:var(--couleur-bleu-principal);display:flex;align-items:center;justify-content:center;flex:none;">
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" 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.4"/></svg>
                </span>
                <div>
                    <div style="font-family:var(--police-titres);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;">Vous avez un terrain &agrave; vendre ?</div>
                    <div style="font-size:14px;color:#B3C2D6;">Nous recherchons activement des terrains &agrave; b&acirc;tir dans votre r&eacute;gion.</div>
                </div>
            </div>
            <a href="{{ route('vendre-mon-terrain') }}" 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:15px 26px;border-radius:10px;text-decoration:none;white-space:nowrap;">
                Proposer mon terrain
                <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>
    </section>
@endsection