/* The content never touches the footer: room under the last block of either column. */
.desktopPage .contentCanvas { padding-bottom: 40px; }

/* Home, desktop: the same body and footer as Register. The white fills the
   whole band between the header and the footer (skin-white.jpg has no grey
   column), the body runs down to the footer, and the footer casts its shadow
   upward onto it. */
@media (min-width: 1041px) {
  .desktopPage .pageLayer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .desktopPage .contentCanvas { flex: 1 0 auto; margin-top: 0; }
  .desktopPage .footer { margin-top: 0; position: relative; z-index: 2; box-shadow: 0 -7px 18px rgba(20, 42, 32, .13); }
}

/* A recent search has no photo: a neutral building in the thumbnail's box. */
.recentImage.noPhoto { display: flex; align-items: center; justify-content: center; background: #f1f4f2; color: #9aa5a0; }

/* Best of: up to three listings one under the other (the legacy slider held one). */
.bestOfSlider { height: auto; }
.bestOfSlide { margin-bottom: 14px; }
.bestOfSlide > img { object-fit: cover; }

/* "Se connecter": the app's primary Button (imcongo-ui): blue, 16px corners, white semibold label, darker when hovered. */
.desktopPage a.accountPanel {
  --text-button-text-font-size: 15px;
  --text-button-text-line-height: 21px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 0; margin: 18px 0 0; padding: var(--space-3) var(--space-4);
  border: 0; border-radius: var(--radius-md); background: var(--color-secondary);
  color: #fff; text-decoration: none; text-transform: none;
  font: var(--text-button-text-font-weight) var(--text-button-text-font-size)/var(--text-button-text-line-height) var(--text-button-text-font-family);
}
.desktopPage a.accountPanel:hover { background: var(--color-secondary-dark); }


/* Best of and news pictures: rounded too (the small news thumbnails with the smaller radius). */
.bestOfSlide > img { border-radius: var(--radius-md); }
.newsItem img { border-radius: var(--radius-sm); }


/* Derniers biens: modern cards. A white card with a soft shadow that lifts when hovered, an inset photo with a dark
   fade at the bottom, the original sale / rent ribbon, a frosted "Voir" tag in the photo's bottom-left corner (its curve is
   the photo's), the price first and large, then the title and a line with the place and the bedrooms. */
.listingsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 6px 4px 8px; overflow: visible; }
.listingsGrid .listing { position: relative; flex: none; width: auto; height: auto; margin: 0; padding: 10px; background: #fff; border: 1px solid rgba(20, 42, 32, .06); border-radius: 20px; box-shadow: 0 1px 2px rgba(20, 42, 32, .06), 0 12px 26px -10px rgba(20, 42, 32, .22); transition: transform .2s ease, box-shadow .2s ease; }
.listingsGrid .listing:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 42, 32, .08), 0 18px 34px -10px rgba(20, 42, 32, .30); }
.listingPhoto { position: relative; height: 190px; }
/* The picture and its fades, with rounded corners; the bottom-left corner (20 x 20px, inside the "Voir" tag) is left out, so the tag is the only thing drawn along its curve and the curve is not drawn on top of the picture's edge. */
.listingPhotoClip { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #e8ece9;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat, linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat, linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat; }
.listingPhotoClip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 46%), linear-gradient(to bottom, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 30%); }
.listingPhoto .listingImage { position: static; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s ease; }
.listingsGrid .listing:hover .listingImage { transform: scale(1.05); }

.listingPhoto .heart { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(20, 30, 25, .34); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 0, 0, .2); }

