spb/lou-ka Public
Lou·Ka — tous les logements à louer du Québec, un seul endroit.
HTML 99.7%
1<!DOCTYPE html><html lang="fr"> <head><!-- GTM + Google Ads — chargés uniquement sur le domaine de prod (anti-pollution staging/preview/local) --><script>2 window.dataLayer = window.dataLayer || [];3 function gtag(){dataLayer.push(arguments);}4 (function () {5 // Consentement D68 (opt-out, chat-gi Phase 1) : un refus explicite stocké coupe les tags6 // Google pour ce navigateur — effet au chargement de page. Source : lib/consent-client.ts.7 try {8 var consent = JSON.parse(localStorage.getItem('locator:consent:v1') || 'null');9 if (consent && consent.choice === 'refused') return;10 } catch (e) { /* storage bloqué : comportement par défaut (opt-out) */ }11 var h = location.hostname;12 if (h !== 'locationdi.com' && !h.endsWith('.locationdi.com')) return;13 // Google Tag Manager14 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':15 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],16 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=17 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);18 })(window,document,'script','dataLayer','GTM-N23V72B2');19 // Google Ads (gtag.js) — suivi de conversion20 var ad=document.createElement('script');ad.async=true;21 ad.src='https://www.googletagmanager.com/gtag/js?id=AW-18179616586';22 document.head.appendChild(ad);23 gtag('js', new Date());24 gtag('config', 'AW-18179616586');25 })();26 </script><!-- End GTM + Google Ads --><meta charset="utf-8"><link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="Location DI"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#2F5D2E"><link rel="canonical" href="https://locationdi.com/logements/region/lanaudiere/berthierville"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"><meta name="description" content="Logements à louer à Berthierville (Lanaudière) : 3½, 4½, 5½ gérés par Location DI. Prix, disponibilités et photos à jour."><title>Logements à louer à Berthierville | Location DI</title><meta property="og:type" content="website"><meta property="og:url" content="https://locationdi.com/logements/region/lanaudiere/berthierville"><meta property="og:title" content="Logements à louer à Berthierville | Location DI"><meta property="og:description" content="Logements à louer à Berthierville (Lanaudière) : 3½, 4½, 5½ gérés par Location DI. Prix, disponibilités et photos à jour."><meta property="og:image" content="https://locationdi.com/og-image.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="Location DI — Gestionnaire d'immeubles au Québec. Bien logé. Bien accompagné."><meta property="og:locale" content="fr_CA"><meta property="og:site_name" content="Location DI"><meta property="fb:app_id" content="966242223397117"><!-- Verification de propriete du domaine locationdi.com (Meta Business Suite > Brand safety > Domaines) --><meta name="facebook-domain-verification" content="v1ucjmyd65qg1q7ehlgt2zu4gi4ocj"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://locationdi.com/logements/region/lanaudiere/berthierville"><meta name="twitter:title" content="Logements à louer à Berthierville | Location DI"><meta name="twitter:description" content="Logements à louer à Berthierville (Lanaudière) : 3½, 4½, 5½ gérés par Location DI. Prix, disponibilités et photos à jour."><meta name="twitter:image" content="https://locationdi.com/og-image.jpg"><meta name="twitter:image:alt" content="Location DI — Gestionnaire d'immeubles au Québec. Bien logé. Bien accompagné."> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Logements","item":"https://locationdi.com/logements"},{"@type":"ListItem","position":2,"name":"Lanaudière","item":"https://locationdi.com/logements/region/lanaudiere"},{"@type":"ListItem","position":3,"name":"Berthierville","item":"https://locationdi.com/logements/region/lanaudiere/berthierville"}]}</script> <script type="application/ld+json">{"@context":"https://schema.org","@type":"CollectionPage","name":"Logements à louer à Berthierville","description":"Logements à louer à Berthierville (Lanaudière) : 3½, 4½, 5½ gérés par Location DI. Prix, disponibilités et photos à jour.","url":"https://locationdi.com/logements/region/lanaudiere/berthierville","mainEntity":{"@type":"ItemList","numberOfItems":3,"itemListElement":[{"@type":"ListItem","position":1,"name":"3½ à louer — 330 Rue de Bienville, app. 2","url":"https://locationdi.com/logements/3-330-rue-de-bienville-2-446229"},{"@type":"ListItem","position":2,"name":"3½ à louer — 330 Rue de Bienville, app. 5","url":"https://locationdi.com/logements/3-330-rue-de-bienville-5-446232"},{"@type":"ListItem","position":3,"name":"3½ à louer — 330 Rue de Bienville, app. 8","url":"https://locationdi.com/logements/3-330-rue-de-bienville-8-abordable-446235"}]}}</script> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script><link rel="stylesheet" href="/_astro/Layout.Bk6kjvn7.css?dpl=6a770c5aa9d6f6000809ad95">27<style>.villes-scroll[data-astro-cid-zqhg2sfa]{scrollbar-width:none;-ms-overflow-style:none;cursor:grab;-webkit-user-select:none;user-select:none}.villes-scroll[data-astro-cid-zqhg2sfa]::-webkit-scrollbar{display:none}.villes-scroll[data-astro-cid-zqhg2sfa].is-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}28.ville-intro-summary[data-astro-cid-scz7trl6]{list-style:none}.ville-intro-summary[data-astro-cid-scz7trl6]::-webkit-details-marker{display:none}.ville-intro-details[data-astro-cid-scz7trl6]:not([open]) .show-when-open[data-astro-cid-scz7trl6]{display:none}.ville-intro-details[data-astro-cid-scz7trl6][open] .show-when-closed[data-astro-cid-scz7trl6]{display:none}29</style></head> <body class="min-h-screen bg-cream font-sans text-warm-900 antialiased"> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N23V72B2" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div class="sticky top-0 z-50"> <aside id="site-promo" data-dismiss-key="promo-dismissed:mois-gratuit-ete-2026+electros-75-2026" class="relative overflow-hidden bg-gradient-to-r from-accent-800 via-accent-700 to-accent-800 text-white" aria-label="Promotions en cours"><div class="absolute inset-x-0 bottom-0 h-px bg-white/15" aria-hidden="true"></div><div class="mx-auto flex max-w-[1800px] items-center gap-x-4 px-4 py-2.5 sm:px-8"><div class="relative min-w-0 flex-1"><div data-promo-slide class="flex w-full items-center gap-x-4 transition-opacity duration-500 motion-reduce:transition-none"><p class="flex min-w-0 flex-1 items-center justify-center gap-3 sm:justify-start"><span class="hidden shrink-0 items-center rounded-full border border-white/25 bg-white/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-white/90 sm:inline-flex">30Offre31</span><span class="min-w-0 truncate"><strong class="font-serif text-[15px] font-semibold tracking-tight">1 mois gratuit</strong><span class="text-sm text-white/70"> · jusqu'au 21 septembre 2026</span></span></p><button type="button" data-promo-cta class="group shrink-0 inline-flex items-center gap-1.5 rounded-full bg-white px-4 py-1.5 text-xs font-semibold text-accent-800 shadow-sm transition hover:bg-cream">J'en profite<svg class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 12h12"></path></svg></button></div><div data-promo-slide class="flex w-full items-center gap-x-4 transition-opacity duration-500 motion-reduce:transition-none pointer-events-none absolute inset-0 opacity-0" aria-hidden="true" inert><p class="flex min-w-0 flex-1 items-center justify-center gap-3 sm:justify-start"><span class="hidden shrink-0 items-center rounded-full border border-white/25 bg-white/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-white/90 sm:inline-flex">32Offre33</span><span class="min-w-0 truncate"><strong class="font-serif text-[15px] font-semibold tracking-tight">5 électroménagers à 100$/mois</strong><span class="text-sm text-white/70"> · jusqu'au 1er décembre 2026</span></span></p><button type="button" data-promo-cta class="group shrink-0 inline-flex items-center gap-1.5 rounded-full bg-white px-4 py-1.5 text-xs font-semibold text-accent-800 shadow-sm transition hover:bg-cream">J'en profite<svg class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 12h12"></path></svg></button></div></div><button type="button" id="site-promo-dismiss" class="shrink-0 rounded-full p-1 text-white/70 transition hover:bg-white/15 hover:text-white" aria-label="Fermer les promotions"><svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div></aside><script type="module">const e=document.getElementById("site-promo");if(e){const r=e.dataset.dismissKey||"promo-dismissed";if(sessionStorage.getItem(r))e.remove();else{document.getElementById("site-promo-dismiss")?.addEventListener("click",()=>{sessionStorage.setItem(r,"1"),e.remove()}),e.addEventListener("click",s=>{s.target.closest("[data-promo-cta]")&&window.dispatchEvent(new CustomEvent("open-chat"))});const t=Array.from(e.querySelectorAll("[data-promo-slide]"));if(t.length>1){const s=["pointer-events-none","absolute","inset-0","opacity-0"];let i=0;setInterval(()=>{const o=t[i];i=(i+1)%t.length;const n=t[i];o.classList.add(...s),o.setAttribute("aria-hidden","true"),o.setAttribute("inert",""),n.classList.remove(...s),n.removeAttribute("aria-hidden"),n.removeAttribute("inert")},7e3)}}}</script> <header id="site-header" class="border-b border-warm-200/60 bg-cream/95 backdrop-blur-sm transition-shadow"> <nav class="mx-auto flex max-w-[1800px] items-center gap-4 px-4 py-4 sm:gap-8 sm:px-8"> <!-- Logo à gauche --> <a href="/" class="shrink-0" aria-label="Location DI - logements à louer"> <img src="/logo-location-di.png" alt="Location DI - logements à louer" class="block h-auto w-44 max-w-full lg:w-52"> </a> <!-- Nav links centrés dans l'espace disponible --> <div class="hidden flex-1 items-center justify-center gap-14 md:flex"> <a href="/" class="text-xl transition-colors border-b-2 pb-1 pt-[6px] font-medium text-warm-600 border-transparent hover:text-accent-600"> Accueil </a><div class="group relative"> <a href="/logements" class="inline-flex items-center gap-1 text-xl transition-colors border-b-2 pb-1 pt-[6px] font-semibold text-warm-900 border-accent-500">34Logements35<svg class="h-4 w-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <!-- Méga-menu (CSS hover ; le pt-4 garde le survol continu entre le lien et le panneau) --> <div class="invisible absolute left-1/2 top-full z-50 -translate-x-1/2 pt-4 opacity-0 transition-all duration-150 group-hover:visible group-hover:opacity-100"> <div class="w-[min(92vw,720px)] rounded-2xl border border-warm-200 bg-white p-6 shadow-xl shadow-warm-300/40"> <a href="/logements" class="inline-flex items-center gap-1 text-sm font-semibold text-accent-700 transition hover:text-accent-800">36Voir tous les logements37<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg> </a> <div class="mt-4 grid grid-cols-3 gap-6 border-t border-warm-100 pt-4"> <div> <a href="/logements/region/lanaudiere" class="block text-sm font-semibold text-warm-900 transition hover:text-accent-600">Lanaudière</a> <ul class="mt-2 space-y-1.5"> <li> <a href="/logements/region/lanaudiere/berthierville" class="block text-sm text-warm-600 transition hover:text-accent-600">Berthierville</a> </li><li> <a href="/logements/region/lanaudiere/saint-ambroise-de-kildare" class="block text-sm text-warm-600 transition hover:text-accent-600">Saint-Ambroise-de-Kildare</a> </li><li> <a href="/logements/region/lanaudiere/saint-charles-borromee" class="block text-sm text-warm-600 transition hover:text-accent-600">Saint-Charles-Borromée</a> </li><li> <a href="/logements/region/lanaudiere/saint-felix-de-valois" class="block text-sm text-warm-600 transition hover:text-accent-600">Saint-Félix-de-Valois</a> </li><li> <a href="/logements/region/lanaudiere/saint-gabriel-de-brandon" class="block text-sm text-warm-600 transition hover:text-accent-600">Saint-Gabriel-de-Brandon</a> </li><li class="js-ville-extra hidden"> <a href="/logements/region/lanaudiere/saint-jean-de-matha" class="block text-sm text-warm-600 transition hover:text-accent-600">Saint-Jean-de-Matha</a> </li><li class="js-ville-extra hidden"> <a href="/logements/region/lanaudiere/sainte-elisabeth" class="block text-sm text-warm-600 transition hover:text-accent-600">Sainte-Élisabeth</a> </li> <li> <button type="button" class="js-villes-toggle inline-flex items-center gap-1 text-sm font-medium text-accent-700 transition hover:text-accent-800" aria-expanded="false" data-count="2"> <span class="js-villes-toggle-label">+ 2 autres</span> <svg class="js-villes-toggle-chevron h-3.5 w-3.5 transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg> </button> </li> </ul> </div><div> <a href="/logements/region/laurentides" class="block text-sm font-semibold text-warm-900 transition hover:text-accent-600">Laurentides</a> <ul class="mt-2 space-y-1.5"> <li> <a href="/logements/region/laurentides/lachute" class="block text-sm text-warm-600 transition hover:text-accent-600">Lachute</a> </li> </ul> </div><div> <a href="/logements/region/mauricie" class="block text-sm font-semibold text-warm-900 transition hover:text-accent-600">Mauricie</a> <ul class="mt-2 space-y-1.5"> <li> <a href="/logements/region/mauricie/becancour" class="block text-sm text-warm-600 transition hover:text-accent-600">Bécancour</a> </li><li> <a href="/logements/region/mauricie/trois-rivieres" class="block text-sm text-warm-600 transition hover:text-accent-600">Trois-Rivières</a> </li> </ul> </div><div> <a href="/logements/region/montreal" class="block text-sm font-semibold text-warm-900 transition hover:text-accent-600">Montréal</a> <ul class="mt-2 space-y-1.5"> </ul> </div> </div> </div> </div> </div><a href="/notre-entreprise" class="text-xl transition-colors border-b-2 pb-1 pt-[6px] font-medium text-warm-600 border-transparent hover:text-accent-600"> Notre entreprise </a><a href="/contact" class="text-xl transition-colors border-b-2 pb-1 pt-[6px] font-medium text-warm-600 border-transparent hover:text-accent-600"> Contact </a> </div> <!-- CTA à droite --> <div class="hidden shrink-0 items-end gap-4 md:flex"> <a href="/logements" class="rounded-xl bg-accent-500 px-6 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-accent-400 hover:shadow-md hover:-translate-y-0.5">38Trouve ton logement ici39</a> <a href="/contact?mode=proprietaire" class="text-sm text-warm-500 transition-colors hover:text-warm-700">40Propriétaires?41</a> </div> <button id="mobile-menu-btn-e" class="flex h-11 w-11 items-center justify-center rounded-lg text-warm-700 transition hover:bg-warm-100 md:hidden" aria-label="Menu" aria-expanded="false"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </nav> <div id="mobile-menu-e" class="hidden border-t border-warm-200/60 bg-cream px-4 pb-4 md:hidden"> <a href="/" class="block py-3 text-sm font-medium transition-colors hover:text-accent-600 text-warm-600"> Accueil </a><div class="border-b border-warm-200/60"> <button id="mobile-logements-toggle" class="flex w-full items-center justify-between py-3 text-sm font-medium text-warm-600 transition hover:text-accent-600" aria-expanded="false" aria-controls="mobile-logements-sub">42Logements43<svg id="mobile-logements-chevron" class="h-4 w-4 transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </button> <div id="mobile-logements-sub" class="hidden pb-2"> <a href="/logements" class="block py-2 text-sm font-semibold text-accent-700">Voir tous les logements</a> <div class="mt-1"> <a href="/logements/region/lanaudiere" class="block py-1.5 text-sm font-semibold text-warm-800 hover:text-accent-600">Lanaudière</a> <a href="/logements/region/lanaudiere/berthierville" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Berthierville</a><a href="/logements/region/lanaudiere/saint-ambroise-de-kildare" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Saint-Ambroise-de-Kildare</a><a href="/logements/region/lanaudiere/saint-charles-borromee" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Saint-Charles-Borromée</a><a href="/logements/region/lanaudiere/saint-felix-de-valois" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Saint-Félix-de-Valois</a><a href="/logements/region/lanaudiere/saint-gabriel-de-brandon" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Saint-Gabriel-de-Brandon</a><a href="/logements/region/lanaudiere/saint-jean-de-matha" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Saint-Jean-de-Matha</a><a href="/logements/region/lanaudiere/sainte-elisabeth" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Sainte-Élisabeth</a> </div><div class="mt-1"> <a href="/logements/region/laurentides" class="block py-1.5 text-sm font-semibold text-warm-800 hover:text-accent-600">Laurentides</a> <a href="/logements/region/laurentides/lachute" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Lachute</a> </div><div class="mt-1"> <a href="/logements/region/mauricie" class="block py-1.5 text-sm font-semibold text-warm-800 hover:text-accent-600">Mauricie</a> <a href="/logements/region/mauricie/becancour" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Bécancour</a><a href="/logements/region/mauricie/trois-rivieres" class="block py-1 pl-3 text-sm text-warm-500 hover:text-accent-600">Trois-Rivières</a> </div><div class="mt-1"> <a href="/logements/region/montreal" class="block py-1.5 text-sm font-semibold text-warm-800 hover:text-accent-600">Montréal</a> </div> </div> </div><a href="/notre-entreprise" class="block py-3 text-sm font-medium transition-colors hover:text-accent-600 text-warm-600"> Notre entreprise </a><a href="/contact" class="block py-3 text-sm font-medium transition-colors hover:text-accent-600 text-warm-600"> Contact </a> <div class="mt-3 flex flex-col gap-3 border-t border-warm-200 pt-4"> <a href="/contact?mode=proprietaire" class="text-sm text-warm-500 transition-colors hover:text-warm-700">44Propriétaires?45</a> <a href="/logements" class="rounded-xl bg-accent-500 px-5 py-3 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-accent-400 hover:shadow-md">46Trouve ton logement ici47</a> </div> </div> </header> <script type="module">const s=document.getElementById("mobile-menu-btn-e"),n=document.getElementById("mobile-menu-e");s&&n&&s.addEventListener("click",()=>{const e=!n.classList.contains("hidden");n.classList.toggle("hidden"),s.setAttribute("aria-expanded",String(!e))});const l=document.getElementById("mobile-logements-toggle"),o=document.getElementById("mobile-logements-sub"),a=document.getElementById("mobile-logements-chevron");l&&o&&l.addEventListener("click",()=>{const e=!o.classList.contains("hidden");o.classList.toggle("hidden"),l.setAttribute("aria-expanded",String(!e)),a?.classList.toggle("rotate-180",!e)});const i=document.getElementById("site-header");if(i){const e=()=>{window.scrollY>4?i.classList.add("is-scrolled"):i.classList.remove("is-scrolled")};window.addEventListener("scroll",e,{passive:!0}),e()}document.querySelectorAll(".js-villes-toggle").forEach(e=>{e.addEventListener("click",()=>{const c=e.closest("ul");if(!c)return;const t=e.getAttribute("aria-expanded")==="true";c.querySelectorAll(".js-ville-extra").forEach(r=>r.classList.toggle("hidden",t)),e.setAttribute("aria-expanded",String(!t));const d=e.querySelector(".js-villes-toggle-label");d&&(d.textContent=t?`+ ${e.getAttribute("data-count")} autres`:"voir moins"),e.querySelector(".js-villes-toggle-chevron")?.classList.toggle("rotate-180",!t)})});</script> </div> <main class="pb-16 md:pb-0"> <section class="py-8" data-astro-cid-scz7trl6> <div class="mx-auto max-w-7xl px-4 sm:px-6" data-astro-cid-scz7trl6> <nav class="mb-6 text-sm text-warm-500" data-astro-cid-scz7trl6> <a href="/logements" class="inline-block py-3 -my-3 hover:text-accent-600" data-astro-cid-scz7trl6>Logements</a> <span class="mx-2" data-astro-cid-scz7trl6>›</span> <a href="/logements/region/lanaudiere" class="hover:text-accent-600" data-astro-cid-scz7trl6>Lanaudière</a> <span class="mx-2" data-astro-cid-scz7trl6>›</span> <span class="text-warm-900" data-astro-cid-scz7trl6>Berthierville</span> </nav> <p class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-warm-500" data-astro-cid-scz7trl6> <span class="h-0.5 w-6 rounded bg-accent-500" aria-hidden="true" data-astro-cid-scz7trl6></span>48Logements à louer49</p> <h1 class="mt-3 tracking-tight text-warm-900" data-astro-cid-scz7trl6> <span class="block font-sans text-3xl font-extrabold text-accent-700 sm:text-4xl" data-astro-cid-scz7trl6>Moderne et Abordable</span> <span class="block font-serif font-bold mt-2 text-2xl sm:text-3xl" data-astro-cid-scz7trl6>Trouvez votre chez-vous à Berthierville.</span> </h1> <article class="mt-6 max-w-3xl space-y-5 text-base leading-relaxed text-warm-700" data-astro-cid-scz7trl6> <p data-astro-cid-scz7trl6>À la sortie directe de l'autoroute 40, à mi-chemin entre Montréal et Trois-Rivières, Berthierville est une ville dynamique en pleine revitalisation, portée par un solide tissu industriel. Un milieu de vie abordable et pratique, où l'on travaille, vit et se déplace facilement.</p> <section data-astro-cid-scz7trl6> <h2 class="text-lg font-semibold text-warm-900" data-astro-cid-scz7trl6>Au cœur de la ville, à la sortie de l'autoroute 40</h2> <p class="mt-2" data-astro-cid-scz7trl6>Nos logements sont <strong>au cœur de Berthierville</strong>, à distance de marche des commerces et des services, avec un <strong>accès immédiat à l'autoroute 40</strong>. Idéal pour qui veut tout avoir sur place et un trajet simple vers Montréal comme vers Trois-Rivières.</p> </section> <details class="ville-intro-details" data-astro-cid-scz7trl6> <summary class="ville-intro-summary cursor-pointer text-sm font-semibold text-accent-700 transition hover:text-accent-800 select-none" data-astro-cid-scz7trl6> <span class="show-when-closed inline-flex items-center gap-1" data-astro-cid-scz7trl6>50Lire la suite51<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" data-astro-cid-scz7trl6> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" data-astro-cid-scz7trl6></path> </svg> </span> <span class="show-when-open inline-flex items-center gap-1" data-astro-cid-scz7trl6>52Réduire53<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" data-astro-cid-scz7trl6> <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" data-astro-cid-scz7trl6></path> </svg> </span> </summary> <div class="mt-4 space-y-5" data-astro-cid-scz7trl6> <section data-astro-cid-scz7trl6> <h2 class="text-lg font-semibold text-warm-900" data-astro-cid-scz7trl6>Une ville qui travaille</h2> <p class="mt-2" data-astro-cid-scz7trl6>Berthierville s'appuie sur un tissu industriel solide, avec des employeurs majeurs comme <strong>Olymel</strong> (agroalimentaire) et le <strong>Groupe EBI</strong>, entreprise familiale née ici en 1960. Une ville en pleine revitalisation, qui conjugue emploi local et qualité de vie.</p> </section><section data-astro-cid-scz7trl6> <h2 class="text-lg font-semibold text-warm-900" data-astro-cid-scz7trl6>Le fleuve en prime</h2> <p class="mt-2" data-astro-cid-scz7trl6>En prime, Berthierville offre le fleuve Saint-Laurent et ses îles : activités nautiques, parcs riverains et le célèbre <strong>Musée Gilles-Villeneuve</strong>, hommage au pilote de Formule 1 natif de la ville.</p> </section> <section data-astro-cid-scz7trl6> <p class="mb-2" data-astro-cid-scz7trl6>Vivre à Berthierville, c'est avoir accès à :</p> <ul class="ml-5 list-disc space-y-2 text-warm-700 marker:text-accent-500" data-astro-cid-scz7trl6> <li data-astro-cid-scz7trl6><strong data-astro-cid-scz7trl6>L'accès :</strong> la sortie directe de l'autoroute 40, à mi-chemin entre Montréal et Trois-Rivières.</li><li data-astro-cid-scz7trl6><strong data-astro-cid-scz7trl6>L'emploi :</strong> des employeurs majeurs comme Olymel et le Groupe EBI, sur place.</li><li data-astro-cid-scz7trl6><strong data-astro-cid-scz7trl6>Le cadre :</strong> le fleuve, les îles de Berthier et le patrimoine local.</li> </ul> </section> </div> </details> <a href="/contact?tab=candidature&mode=logement&intent=visite&source=ville-berthierville" class="mt-2 inline-flex items-center gap-2 rounded-xl bg-accent-500 px-6 py-3 text-sm font-semibold text-white shadow-md shadow-accent-500/20 transition hover:bg-accent-400" data-astro-cid-scz7trl6>54Réservez votre visite en ligne55<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" data-astro-cid-scz7trl6> <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" data-astro-cid-scz7trl6></path> </svg> </a> </article> <section class="mt-8" data-astro-cid-scz7trl6> <div class="max-w-3xl" data-astro-cid-scz7trl6> <h2 class="text-lg font-semibold text-warm-900" data-astro-cid-scz7trl6>Les villes que nous couvrons dans Lanaudière</h2> <p class="mt-1 text-sm text-warm-500" data-astro-cid-scz7trl6>Change de ville, ou reviens à toute la région.</p> </div> <div class="villes-scroll flex gap-2 overflow-x-auto py-3 mt-3" data-villes-scroll data-astro-cid-zqhg2sfa> <a href="/logements/region/lanaudiere" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-warm-300 bg-white px-4 py-1.5 text-sm text-warm-700 transition hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6>56Toute la région57</a> <a href="/logements/region/lanaudiere/berthierville" aria-current="page" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-accent-400 bg-accent-50 font-semibold text-accent-700" data-astro-cid-scz7trl6> Berthierville </a><a href="/logements/region/lanaudiere/saint-ambroise-de-kildare" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-warm-300 bg-white text-warm-700 hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6> Saint-Ambroise-de-Kildare </a><a href="/logements/region/lanaudiere/saint-charles-borromee" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-warm-300 bg-white text-warm-700 hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6> Saint-Charles-Borromée </a><a href="/logements/region/lanaudiere/saint-felix-de-valois" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-warm-300 bg-white text-warm-700 hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6> Saint-Félix-de-Valois </a><a href="/logements/region/lanaudiere/saint-gabriel-de-brandon" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-warm-300 bg-white text-warm-700 hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6> Saint-Gabriel-de-Brandon </a><a href="/logements/region/lanaudiere/saint-jean-de-matha" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-warm-300 bg-white text-warm-700 hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6> Saint-Jean-de-Matha </a><a href="/logements/region/lanaudiere/sainte-elisabeth" class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-4 py-1.5 text-sm transition border-warm-300 bg-white text-warm-700 hover:border-accent-400 hover:text-accent-600" data-astro-cid-scz7trl6> Sainte-Élisabeth </a> </div> <script>58 (function () {59 document.querySelectorAll('[data-villes-scroll]').forEach(function (track) {60 // Empêche le drag natif des liens / images : sans ça, mousedown + déplacement61 // sur un chip <a> lance un glisser-déposer natif et le clic-glisser ne défile pas.62 track.addEventListener('dragstart', function (e) {63 e.preventDefault()64 })6566 // --- Molette verticale -> défilement horizontal ---67 track.addEventListener(68 'wheel',69 function (e) {70 if (!e.deltaY) return71 if (track.scrollWidth <= track.clientWidth) return72 var atStart = track.scrollLeft <= 073 var atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 174 // Laisse la page défiler verticalement quand on est déjà au bout.75 if ((e.deltaY < 0 && atStart) || (e.deltaY > 0 && atEnd)) return76 e.preventDefault()77 // Normalise deltaMode (certaines souris Windows envoient des « lignes », pas des px).78 var step = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaMode === 2 ? e.deltaY * track.clientWidth : e.deltaY79 track.scrollLeft += step80 },81 { passive: false },82 )8384 // --- Clic-glisser (souris uniquement ; touch/pen restent natifs) ---85 // move/up écoutés au niveau window (et PAS de setPointerCapture) : le drag86 // continue même si le curseur sort de la bande, et on évite les blocages de87 // capture de pointeur sur un conteneur scrollable (cause du drag mort).88 var down = false,89 startX = 0,90 startLeft = 0,91 moved = 092 track.addEventListener('pointerdown', function (e) {93 if (e.pointerType !== 'mouse' || e.button !== 0) return94 down = true95 moved = 096 startX = e.clientX97 startLeft = track.scrollLeft98 track.classList.add('is-dragging')99 e.preventDefault() // coupe la sélection / le drag natif dès le mousedown100 })101 window.addEventListener('pointermove', function (e) {102 if (!down) return103 var dx = e.clientX - startX104 if (Math.abs(dx) > moved) moved = Math.abs(dx)105 track.scrollLeft = startLeft - dx106 })107 function endDrag() {108 if (!down) return109 down = false110 track.classList.remove('is-dragging')111 }112 window.addEventListener('pointerup', endDrag)113 window.addEventListener('pointercancel', endDrag)114 // Un vrai glissé ne doit pas déclencher la navigation du chip cliqué.115 track.addEventListener(116 'click',117 function (e) {118 if (moved > 6) {119 e.preventDefault()120 e.stopPropagation()121 }122 },123 true,124 )125 })126 })()127</script> </section> <p id="disponibilites" class="mt-8 scroll-mt-24 text-sm text-warm-500" data-results-count data-results-suffix="à Berthierville" data-astro-cid-scz7trl6> 3 logements disponibles à Berthierville. </p> <script type="module">function p(){document.querySelectorAll(".logement-card").forEach(v=>{const c=v.querySelector(".carousel-container");if(!c)return;const a=c.querySelectorAll(".carousel-slide");if(a.length<=1)return;const y=c.querySelectorAll(".carousel-dot"),i=c.querySelector(".carousel-prev"),d=c.querySelector(".carousel-next");let n=0;const s=a.length;function r(t){a.forEach((e,o)=>{e.style.opacity=o===t?"1":"0"}),y.forEach((e,o)=>{e.style.opacity=o===t?"1":"0.5",e.style.transform=o===t?"scale(1.25)":"scale(1)"}),n=t}function f(t){t.preventDefault(),t.stopPropagation()}i&&i.addEventListener("click",t=>{f(t),r((n-1+s)%s)}),d&&d.addEventListener("click",t=>{f(t),r((n+1)%s)});let l=0,h=0,u=!1;c.addEventListener("touchstart",t=>{l=t.touches[0].clientX,h=t.touches[0].clientY,u=!1},{passive:!0}),c.addEventListener("touchmove",t=>{const e=t.touches[0].clientX-l,o=t.touches[0].clientY-h;Math.abs(e)>Math.abs(o)&&Math.abs(e)>10&&(u=!0,t.preventDefault())},{passive:!1}),c.addEventListener("touchend",t=>{const e=t.changedTouches[0].clientX-l;u&&Math.abs(e)>50&&(e<0?r((n+1)%s):r((n-1+s)%s),t.preventDefault())})})}p();document.addEventListener("astro:after-swap",p);</script><div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3" data-paginated-grid data-api-base="/api/logements-cards?size=9&hrefBase=%2Flogements&region=Lanaudi%C3%A8re&ville=Berthierville" data-page-size="9" data-total="3"> <a href="/logements/3-330-rue-de-bienville-2-446229" class="logement-card group block overflow-hidden rounded-2xl border border-warm-200 bg-white transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-warm-300/40"> <div class="relative aspect-[4/3] overflow-hidden bg-warm-100"> <div class="carousel-container relative h-full w-full"> <img src="https://cdn.sanity.io/images/4ae0mkdu/production/2ce77fa83290f349521effb98fb314608c78ecbe-1500x1000.jpg" alt="3½ – photo 1" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-100" data-slide="0" loading="lazy"><img src="https://cdn.sanity.io/images/4ae0mkdu/production/61b995aeb3ba80b2ce45f4a5c9194163a1249f96-577x573.png" alt="3½ – photo 2" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-0" data-slide="1" loading="lazy"><img src="https://cdn.sanity.io/images/4ae0mkdu/production/f712582a280a0dcce9a53162d47ff441d4f9d07a-1500x1000.jpg" alt="3½ – photo 3" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-0" data-slide="2" loading="lazy"> <button type="button" class="carousel-prev absolute left-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white/80 p-1.5 text-warm-700 shadow backdrop-blur-sm transition hover:bg-white group-hover:md:block" aria-label="Photo précédente"> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> </button> <button type="button" class="carousel-next absolute right-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white/80 p-1.5 text-warm-700 shadow backdrop-blur-sm transition hover:bg-white group-hover:md:block" aria-label="Photo suivante"> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg> </button> <div class="absolute bottom-2 left-1/2 z-10 flex -translate-x-1/2 items-center gap-1.5 md:hidden md:group-hover:flex"> <span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white scale-125" data-dot="0"></span><span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white/50" data-dot="1"></span><span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white/50" data-dot="2"></span> </div> </div> <span class="absolute bottom-2.5 right-2.5 z-10 flex items-center gap-1 rounded-full bg-warm-900/70 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm"> <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7h2l2-3h10l2 3h2a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1z"></path><circle cx="12" cy="13" r="4"></circle></svg> 21 </span> <span class="absolute bottom-2.5 left-2.5 z-10 flex items-center gap-1 rounded-full bg-accent-600/90 px-2.5 py-1 text-xs font-semibold text-white backdrop-blur-sm"> <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9-9 9 9M4 11v8a1 1 0 001 1h4v-5h6v5h4a1 1 0 001-1v-8"></path></svg>1283D129</span> <div class="absolute left-3 right-3 top-3 z-10 flex flex-wrap items-start gap-1.5"> <span class="rounded-full bg-sky-500/90 px-2 py-1 text-[10px] font-semibold text-white backdrop-blur-sm sm:px-2.5 sm:py-1 sm:text-xs"> <span class="sm:hidden">Récent</span> <span class="hidden sm:inline">Immeuble récent</span> </span> </div> </div> <div class="p-3 sm:p-5"> <div class="flex items-center gap-3"> <p class="text-xl sm:text-2xl font-bold text-accent-600"> <span class="block text-xs font-medium uppercase tracking-wide text-warm-500">À partir de</span> 1 025$130<span class="text-sm font-normal text-warm-500"> / mois</span> </p> <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold bg-[#D9F5DC] text-[#2E6E1F] ring-1 ring-[#7BCB67]"> <span class="h-1.5 w-1.5 rounded-full bg-[#00C776]"></span> Disponible dès maintenant </span> </div> <p class="mt-2 text-sm text-warm-600"> <span class="text-base font-semibold text-warm-800">3½</span> <span> · 615 pi² · RDC</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">330 Rue de Bienville, app. 2</p> <p class="text-sm text-warm-500">Berthierville</p> </div> </div> </a> <a href="/logements/3-330-rue-de-bienville-5-446232" class="logement-card group block overflow-hidden rounded-2xl border border-warm-200 bg-white transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-warm-300/40"> <div class="relative aspect-[4/3] overflow-hidden bg-warm-100"> <div class="carousel-container relative h-full w-full"> <img src="https://cdn.sanity.io/images/4ae0mkdu/production/2ce77fa83290f349521effb98fb314608c78ecbe-1500x1000.jpg" alt="3½ – photo 1" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-100" data-slide="0" loading="lazy"><img src="https://cdn.sanity.io/images/4ae0mkdu/production/61b995aeb3ba80b2ce45f4a5c9194163a1249f96-577x573.png" alt="3½ – photo 2" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-0" data-slide="1" loading="lazy"><img src="https://cdn.sanity.io/images/4ae0mkdu/production/f712582a280a0dcce9a53162d47ff441d4f9d07a-1500x1000.jpg" alt="3½ – photo 3" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-0" data-slide="2" loading="lazy"> <button type="button" class="carousel-prev absolute left-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white/80 p-1.5 text-warm-700 shadow backdrop-blur-sm transition hover:bg-white group-hover:md:block" aria-label="Photo précédente"> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> </button> <button type="button" class="carousel-next absolute right-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white/80 p-1.5 text-warm-700 shadow backdrop-blur-sm transition hover:bg-white group-hover:md:block" aria-label="Photo suivante"> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg> </button> <div class="absolute bottom-2 left-1/2 z-10 flex -translate-x-1/2 items-center gap-1.5 md:hidden md:group-hover:flex"> <span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white scale-125" data-dot="0"></span><span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white/50" data-dot="1"></span><span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white/50" data-dot="2"></span> </div> </div> <span class="absolute bottom-2.5 right-2.5 z-10 flex items-center gap-1 rounded-full bg-warm-900/70 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm"> <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7h2l2-3h10l2 3h2a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1z"></path><circle cx="12" cy="13" r="4"></circle></svg> 21 </span> <span class="absolute bottom-2.5 left-2.5 z-10 flex items-center gap-1 rounded-full bg-accent-600/90 px-2.5 py-1 text-xs font-semibold text-white backdrop-blur-sm"> <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9-9 9 9M4 11v8a1 1 0 001 1h4v-5h6v5h4a1 1 0 001-1v-8"></path></svg>1313D132</span> <div class="absolute left-3 right-3 top-3 z-10 flex flex-wrap items-start gap-1.5"> <span class="rounded-full bg-sky-500/90 px-2 py-1 text-[10px] font-semibold text-white backdrop-blur-sm sm:px-2.5 sm:py-1 sm:text-xs"> <span class="sm:hidden">Récent</span> <span class="hidden sm:inline">Immeuble récent</span> </span> </div> </div> <div class="p-3 sm:p-5"> <div class="flex items-center gap-3"> <p class="text-xl sm:text-2xl font-bold text-accent-600"> <span class="block text-xs font-medium uppercase tracking-wide text-warm-500">À partir de</span> 1 025$133<span class="text-sm font-normal text-warm-500"> / mois</span> </p> <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold bg-[#D9F5DC] text-[#2E6E1F] ring-1 ring-[#7BCB67]"> <span class="h-1.5 w-1.5 rounded-full bg-[#00C776]"></span> Disponible dès maintenant </span> </div> <p class="mt-2 text-sm text-warm-600"> <span class="text-base font-semibold text-warm-800">3½</span> <span> · 660 pi² · 2e Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">330 Rue de Bienville, app. 5</p> <p class="text-sm text-warm-500">Berthierville</p> </div> </div> </a> <a href="/logements/3-330-rue-de-bienville-8-abordable-446235" class="logement-card group block overflow-hidden rounded-2xl border border-warm-200 bg-white transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-warm-300/40"> <div class="relative aspect-[4/3] overflow-hidden bg-warm-100"> <div class="carousel-container relative h-full w-full"> <img src="https://cdn.sanity.io/images/4ae0mkdu/production/2ce77fa83290f349521effb98fb314608c78ecbe-1500x1000.jpg" alt="3½ – photo 1" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-100" data-slide="0" loading="lazy"><img src="https://cdn.sanity.io/images/4ae0mkdu/production/61b995aeb3ba80b2ce45f4a5c9194163a1249f96-577x573.png" alt="3½ – photo 2" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-0" data-slide="1" loading="lazy"><img src="https://cdn.sanity.io/images/4ae0mkdu/production/f712582a280a0dcce9a53162d47ff441d4f9d07a-1500x1000.jpg" alt="3½ – photo 3" class="carousel-slide absolute inset-0 h-full w-full object-cover transition-all duration-500 group-hover:scale-105 opacity-0" data-slide="2" loading="lazy"> <button type="button" class="carousel-prev absolute left-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white/80 p-1.5 text-warm-700 shadow backdrop-blur-sm transition hover:bg-white group-hover:md:block" aria-label="Photo précédente"> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> </button> <button type="button" class="carousel-next absolute right-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white/80 p-1.5 text-warm-700 shadow backdrop-blur-sm transition hover:bg-white group-hover:md:block" aria-label="Photo suivante"> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg> </button> <div class="absolute bottom-2 left-1/2 z-10 flex -translate-x-1/2 items-center gap-1.5 md:hidden md:group-hover:flex"> <span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white scale-125" data-dot="0"></span><span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white/50" data-dot="1"></span><span class="carousel-dot pointer-events-none block h-1.5 w-1.5 rounded-full transition-all duration-300 bg-white/50" data-dot="2"></span> </div> </div> <span class="absolute bottom-2.5 right-2.5 z-10 flex items-center gap-1 rounded-full bg-warm-900/70 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm"> <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7h2l2-3h10l2 3h2a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1z"></path><circle cx="12" cy="13" r="4"></circle></svg> 21 </span> <span class="absolute bottom-2.5 left-2.5 z-10 flex items-center gap-1 rounded-full bg-accent-600/90 px-2.5 py-1 text-xs font-semibold text-white backdrop-blur-sm"> <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9-9 9 9M4 11v8a1 1 0 001 1h4v-5h6v5h4a1 1 0 001-1v-8"></path></svg>1343D135</span> <div class="absolute left-3 right-3 top-3 z-10 flex flex-wrap items-start gap-1.5"> <span class="rounded-full bg-sky-500/90 px-2 py-1 text-[10px] font-semibold text-white backdrop-blur-sm sm:px-2.5 sm:py-1 sm:text-xs"> <span class="sm:hidden">Récent</span> <span class="hidden sm:inline">Immeuble récent</span> </span> </div> </div> <div class="p-3 sm:p-5"> <div class="flex items-center gap-3"> <p class="text-xl sm:text-2xl font-bold text-accent-600"> <span class="block text-xs font-medium uppercase tracking-wide text-warm-500">À partir de</span> 1 025$136<span class="text-sm font-normal text-warm-500"> / mois</span> </p> <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold bg-[#D9F5DC] text-[#2E6E1F] ring-1 ring-[#7BCB67]"> <span class="h-1.5 w-1.5 rounded-full bg-[#00C776]"></span> Disponible dès maintenant </span> </div> <p class="mt-2 text-sm text-warm-600"> <span class="text-base font-semibold text-warm-800">3½</span> <span> · 660 pi² · 3e Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">330 Rue de Bienville, app. 8</p> <p class="text-sm text-warm-500">Berthierville</p> </div> </div> </a> </div> <script>137 (function () {138 const grid = document.querySelector('[data-paginated-grid]');139 if (!grid) return;140 const baseApi = grid.dataset.apiBase || '';141 const pageSize = parseInt(grid.dataset.pageSize || '9', 10);142 let total = parseInt(grid.dataset.total || '0', 10);143144 const more = document.querySelector('[data-paginated-grid-more]');145 const btn = document.querySelector('[data-paginated-grid-load-more]');146 const counter = document.querySelector('[data-paginated-grid-counter]');147 const moreLabel = (btn && btn.getAttribute('data-more-label')) || 'Afficher plus de logements';148 const counterSuffixe = (counter && counter.getAttribute('data-lieu-suffixe')) || '';149150 let activeApi = baseApi; // base + filtres actifs151 let currentPage = 1;152 let shown = Math.min(pageSize, total);153 let inflight = false;154155 function updateMoreUI() {156 if (more) more.style.display = shown < total ? '' : 'none';157 if (btn) {158 btn.disabled = false;159 btn.textContent = moreLabel;160 }161 if (counter) counter.textContent = shown + ' / ' + total + ' affichés' + (counterSuffixe ? ' ' + counterSuffixe : '');162 }163164 async function loadMore() {165 if (inflight || shown >= total) return;166 inflight = true;167 if (btn) { btn.disabled = true; btn.textContent = 'Chargement…'; }168 try {169 const nextPage = currentPage + 1;170 const r = await fetch(activeApi + '&page=' + nextPage);171 if (!r.ok) throw new Error('HTTP ' + r.status);172 const html = await r.text();173 grid.insertAdjacentHTML('beforeend', html);174 currentPage = nextPage;175 shown = Math.min(shown + pageSize, total);176 updateMoreUI();177 } catch (e) {178 if (btn) { btn.disabled = false; btn.textContent = 'Réessayer'; }179 console.warn('Echec chargement batch:', e);180 } finally {181 inflight = false;182 }183 }184185 // Filtrage sur place : refetch page 1 avec les filtres et remplace la grille.186 async function applyFilters(detail) {187 const params = new URLSearchParams();188 if (detail.type) params.set('type', detail.type);189 if (detail.etage) params.set('etage', detail.etage);190 if (detail.prixMin) params.set('prixMin', detail.prixMin);191 if (detail.prixMax) params.set('prixMax', detail.prixMax);192 if (detail.tri) params.set('tri', detail.tri);193 const qs = params.toString();194 activeApi = baseApi + (qs ? '&' + qs : '');195 if (inflight) return;196 inflight = true;197 grid.setAttribute('aria-busy', 'true');198 try {199 const r = await fetch(activeApi + '&page=1');200 if (!r.ok) throw new Error('HTTP ' + r.status);201 total = parseInt(r.headers.get('X-Total-Count') || '0', 10);202 // Compteur réactif du template (« X logements disponibles … »).203 const countEl = document.querySelector('[data-results-count]');204 if (countEl) {205 const suffix = countEl.getAttribute('data-results-suffix') || '';206 const plural = total > 1 ? 's' : '';207 countEl.textContent =208 total === 0209 ? 'Aucun logement disponible ' + suffix + ' pour le moment.'210 : total + ' logement' + plural + ' disponible' + plural + ' ' + suffix + '.';211 }212 const html = await r.text();213 currentPage = 1;214 shown = Math.min(pageSize, total);215 if (total === 0) {216 grid.innerHTML = '<p class="col-span-full rounded-2xl border border-warm-200 bg-warm-50 p-8 text-center text-sm text-warm-600">Aucun logement ne correspond à ces filtres. Essaie d\'élargir tes critères.</p>';217 } else {218 grid.innerHTML = html;219 }220 updateMoreUI();221 } catch (e) {222 console.warn('Echec filtrage:', e);223 } finally {224 inflight = false;225 grid.removeAttribute('aria-busy');226 }227 }228229 if (btn) btn.addEventListener('click', loadMore);230 document.addEventListener('logements:filter', function (e) {231 applyFilters((e && e.detail) || {});232 });233 })();234</script> <nav class="mt-10 -mx-4 overflow-x-auto px-4 sm:mx-0 sm:overflow-x-visible sm:px-0" aria-label="Voir aussi"><div class="flex flex-nowrap items-center gap-2 text-sm sm:flex-wrap sm:gap-3"><span class="shrink-0 text-xs font-semibold uppercase tracking-wider text-warm-500">Voir aussi</span><a href="/logements/region/lanaudiere" class="shrink-0 rounded-full border border-warm-300 bg-white px-4 py-1.5 text-warm-700 transition hover:border-accent-400 hover:text-accent-600">Logements dans Lanaudière</a><a href="/logements/region/lanaudiere/saint-felix-de-valois" class="shrink-0 rounded-full border border-warm-300 bg-white px-4 py-1.5 text-warm-700 transition hover:border-accent-400 hover:text-accent-600">Saint-Félix-de-Valois</a><a href="/logements/region/lanaudiere/mrc-joliette" class="shrink-0 rounded-full border border-warm-300 bg-white px-4 py-1.5 text-warm-700 transition hover:border-accent-400 hover:text-accent-600">MRC de Joliette</a><a href="/logements/region/lanaudiere/saint-charles-borromee" class="shrink-0 rounded-full border border-warm-300 bg-white px-4 py-1.5 text-warm-700 transition hover:border-accent-400 hover:text-accent-600">Saint-Charles-Borromée</a></div></nav> </div> </section> <section class="relative overflow-hidden"> <img src="/images/bg-studio-2500.webp" srcset="/images/bg-studio-640.webp 640w, /images/bg-studio-1280.webp 1280w, /images/bg-studio-2500.webp 2500w" sizes="100vw" alt="" class="absolute inset-0 h-full w-full object-cover object-bottom" loading="lazy"> <div class="absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-cream to-transparent"></div> <div class="absolute inset-0 bg-warm-900/50"></div> <div class="relative px-4 py-20 sm:px-6"> <div class="mx-auto max-w-2xl text-center"> <h2 class="text-3xl font-bold text-white sm:text-4xl">Le logement que tu cherches est ici.</h2> <p class="mt-4 text-lg leading-relaxed text-warm-200">Notre équipe est là pour te guider</p> <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row"> <a href="/logements" class="group flex h-14 w-56 items-center justify-center gap-2 rounded-xl bg-accent-500 text-base font-bold text-white shadow-lg shadow-accent-900/30 transition hover:scale-105 hover:bg-accent-400 hover:shadow-xl">Trouver mon logement <span class="inline-block transition-transform group-hover:translate-x-1">→</span></a> <a href="/contact#chat-humain" class="flex h-14 w-56 flex-col items-center justify-center rounded-xl border border-white/30 bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"> <span class="text-base font-bold">Clavarde</span><span class="text-xs font-medium">avec nous</span> </a> </div> </div> </div> </section> </main> <footer class="border-t border-warm-200 bg-warm-100"> <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6"> <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> <!-- Col 1 : Logo + tagline --> <div> <img src="/logo-location-di.png" alt="Location DI" class="h-12"> <p class="mt-3 text-sm font-semibold text-warm-800">Bien logé, bien accompagné.</p> <p class="mt-2 max-w-xs text-sm leading-relaxed text-warm-600">235Une équipe locative à échelle humaine pour t'accompagner.236</p> </div> <!-- Col 2 : Coordonnées + Confiance --> <div> <p class="text-sm font-semibold text-warm-900">Coordonnées</p> <div class="mt-2 space-y-1 text-sm text-warm-600"> <p>544 Rue Notre-Dame</p><p>Repentigny, QC J6A 2T8</p><p>Local 101</p> <p class="mt-2"> <a href="tel:4388123694" class="hover:text-accent-600">438-812-3694</a> </p> <p> <a href="mailto:location@spheredi.com" class="hover:text-accent-600">location@spheredi.com</a> </p> </div> <div class="mt-5"> <p class="text-sm font-semibold text-warm-900">Confiance</p> <div class="mt-2 space-y-1.5 text-sm text-warm-600"> <p class="flex gap-2"> <span class="text-accent-600">✓</span> <span>Plus de 750 logements à louer à travers le Québec</span> </p><p class="flex gap-2"> <span class="text-accent-600">✓</span> <span>Moderne et abordable</span> </p><p class="flex gap-2"> <span class="text-accent-600">✓</span> <a href="https://spheredi.com" target="_blank" rel="noopener noreferrer" class="hover:text-accent-600"> Groupe Sphère DI – Promoteur immobilier d'expérience </a> </p> </div> </div> </div> <!-- Col 3 : Disponibilités + Sociaux + CTA --> <div> <p class="text-sm font-semibold text-warm-900">Disponibilités</p> <div class="mt-2 space-y-1 text-sm text-warm-600"> <p>Lun-ven 8h à 16h</p> <p class="text-warm-500">Soirs et fins de semaine couverts</p> </div> <div class="mt-5"> <p class="text-sm font-semibold text-warm-900">Suis-nous</p> <div class="mt-2 flex gap-3"> <a href="https://www.facebook.com/1018488254690464" target="_blank" rel="noopener noreferrer" aria-label="Page Facebook Location DI - Gestionnaire d'immeubles" class="flex h-8 w-8 items-center justify-center rounded-full border border-warm-300 text-warm-400 transition hover:border-accent-400 hover:text-accent-600"> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg> </a> </div> </div> <a href="/logements" class="mt-5 inline-flex items-center justify-center rounded-xl bg-accent-500 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-accent-400">237Voir les logements238</a> </div> <!-- Col 4 : Navigation --> <div> <p class="text-sm font-semibold text-warm-900">Navigation</p> <div class="mt-2 space-y-1 text-sm"> <a href="/" class="block text-warm-600 hover:text-accent-600">Accueil</a> <a href="/logements" class="block text-warm-600 hover:text-accent-600">Logements</a> <a href="/notre-entreprise" class="block text-warm-600 hover:text-accent-600">Notre entreprise</a> <a href="/contact" class="block text-warm-600 hover:text-accent-600">Contact</a> <a href="/contact?mode=proprietaire" class="block text-warm-500 hover:text-warm-700">Propriétaires?</a> </div> <div class="mt-5"> <p class="text-sm font-semibold text-warm-900">Régions</p> <div class="mt-2 space-y-1 text-sm"> <a href="/logements/region/lanaudiere" class="block text-warm-600 hover:text-accent-600"> Lanaudière </a><a href="/logements/region/laurentides" class="block text-warm-600 hover:text-accent-600"> Laurentides </a><a href="/logements/region/mauricie" class="block text-warm-600 hover:text-accent-600"> Mauricie </a><a href="/logements/region/montreal" class="block text-warm-600 hover:text-accent-600"> Montréal </a> </div> </div> </div> </div> <div class="mt-10 flex flex-col items-center justify-between gap-4 border-t border-warm-200 pt-6 sm:flex-row"> <div class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm text-warm-500 sm:justify-start"> <a href="/politique-confidentialite" class="hover:text-warm-700">Politique de confidentialité</a> <span>·</span> <a href="/conditions-utilisation" class="hover:text-warm-700">Conditions d'utilisation</a> <span>·</span> <a href="/suppression-donnees" class="hover:text-warm-700">Suppression des données</a> <span>·</span> <a href="#" data-consent-manage class="hover:text-warm-700">Gérer mes préférences</a> <span>·</span> <a href="https://spheredi.com" target="_blank" rel="noopener noreferrer" class="hover:text-warm-700">239Groupe Sphère DI ↗240</a> </div> <p class="text-sm text-warm-400">© 2026 Location DI - Tous droits réservés</p> </div> </div> </footer> <nav class="fixed inset-x-0 bottom-0 z-40 flex border-t border-warm-200/60 bg-cream/95 shadow-[0_-2px_8px_rgba(0,0,0,0.04)] backdrop-blur-sm md:hidden" style="padding-bottom: env(safe-area-inset-bottom);" aria-label="Navigation mobile principale"> <a href="/logements" class="flex flex-1 flex-col items-center justify-center gap-1 py-3 text-xs font-semibold text-warm-700 transition hover:text-accent-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"></path> </svg> <span>Trouve ton logement</span> </a> <a href="/contact" class="flex flex-1 flex-col items-center justify-center gap-1 border-l border-warm-200/60 py-3 text-xs font-semibold text-warm-700 transition hover:text-accent-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> <span>Contact</span> </a> </nav> <!-- Floating chat button + panel --><div id="chat-humain" class="fixed right-4 z-50 bottom-[calc(5rem+env(safe-area-inset-bottom))] flex flex-col items-end gap-3 sm:bottom-6 sm:right-6" data-messenger-page-id="1018488254690464" data-astro-cid-ryytxnzt> <!-- Panel (hidden by default) --> <div id="chat-panel" class="hidden flex flex-col bg-white fixed inset-x-0 z-50 w-full h-[var(--vv-h,100dvh)] top-[var(--vv-offset-top,0px)] bottom-auto sm:relative sm:inset-auto sm:top-auto sm:bottom-auto sm:w-[400px] sm:h-auto sm:max-h-[580px] sm:rounded-2xl sm:border sm:border-warm-200 sm:shadow-xl" role="dialog" aria-modal="true" aria-label="Clavardage avec Lea" data-astro-cid-ryytxnzt> <!-- Header (sticky en haut, safe area iOS top, swipe-to-close mobile) --> <div id="chat-header" class="shrink-0 z-10 border-b border-warm-100 bg-accent-50 px-5 py-4 touch-none" style="padding-top: max(1rem, env(safe-area-inset-top));" data-astro-cid-ryytxnzt> <!-- Handle bar mobile only (visual cue swipe-to-close pattern Messenger natif) --> <div id="chat-header-handle" class="mx-auto mb-2 h-1.5 w-12 rounded-full bg-warm-300 sm:hidden" data-astro-cid-ryytxnzt></div> <div class="flex items-center justify-between gap-2" data-astro-cid-ryytxnzt> <h3 class="font-serif text-lg font-bold text-warm-900" data-astro-cid-ryytxnzt>Chat avec nous</h3> <div class="flex items-center gap-1" data-astro-cid-ryytxnzt> <!-- Mutation 2b#2 (Codex) : Porte de sortie humaine persistante.241 Bouton compact "Équipe" dans le header, mobile = icône seule (économie d'espace),242 desktop = icône + label. Same handler que chat-trigger-team-contact welcome. --> <button id="chat-header-team" class="flex h-11 items-center justify-center gap-1.5 rounded-full px-3 text-xs font-semibold text-accent-700 transition hover:bg-accent-100 sm:h-8" aria-label="Texter l'équipe (SMS)" data-astro-cid-ryytxnzt> <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9.75h4.5m-4.5 3H12m6.75-6.75c1.243 0 2.25 1.007 2.25 2.25v6c0 1.243-1.007 2.25-2.25 2.25h-2.69l-3.31 2.48V15.75H5.25A2.25 2.25 0 013 13.5v-6c0-1.243 1.007-2.25 2.25-2.25h13.5z" data-astro-cid-ryytxnzt></path> </svg> <span class="hidden sm:inline" data-astro-cid-ryytxnzt>Texter</span> </button> <button id="chat-close" class="flex h-11 w-11 items-center justify-center rounded-full text-warm-400 transition hover:bg-warm-100 hover:text-warm-600 sm:h-7 sm:w-7" aria-label="Fermer le chat" data-astro-cid-ryytxnzt> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" data-astro-cid-ryytxnzt></path> </svg> </button> </div> </div> <div id="chat-header-meta" class="mt-1.5 flex items-center gap-2" data-astro-cid-ryytxnzt> <!-- Badge (C''' non-retour) : « Assistant IA » par défaut, remplacé définitivement par243 « Équipe Location DI » (même style) dès l'état HUMAIN (setHeaderHumain) — le laisser244 dire « IA » contredirait le point de non-retour. Jamais reversé (aller simple). --> <span id="chat-header-ia-badge" class="inline-flex items-center gap-1 rounded-full bg-accent-100 px-2.5 py-0.5 text-xs font-semibold text-accent-700" data-astro-cid-ryytxnzt> <span class="h-1.5 w-1.5 rounded-full bg-accent-500" data-astro-cid-ryytxnzt></span> <span id="chat-header-ia-badge-label" data-astro-cid-ryytxnzt>Assistant IA</span> </span> <!-- Porte-état (D69) : « Équipe en ligne » seulement quand la présence GI est PROUVÉE245 (gi_disponible, maj par maybeUpdateWelcomeForEtat) ; « Vous êtes avec l'équipe »246 (générique, C''') en état HUMAIN — défaut/repli honnête ci-dessous sinon. --> <span id="chat-header-status" class="text-xs text-warm-500" data-astro-cid-ryytxnzt>Assistante virtuelle 24/7</span> </div> </div> <!-- Messages area --> <div id="chat-messages" class="flex-1 overflow-y-auto [overflow-anchor:auto] px-4 py-4 space-y-3 min-h-0 sm:min-h-[200px] sm:max-h-[320px]" data-astro-cid-ryytxnzt> <!-- Welcome message (2 bulles aerees - T03d ajustement esthetique) --> <div id="chat-welcome" data-astro-cid-ryytxnzt> <div id="chat-welcome-intro" class="mb-2 rounded-xl bg-warm-50 px-3.5 py-2.5 text-sm text-warm-700 max-w-[80%]" data-astro-cid-ryytxnzt>247Bonjour! Je suis Léa, l'assistante virtuelle de Location DI.248</div> <div id="chat-welcome-role" class="mb-3 rounded-xl bg-warm-50 px-3.5 py-2.5 text-sm text-warm-700 max-w-[80%]" data-astro-cid-ryytxnzt>249Je prépare votre demande pour notre équipe humaine.250</div> <!-- Action rapide texto (G2-express, D74 amendée : le texto précède la voix). Masquée251 quand la présence d'équipe est PROUVÉE (vibe ACCUEIL : écrire ici EST la ligne252 directe — setVibeEquipeEnLigne).253 Rétrogradation 2026-07-11 (finding « widget vs texté », SCOPE MOBILE) : sur mobile,254 « Texter l'équipe » ouvre l'app SMS → deux canaux en parallèle avec le champ. On255 rétrograde donc le CTA en LIEN DISCRET sur mobile (le champ = le geste), tout en256 gardant le BOUTON visible sur desktop (`sm:`), où le clic n'ouvre pas d'app SMS (repli257 numéro/formulaire) → aucune confusion. Icône bulle de texto sur les deux. La ligne258 d'invite est retirée (le placeholder « Posez votre question » la rendait redondante).259 Ids conservés (JS : toggle hidden + handler). --> <div id="chat-welcome-team-cta" class="flex flex-col mb-3 w-full sm:max-w-[80%]" data-astro-cid-ryytxnzt> <button id="chat-trigger-team-contact" class="chat-quick-action inline-flex items-center gap-1.5 self-start text-xs font-medium text-accent-600 transition hover:text-accent-700 hover:underline sm:gap-2.5 sm:rounded-xl sm:border sm:border-accent-200 sm:bg-accent-50 sm:px-3 sm:py-2 sm:text-sm sm:text-accent-700 sm:no-underline sm:hover:border-accent-300 sm:hover:bg-accent-100 sm:hover:no-underline" aria-label="Texter l'équipe (SMS)" data-astro-cid-ryytxnzt> <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9.75h4.5m-4.5 3H12m6.75-6.75c1.243 0 2.25 1.007 2.25 2.25v6c0 1.243-1.007 2.25-2.25 2.25h-2.69l-3.31 2.48V15.75H5.25A2.25 2.25 0 013 13.5v-6c0-1.243 1.007-2.25 2.25-2.25h13.5z" data-astro-cid-ryytxnzt></path> </svg>260Ou texter l'équipe261</button> </div> </div> </div> <!-- Typing indicator (hidden) --> <div id="chat-typing" class="hidden px-4 pb-2" data-astro-cid-ryytxnzt> <div class="flex items-center gap-1.5 rounded-xl bg-warm-50 px-3.5 py-2.5 max-w-[80%]" data-astro-cid-ryytxnzt> <span class="h-2 w-2 rounded-full bg-warm-400 animate-bounce" style="animation-delay: 0ms" data-astro-cid-ryytxnzt></span> <span class="h-2 w-2 rounded-full bg-warm-400 animate-bounce" style="animation-delay: 150ms" data-astro-cid-ryytxnzt></span> <span class="h-2 w-2 rounded-full bg-warm-400 animate-bounce" style="animation-delay: 300ms" data-astro-cid-ryytxnzt></span> </div> </div> <!-- Input area (sticky bas, safe area iOS bottom) --> <div class="shrink-0 border-t border-warm-100 bg-white px-4 py-3" style="padding-bottom: max(0.75rem, env(safe-area-inset-bottom));" data-astro-cid-ryytxnzt> <!-- Bandeau « Répondre à » (reply-to, D65) : visible seulement quand une bulle GI a été262 choisie via le bouton « Répondre » ; annulable via le X. --> <div id="chat-reply-banner" class="hidden mb-2 items-start gap-2 rounded-lg bg-warm-50 px-3 py-2" data-astro-cid-ryytxnzt> <div class="min-w-0 flex-1" data-astro-cid-ryytxnzt> <p class="text-[10px] font-bold uppercase tracking-wider text-accent-600" data-astro-cid-ryytxnzt>Réponse à</p> <p id="chat-reply-banner-text" class="truncate text-xs text-warm-600" data-astro-cid-ryytxnzt></p> </div> <button id="chat-reply-banner-cancel" type="button" class="shrink-0 text-warm-400 hover:text-warm-600" aria-label="Annuler la réponse" data-astro-cid-ryytxnzt> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" data-astro-cid-ryytxnzt></path> </svg> </button> </div> <!-- Ancrage Turnstile (fix conversion 2026-07-06, trace validation-2026-07-06) : quand263 Cloudflare exige une interaction, la case se rend ICI, collée au champ de saisie —264 l'ancien conteneur position:fixed bas-GAUCHE sur <body> la rendait invisible du chat265 (suspect n° 1 du trou 75 % ouvre→écrit). Vide = zéro hauteur (empty:hidden). --> <div id="chat-turnstile-anchor" class="empty:hidden mb-2 flex justify-center" data-astro-cid-ryytxnzt></div> <form id="chat-form" class="flex items-center gap-2" data-astro-cid-ryytxnzt> <!-- Honeypot anti-bot (garde adaptative « B+ », 2026-07-14) : champ leurre invisible et hors266 tabulation. Un humain ne le voit jamais (hors écran, aria-hidden, tabindex -1) ; un bot qui267 remplit les champs le remplit -> la route /tour le lit comme signal de risque. --> <input id="chat-hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" class="absolute left-[-9999px] top-0 h-0 w-0 opacity-0" data-astro-cid-ryytxnzt> <input id="chat-input" type="text" placeholder="Posez votre question..." maxlength="2000" autocomplete="off" autocorrect="on" spellcheck="true" enterkeyhint="send" class="flex-1 rounded-xl border border-warm-200 bg-warm-50 px-3.5 py-2.5 text-base sm:text-sm text-warm-800 placeholder:text-warm-400 outline-none transition focus:border-accent-300 focus:ring-2 focus:ring-accent-100" data-astro-cid-ryytxnzt> <button id="chat-send" type="submit" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-accent-500 text-white transition hover:bg-accent-400 disabled:opacity-50 disabled:cursor-not-allowed sm:h-10 sm:w-10" aria-label="Envoyer" data-astro-cid-ryytxnzt> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" data-astro-cid-ryytxnzt></path> </svg> </button> </form> </div> </div> <!-- Floating trigger button --> <button id="chat-toggle" class="relative flex h-14 w-14 items-center justify-center rounded-full bg-accent-500 text-white shadow-lg transition hover:bg-accent-400 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-accent-300 focus:ring-offset-2 sm:flex" aria-label="Clavardez avec nous" data-astro-cid-ryytxnzt> <!-- Chat icon (default) --> <svg id="chat-icon-open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" data-astro-cid-ryytxnzt></path> </svg> <!-- Close icon (when open) --> <svg id="chat-icon-close" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ryytxnzt> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" data-astro-cid-ryytxnzt></path> </svg> <!-- Badge non-lu (E3, tranche E P5-T22) : COMPTE des réponses GI arrivées panneau fermé OU268 onglet caché (SSE et polling passent par le même entonnoir public) ; « 9+ » au269 delà de 9 ; remis à zéro à l'ouverture du panneau. Le « 1 » ci-dessous n'est qu'un270 contenu initial : updateUnreadBadge() pose toujours le vrai compte AVANT d'afficher. --> <span id="chat-unread-badge" class="hidden absolute -top-1 -right-1 h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-red-500 px-1 text-[11px] font-bold text-white" aria-hidden="true" data-astro-cid-ryytxnzt>1</span> </button> </div> <script type="module" src="/_astro/ChatWidget.astro_astro_type_script_index_0_lang.C0_536Sr.js?dpl=6a770c5aa9d6f6000809ad95"></script> <aside id="consent-banner" class="fixed inset-x-0 bottom-0 z-[60] hidden" role="region" aria-label="Préférences de confidentialité"> <div class="mx-auto max-w-[1800px] px-4 pb-4 sm:px-8"> <div class="rounded-2xl border border-warm-200 bg-white/95 px-4 py-3 shadow-lg backdrop-blur sm:px-6 sm:py-4"> <div class="flex flex-col gap-3 sm:flex-row sm:items-center"> <p class="min-w-0 flex-1 text-sm leading-relaxed text-warm-700">271Nous utilisons des témoins (cookies) pour la mesure d'audience et un signal de présence272 pour vous offrir le service en direct avec notre équipe.273<a href="/politique-confidentialite" class="whitespace-nowrap text-accent-600 hover:underline">274Politique de confidentialité275</a> </p> <div class="flex shrink-0 items-center gap-2"> <button type="button" id="consent-refuse" class="rounded-full border border-warm-300 px-4 py-1.5 text-xs font-semibold text-warm-700 transition hover:bg-warm-100">276Refuser277</button> <button type="button" id="consent-accept" class="rounded-full bg-accent-700 px-5 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-accent-800">278OK279</button> </div> </div> </div> </div> </aside> <script type="module" src="/_astro/ConsentBanner.astro_astro_type_script_index_0_lang.DnUHoAqY.js?dpl=6a770c5aa9d6f6000809ad95"></script> </body></html>