/* ===================================================================== V2.053 — L'ARCHÉTYPE DES ANNONCES (A + D, validé par le fondateur) ===================================================================== Cartes immersives : la photo occupe toute la carte, les informations vivent dans un panneau de verre posé en bas. Catégories rondes en photo, disponibilité en pastilles, filtre en carré bleu marine. Une seule feuille pour Explorer (et « Voir plus » de l'accueil, qui ouvre Explorer filtré), Yafoye Match et le catalogue public du professionnel. Le gabarit de carte est partagé (carte-annonce.js) : seule la mise en forme change ici. Sélecteurs ancrés sur les identifiants des grilles : ils passent devant les nombreuses règles anciennes des cartes sans surenchère. */ :root{--yfx-encre:#071a2e;--yfx-fond:#eef3f7;--yfx-ligne:#dbe4ec;--yfx-doux:#4a5d70;--yfx-ciel:#8fd3ff} /* --------------------------------------------------------------------- 1. LA CARTE IMMERSIVE */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card{ position:relative!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important; aspect-ratio:4/5;max-height:560px;margin:0!important;padding:0!important;overflow:hidden!important;isolation:isolate; border:0!important;border-radius:30px!important;background:#0b2a40!important;color:#fff!important; box-shadow:var(--ombre-haute)!important;transform:none; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link{ position:absolute!important;inset:0!important;display:block!important;height:auto!important;padding:0!important;margin:0!important;color:#fff!important;text-decoration:none!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.media{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important; margin:0!important;border-radius:0!important;aspect-ratio:auto!important;background:#0b2a40!important;overflow:hidden!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.media::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(4,16,30,.30) 0%,rgba(4,16,30,0) 22%,rgba(4,16,30,0) 48%,rgba(4,16,30,.55) 100%); } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media :is(.yi-card-gallery,.yf-card-gallery,.gallery){height:100%!important;max-height:none!important;border-radius:0!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media :is(.yi-card-slide,.yf-card-slide){height:100%!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media :is(img,video){width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;border-radius:0!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>img{position:absolute;inset:0} /* L'état, en pastille blanche en haut à gauche. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge{ position:absolute!important;top:14px!important;left:14px!important;right:auto!important;bottom:auto!important;z-index:3!important; display:inline-flex!important;align-items:center;gap:7px;padding:7px 12px!important;border-radius:16px!important;border:0!important; background:rgba(255,255,255,.93)!important;color:#0f6b3e!important;font:800 13px/1.1 Manrope,Arial,sans-serif!important;box-shadow:var(--ombre)!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge::before{content:""!important;display:block!important;width:8px;height:8px;border-radius:4px;background:#1f9d5c;position:static!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge:is(.unavailable,.definitive){color:#5b3a12!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge:is(.unavailable,.definitive)::before{background:#d98a2b} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge.visit-progress{color:#0b4f7a!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge.visit-progress::before{background:#3fa9f5} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge.pass-yafoye{background:linear-gradient(135deg,#0b3a63,#0d7ea4)!important;color:#fff!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.badge.pass-yafoye::before{background:#8fd3ff} /* « Suivi Yafoye » et « Vérifié » restent sur la photo, sous l'état. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.yf-badge-suivi{position:absolute!important;top:52px!important;left:14px!important;z-index:3} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.yf-card-photo-verified{position:absolute!important;top:52px!important;left:14px!important;z-index:3} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media>.yf-badge-suivi~.yf-card-photo-verified{top:90px!important} /* « Vidéo » : une petite pastille de verre, en haut, sous l'état. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media .yf-see-video{ position:absolute!important;top:14px!important;right:66px!important;left:auto!important;bottom:auto!important;z-index:3!important; display:inline-flex!important;align-items:center;gap:6px;height:36px;padding:0 12px!important;border-radius:18px!important;border:0!important; background:rgba(7,26,46,.4)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff!important;font:800 12px Manrope,Arial,sans-serif!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media .yi-video-chip{display:none!important} /* Le cœur, en verre, en haut à droite. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yi-favorite-btn{ position:absolute!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:5!important; width:44px!important;height:44px!important;min-height:44px!important;border-radius:22px!important;border:0!important;padding:0!important; background:rgba(7,26,46,.35)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff!important;display:grid!important;place-items:center;box-shadow:none!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yi-favorite-btn :is(i,svg,.yf-lucide){color:#fff!important;width:20px;height:20px} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yi-favorite-btn.is-favorite{background:rgba(255,255,255,.95)!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yi-favorite-btn.is-favorite :is(i,svg,.yf-lucide){color:#e0245e!important;fill:#e0245e} /* Les points de la galerie, au-dessus du panneau ; les flèches au survol. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .yi-card-dots{ position:absolute!important;left:50%!important;right:auto!important;top:28px!important;bottom:auto!important;transform:translateX(-50%)!important;z-index:3!important; display:flex!important;gap:5px;padding:0!important;background:none!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .yi-card-dot{width:6px!important;height:6px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:3px!important;background:rgba(255,255,255,.65)!important;transition:width .2s} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .yi-card-dot.active{width:18px!important;background:#fff!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .yi-card-arrow{top:38%!important;z-index:3!important;opacity:0;transition:opacity .2s} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card:hover .yi-card-arrow{opacity:1} @media(hover:none){html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .yi-card-arrow{display:none!important}} /* Le panneau de verre. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.body{ position:absolute!important;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;z-index:4!important;width:auto!important;max-width:none!important;box-sizing:border-box!important; display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important;padding:15px 16px 14px!important;min-height:0!important;height:auto!important; border:0!important;border-radius:22px!important;background:rgba(7,26,46,.55)!important;color:#fff!important; -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:none!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body :is(.yf-card-price-line,.yf-prix-ligne){display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:10px!important;margin:0!important;flex-wrap:wrap} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .price{margin:0!important;color:#fff!important;font:800 21px/1.15 Sora,Manrope,Arial,sans-serif!important;letter-spacing:-.01em} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body :is(.yf-card-price-line,.yf-prix-ligne) small{color:rgba(255,255,255,.8)!important;font:600 12px Manrope,Arial,sans-serif!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body h2{ margin:0!important;color:#fff!important;font:700 16px/1.3 Manrope,Arial,sans-serif!important; display:-webkit-box!important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .place{margin:0!important;display:flex!important;align-items:center;gap:6px;color:rgba(255,255,255,.86)!important;font:600 13px/1.3 Manrope,Arial,sans-serif!important;min-width:0} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .place span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .place :is(i,svg,.yf-lucide){flex:none;width:14px;height:14px;color:rgba(255,255,255,.75)!important} /* L'ordre de lecture : prix, titre, lieu, pastilles, date. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body>:is(.yf-card-price-line,.yf-prix-ligne,.price,.yf-formules-carte){order:1!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body>h2{order:2!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body>.place{order:3!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body>:is(.yf-card-agent-visit,.yf-card-meta-row,.specs){order:4!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body>.yf-card-date{order:5!important;position:static!important} /* Les pastilles : type du professionnel, frais de visite, vérifié. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body :is(.yf-card-agent-visit,.yf-card-meta-row,.specs){ display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:3px 0 0!important;padding:0!important;border:0!important;justify-content:flex-start!important;max-height:62px;overflow:hidden; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-card-agent-visit>span:empty{display:none!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-card-agent-visit>span{display:contents!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body :is(.yf-type-pro,.yf-visite,.yf-badge-verifie,.spec,.yf-chip){ display:inline-flex!important;align-items:center;gap:5px;margin:0!important;padding:5px 10px!important;border:0!important;border-radius:12px!important; background:rgba(255,255,255,.16)!important;color:#fff!important;font:700 12px/1.2 Manrope,Arial,sans-serif!important;white-space:nowrap;box-shadow:none!important; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body :is(.yf-type-pro,.yf-visite,.yf-badge-verifie,.spec) :is(i,svg,.yf-lucide){width:13px!important;height:13px!important;color:inherit!important;font-size:12px!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-badge-verifie{background:rgba(52,201,122,.3)!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-visite-gratuite{background:rgba(52,201,122,.3)!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-card-date{margin:0!important;color:rgba(255,255,255,.7)!important;font:600 11.5px Manrope,Arial,sans-serif!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-card-date:empty{display:none!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-card-date :is(*){color:inherit!important;background:none!important;border:0!important;padding:0!important} /* Les formules (hôtels, résidences) : compactes, sur deux colonnes. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-formules-carte{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px!important;margin:0!important;padding:0!important;background:none!important;border:0!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-formule{display:flex!important;flex-direction:column;gap:1px;padding:0!important;border:0!important;background:none!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-formule-nom{color:rgba(255,255,255,.8)!important;font:600 11.5px Manrope,Arial,sans-serif!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-formule-nom small{display:none!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .yf-formule-prix{color:#fff!important;font:800 14px Manrope,Arial,sans-serif!important} /* Les grilles : une colonne sur téléphone, plusieurs sur ordinateur. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid){gap:22px!important} @media(min-width:760px){ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card{aspect-ratio:5/5.6;max-height:520px} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .body .price{font-size:20px!important} } /* --------------------------------------------------------------------- 2. LES CATÉGORIES RONDES (Explorer) */ html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds{ display:flex!important;gap:12px!important;height:auto!important;min-height:0!important;overflow-x:auto!important;overflow-y:hidden!important; padding:2px 4px 2px!important;background:transparent!important;border:0!important;scrollbar-width:none;align-items:flex-start!important; } html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds::-webkit-scrollbar{display:none} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button{ flex:0 0 auto!important;min-width:64px!important;width:auto!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--yfx-doux)!important; font:700 11.5px/1.15 Manrope,Arial,sans-serif!important;white-space:nowrap;cursor:pointer; } html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button::after,html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button::before{display:none!important} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds .yfx-rond{width:56px;height:56px;border-radius:28px;padding:3px;box-sizing:border-box;display:block;background:transparent} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds .yfx-rond img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid #fff;box-sizing:border-box} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button.active .yfx-rond{background:linear-gradient(135deg,#3fa9f5,#0b3a63)} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button.active{color:var(--yfx-encre)!important;font-weight:800!important} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button>span:not(.yfx-rond){display:inline!important;min-width:0!important;height:auto!important;padding:0!important;margin:0!important;border-radius:0!important;background:none!important;color:inherit!important;font:inherit!important} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button small{font:700 10.5px Manrope,Arial,sans-serif;color:#6a7b8c} html body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button.yfx-vide .yfx-rond img{filter:saturate(.5);opacity:.75} /* --------------------------------------------------------------------- 3. DISPONIBILITÉ EN PASTILLES, FILTRE EN CARRÉ BLEU MARINE */ html body :is(.yi-availability-filters,.yf-match-availability-filters) button{ display:inline-flex!important;align-items:center;gap:7px;height:38px!important;padding:0 15px!important;border-radius:19px!important; border:1px solid #d3dde6!important;background:#fff!important;color:var(--yfx-doux)!important;font:700 13px Manrope,Arial,sans-serif!important; } html body :is(.yi-availability-filters,.yf-match-availability-filters) button.active{background:var(--yfx-encre)!important;border-color:var(--yfx-encre)!important;color:#fff!important} html body :is(.yi-availability-filters,.yf-match-availability-filters) button.active::before{content:"";width:8px;height:8px;border-radius:4px;background:#34c97a} html body :is(.yi-availability-filters,.yf-match-availability-filters) button.active[data-availability-filter="unavailable"]::before{background:#f0a24a} /* Le filtre quitte le coin de l'écran : un carré bleu marine dans la barre, à droite des pastilles de disponibilité (archétype validé). */ html body #yiExplorerFilterOpen.yi-filter-launcher{ position:static!important;inset:auto!important;flex:none;width:42px!important;min-width:0!important;max-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;margin:0 0 0 4px!important; display:inline-grid!important;place-items:center;border-radius:15px!important;background:var(--yfx-encre)!important;color:#fff!important;border:0!important;box-shadow:none!important;transform:none!important; } html body #yiExplorerFilterOpen.yi-filter-launcher>span:last-child{display:none!important} html body #yiExplorerFilterOpen.yi-filter-launcher .yi-filter-launcher-icon{width:auto!important;height:auto!important;background:none!important;color:#fff!important;display:grid;place-items:center;box-shadow:none!important} html body #yiExplorerFilterOpen.yi-filter-launcher :is(i,svg,.yf-lucide){color:#fff!important;width:19px;height:19px} html body .yf-explorer-filter-row:has(#yiExplorerFilterOpen){display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important} /* La barre d'Explorer prend la hauteur de son contenu : elle est mesurée (explorer.js) et la page se décale d'autant. */ html body section.yf-explorer-controls{height:auto!important;min-height:0!important;padding-top:8px!important;padding-bottom:8px!important} /* Le texte des cartes : les règles anciennes forcent la couleur de remplissage (-webkit-text-fill-color) ; on la rend à la couleur du texte. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card :is(.body,.body *,.badge,.yf-see-video,.yf-see-video *){-webkit-text-fill-color:currentColor!important} /* Hors des grilles immersives, le bouton n'a pas lieu d'être. */ .card>.yfx-voir-photo{display:none} /* --------------------------------------------------------------------- 4. V2.054 — « VOIR LA PHOTO » : le panneau se range pour admirer la photo */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yfx-voir-photo{ position:absolute;top:64px;right:12px;z-index:5;display:grid;width:44px;height:44px;padding:0;border-radius:22px;border:1px solid rgba(255,255,255,.35); background:rgba(7,26,46,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;place-items:center;cursor:pointer; transition:background .25s ease,transform .25s ease; } html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yfx-voir-photo:active{transform:scale(.92)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yfx-voir-photo svg{grid-area:1/1;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yfx-voir-photo .yfx-ico-infos{opacity:0;transform:rotate(-90deg) scale(.6)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule>.yfx-voir-photo{background:rgba(255,255,255,.92);color:#071a2e} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule>.yfx-voir-photo .yfx-ico-photo{opacity:0;transform:rotate(90deg) scale(.6)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule>.yfx-voir-photo .yfx-ico-infos{opacity:1;transform:none} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.body{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease,filter .45s ease} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule>.card-link>.body{transform:translateY(calc(100% + 30px)) scale(.96);opacity:0;filter:blur(8px);pointer-events:none} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.media::after{transition:opacity .5s ease} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule>.card-link>.media::after{opacity:.35} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card .media :is(img,video){transition:transform .8s cubic-bezier(.2,.8,.2,1)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule .media :is(img,video){transform:scale(1.03)} @media(prefers-reduced-motion:reduce){html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card :is(.body,.media img,.media video,.yfx-voir-photo svg){transition:none!important}} /* « Carte » : un carré blanc, à côté du filtre bleu marine. */ html body #yfxCarteOuvrir.yfx-carte{flex:none;width:42px;height:42px;padding:0;margin:0;border-radius:15px;border:1px solid #d3dde6;background:#fff;color:#071a2e;display:inline-grid;place-items:center;cursor:pointer} html body #yfxCarteOuvrir.yfx-carte[aria-pressed="true"]{background:#071a2e;border-color:#071a2e;color:#fff} html body .yf-explorer-filter-row:has(#yiExplorerFilterOpen){gap:6px!important} html body :is(.yi-availability-filters) button{padding:0 12px!important} html body :is(.yi-availability-filters){gap:6px!important;margin-right:0!important} html.yf-fav-panel #yfxCarteOuvrir{display:none!important} /* ===================================================================== V2.055 — MODE NUIT (Explorer, résultats, catalogue) Les cartes immersives sont déjà sombres ; seuls les fonds et les pastilles passent en bleu nuit. ===================================================================== */ html[data-theme="nuit"] body:has(:is(.yf-explorer-controls,#results,.yf-cat-grille)){background:#06131f!important;color:#eef4f9} html[data-theme="nuit"] body :is(.yf-explorer-controls,main.layout,.map-pane,.list-pane,#yiExplorerFilterSheet){background:#06131f!important;color:#eef4f9} html[data-theme="nuit"] body #yiExplorerFilterSheet{background:#0a1a2b!important} html[data-theme="nuit"] body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button{color:rgba(238,244,249,.7)!important} html[data-theme="nuit"] body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button.active{color:#fff!important} html[data-theme="nuit"] body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds>button small{color:rgba(238,244,249,.5)} html[data-theme="nuit"] body:not([data-reels]) .yf-explorer-controls #yiExplorerCategoryTabs.yfx-ronds .yfx-rond img{border-color:#06131f} html[data-theme="nuit"] body :is(.yi-availability-filters,.yf-match-availability-filters) button{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:rgba(238,244,249,.8)!important} html[data-theme="nuit"] body :is(.yi-availability-filters,.yf-match-availability-filters) button.active{background:#eef4f9!important;border-color:#eef4f9!important;color:#071a2e!important} html[data-theme="nuit"] body #yiExplorerFilterOpen.yi-filter-launcher,html[data-theme="nuit"] body .yfx-carte{background:#eef4f9!important;color:#071a2e!important;border-color:#eef4f9!important} html[data-theme="nuit"] body #yiExplorerFilterOpen.yi-filter-launcher :is(i,svg),html[data-theme="nuit"] body .yfx-carte :is(i,svg){color:#071a2e!important} html[data-theme="nuit"] body #map.yi-map-loading{background:#0a1a2b!important;color:rgba(238,244,249,.7)!important} html[data-theme="nuit"] body #map:is(.yi-map-loading,.leaflet-container){background:#0a1a2b!important} /* ===================================================================== V2.059 — LA CARTE NE PRÉCÈDE PLUS LA LISTE SUR TÉLÉPHONE Le bouton « Carte » l'ouvre en grand ; la petite carte au-dessus de la première annonce faisait doublon. Le bouton vit aussi sur les pages « Maisons en vente à Cocody » (atterrissage par ville). */ @media(max-width:950px){ html body:not(.yi-map-expanded) .map-pane{height:0!important;min-height:0!important;opacity:0!important;border:0!important;overflow:hidden!important;pointer-events:none} html body:not(.yi-map-expanded) .yi-map-toggle{display:none!important} /* V2.060 — la place que gardait la carte est rendue : la première annonce monte juste sous les filtres, sans vide ni poignée. */ html body:not(.yi-map-expanded) main.layout{padding-top:0!important} html body:not(.yi-map-expanded) main.layout>.list-pane{margin-top:0!important;padding-top:12px!important;border-radius:0!important;box-shadow:none!important;background:transparent!important} html body:not(.yi-map-expanded) main.layout>.list-pane::before{display:none!important} } html body.yf-city-landing .yf-explorer-filter-row>#yfxCarteOuvrir{display:inline-grid!important} /* ===================================================================== V2.059 — MASQUER LA DESCRIPTION, ET GLISSER POUR LES PHOTOS La flèche en haut du panneau le range (glissement vers le bas, flou, fondu) ; la pastille « Infos » le fait revenir. L'ancien bouton photo sous le cœur disparaît. La carte ne défile plus de côté nativement : archetype-cartes.js suit le doigt et pose la photo. */ html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link{touch-action:pan-y} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.body .yfx-replier{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;transition:background .2s ease,transform .2s ease} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.body .yfx-replier:hover{background:rgba(255,255,255,.26)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.card-link>.body .yfx-replier:active{transform:scale(.9)} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yfx-voir-photo{top:auto!important;bottom:14px!important;right:14px!important;width:auto!important;height:38px!important;padding:0 14px 0 10px!important;border-radius:19px!important;display:inline-flex!important;align-items:center;gap:6px;background:rgba(255,255,255,.92)!important;color:#071a2e!important;border:0!important;font:800 13px Manrope,Arial,sans-serif;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .35s ease .15s,transform .45s cubic-bezier(.2,.8,.2,1) .1s} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card>.yfx-voir-photo svg{grid-area:auto!important;opacity:1!important;transform:none!important} html body :is(#grid,#results,#matchInboxSubGrid,#matchInboxSubGrid>.yf-proposition-wrap>.yf-proposition-carte,#favoritesSubGrid,.yf-cat-grille)>article.card.yfx-photo-seule>.yfx-voir-photo{opacity:1;transform:none;pointer-events:auto} html body .card:not(:is(#grid,#results,#matchInboxSubGrid,#favoritesSubGrid,.yf-cat-grille) *) .yfx-replier{display:none} /* V2.060 — le bouton de masquage a toujours sa place : la ligne du prix (et de la caution) s'arrête avant lui, et sa zone de toucher fait 44 px. */ html body :is(#grid,#results,#matchInboxSubGrid,#favoritesSubGrid,.yf-cat-grille,.yfa-piste) article.card>.card-link>.body>.yf-card-price-line{padding-right:44px!important} html body article.card>.card-link>.body .yfx-replier{width:34px!important;height:34px!important} html body article.card>.card-link>.body .yfx-replier::after{content:"";position:absolute;inset:-6px} /* V2.060 — Favoris (Explorer dans le panneau) : le fond suit le thème, la carte « aucune annonce » aussi. */ html.yf-fav-panel body{background:#eef3f7!important} html.yf-fav-panel[data-theme="nuit"] body{background:#06131f!important} html[data-theme="nuit"] body :is(#grid,.grid)>.empty,html[data-theme="nuit"] body .yi-empty-state{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.1)!important;color:rgba(238,244,249,.75)!important} /* Pages ville : la rangée des sous-catégories sans bandeau blanc la nuit. */ html body.yf-city-landing #yiExplorerCategoryTabs{background:transparent!important;box-shadow:none!important} html[data-theme="nuit"] body.yf-city-landing #yiExplorerCategoryTabs button:not(.active){background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:rgba(238,244,249,.8)!important} html[data-theme="nuit"] body.yf-city-landing #yiExplorerCategoryTabs button.active{background:#eef4f9!important;border-color:#eef4f9!important;color:#071a2e!important}