/* "Voir": flush with the photo's left and bottom edges, with the photo's own corner radius (14px) at its bottom-left, square at the top-left and bottom-right, a slightly rounded top-right (8px), a plain very light fill (not see-through, so the fade never darkens it; not pure white, so it stays visible against the white card), and a small space (about 5px) between the eye icon (20px wide, 5px in) and the word. */
.listingPhoto .seeButton { position: absolute; z-index: 3; top: auto; right: auto; bottom: 0; left: 0; width: 66px; height: 29px; padding: 6px 0 6px 25px; border: 0; border-radius: 0 8px 0 14px; background: url("/legacy/voir.png") no-repeat 5px center #f5f7f6; color: #1b2a2f; opacity: 1; box-shadow: none; line-height: 17px; }
.listingPhoto .seeButton:hover { background-color: #eaf0ec; }

.listingBody { padding: 12px 6px 4px; text-align: left; }
.listingPrice { height: 24px; margin: 0; color: #1b2a2f; font-size: 19px; font-weight: 700; line-height: 24px; letter-spacing: -.01em; }
.listingPrice small { line-height: 1; color: #6b7278; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.listingTitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; margin: 4px 0 0; color: #33383d; font-size: 13px; font-weight: 500; line-height: 1.35; }
.listingMeta { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; color: #6b7278; font-size: 12px; line-height: 16px; }
.listingMeta span { display: inline-flex; align-items: center; gap: 5px; }
.listingMeta svg { flex: none; color: #68c034; }

/* The sale / rent ribbon as on the original site: its text in a serif (Times New Roman) face, 12px, centred in the band, and the ribbon
   offset from the photo's corner as it was (14px across, 12px down). */
.listingRibbon > span,
.bestOfRibbon > span { top: 17.5px; left: -1.5px; font-family: "Times New Roman", Times, serif; font-size: 12.7px; }
.listingsGrid .listingRibbon { left: -4px; }

/* Who advertises: individual or professional, as a small chip with the app's icons (a person / a building) under the listing. */
.listingFooter { display: flex; align-items: center; margin: 12px 6px 4px; padding-top: 10px; border-top: 1px solid #edf1ee; }
.listingBy { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 16px; }
.listingBy.by-individual { background: #eef3ef; color: #4b5560; }
.listingBy.by-professional { background: #e3f4fb; color: #006592; }
.listingBy svg { flex: none; }

/* The cards of a row are as tall as the tallest, and the line with the advertiser (individual / professional) is pinned to the bottom of each, so it lines up across the row. The place and the bedrooms are one per line. */
.listingsGrid .listing { display: flex; flex-direction: column; }
.listingsGrid .listing .listingBody { flex: 1 1 auto; padding-bottom: 14px; }
.listingsGrid .listing .listingFooter { margin-top: auto; }

/* Views: on the right of the account type, the number and then an eye. */
.listingFooter { justify-content: space-between; }
.listingViews { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #6b7278; font-size: 12px; font-weight: 500; line-height: 16px; }
.listingViews svg { flex: none; }

/* À la une: the banners Admin chose, 2:1 pictures with their title and line on a fade. One stays still; several slide (public/js/banners.js). */
.featuredBanners { position: relative; margin: 14px 0 6px; border-radius: 20px; overflow: hidden; background: #e8ece9; box-shadow: 0 1px 2px rgba(20, 42, 32, .06), 0 14px 30px -12px rgba(20, 42, 32, .3); }
.featuredTrack { display: flex; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.featuredTrack::-webkit-scrollbar { display: none; }
.featuredSlide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.featuredSlide img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: center; }
.featuredSlide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 55%); }
.featuredSlide figcaption { position: absolute; z-index: 1; left: 22px; right: 96px; bottom: 18px; display: grid; gap: 4px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.featuredSlide figcaption strong { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.featuredSlide figcaption span { font-size: 14px; line-height: 1.35; opacity: .92; }
.featuredArrow { position: absolute; z-index: 2; top: 50%; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(20, 30, 25, .34); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .25); transition: background .2s ease; }
.featuredArrow:hover { background: rgba(20, 30, 25, .55); }
.featuredPrev { left: 12px; }
.featuredNext { right: 12px; }
.featuredDots { position: absolute; z-index: 2; right: 18px; bottom: 20px; display: flex; gap: 7px; }
.featuredDots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .5); cursor: pointer; transition: background .2s ease, width .2s ease; }
.featuredDots button[aria-current="true"] { width: 22px; border-radius: 999px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .featuredTrack { scroll-behavior: auto; } }