/* Styles pour les annonces Ubiflow */ /* ============================================================ PAGE DE DÉTAIL ANNONCE — fond #00031b (charte graphiste) Total Theme ajoute le slug de page comme classe sur ============================================================ */ body.page-slug-detail-location, body.page-slug-detail-vente { background-color: #00031b !important; } body.page-slug-detail-location .site-content, body.page-slug-detail-location #main, body.page-slug-detail-location .wpex-content-area, body.page-slug-detail-location .entry-content, body.page-slug-detail-vente .site-content, body.page-slug-detail-vente #main, body.page-slug-detail-vente .wpex-content-area, body.page-slug-detail-vente .entry-content { background-color: #00031b !important; } /* Libère #content-wrap de la contrainte max-width 1280px du thème Total sur la page detail-location (body.page-id-75). La classe page-slug-* n'est PAS générée par Total — on utilise page-id-75. */ .page-id-75 #content-wrap { max-width: none !important; width: 100% !important; } /* Marges 10% gauche/droite sur les blocs de premier niveau du template 71, identique au margin 10% défini dans le template 70 (liste) */ .page-id-75 .vcex-shortcode>.vc_row { margin-left: 10% !important; margin-right: 10% !important; } /* Layout Grid */ .ubiflow-annonces.ubiflow-layout-grid { display: flex; flex-wrap: wrap; margin: 0 -15px; } .ubiflow-annonces.ubiflow-layout-grid .ubiflow-grid-item { padding: 15px; box-sizing: border-box; } .ubiflow-annonces.ubiflow-cols-2 .ubiflow-grid-item { width: 50%; } .ubiflow-annonces.ubiflow-cols-3 .ubiflow-grid-item { width: 33.33%; } .ubiflow-annonces.ubiflow-cols-4 .ubiflow-grid-item { width: 25%; } @media (max-width: 992px) { .ubiflow-annonces.ubiflow-cols-3 .ubiflow-grid-item, .ubiflow-annonces.ubiflow-cols-4 .ubiflow-grid-item { width: 50%; } } @media (max-width: 576px) { .ubiflow-annonces.ubiflow-layout-grid .ubiflow-grid-item { width: 100%; } } /* Layout List */ .ubiflow-annonces.ubiflow-layout-list .ubiflow-list-item { margin-bottom: 30px; } .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-link { display: flex; flex-wrap: wrap; } .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-thumbnail { width: 30%; flex: 0 0 30%; } .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-content { width: 70%; flex: 0 0 70%; padding-left: 20px; box-sizing: border-box; } @media (max-width: 768px) { .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-link { flex-direction: column; } .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-thumbnail, .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-content { width: 100%; flex: 0 0 100%; } .ubiflow-annonces.ubiflow-layout-list .ubiflow-annonce-content { padding-left: 0; padding-top: 15px; } } /* Style des éléments */ .ubiflow-annonce-item { transition: all 0.3s ease; } .ubiflow-annonce-link { display: block; color: inherit; text-decoration: none; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 5px; overflow: hidden; height: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .ubiflow-annonce-link:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transform: translateY(-3px); } .ubiflow-annonce-thumbnail { position: relative; padding-top: 66%; overflow: hidden; } /* Aplat grisé + signe + au survol */ .ubiflow-annonce-thumbnail::after { content: '+'; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.25); color: #fff; font-size: 3rem; font-weight: 300; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .ubiflow-annonce-link:hover .ubiflow-annonce-thumbnail::after { opacity: 1; } .ubiflow-thumbnail-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .ubiflow-no-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f8f8f8; color: #999; } .ubiflow-badge-type { position: absolute; top: 10px; right: 10px; background-color: #007bff; color: white; padding: 5px 10px; font-size: 0.75rem; border-radius: 3px; } .ubiflow-annonce-content { padding: 15px; } .ubiflow-annonce-title { margin: 0 0 5px; font-size: 1.1rem; font-weight: 600; } .ubiflow-annonce-ref { color: #666; font-size: 0.8rem; margin-bottom: 10px; } .ubiflow-annonce-meta { display: flex; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.9rem; } .ubiflow-meta-item { margin-right: 15px; margin-bottom: 5px; } .ubiflow-ville { color: #555; } .ubiflow-details .ubiflow-surface { margin-right: 5px; } .ubiflow-annonce-prix { font-weight: 700; font-size: 1.2rem; color: #007bff; } .ubiflow-annonce-description-excerpt { margin-bottom: 15px; color: #666; font-size: 0.9rem; } /* Template standard */ .ubiflow-annonce-standard { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .ubiflow-annonce-header { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; } .ubiflow-annonce-titre { margin: 0 0 10px; } .ubiflow-annonce-ref { color: #666; } .ubiflow-annonce-row { display: flex; flex-wrap: wrap; margin: 0 -15px 30px; } .ubiflow-annonce-photos-col { flex: 0 0 60%; max-width: 60%; padding: 0 15px; box-sizing: border-box; } .ubiflow-annonce-details-col { flex: 0 0 40%; max-width: 40%; padding: 0 15px; box-sizing: border-box; } @media (max-width: 992px) { .ubiflow-annonce-photos-col, .ubiflow-annonce-details-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 20px; } } /* ---- Badge photos sur l'image de détail ---- */ .ubiflow-photo-wrapper { position: relative; display: block; line-height: 0; width: 100%; aspect-ratio: 4 / 3; /* Ratio fixe : aucune image ne déforme le layout */ overflow: hidden; border-radius: 0; } /* Le lien Fancybox occupe toute la largeur ET la hauteur du wrapper */ .ubiflow-photo-wrapper>a:first-child { display: block; width: 100%; height: 100%; } /* L'image principale remplit le wrapper avec recadrage centré */ .ubiflow-photo-wrapper img.ubiflow-photo-principale { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0px; } .ubiflow-photos-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.55); color: #ffffff !important; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; text-decoration: none; line-height: 1.4; pointer-events: auto; backdrop-filter: blur(3px); transition: background 0.2s ease; } .ubiflow-photos-badge:hover { background: rgba(0, 0, 0, 0.8); color: #ffffff !important; text-decoration: none; } .ubiflow-photos-badge-icon { font-style: normal; } /* ---- Fin badge photos ---- */ /* ============================================================ PHOTO EN BACKGROUND — {{ubiflow_photo_principale_bg}} Principe : .vc_col-sm-8 a la bonne hauteur (dictée par "En bref"). La photo doit s'ancrer en position:absolute sur .vc_col-sm-8. Pour cela, TOUS les éléments intermédiaires doivent être position:static — sinon le premier position:relative rencontré (vc_row.vc_inner via wpex-relative, ou vc_col-sm-12 via WPBakery) devient le containing block et s'effondre à 0 hauteur. ============================================================ */ /* .vc_col-sm-8 : seul containing block autorisé */ .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 { position: relative; } /* Neutraliser TOUS les position:relative intermédiaires entre .vc_col-sm-8 et .ubiflow-photo-bg-cover : — .vc_row.vc_inner (classe wpex-relative du thème Total) — .vc_col-sm-12 (WPBakery place wpb_column en position:relative) — .vc_column-inner intérieur (précaution) */ .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 .vc_row.vc_inner, .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 .vc_inner .vc_col-sm-12, .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 .vc_inner .vc_col-sm-12>.vc_column-inner { position: static !important; } /* La photo remplit exactement .vc_col-sm-8 */ .ubiflow-photo-bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; inset: 0; } /* Lien Fancybox transparent couvrant toute la surface cliquable */ .ubiflow-photo-bg-link { display: block; position: absolute; inset: 0; } @media (max-width: 768px) { /* Sur mobile : retour au flux normal, hauteur fixe */ .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 { position: static; } .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 .vc_row.vc_inner, .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 .vc_inner .vc_col-sm-12, .page-id-75 .vc_row-o-equal-height>.vc_col-sm-8 .vc_inner .vc_col-sm-12>.vc_column-inner { position: relative !important; } .ubiflow-photo-bg-cover { position: relative; inset: auto; height: 240px; } } height: 240px; } } .ubiflow-annonce-photo-principale { margin-bottom: 10px; border-radius: 0; overflow: hidden; } .ubiflow-annonce-photo-principale img { width: 100%; display: block; } .ubiflow-annonce-photos-galerie { display: flex; flex-wrap: wrap; margin: 0 -5px; } .ubiflow-annonce-photo-mini { flex: 0 0 25%; padding: 0 5px; margin-bottom: 10px; box-sizing: border-box; } .ubiflow-annonce-photo-mini img { width: 100%; height: 100px; object-fit: cover; border-radius: 3px; cursor: pointer; } .ubiflow-annonce-no-photo { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; background-color: #f8f8f8; color: #999; border-radius: 5px; } .ubiflow-annonce-carac { background-color: #f9f9f9; padding: 15px; border-radius: 5px; margin-bottom: 20px; } .ubiflow-annonce-carac h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; } .ubiflow-annonce-carac-list { list-style-type: none; padding: 0; margin: 0; } .ubiflow-annonce-carac-list li { padding: 8px 0; border-bottom: 1px solid #eee; } .ubiflow-annonce-carac-list li:last-child { border-bottom: none; } .ubiflow-carac-label { font-weight: 600; margin-right: 5px; } .ubiflow-annonce-prix-box { background-color: #ebf7ff; padding: 15px; border-radius: 5px; margin-bottom: 20px; } .ubiflow-annonce-prix, .ubiflow-annonce-loyer-cc { margin-bottom: 10px; } .ubiflow-prix-label { font-weight: 600; display: block; margin-bottom: 5px; } .ubiflow-prix-value { font-size: 1.3rem; font-weight: 700; color: #007bff; } .ubiflow-prix-details { display: block; font-size: 0.9rem; color: #666; margin-top: 5px; } .ubiflow-annonce-dpe { margin-bottom: 20px; } .ubiflow-annonce-dpe h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; } .ubiflow-dpe-item { margin-bottom: 10px; } .ubiflow-dpe-label { font-weight: 600; margin-right: 10px; } .ubiflow-dpe-tag { display: inline-block; padding: 5px 10px; border-radius: 3px; color: white; font-weight: 600; } .ubiflow-dpe-a { background-color: #319834; } .ubiflow-dpe-b { background-color: #52ae32; } .ubiflow-dpe-c { background-color: #8abe46; } .ubiflow-dpe-d { background-color: #dcd81c; } .ubiflow-dpe-e { background-color: #f9b000; } .ubiflow-dpe-f { background-color: #ee8023; } .ubiflow-dpe-g { background-color: #e73629; } .ubiflow-annonce-description { margin-top: 30px; } .ubiflow-annonce-description h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; } /* Template compact */ .ubiflow-annonce-compact { width: 100%; border: 1px solid #e5e5e5; border-radius: 5px; overflow: hidden; margin-bottom: 20px; } .ubiflow-annonce-compact .ubiflow-annonce-header { padding: 10px 15px; background-color: #f9f9f9; border-bottom: 1px solid #e5e5e5; margin-bottom: 0; } .ubiflow-annonce-compact .ubiflow-annonce-header h3 { margin: 0 0 5px; font-size: 1rem; } .ubiflow-annonce-compact .ubiflow-reference { font-size: 0.8rem; color: #666; } .ubiflow-annonce-compact .ubiflow-annonce-body { display: flex; flex-wrap: wrap; } .ubiflow-annonce-compact .ubiflow-annonce-photo { flex: 0 0 30%; max-width: 30%; } .ubiflow-annonce-compact .ubiflow-annonce-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ubiflow-annonce-compact .ubiflow-annonce-infos { flex: 0 0 70%; max-width: 70%; padding: 10px 15px; box-sizing: border-box; } .ubiflow-annonce-compact .ubiflow-info-item { margin-bottom: 8px; font-size: 0.9rem; } .ubiflow-annonce-compact .ubiflow-prix { font-weight: 700; color: #007bff; font-size: 1.1rem; } @media (max-width: 576px) { .ubiflow-annonce-compact .ubiflow-annonce-photo { flex: 0 0 100%; max-width: 100%; } .ubiflow-annonce-compact .ubiflow-annonce-infos { flex: 0 0 100%; max-width: 100%; } } /* Contact */ .ubiflow-annonce-contact { background-color: #f9f9f9; padding: 15px; border-radius: 5px; margin-top: 15px; } .ubiflow-annonce-contact h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; } .ubiflow-contact-label { font-weight: 600; margin-right: 5px; } .ubiflow-results-section { color: #FFFFFF; margin-top: 30px; } .fancybox__container { z-index: 99999 !important; } /* Masquer le picto (::before) des blocs bien quand le contenu est masqué */ /* Fallback pour l'approche style="display:none" sur le h6 */ .etage-type:has(h6[style*="display:none"]), .piece-type:has(h6[style*="display:none"]), .chambre-type:has(h6[style*="display:none"]), .sdb-type:has(h6[style*="display:none"]), .etage-type:has(h6[style*="display: none"]), .piece-type:has(h6[style*="display: none"]), .chambre-type:has(h6[style*="display: none"]), .sdb-type:has(h6[style*="display: none"]) { display: none !important; }