SPB Git

spb/lou-ka Public

Lou·Ka — tous les logements à louer du Québec, un seul endroit.

HTML 99.7%
53.6 KB · 1,275 lines html
Raw Blame History
1<!doctype html>23<html lang="en">4  <head>5    <!-- Google tag (gtag.js) -->6    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8FVTMSWCNW"></script>7    <script>8        window.dataLayer = window.dataLayer || [];9        function gtag(){dataLayer.push(arguments);}10        gtag('js', new Date());1112        gtag('config', 'G-8FVTMSWCNW');13    </script>14    <!-- Required meta tags -->15    <meta charset="utf-8">16    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">1718      1920    <!--     External CSS libraries -->21    <link rel="stylesheet" type="text/css" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/animate.min.css">22    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">23    <link rel="stylesheet" type="text/css" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/bootstrap-select.min.css">24    <link rel="stylesheet" type="text/css" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/magnific-popup.css">25    <link rel="stylesheet" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/leaflet.css" type="text/css">26    <link rel="stylesheet" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/map.css" type="text/css">27    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">28    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/fonts/flaticon/font/flaticon.css">29    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/fonts/linearicons/style.css">30    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/css/jquery.mCustomScrollbar.css">31    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/css/dropzone.css">32    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/css/slick.css">33    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/css/normalize.css">34    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/css/boxes-component.css">35    <link rel="stylesheet" type="text/css"  href="https://picardimmobilier.s3.amazonaws.com/static/site/css/boxes-core.css">3637    <!-- Custom stylesheet -->38    <link rel="stylesheet" type="text/css" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/style.css">39    <link rel="stylesheet" type="text/css" id="style_sheet" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/skins/default.css">40    <link rel="icon" type="image/png" href="https://picardimmobilier.s3.amazonaws.com/static/site/img/favicon-32x32.png" sizes="32x32" />41    <link rel="icon" type="image/png" href="https://picardimmobilier.s3.amazonaws.com/static/site/img/favicon-16x16.png" sizes="16x16" />4243    4445    <!-- Google fonts -->46    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600&display=swap" rel="stylesheet">47    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">48    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />49    <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" rel="stylesheet"/>50    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->51    <link rel="stylesheet" type="text/css" href="https://picardimmobilier.s3.amazonaws.com/static/site/css/ie10-viewport-bug-workaround.css">5253    <title>Groupe Picard Immobilier | Appartements et Condo locatifs   </title>54    5556     5758    5960    <style>61        .swiperVideo {62            width: 100%;63        }64        .swiperVideo .swiper-slide {65            padding-bottom: 1rem;66        }67    </style>6869  70      717273    <style>7475        #cb-cookie-banner.card {76          z-index: 9999;77          display: none;78        }7980      .fancybox__container {81          z-index: 9999 !important;82        }83        84      .text-theme {85          opacity: 1;86          color: #d1b149 !important;87      }8889      .swiper-slide { position: relative; }9091      .property-wrapper { max-width: 1200px; margin: auto; padding: 2rem 1rem; background: white; border-radius: 10px; }92      .swiper-slide img {93          width: 100%;94          height: 250px;95          object-fit: cover;96          border-radius: 12px;97      }9899      .swiper-pagination-bullet {100          background: #d1b149; 101          opacity: 0.5;102        }103        104        .swiper-pagination-bullet-active {105          background: #d1b149;106          opacity: 1;107        }108        109      .btn-primary {110          background-color: #d1b149;111          border: none;112      }113      .btn-primary:hover {114          background-color: #d1b149;115      }116      #map-custom {117          width: 100%;118          height: 300px;119          border-radius: 12px;120          background-color: #ccc;121      }122123124      .map-canvas125{126    position: relative;127128    width: 100%;129    height: 400px;130131    border-radius: .375rem;132}133      134      .range-wrapper {135          position: relative;136          width: 100%;137        }138        .range-tooltip {139          position: absolute;140          top: -30px;141          left: 0;142          transform: translateX(-50%);143          background: #d1b149;144          color: #fff;145          padding: 2px 8px;146          border-radius: 4px;147          font-size: 13px;148          white-space: nowrap;149          pointer-events: none;150          transition: left 0.1s ease-out;151        }152153        /* Style du "thumb" du slider pour Webkit (Chrome, Safari) */154        input[type=range]::-webkit-slider-thumb {155          background-color: #d1b149;156          border: none;157        }158159      /* Pour Firefox */160      input[type=range]::-moz-range-thumb {161        background-color: #d1b149;162        border: none;163      }164165      /* Pour Edge (si nécessaire) */166      input[type=range]::-ms-thumb {167        background-color: #d1b149;168        border: none;169      }170171      @media (min-width: 768px) {172        .swiper-slide img {173          height: 400px; /* Plus grand sur tablette et desktop */174        }175      }176177      @media (min-width: 1200px) {178        .swiper-slide img {179          height: 400px; /* Pour les très grands écrans */180        }181      }  182183184      .badge-colocation {185        position: absolute;186        top: 12px;187        right: 12px;188        background-color: #d1b149;189        color: white;190        padding: 6px 10px;191        font-size: 14px;192        border-radius: 8px;193        z-index: 10;194      }195196        197      198      199    </style>200  </head>201  202  <body>203    204        205206<!-- Main header start -->207208<header class="main-header header-transparent sticky-header">209    <nav class="navbar navbar-expand-lg navbar-light justify-content-end" id="navbar">210        <div class="container">211            <a class="navbar-brand logo-brand" href="/">212213                214                    <img src="https://picardimmobilier.s3.amazonaws.com/media/files/00675f6c-f3fa-474a-8665-7f2137707334.png"  alt="Groupe Picard Immobilier Logo" width="50" 215                    height="50">216217                    218                219220221            </a>222            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">223                <span class="navbar-toggler-icon"></span>224            </button>225            <div class="collapse navbar-collapse" id="navbarSupportedContent">226                <ul class="navbar-nav me-auto mb-2 mb-lg-0">227228                    229                    <li class="nav-item   ">230                        <a class="nav-link" aria-current="page" href="/">ACCUEIL</a>231                        232                    </li>233234                    235                    236                    237                    <li class="nav-item dropdown ">238                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">239                            NOS LOGEMENTS240                        </a>241                        <ul class="dropdown-menu bg-dark">242                            243                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=charny/">CHARNY</a></li>244                            245                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=les-saules/">LES SAULES</a></li>246                            247                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=sainte-foy/">SAINTE-FOY</a></li>248                            249                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=beauport/">BEAUPORT</a></li>250                            251                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=limoilou/">LIMOILOU</a></li>252                            253                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=loretteville/">LORETTEVILLE</a></li>254                            255                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=vieux-quebec/">VIEUX-QUÉBEC</a></li>256                            257                            <li><a class="dropdown-item text-white" href="/logement/arrondissement=montcalm/">MONTCALM / SAINT-JEAN BAPTISTE</a></li>258                            259                            <li><hr class="dropdown-divider"></li>260                        </ul>261                    </li>262263                    <li class="nav-item dropdown ">264265266                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">267                            COLOCATIONS268                        </a>269                        <ul class="dropdown-menu bg-dark">270                            271                                <li>272                                    <a class="dropdown-item text-white" href="/recherche/?COLOCATIONS=colocation-fille-etudiante">273                                        COLOCATION FILLE – ÉTUDIANTE274                                    </a>275                                </li>276                            277                                <li>278                                    <a class="dropdown-item text-white" href="/recherche/?COLOCATIONS=colocation-fille-travailleuse">279                                        COLOCATION FILLE – TRAVAILLEUSE280                                    </a>281                                </li>282                            283                                <li>284                                    <a class="dropdown-item text-white" href="/recherche/?COLOCATIONS=colocation-garcon-etudiant">285                                        COLOCATION GARÇON – ÉTUDIANT286                                    </a>287                                </li>288                            289                                <li>290                                    <a class="dropdown-item text-white" href="/recherche/?COLOCATIONS=colocation-garcon-travailleur">291                                        COLOCATION GARÇON – TRAVAILLEUR292                                    </a>293                                </li>294                            295296                            <li><hr class="dropdown-divider"></li>297                        </ul>298                    </li>299300301302303                    <li class="nav-item">304                        <a class="nav-link" href="/emploi/">EMPLOI</a>305                      </li>306307                          <li class="nav-item">308                        <a class="nav-link" href="/a-propos/">À PROPOS</a>309                      </li>310              311                     <li class="nav-item">312                        <a class="nav-link" href="/contact/">CONTACT</a>313                    </li>314315                    <!-- Add other navigation items as needed -->316                   317                </ul>318319                <a class="btn-sm btn button-theme h-50 mb-2" href="https://jfpselectrique.gestionminute.com/fr/online/picard-immobilier" target="_blank">DEMANDE DE SERVICE</a>320            </div>321        </div>322    </nav>323</header>324325326<!-- Main header end -->327328329      330<!-- Sub banner start -->331<div class="sub-banner">332    <div class="container">333        <div class="breadcrumb-area">334            <h1>DETAILS DU LOGEMENT</h1>335            <ul class="breadcrumbs">336                <li><a href="">LOGEMENTS</a></li>337                <li class="active">754</li>338            </ul>339        </div>340    </div>341</div>342<!-- Sub Banner end -->343344345<div class="property-wrapper container py-4 pt-5">346    <div class="row">347        <!-- Main property section -->348        <div class="col-lg-8">349            <!-- Slider Swiper -->350            <div class="swiper mySwiper mb-4">351                <div class="swiper-wrapper">352                    353                        354                        355                            <div class="swiper-slide">356                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/43/18/4318cd6e-52a3-47e1-8bd8-9ebc99decce1/capture_decran_le_2020-12-23_a_143916.png__750x500_crop_subsampling-2_upscale.png" data-fancybox="gallery">357                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/43/18/4318cd6e-52a3-47e1-8bd8-9ebc99decce1/capture_decran_le_2020-12-23_a_143916.png__750x500_crop_subsampling-2_upscale.png" alt="photo">358                                359360361                                </a>362                            </div>363                      364                  365                    366                    367                    368                    369370                    371                    372                        373                        374                            <div class="swiper-slide">375                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/c6/5f/c65fe8f4-0cfc-4a21-8b29-ea5cf15246c8/toc2we1u.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" data-fancybox="gallery">376                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/c6/5f/c65fe8f4-0cfc-4a21-8b29-ea5cf15246c8/toc2we1u.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" alt="photo">377                                378                                </a>379                            </div>380                        381                    382                        383                        384                            <div class="swiper-slide">385                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/e3/91/e3915cf3-0b02-47ae-a329-6a3c3de58fb4/sbn1nnge.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" data-fancybox="gallery">386                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/e3/91/e3915cf3-0b02-47ae-a329-6a3c3de58fb4/sbn1nnge.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" alt="photo">387                                388                                </a>389                            </div>390                        391                    392                        393                        394                            <div class="swiper-slide">395                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/e7/f2/e7f21554-d45a-4ea3-bcb1-a0d388c2e6dd/gs0j097q.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" data-fancybox="gallery">396                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/e7/f2/e7f21554-d45a-4ea3-bcb1-a0d388c2e6dd/gs0j097q.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" alt="photo">397                                398                                </a>399                            </div>400                        401                    402                        403                        404                            <div class="swiper-slide">405                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/62/21/6221c460-ddc3-4713-b84d-6b3f88bb6272/al4dmfai.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" data-fancybox="gallery">406                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/62/21/6221c460-ddc3-4713-b84d-6b3f88bb6272/al4dmfai.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" alt="photo">407                                408                                </a>409                            </div>410                        411                    412                        413                        414                            <div class="swiper-slide">415                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/ed/80/ed80de15-c065-4941-95f6-9d623d18e79c/atar8ayk.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" data-fancybox="gallery">416                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/ed/80/ed80de15-c065-4941-95f6-9d623d18e79c/atar8ayk.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" alt="photo">417                                418                                </a>419                            </div>420                        421                    422                        423                        424                            <div class="swiper-slide">425                                <a href="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/09/c5/09c543a0-e815-4545-8db7-39dc38b94214/ti-szbug.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" data-fancybox="gallery">426                                <img src="https://picardimmobilier.s3.amazonaws.com/media/filer_public_thumbnails/filer_public/09/c5/09c543a0-e815-4545-8db7-39dc38b94214/ti-szbug.jpeg__750x500_q85_crop_subsampling-2_upscale.jpg" alt="photo">427                                428                                </a>429                            </div>430                        431                    432433                </div>434                <div class="swiper-pagination mt-2"></div>435            </div>436          437            <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">438                <h2 class="fw-bold mb-0">Appartement 4½ </h2>439                <h5 class="text-theme fw-bold mb-0">$1233.00 par mois</h5>440            </div>441            442            443            <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">444                <div>445                <p class="text-muted mb-0">446                    <i class="fa fa-map-marker-alt me-2"></i>447                    2030 Avenue de Vitré,448                    #2, 449                    Québec, Québec, G1J4A3450                </p>451                <small class="text-success">Disponible immédiatement</small>452                </div>453                <div class="text-end mt-2 mt-md-0">454                <h6 class="text-dark"># Référence :455                    <span class="text-danger">456                    754457                    </span>458                </h6>459                </div>460            </div>          461462            <div class="mb-4">463                <h5 class="fw-semibold mb-2">Description</h5>464                <p class="text-muted"> Entièrement rénové à neuf en 2020, le 2030 De Vitré comporte 8 logements de qualité condo. Il se trouve à 5 minutes à pied d&#x27;un arrêt d&#x27;autobus (Parcours 800, 802 et autres) et à 1.2 km du Domaine Maizerets. Une visite vous charmera ! </p>465            </div>466467            <div class="mb-4">468                <h5 class="fw-semibold mb-3">Caractéristiques et Commodités de l'unité469                </h5>470                <div class="row g-2">471472                    473                    474                    <div class="col-6 text-dark"><i class="fa fa-bed me-2 text-theme"></i>Chambres : 4½</div>475                    476                    <div class="col-6 text-dark"><i class="fa fa-bath me-2 text-theme"></i>Salle de bain</div>477                    <div class="col-6 text-dark"><i class="fa fa-utensils me-2 text-theme"></i>Cuisine</div>478                    <div class="col-6 text-dark"><i class="fa fa-door-open me-2 text-theme"></i>Entrée indépendante</div>479480                    <div class="col-6 text-dark"><i class="fa fa-wifi me-2 text-theme"></i>Wifi Illimité</div>481                    482                    <div class="col-6 text-dark"><i class="fa fa-phone me-2 text-theme"></i>Intercom</div>483                    484                    485                    486                    487488                    489                    <div class="col-6 text-dark"><i class="fa fa-building me-2 text-theme"></i>Emplacement : Sous-Sol</div>490                    491492                    493                    <div class="col-6 text-dark"><i class="fa fa-car me-2 text-theme"></i>Stationnement : Extérieur</div>494                    495496                    497                    498                    <div class="col-6 text-dark"><i class="fa fa-snowflake me-2 text-theme"></i>Climatisation</div>499                    500                    501                    502503                    504                    <div class="col-6 text-dark"><i class="fa fa-paw me-2 text-theme"></i>Chat Accepté</div>505                    506507508509510                    511                    <div class="col-6 text-dark"><i class="fa fa-couch me-2 text-theme"></i>Meuble Incl. : Non</div>512                    513                    514515516517518                </div>519            </div>520521            522            <div class="inside-properties mb-5">523                <h5 class="fw-semibold mb-3">Vidéo de la propriété</h5>524            525                <div class="swiper swiperVideo">526                    <div class="swiper-wrapper">527                        528                        <div class="swiper-slide">529                            <div class="ratio ratio-16x9">530                                <video class="rounded" controls playsinline>531                                    <source src="https://picardimmobilier.s3.amazonaws.com/media/filer_public/72/d7/72d7fb35-90cb-4ae2-8f00-8b216fab2c0f/video_2020-08-28_08_21_07.mov" type="video/mp4">532                                    Votre navigateur ne supporte pas la vidéo.533                                </video>534                            </div>535                        </div>536                        537            538                        539                    </div>540                    <div class="swiper-pagination mt-2"></div>541                </div>542            </div>543            544            545            546            <div class="location mb-4">547548549550551552553                 <div class="map">554                    <h3 class="heading-2">Emplacement De La Propriété</h3>555                   <div id="map-custom"556                         class="map-canvas"557                         data-lat="46.8389633"558                         data-lng="-71.2283365"559                         data-color="#d1b149" style="height: 400px;"></div>  560561                         562                </div>  563            564            </div>565            566567568569            570571572        </div>573574      575      <div class="col-lg-4 mt-4 mt-lg-0">576    <div class="card shadow-sm p-4">577        <!-- Advanced search start -->578        <div class="">579            <h3 class="fw-bold mb-3 sidebar-title">TROUVER UN LOGEMENT</h3>580            <div class="s-border"></div>581            <div class="m-border"></div>582583            <form method="GET" action="/recherche/">584                <div class="mb-3">585                  586        587        588                    589                    <input type="text" class="form-control" name="REF" placeholder="Entrez le numéro de référence...">590        591        592        593                </div>594                <div class="form-group mb-3">595                     <select class="selectpicker search-fields" name="ARRONDISSEMENTS">596                                    <option selected="true" disabled="disabled">Arrondissements</option>597                                     598599                                     600                                    <option value="charny">CHARNY</option>601                                    602                                    <option value="les saules">LES SAULES</option>603                                    604                                    <option value="sainte-foy">SAINTE-FOY</option>605                                    606                                    <option value="beauport">BEAUPORT</option>607                                    608                                    <option value="limoilou">LIMOILOU</option>609                                    610                                    <option value="loretteville">LORETTEVILLE</option>611                                    612                                    <option value="vieux-québec">VIEUX-QUÉBEC</option>613                                    614                                    <option value="montcalm / saint-jean baptiste">MONTCALM / SAINT-JEAN BAPTISTE</option>615                                    616                                </select>617                </div>618619                <div class="form-group mb-3 ">620                     <select class="selectpicker search-fields" name="DISPONIBILITES">621                                    <option selected="true" disabled="disabled">Disponibilités</option>622                                    623                                    <option value="libre">LIBRE IMMÉDIATEMENT</option>624                                    625                                    <option value="AOÛT 2026">AOÛT 2026</option>626                                    627                                    <option value="SEPTEMBRE 2026">SEPTEMBRE 2026</option>628                                    629                                    <option value="OCTOBRE 2026">OCTOBRE 2026</option>630                                    631                                    <option value="NOVEMBRE 2026">NOVEMBRE 2026</option>632                                    633                                    <option value="DÉCEMBRE 2026">DÉCEMBRE 2026</option>634                                    635                                </select>636                </div>637638                <div class="form-group mb-3">639                   <select class="selectpicker search-fields" name="LOGEMENTS">640                                    <option selected="true" disabled="disabled">Grandeur</option>641                                     642                                    <option value="1">1 1/2</option>643                                    644                                    <option value="2">2 1/2</option>645                                    646                                    <option value="3">3 1/2</option>647                                    648                                    <option value="4">4 1/2</option>649                                    650                                    <option value="5">5 1/2</option>651                                    652                                    <option value="6">6 1/2</option>653                                    654                                    <option value="maison">Maison</option>655                                    656                                    <option value="chalet">Chalet</option>657                                    658                                    <option value="chambre">Chambre</option>659                                    660                                    <option value="commercial">Commercial</option>661                                    662                                </select>663                </div>664665                666667                <div class="form-group mb-3">668                    <select class="selectpicker search-fields" name="COLOCATIONS">669                                     <option selected="true" disabled="disabled">Colocations</option>670                                      671                                     <option value="colocation-fille-etudiante">COLOCATION FILLE – ÉTUDIANTE</option>672                                     673                                     <option value="colocation-fille-travailleuse">COLOCATION FILLE – TRAVAILLEUSE</option>674                                     675                                     <option value="colocation-garcon-etudiant">COLOCATION GARÇON – ÉTUDIANT</option>676                                     677                                     <option value="colocation-garcon-travailleur">COLOCATION GARÇON – TRAVAILLEUR</option>678                                     679                                 </select>680                 </div>681682683684685686                 <div class="mb-3">687                    <div class="mb-3 position-relative">688                        <label class="form-label">Prix</label>689                        <div class="range-wrapper position-relative">690                         <input type="hidden" name="min_price" value="250">691                          <input type="range" class="form-range" min="250" max="4000" step="50" id="priceRange" value="2500" name="max_price">692                          693694                          <div id="priceTooltip" class="range-tooltip">$4000</div>695                        </div>696                        <div class="d-flex justify-content-between text-muted">697                          <small>$250</small>698                          <small>$4000</small>699                        </div>700                      </div>701                      702        703                </div>704705706               707708709                <div class="accordion accordion-flush other-features mb-30" id="accordionFlushExample">710                    <div class="accordion-item">711                        <h2 class="accordion-header" id="flush-headingOne">712                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">713                                Options714                            </button>715                        </h2>716                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">717                            <div class="accordion-body">718                                <h3 class="sidebar-title">Commodités</h3>719                                <div class="s-border"></div>720                                <div class="m-border"></div>721722723                                724                                <div class="checkbox checkbox-theme checkbox-circle">725                                    <input id="chauffage" type="checkbox" value="chauffage" name="COMMODITES">726                                    <label for="chauffage">727                                        CHAUFFÉ728                                    </label>729                                </div>730                                731                                <div class="checkbox checkbox-theme checkbox-circle">732                                    <input id="eclaire" type="checkbox" value="eclaire" name="COMMODITES">733                                    <label for="eclaire">734                                        ÉCLAIRÉ735                                    </label>736                                </div>737                                738                                <div class="checkbox checkbox-theme checkbox-circle">739                                    <input id="semi-meuble" type="checkbox" value="semi-meuble" name="COMMODITES">740                                    <label for="semi-meuble">741                                        SEMI-MEUBLÉ742                                    </label>743                                </div>744                                745                                <div class="checkbox checkbox-theme checkbox-circle">746                                    <input id="meuble" type="checkbox" value="meuble" name="COMMODITES">747                                    <label for="meuble">748                                        MEUBLÉ749                                    </label>750                                </div>751                                752                                <div class="checkbox checkbox-theme checkbox-circle">753                                    <input id="climatiseur" type="checkbox" value="climatiseur" name="COMMODITES">754                                    <label for="climatiseur">755                                        CLIMATISEUR756                                    </label>757                                </div>758                                759                                <div class="checkbox checkbox-theme checkbox-circle">760                                    <input id="balcon" type="checkbox" value="balcon" name="COMMODITES">761                                    <label for="balcon">762                                        BALCON763                                    </label>764                                </div>765                                766767768769770771                            </div>772                        </div>773                    </div>774                </div>775776                <div class="form-group mb-0">777                    <button type="submit" class="search-button">RECHERCHER</button>778                </div>779            </form>780        </div>781782        <!-- Posts by category Start -->783        <!-- TODO : INSERT DISTRICT LIST W/ PROPS        -->784785    </div>786</div>787788789<script>790    const slider = document.getElementById("priceRange");791    const tooltip = document.getElementById("priceTooltip");792    793    function updateTooltip() {794      const min = parseInt(slider.min);795      const max = parseInt(slider.max);796      const val = parseInt(slider.value);797    798      const percent = ((val - min) / (max - min)) * 100;799      tooltip.style.left = `${percent}%`;800      tooltip.textContent = `$${val}`;801    }802    803    slider.addEventListener("input", updateTooltip);804    updateTooltip(); // Init au chargement805</script>806807808809    </div>810</div>811812813<script>814    const swiperVideo = new Swiper('.swiperVideo', {815      loop: false,816      pagination: {817        el: '.swiper-pagination',818        clickable: true,819      },820      spaceBetween: 20,821    });822  </script>823824  825  826  827  828  829830831832833834    <style>835        .swiperVideo {836            width: 100%;837        }838        .swiperVideo .swiper-slide {839            padding-bottom: 1rem;840        }841    </style>842843844845846847       848   <!-- Footer start -->849   <footer class="footer">850    <div class="container footer-inner">851        <div class="row">852            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">853                <div class="footer-item clearfix">854855                    856                        <img src="https://picardimmobilier.s3.amazonaws.com/media/files/00675f6c-f3fa-474a-8665-7f2137707334.png" alt="Groupe Picard Immobilier Logo" class="f-logo">857                        858                    859860                    <div class="text">861                        <p class="text-justify font-weight-bold">862                             Avec près de 700 appartements de tous les styles dans la région de Québec, l&#x27;entreprise Picard Immobilier saura répondre à vos besoins.863                        </p>864                    </div>865                </div>866            </div>867            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">868                <div class="footer-item">869                    <h4>Nous Joindre</h4>870                    <ul class="contact-info">871                        <li>872                            <i class="flaticon-pin"></i>  790 ave royale873                        </li>874                        <li>875                            <i class="flaticon-mail"></i><a href="/cdn-cgi/l/email-protection#2945464a485d4046476959404a485b4d404444464b4045404c5b07474c5d"><span class="__cf_email__" data-cfemail="fd91929e9c89949293bd8d949e9c8f99949090929f949194988fd3939889">[email&#160;protected]</span></a>876                        </li>877                        <li>878                            <i class="flaticon-phone"></i><a href="tel:+1 (418) 580-1407 ">+1 (418) 580-1407 </a>879                        </li>880                        <li>881                            <i class="flaticon-fax"></i><a href="tel:+1 (418) 580-1407 ">+1 (418) 580-1407 </a>882                        </li>883884                    </ul>885                </div>886            </div>887            <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6">888                <div class="footer-item">889                    <h4>890                        Liens Rapides891                    </h4>892                    <ul class="links">893                        <li>894                            <a href="/" class="link-inner"><span> ACCUEIL</span></a>895                        </li>896                        <li>897                            <a href="/a-propos/" class="link-inner"><span> À PROPOS</span></a>898                        </li>899                        <li>900                            <a href="/emploi/" class="link-inner"><span> EMPLOI</span></a>901                        </li>902                          <li>903                            <a href="/contact/" class="link-inner"><span> CONTACT</span></a>904                        </li>905906                    </ul>907                </div>908            </div>909            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">910                <div class="footer-item clearfix">911                    <h4>Infolettre</h4>912                    <div class="Subscribe-box">913                        <p>914915                            Abonnez-vous à notre liste de diffusion pour rester en contact !Nous vous tiendrons au courant de nos nouveautés sur le marché.916917                        </p>918919                        <form class="form-inline d-flex"  method="POST" id="newsletter-form">920                            <input type="hidden" name="csrfmiddlewaretoken" value="pkurh62bXteeMrmQb2IhhO1vcYHG8oFJavJGXymmu1YUdwtu9cdGhZHql1yVLubd">921922                            <input type="email" name="courriel" class="form-control" placeholder="Votre courriel*" label="courriel" id="courriel_id" maxlength="256" required>923                            <input type="hidden" name="captcha" id="captcha_id">924                            <button id="button-subscribe" class="btn btn-theme" type="submit"><i class="fa fa-paper-plane"></i>925                            </button>926927                        </form>928                        <div id="result-subscribe"></div>929                </div>930            </div>931        </div>932    </div>933    <div class="sub-footer">934        <div class="container">935            <div class="row">936                <div class="col-lg-8 col-md-12">937                    <p class="copy">© 2025 <a href="#">Groupe Picard Immobilier - Tous droits réservés. </a>938                       Propulsé par <a target="_blank" href="https://appanoo.com/fr/">Appanoo Labs</a></p>939                </div>940                <div class="col-lg-4 col-md-12">941                    <ul class="social-list clearfix">942                        <li><a  target="_blank" href="https://www.facebook.com/picardimmobilier.net/" class="facebook-bg"><i class="fa-brands fa-facebook"></i></i></a></li>943                        <li><a href="#" class="twitter-bg"><i class="fa-brands fa-twitter"></i></a></li>944                        <li><a href="#" class="google-bg"><i class="fa-brands fa-google-plus-g"></i></a></li>945                        <li><a href="#" class="linkedin-bg"><i class="fa-brands fa-linkedin"></i></a></li>946                    </ul>947                </div>948            </div>949        </div>950    </div>951    </div>952</footer>953<!-- Footer end -->954955    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.min.js"></script>956    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/bootstrap-submenu.js"></script>957958959    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>960    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/rangeslider.js"></script>961    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.mb.YTPlayer.js"></script>962    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/bootstrap-select.min.js"></script>963    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.easing.1.3.js"></script>964    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.scrollUp.js"></script>965    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.mCustomScrollbar.concat.min.js"></script>966    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/leaflet.js"></script>967    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/leaflet-providers.js"></script>968    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/leaflet.markercluster.js"></script>969    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/dropzone.js"></script>970    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/slick.min.js"></script>971    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.filterizr.js"></script>972    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.magnific-popup.min.js"></script>973    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/jquery.countdown.js"></script>974    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/modernizr.custom.js"></script>975    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/boxes-component.js"></script>976    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/boxes-core.js"></script>977    978    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/app.js"></script>979980981982    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->983    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/ie10-viewport-bug-workaround.js"></script>984    <!-- Custom javascript -->985986    <script  src="https://picardimmobilier.s3.amazonaws.com/static/site/js/ie10-viewport-bug-workaround.js"></script>987    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>988    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>989      <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>990      <script src="https://maps.googleapis.com/maps/api/js?key=AIza_CLE_CAVIARDEE_LOUKA_000000000000000"></script>991992      <script>993        //994// Google maps995//996997var GoogleMapCustom = (function() {998  var $map = document.getElementById('map-custom'),999      lat,1000      lng,1001      color,1002      zoom;10031004  function initMap(map) {10051006      lat = map.getAttribute('data-lat');1007      lng = map.getAttribute('data-lng');1008      color = map.getAttribute('data-color');1009      zoom = map.getAttribute('data-zoom') ? parseInt(map.getAttribute('data-zoom')) : 14;10101011      var myLatlng = new google.maps.LatLng(lat, lng);10121013      var mapOptions = {1014          zoom: zoom,1015          scrollwheel: false,1016          center: myLatlng,1017          mapTypeId: google.maps.MapTypeId.ROADMAP,1018          styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":color},{"visibility":"on"}]}]1019      }10201021      map = new google.maps.Map(map, mapOptions);10221023      var marker = new google.maps.Marker({1024          position: myLatlng,1025          map: map,1026          animation: google.maps.Animation.DROP,1027          title: ''1028      });10291030      10311032      google.maps.event.addListener(marker, 'click', function() {1033          infowindow.open(map, marker);1034      });1035  }10361037  if (typeof($map) != 'undefined' && $map != null) {1038      google.maps.event.addDomListener(window, 'load', initMap($map));1039  }1040})();1041      </script>10421043      <script>1044          const swiper = new Swiper('.mySwiper', {1045              loop: true,1046              pagination: {1047                  el: '.swiper-pagination',1048                  clickable: true,1049              },1050          });1051          Fancybox.bind("[data-fancybox='gallery']", {});1052          105310541055        </script>   1056    <script>1057    var csrftoken = Cookies.get('csrftoken');1058    function csrfSafeMethod(method) {1059      // these HTTP methods do not require CSRF protection1060      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));1061    }1062    $.ajaxSetup({1063      beforeSend: function(xhr, settings) {1064        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {1065          xhr.setRequestHeader("X-CSRFToken", csrftoken);1066        }1067      }1068    });10691070    $(document).ready(function(){1071      1072      1073    });1074    </script>1075    <script>1076          var submitData = document.getElementById("button-subscribe").innerHTML ;1077        $("#newsletter-form").submit(function(e) {1078        e.preventDefault(),1079        $("#button-subscribe").attr("disabled", "disabled"),1080        $("#button-subscribe").html(""),1081        $("#button-subscribe").append(1082        `<span class="spinner-border spinner-border-sm text-light"> </span>`),1083        $.ajax({1084            type: "POST",1085            url: '/abonnement/',1086            data: {10871088                courriel: $("#courriel_id").val(),1089                captcha : $("#captcha_id").val(),1090                csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val()1091            },10921093            success: function(e) {1094                $("#result-subscribe").addClass(e.class),109510961097                setTimeout(() => {10981099                    $("#button-subscribe").html(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">1100  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>1101</svg>`),11021103                    $("#result-subscribe").html(`<div class="alert alert-success mt-2 alert-dismissible fade show" role="alert">1104  <span class="closebtn" onclick="this.parentElement.style.display='none';"></span>` + `<small>` +1105  e.status + `</small>` + `</div>`)1106                }, 3e3), setTimeout(() => {1107                    $("#button-subscribe").css("background-color", "linear-gradient(150.02deg, #FF914D 29.4%, #FD725E 47.79%, #FB556E 69.37%, #FA4378 88.04%, #FA3D7B 101.53%);"),1108                    $("#button-subscribe").html(submitData),1109                    $("#button-subscribe").removeAttr("disabled"),1110                    $("#result-subscribe").html(""),1111                    $("#newsletter-form").each(function() {1112                        this.reset()1113                    })1114                }, 8e3)1115            },1116            error: function(e) {1117                $("#result-subscribe").addClass(e.responseJSON.class),111811191120                setTimeout(() => {1121                    $("#button-subscribe").css("background-color", "linear-gradient(150.02deg, #FF914D 29.4%, #FD725E 47.79%, #FB556E 69.37%, #FA4378 88.04%, #FA3D7B 101.53%);"),1122                    $("#button-subscribe").html(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">1123  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>1124</svg>`),11251126                    $("#result-subscribe").html(`<div class="alert alert-danger alert-dismissible fade show mt-2" role="alert" >1127  <span class="closebtn" onclick="this.parentElement.style.display='none';"></span>` +1128    + `<small>` + e.responseJSON.status + `</small>`  +1129`</div>`)1130                }, 3e3),1131                setTimeout(() => {1132                    $("#button-subscribe").css("background-color", "linear-gradient(150.02deg, #FF914D 29.4%, #FD725E 47.79%, #FB556E 69.37%, #FA4378 88.04%, #FA3D7B 101.53%);"),1133                    $("#button-subscribe").html(submitData),1134                    $("#button-subscribe").removeAttr("disabled"),1135                    $("#result-subscribe").html("")1136                }, 5000)1137            }1138        })1139    });1140</script>1141    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js" ></script>1142    <script async>1143    // const observer = lozad();1144    // observer.observe();1145    lozad('.lozad', {1146    load: function(el) {1147            el.src = el.dataset.src;1148            el.onload = function() {1149                el.classList.add('fade')1150            }1151        }1152    }).observe();1153    </script>11541155    <script>1156      // JavaScript to detect if the user is on a mobile device1157      var is_mobile = /Mobi|Android/i.test(navigator.userAgent);1158    1159      // If the user is on a mobile device, add the 'show' class to the dropdown menu1160      if (is_mobile) {1161        document.getElementById('myDropdown').classList.add('show');1162      }1163    </script>116411651166   1167116811691170      1171<script>1172    const swiperVideo = new Swiper('.swiperVideo', {1173      loop: false,1174      pagination: {1175        el: '.swiper-pagination',1176        clickable: true,1177      },1178      spaceBetween: 20,1179    });1180  </script>11811182  1183  1184  1185  1186  11871188      11891190    1191    <div id="cb-cookie-banner" class="card text-white bg-dark position-fixed bottom-0 end-0 m-3" style="width: 26rem; z-index: 9999;">1192    <div class="card-body d-flex flex-column justify-content-between h-100">1193      <div class="mb-3">1194        <h5 class="card-title"> 🍪 Avis relatif aux cookies</h5>1195        <p class="card-text text-small">1196            Avec votre consentement, nous et nos partenaires utilisons les cookies ou des technologies 1197            similaires pour stocker, accéder à et traiter des données personnelles telles que vos visites 1198            à ce site Web, les adresses IP et les identifiants des cookies.11991200          <a href="#" data-bs-toggle="collapse" data-bs-target="#additionalInfo" aria-expanded="false" aria-controls="additionalInfo" style="color : #7d6a2b;">« En savoir plus »</a>12011202          <div class="collapse" id="additionalInfo">1203            <p class="mt-2">12041205                Vos données personnelles sont traitées pour les finalités suivantes:12061207            </p>1208         12091210                <ul>1211                    <li class='mb-1'><i class="fa fa-check"></i> Comprendre les publics par le biais de statistiques ou de combinaisons de données provenant de différentes sources.</li>1212                    <li class="mb-1"><i class="fa fa-check"></i> Créer des profils pour la publicité personnalisée.</li>1213                    <li class="mb-1"><i class="fa fa-check"></i> Développer et améliorer les services.</li>1214                    <li class="mb-1"><i class="fa fa-check"></i> Mesurer la performance des contenus.</li>1215                    <li class="mb-1"><i class="fa fa-check"></i> Mesurer la performance des publicités.</li>1216                    <li class="mb-1"><i class="fa fa-check"></i> Stocker et/ou accéder à des informations sur un appareil.</li>1217                    <li class="mb-1"><i class="fa fa-check"></i> Utiliser des données limitées pour sélectionner la publicité.</li>1218                    <li class="mb-1"><i class="fa fa-check"></i> Utiliser des profils pour sélectionner des publicités personnalisées.</li>1219                </ul>12201221          </div>1222      <div class="d-flex justify-content-between mt-3">1223        <button type="button" class="btn btn-success me-2 btn-theme w-50 mb-4" onclick="acceptCookies()">ACCEPTER</button>1224        <button type="button" class="btn btn-outline-secondary w-50 mb-4" onclick="rejectCookies()" style="text-transform: uppercase;font-weight: 500;font-size: 13px;">REFUSER</button>1225      </div>1226    </div>1227  </div>12281229  <script>1230    function blockGoogleAdsCookies() {1231      // Disabling Google Ads scripts1232      let googleAdsScripts = document.querySelectorAll('script[src*="googlesyndication.com"], script[src*="googleadservices.com"], script[src*="google-analytics.com"]');1233      googleAdsScripts.forEach(script => {1234        script.type = 'text/plain'; // Change type to prevent execution1235      });12361237      // Removing existing cookies related to Google Ads1238      document.cookie.split(";").forEach(function(c) {1239        if (c.trim().startsWith('_ga') || c.trim().startsWith('_gid')) {1240          document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");1241        }1242      });1243    }12441245    function showCookieBanner() {1246      document.getElementById("cb-cookie-banner").style.display = "block";1247    }12481249    function acceptCookies() {1250      localStorage.setItem("cb_isCookieAccepted", "yes");1251      document.getElementById("cb-cookie-banner").style.display = "none";1252    }12531254    function rejectCookies() {1255      localStorage.setItem("cb_isCookieAccepted", "no");1256      blockGoogleAdsCookies(); // Block Google Ads cookies as before1257      document.getElementById("cb-cookie-banner").style.display = "none";1258      1259    }12601261    function initializeCookieBanner() {1262      let choix = localStorage.getItem("cb_isCookieAccepted");1263      if (choix === null) {1264        showCookieBanner();1265      }1266    }1267    12681269    document.addEventListener("DOMContentLoaded", function() {1270      initializeCookieBanner();1271    });1272  </script>12731274        </body>1275</html>