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/mauricie"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"><meta name="description" content="Logements à louer dans la Mauricie : 3½, 4½ et 5½ gérés par Location DI. Prix, disponibilités et photos à jour. Réservez votre visite en ligne."><title>Logements à louer dans la Mauricie | Location DI</title><meta property="og:type" content="website"><meta property="og:url" content="https://locationdi.com/logements/region/mauricie"><meta property="og:title" content="Logements à louer dans la Mauricie | Location DI"><meta property="og:description" content="Logements à louer dans la Mauricie : 3½, 4½ et 5½ gérés par Location DI. Prix, disponibilités et photos à jour. Réservez votre visite en ligne."><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/mauricie"><meta name="twitter:title" content="Logements à louer dans la Mauricie | Location DI"><meta name="twitter:description" content="Logements à louer dans la Mauricie : 3½, 4½ et 5½ gérés par Location DI. Prix, disponibilités et photos à jour. Réservez votre visite en ligne."><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":"Mauricie","item":"https://locationdi.com/logements/region/mauricie"}]}</script> <script type="application/ld+json">{"@context":"https://schema.org","@type":"CollectionPage","name":"Logements à louer dans la Mauricie","description":"Logements à louer dans la Mauricie : 3½, 4½ et 5½ gérés par Location DI. Prix, disponibilités et photos à jour. Réservez votre visite en ligne.","url":"https://locationdi.com/logements/region/mauricie","mainEntity":{"@type":"ItemList","numberOfItems":11,"itemListElement":[{"@type":"ListItem","position":1,"name":"5½ à louer — 18045 Boulevard des Acadiens, app. 204","url":"https://locationdi.com/logements/5-18045-boulevard-des-acadiens-204-691050"},{"@type":"ListItem","position":2,"name":"4½ à louer — 1550 Rue Laviolette, app. 1","url":"https://locationdi.com/logements/4-1550-rue-laviolette-1-446268"},{"@type":"ListItem","position":3,"name":"3½ à louer — 665 Rue Saint Christophe, app. 1","url":"https://locationdi.com/logements/3-665-rue-saint-christophe-1-864230"},{"@type":"ListItem","position":4,"name":"3½ à louer — 655 Rue Saint Christophe, app. 3","url":"https://locationdi.com/logements/3-655-rue-saint-christophe-3-864226"},{"@type":"ListItem","position":5,"name":"3½ à louer — 1894 Rue Saint Philippe, app. 9","url":"https://locationdi.com/logements/3-1894-rue-saint-philippe-9-509827"},{"@type":"ListItem","position":6,"name":"5½ à louer — 1946 Rue Royale, app. 1942","url":"https://locationdi.com/logements/5-1946-rue-royale-1942-694827"},{"@type":"ListItem","position":7,"name":"5½ à louer — 1071 Boulevard Thibeau, app. 1071","url":"https://locationdi.com/logements/5-1071-boulevard-thibeau-1071-578357"},{"@type":"ListItem","position":8,"name":"3½ à louer — 1934 Rue Saint Philippe, app. 9","url":"https://locationdi.com/logements/3-1934-rue-saint-philippe-9-553926"},{"@type":"ListItem","position":9,"name":"3½ à louer — 18045 Boulevard des Acadiens, app. 103","url":"https://locationdi.com/logements/3-18045-boulevard-des-acadiens-103-691044"}]}}</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</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">29Offre30</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">31Offre32</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">33Logements34<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">35Voir tous les logements36<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">37Trouve ton logement ici38</a> <a href="/contact?mode=proprietaire" class="text-sm text-warm-500 transition-colors hover:text-warm-700">39Propriétaires?40</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">41Logements42<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">43Propriétaires?44</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">45Trouve ton logement ici46</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"> <div class="mx-auto max-w-7xl px-4 sm:px-6"> <nav class="mb-6 text-sm text-warm-500"> <a href="/logements" class="inline-block py-3 -my-3 hover:text-accent-600">Logements</a> <span class="mx-2">›</span> <span class="text-warm-900">Mauricie</span> </nav> <p class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-warm-500"> <span class="h-0.5 w-6 rounded bg-accent-500" aria-hidden="true"></span>47Logements à louer48</p> <h1 class="mt-3 tracking-tight text-warm-900"> <span class="block font-sans text-3xl font-extrabold text-accent-700 sm:text-4xl">Moderne et Abordable</span> <span class="block font-serif font-bold mt-2 text-2xl sm:text-3xl">Trouvez votre chez-vous dans la Mauricie.</span> </h1> <div class="mt-6 max-w-3xl space-y-4 text-base leading-relaxed text-warm-700"> <p>La Mauricie offre un cadre de vie abordable et authentique, entre le fleuve Saint-Laurent et les grands espaces. Étudiants, jeunes familles et travailleurs y trouvent des 3½, 4½ et 5½ bien situés, à distance de marche des services, des établissements d'enseignement et des berges.</p> <p>La différence Location DI ? Une équipe locale et un accompagnement attentif des locataires, du premier contact à la signature du bail.</p> <a href="/contact?tab=candidature&mode=logement&intent=visite&source=region-mauricie" 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"> Réservez votre visite en ligne <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> <section class="mt-8"> <div class="max-w-3xl"> <h2 class="text-lg font-semibold text-warm-900">49Les villes que nous couvrons dans la Mauricie </h2> <p class="mt-1 text-sm text-warm-500">Cliquez une ville pour voir sa page dédiée et ses logements.</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/mauricie/becancour" 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"> Bécancour <svg class="h-4 w-4 text-warm-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a><a href="/logements/region/mauricie/trois-rivieres" 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"> Trois-Rivières <svg class="h-4 w-4 text-warm-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <script>50 (function () {51 document.querySelectorAll('[data-villes-scroll]').forEach(function (track) {52 // Empêche le drag natif des liens / images : sans ça, mousedown + déplacement53 // sur un chip <a> lance un glisser-déposer natif et le clic-glisser ne défile pas.54 track.addEventListener('dragstart', function (e) {55 e.preventDefault()56 })5758 // --- Molette verticale -> défilement horizontal ---59 track.addEventListener(60 'wheel',61 function (e) {62 if (!e.deltaY) return63 if (track.scrollWidth <= track.clientWidth) return64 var atStart = track.scrollLeft <= 065 var atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 166 // Laisse la page défiler verticalement quand on est déjà au bout.67 if ((e.deltaY < 0 && atStart) || (e.deltaY > 0 && atEnd)) return68 e.preventDefault()69 // Normalise deltaMode (certaines souris Windows envoient des « lignes », pas des px).70 var step = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaMode === 2 ? e.deltaY * track.clientWidth : e.deltaY71 track.scrollLeft += step72 },73 { passive: false },74 )7576 // --- Clic-glisser (souris uniquement ; touch/pen restent natifs) ---77 // move/up écoutés au niveau window (et PAS de setPointerCapture) : le drag78 // continue même si le curseur sort de la bande, et on évite les blocages de79 // capture de pointeur sur un conteneur scrollable (cause du drag mort).80 var down = false,81 startX = 0,82 startLeft = 0,83 moved = 084 track.addEventListener('pointerdown', function (e) {85 if (e.pointerType !== 'mouse' || e.button !== 0) return86 down = true87 moved = 088 startX = e.clientX89 startLeft = track.scrollLeft90 track.classList.add('is-dragging')91 e.preventDefault() // coupe la sélection / le drag natif dès le mousedown92 })93 window.addEventListener('pointermove', function (e) {94 if (!down) return95 var dx = e.clientX - startX96 if (Math.abs(dx) > moved) moved = Math.abs(dx)97 track.scrollLeft = startLeft - dx98 })99 function endDrag() {100 if (!down) return101 down = false102 track.classList.remove('is-dragging')103 }104 window.addEventListener('pointerup', endDrag)105 window.addEventListener('pointercancel', endDrag)106 // Un vrai glissé ne doit pas déclencher la navigation du chip cliqué.107 track.addEventListener(108 'click',109 function (e) {110 if (moved > 6) {111 e.preventDefault()112 e.stopPropagation()113 }114 },115 true,116 )117 })118 })()119</script> </section> <p id="disponibilites" class="mt-8 scroll-mt-24 text-sm text-warm-500" data-results-count data-results-suffix="dans la Mauricie"> 11 logements disponibles dans la Mauricie. </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 rounded-2xl border border-warm-200 bg-white px-4 py-3 shadow-sm" data-filterbar> <div class="flex flex-wrap items-end gap-3"> <span class="flex h-[42px] shrink-0 items-center text-warm-400" title="Filtrer les logements"> <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z" clip-rule="evenodd"></path></svg> <span class="sr-only">Filtrer les logements</span> </span> <label class="flex shrink-0 flex-col gap-1"> <span class="text-[11px] font-semibold uppercase tracking-wide text-warm-500">Type</span> <div class="flex h-[42px] items-center gap-1.5" data-type-chips> <button type="button" data-type-chip="3½" aria-disabled="false" class="h-[42px] rounded-xl border px-3.5 text-sm font-medium transition border-warm-200 bg-white text-warm-600 hover:border-accent-400"> 3½ </button><button type="button" data-type-chip="4½" aria-disabled="false" class="h-[42px] rounded-xl border px-3.5 text-sm font-medium transition border-warm-200 bg-white text-warm-600 hover:border-accent-400"> 4½ </button><button type="button" data-type-chip="5½" aria-disabled="false" class="h-[42px] rounded-xl border px-3.5 text-sm font-medium transition border-warm-200 bg-white text-warm-600 hover:border-accent-400"> 5½ </button> </div> <select data-filter-type style="display: none" aria-hidden="true" tabindex="-1"> <option value="">Tous les types</option> <option value="3½">3½</option><option value="4½">4½</option><option value="5½">5½</option> </select> </label> <label class="flex min-w-[130px] flex-1 flex-col gap-1"> <span class="text-[11px] font-semibold uppercase tracking-wide text-warm-500">Étage</span> <select data-filter-etage class="h-[42px] w-full rounded-xl border border-warm-200 bg-white px-4 text-sm text-warm-700 transition focus:border-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-400/30"> <option value="">Tous les étages</option> <option value="1er Étage">1er Étage</option><option value="2e Étage">2e Étage</option><option value="3e Étage">3e Étage</option><option value="Demi sous-sol">Demi sous-sol</option><option value="RDC">RDC</option> </select> </label> <label class="flex min-w-[120px] flex-1 flex-col gap-1"> <span class="text-[11px] font-semibold uppercase tracking-wide text-warm-500">Prix max</span> <input type="number" min="0" step="50" inputmode="numeric" placeholder="$" data-filter-prixmax class="h-[42px] w-full rounded-xl border border-warm-200 bg-white px-4 text-sm text-warm-700 transition focus:border-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-400/30 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"> </label> <label class="flex min-w-[130px] flex-1 flex-col gap-1"> <span class="text-[11px] font-semibold uppercase tracking-wide text-warm-500">Trier</span> <select data-filter-tri class="h-[42px] w-full rounded-xl border border-warm-200 bg-white px-4 text-sm text-warm-700 transition focus:border-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-400/30"> <option value="">Trier par</option> <option value="prix-asc">Prix (croissant)</option> <option value="prix-desc">Prix (décroissant)</option> <option value="dispo-now">Disponible maintenant</option> <option value="dispo-date">Disponibilité + tard</option> </select> </label> <button type="button" data-filter-reset class="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-xl text-warm-400 transition hover:bg-warm-50 hover:text-accent-600" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres"> <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6L18 18M6 18L18 6"></path></svg> </button> </div> </div> <script>120 (function () {121 const bar = document.querySelector('[data-filterbar]');122 if (!bar) return;123 const typeSel = bar.querySelector('[data-filter-type]');124 const etageSel = bar.querySelector('[data-filter-etage]');125 const prixMax = bar.querySelector('[data-filter-prixmax]');126 const triSel = bar.querySelector('[data-filter-tri]');127 const resetBtn = bar.querySelector('[data-filter-reset]');128129 // Chips type : pilotent le <select> caché (sélection unique, re-clic = désélection),130 // miroir de la barre /logements. Le pipeline existant lit le select et écoute 'change'.131 const typeChipsWrap = bar.querySelector('[data-type-chips]');132 const typeChips = typeChipsWrap ? Array.from(typeChipsWrap.querySelectorAll('[data-type-chip]')) : [];133 const CHIP_ON = ['border-accent-500', 'bg-accent-50', 'text-accent-700'];134 const CHIP_OFF = ['border-warm-200', 'bg-white', 'text-warm-600'];135 function renderChips() {136 const val = typeSel ? typeSel.value : '';137 typeChips.forEach(function (c) {138 const active = c.getAttribute('data-type-chip') === val;139 CHIP_ON.forEach(function (cls) { c.classList.toggle(cls, active); });140 CHIP_OFF.forEach(function (cls) { c.classList.toggle(cls, !active); });141 });142 }143 typeChips.forEach(function (c) {144 c.addEventListener('click', function () {145 const t = c.getAttribute('data-type-chip');146 if (typeSel) {147 typeSel.value = typeSel.value === t ? '' : t;148 typeSel.dispatchEvent(new Event('change', { bubbles: true }));149 }150 renderChips();151 });152 });153154 function emit() {155 document.dispatchEvent(156 new CustomEvent('logements:filter', {157 detail: {158 type: typeSel ? typeSel.value : '',159 etage: etageSel ? etageSel.value : '',160 prixMin: '',161 prixMax: prixMax ? prixMax.value : '',162 tri: triSel ? triSel.value : '',163 },164 }),165 );166 }167168 let t;169 function emitDebounced() {170 clearTimeout(t);171 t = setTimeout(emit, 350);172 }173174 [typeSel, etageSel, triSel].forEach((el) => el && el.addEventListener('change', emit));175 if (prixMax) prixMax.addEventListener('input', emitDebounced);176177 if (resetBtn) {178 resetBtn.addEventListener('click', function () {179 if (typeSel) typeSel.value = '';180 if (etageSel) etageSel.value = '';181 if (prixMax) prixMax.value = '';182 if (triSel) triSel.value = '';183 renderChips();184 emit();185 });186 }187188 renderChips();189 })();190</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=Mauricie" data-page-size="9" data-total="11"> <a href="/logements/5-18045-boulevard-des-acadiens-204-691050" 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/d946661625993b9d4c2db058391578e23609682e-1500x1000.jpg" alt="5½ – 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/4b4ed982d70c9f5a36938f4c5d4cf18de8c1eb96-1500x1000.jpg" alt="5½ – 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/325a9347a6216c7b961b43c99b6e4056b4898795-1500x1000.jpg" alt="5½ – 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> 15 </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>1913D192</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"> 1 295$193<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">5½</span> <span> · 1175 pi² · 2e Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">18045 Boulevard des Acadiens, app. 204</p> <p class="text-sm text-warm-500">Bécancour</p> </div> </div> </a> <a href="/logements/4-1550-rue-laviolette-1-446268" 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/e95acc54fc515e4b6e097722ab7732b376e39784-1500x1000.jpg" alt="4½ – 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/ba2b93d1c8fe1016a19948672acd803059956184-1281x565.png" alt="4½ – 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/ce209e84d885fe8e55d5cf5a3a3f24858af50c8b-1500x1000.jpg" alt="4½ – 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> 24 </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>1943D195</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"> 1 095$196<span class="text-sm font-normal text-warm-500"> / mois</span> </p> <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700"> <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>197Réservé198</span> </div> <p class="mt-2 text-sm text-warm-600"> <span class="text-base font-semibold text-warm-800">4½</span> <span> · 820 pi² · Demi sous-sol</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">1550 Rue Laviolette, app. 1</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/3-665-rue-saint-christophe-1-864230" 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/ed01996639d09df99a096ad3bbd66909834068f9-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/32c05f34e90b1e4e1fb93d1a040449280dca47c2-1111x705.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/457d70267c359d2d92425db9918bd83c5579a2a5-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> 9 </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>1993D200</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-blue-600/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">Neuf</span> <span class="hidden sm:inline">Construction neuve</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"> 995$201<span class="text-sm font-normal text-warm-500"> / mois</span> </p> <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700"> <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>202Réservé203</span> </div> <p class="mt-2 text-sm text-warm-600"> <span class="text-base font-semibold text-warm-800">3½</span> <span> · 850 pi² · Demi sous-sol</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">665 Rue Saint Christophe, app. 1</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/3-655-rue-saint-christophe-3-864226" 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/ed01996639d09df99a096ad3bbd66909834068f9-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/32c05f34e90b1e4e1fb93d1a040449280dca47c2-1111x705.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/457d70267c359d2d92425db9918bd83c5579a2a5-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> 9 </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>2043D205</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-blue-600/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">Neuf</span> <span class="hidden sm:inline">Construction neuve</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 015$206<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> · 850 pi² · 1er Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">655 Rue Saint Christophe, app. 3</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/3-1894-rue-saint-philippe-9-509827" 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/2f8b12f765c42e81958750065ce71aa2bf85f830-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/6cba8e45c0989b3dd3ced7c3032c6a7449633159-582x351.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/2546f957a978d064c30e2a6b6ee44f719ba13df7-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> 19 </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>2073D208</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"> 1 025$209<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> · 625 pi² · 3e Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">1894 Rue Saint Philippe, app. 9</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/5-1946-rue-royale-1942-694827" 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/7f047577a273551fdd2eda878cfbc6370b07a5e1-1500x1000.jpg" alt="5½ – 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/fe4d3a195a60a8bf00856f363297d3d6f281c4f4-661x687.png" alt="5½ – 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/282c5d36e02040840c122b95fb3a4d976ac3eae3-1500x1000.jpg" alt="5½ – 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> 19 </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>2103D211</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"> 1 285$212<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">5½</span> <span> · 1000 pi² · 3e Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">1946 Rue Royale, app. 1942</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/5-1071-boulevard-thibeau-1071-578357" 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/ae536808093123a275d50648cdace5e3e79c817d-1500x1000.jpg" alt="5½ – 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/617492fed9ffafe877101e062ded9cd851f4d6f2-932x695.png" alt="5½ – 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/5e2f57033e352051a69841b8a2a4440693f219f0-1500x1000.jpg" alt="5½ – 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> 19 </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>2133D214</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"> 1 295$215<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">5½</span> <span> · 1200 pi² · Demi sous-sol</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">1071 Boulevard Thibeau, app. 1071</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/3-1934-rue-saint-philippe-9-553926" 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/4080777fd4167bb9b06ae3012ea0764151c431de-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/5cc76e4dbf40b6be76a0a771c0413a4113045fec-556x585.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/b7e99c7d063165919b308f3c26ce53c16bd34348-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> 13 </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>2163D217</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"> 1 025$218<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> · 500 pi² · 3e Étage</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">1934 Rue Saint Philippe, app. 9</p> <p class="text-sm text-warm-500">Trois-Rivières</p> </div> </div> </a> <a href="/logements/3-18045-boulevard-des-acadiens-103-691044" 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/81fe8a69cafedcf9cee723cc8498b635109bde88-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/96b6592e2b34e1cb1c063c8275d662eec1590987-2243x1733.jpg" 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/55b8a11ab0cd5603f05cf457c79e3d163991cb85-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> 12 </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>2193D220</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"> 1 025$221<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> · 625 pi² · RDC</span> </p> <div class="mt-2"> <p class="text-xs text-warm-400">18045 Boulevard des Acadiens, app. 103</p> <p class="text-sm text-warm-500">Bécancour</p> </div> </div> </a> </div> <div class="mt-8 flex flex-col items-center gap-2" data-paginated-grid-more> <button type="button" data-paginated-grid-load-more data-api-base="/api/logements-cards?size=9&hrefBase=%2Flogements&region=Mauricie" data-page-size="9" data-total="11" data-more-label="Afficher plus de logements dans la Mauricie" class="rounded-xl border border-warm-300 bg-white px-6 py-3 text-sm font-semibold text-warm-700 transition hover:border-accent-400 hover:text-accent-600 disabled:cursor-wait disabled:opacity-60"> Afficher plus de logements dans la Mauricie </button> <p class="text-xs text-warm-500" data-paginated-grid-counter data-lieu-suffixe="dans la Mauricie"> 9 / 11 affichés dans la Mauricie </p> </div> <script>222 (function () {223 const grid = document.querySelector('[data-paginated-grid]');224 if (!grid) return;225 const baseApi = grid.dataset.apiBase || '';226 const pageSize = parseInt(grid.dataset.pageSize || '9', 10);227 let total = parseInt(grid.dataset.total || '0', 10);228229 const more = document.querySelector('[data-paginated-grid-more]');230 const btn = document.querySelector('[data-paginated-grid-load-more]');231 const counter = document.querySelector('[data-paginated-grid-counter]');232 const moreLabel = (btn && btn.getAttribute('data-more-label')) || 'Afficher plus de logements';233 const counterSuffixe = (counter && counter.getAttribute('data-lieu-suffixe')) || '';234235 let activeApi = baseApi; // base + filtres actifs236 let currentPage = 1;237 let shown = Math.min(pageSize, total);238 let inflight = false;239240 function updateMoreUI() {241 if (more) more.style.display = shown < total ? '' : 'none';242 if (btn) {243 btn.disabled = false;244 btn.textContent = moreLabel;245 }246 if (counter) counter.textContent = shown + ' / ' + total + ' affichés' + (counterSuffixe ? ' ' + counterSuffixe : '');247 }248249 async function loadMore() {250 if (inflight || shown >= total) return;251 inflight = true;252 if (btn) { btn.disabled = true; btn.textContent = 'Chargement…'; }253 try {254 const nextPage = currentPage + 1;255 const r = await fetch(activeApi + '&page=' + nextPage);256 if (!r.ok) throw new Error('HTTP ' + r.status);257 const html = await r.text();258 grid.insertAdjacentHTML('beforeend', html);259 currentPage = nextPage;260 shown = Math.min(shown + pageSize, total);261 updateMoreUI();262 } catch (e) {263 if (btn) { btn.disabled = false; btn.textContent = 'Réessayer'; }264 console.warn('Echec chargement batch:', e);265 } finally {266 inflight = false;267 }268 }269270 // Filtrage sur place : refetch page 1 avec les filtres et remplace la grille.271 async function applyFilters(detail) {272 const params = new URLSearchParams();273 if (detail.type) params.set('type', detail.type);274 if (detail.etage) params.set('etage', detail.etage);275 if (detail.prixMin) params.set('prixMin', detail.prixMin);276 if (detail.prixMax) params.set('prixMax', detail.prixMax);277 if (detail.tri) params.set('tri', detail.tri);278 const qs = params.toString();279 activeApi = baseApi + (qs ? '&' + qs : '');280 if (inflight) return;281 inflight = true;282 grid.setAttribute('aria-busy', 'true');283 try {284 const r = await fetch(activeApi + '&page=1');285 if (!r.ok) throw new Error('HTTP ' + r.status);286 total = parseInt(r.headers.get('X-Total-Count') || '0', 10);287 // Compteur réactif du template (« X logements disponibles … »).288 const countEl = document.querySelector('[data-results-count]');289 if (countEl) {290 const suffix = countEl.getAttribute('data-results-suffix') || '';291 const plural = total > 1 ? 's' : '';292 countEl.textContent =293 total === 0294 ? 'Aucun logement disponible ' + suffix + ' pour le moment.'295 : total + ' logement' + plural + ' disponible' + plural + ' ' + suffix + '.';296 }297 const html = await r.text();298 currentPage = 1;299 shown = Math.min(pageSize, total);300 if (total === 0) {301 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>';302 } else {303 grid.innerHTML = html;304 }305 updateMoreUI();306 } catch (e) {307 console.warn('Echec filtrage:', e);308 } finally {309 inflight = false;310 grid.removeAttribute('aria-busy');311 }312 }313314 if (btn) btn.addEventListener('click', loadMore);315 document.addEventListener('logements:filter', function (e) {316 applyFilters((e && e.detail) || {});317 });318 })();319</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/mauricie/trois-rivieres" 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">Trois-Rivières</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">320Une équipe locative à échelle humaine pour t'accompagner.321</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">322Voir les logements323</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">324Groupe Sphère DI ↗325</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.326 Bouton compact "Équipe" dans le header, mobile = icône seule (économie d'espace),327 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 par328 « Équipe Location DI » (même style) dès l'état HUMAIN (setHeaderHumain) — le laisser329 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ÉE330 (gi_disponible, maj par maybeUpdateWelcomeForEtat) ; « Vous êtes avec l'équipe »331 (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>332Bonjour! Je suis Léa, l'assistante virtuelle de Location DI.333</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>334Je prépare votre demande pour notre équipe humaine.335</div> <!-- Action rapide texto (G2-express, D74 amendée : le texto précède la voix). Masquée336 quand la présence d'équipe est PROUVÉE (vibe ACCUEIL : écrire ici EST la ligne337 directe — setVibeEquipeEnLigne).338 Rétrogradation 2026-07-11 (finding « widget vs texté », SCOPE MOBILE) : sur mobile,339 « Texter l'équipe » ouvre l'app SMS → deux canaux en parallèle avec le champ. On340 rétrograde donc le CTA en LIEN DISCRET sur mobile (le champ = le geste), tout en341 gardant le BOUTON visible sur desktop (`sm:`), où le clic n'ouvre pas d'app SMS (repli342 numéro/formulaire) → aucune confusion. Icône bulle de texto sur les deux. La ligne343 d'invite est retirée (le placeholder « Posez votre question » la rendait redondante).344 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>345Ou texter l'équipe346</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é347 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) : quand348 Cloudflare exige une interaction, la case se rend ICI, collée au champ de saisie —349 l'ancien conteneur position:fixed bas-GAUCHE sur <body> la rendait invisible du chat350 (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 hors351 tabulation. Un humain ne le voit jamais (hors écran, aria-hidden, tabindex -1) ; un bot qui352 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é OU353 onglet caché (SSE et polling passent par le même entonnoir public) ; « 9+ » au354 delà de 9 ; remis à zéro à l'ouverture du panneau. Le « 1 » ci-dessous n'est qu'un355 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">356Nous utilisons des témoins (cookies) pour la mesure d'audience et un signal de présence357 pour vous offrir le service en direct avec notre équipe.358<a href="/politique-confidentialite" class="whitespace-nowrap text-accent-600 hover:underline">359Politique de confidentialité360</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">361Refuser362</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">363OK364</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>