/* ========================================================================== M-SEARCH.2 — RÉSULTATS DE RECHERCHE Portage de `_mockups/M-SEARCH.2_recherche.html`. Fichier NEUF et chargé APRÈS `recherche-v2.css` : la refonte ne réécrit pas la feuille legacy (1 000+ lignes, collisions Bootstrap 3 connues — cf. mémoire `reference_konfian_bo_css_bootstrap_collision`). Elle pose une anatomie à part, sur des classes `kfs-` qui n'existaient nulle part avant. Conséquence voulue : revenir en arrière = retirer cette ligne de , sans toucher à quoi que ce soit d'autre. Mobile-first. Le point de bascule est 992 px, comme le reste du site. ========================================================================== */ .kfs-listing{ --kfs-navy:#20285e; --kfs-navy-50:#f0f4ff; --kfs-coral:#f15e61; --kfs-coral-600:#e04a4d; --kfs-coral-50:#fff1f1; /* M-SEARCH.4 — `--kfs-ink-400` passe de #79829a à #4a5268. RECALCULÉ (WCAG 2.1, luminance relative) : #79829a rend 3,84:1 sur blanc, SOUS le seuil AA de 4,5:1 pour du texte normal ; #4a5268 rend 7,79:1. Ce jeton porte tout le texte secondaire — méta de ligne, compteurs de groupe, notes : il n'existe plus qu'une seule encre secondaire, et elle passe. */ --kfs-ink:#151a2e; --kfs-ink-600:#4a5268; --kfs-ink-400:#4a5268; --kfs-ink-200:#dde2ed; --kfs-ink-100:#eef1f7; --kfs-ok:#0f7b5a; --kfs-ok-50:#e7f6f0; --kfs-amber:#8a6100; --kfs-amber-50:#fff6e0; --kfs-r:14px; --kfs-sh:0 1px 2px rgba(21,26,46,.05),0 10px 28px -16px rgba(21,26,46,.22); color:var(--kfs-ink); } /* ---------- en-têtes de couche ---------- */ .kfs-sect{margin:0 0 26px} .kfs-sect-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px} .kfs-sect-h h2{font-size:16px;font-weight:800;color:var(--kfs-navy);margin:0;line-height:1.25} .kfs-sect-c{font-size:12.5px;color:var(--kfs-ink-400);font-weight:600} .kfs-sect-s{font-size:13px;color:var(--kfs-ink-600);margin:0 0 12px} /* ---------- pastilles ---------- */ .kfs-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800; padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.5} .kfs-p-ok{background:var(--kfs-ok-50);color:var(--kfs-ok)} .kfs-p-new{background:var(--kfs-navy-50);color:var(--kfs-navy)} .kfs-p-cash{background:var(--kfs-coral-50);color:var(--kfs-coral-600)} .kfs-p-an{background:var(--kfs-ink-100);color:var(--kfs-ink-600)} .kfs-p-am{background:var(--kfs-amber-50);color:var(--kfs-amber)} /* ---------- CARTE PRO ---------- */ .kfs-pc{background:#fff;border:1px solid var(--kfs-ink-200);border-radius:var(--kfs-r); box-shadow:var(--kfs-sh);margin-bottom:12px;overflow:hidden} .kfs-pc.is-closed{opacity:.72} .kfs-pc-head{display:flex;gap:12px;padding:13px 14px;align-items:flex-start} .kfs-pc-ph{width:58px;height:58px;border-radius:12px;flex:none;overflow:hidden; background:linear-gradient(140deg,#dfe6ff,#f7ecff); display:flex;align-items:center;justify-content:center; font-weight:800;color:var(--kfs-navy);font-size:16px;text-decoration:none} .kfs-pc-ph img{width:100%;height:100%;object-fit:cover;display:block} .kfs-pc-id{flex:1;min-width:0} .kfs-pc-nm{font-size:16px;font-weight:800;line-height:1.2;margin:0} .kfs-pc-nm a{color:var(--kfs-ink);text-decoration:none} .kfs-pc-nm a:hover{color:var(--kfs-navy);text-decoration:underline} .kfs-pc-me{font-size:12.5px;color:var(--kfs-ink-400);margin-top:3px; display:flex;gap:6px;flex-wrap:wrap;align-items:center} .kfs-rate{color:var(--kfs-ink);font-weight:700} .kfs-rate .fa{color:#f0b429} .kfs-pc-loc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .kfs-pc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} /* ---------- LIGNES DE PRESTATION — l'unité de la page ---------- */ .kfs-svc-r{display:flex;align-items:center;gap:12px;padding:11px 14px; border-top:1px solid var(--kfs-ink-100);flex-wrap:wrap} .kfs-svc-r:hover{background:var(--kfs-navy-50)} .kfs-svc-b{flex:1;min-width:0;display:block} .kfs-svc-t{display:block;font-size:14.5px;font-weight:700;line-height:1.3} .kfs-svc-d{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--kfs-ink-400);margin-top:2px} .kfs-svc-p{flex:none;text-align:right} .kfs-price{font-size:15px;font-weight:800;white-space:nowrap;color:var(--kfs-ink)} .kfs-price-old{font-size:11px;font-weight:600;color:var(--kfs-ink-400); text-decoration:line-through;margin-left:6px} .kfs-svc-cta{flex:none;background:var(--kfs-coral);color:#fff;border:0;border-radius:9px; padding:0 14px;font-size:13px;font-weight:700;min-height:40px;white-space:nowrap; display:inline-flex;align-items:center;text-decoration:none} .kfs-svc-cta:hover,.kfs-svc-cta:focus{background:var(--kfs-coral-600);color:#fff;text-decoration:none} .kfs-svc-cta.kfs-cta-alt{background:#fff;color:var(--kfs-navy);border:1.5px solid var(--kfs-ink-200)} .kfs-svc-cta.kfs-cta-alt:hover{background:var(--kfs-navy-50);color:var(--kfs-navy)} .kfs-svc-more{display:block;padding:9px 14px;font-size:13px;font-weight:700; color:var(--kfs-navy);border-top:1px solid var(--kfs-ink-100);text-decoration:none} .kfs-svc-more:hover{background:var(--kfs-navy-50);color:var(--kfs-navy);text-decoration:none} /* Sur mobile le bouton passe en pleine largeur : à 360 px, un bouton de 40 px de haut coincé à droite d'un prix devient intouchable. */ @media (max-width:600px){ .kfs-svc-p{text-align:left} .kfs-svc-cta{width:100%;margin-top:8px;justify-content:center} } /* ---------- PIED DE CARTE ---------- */ .kfs-pc-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center; padding:10px 14px;background:var(--kfs-navy-50);border-top:1px solid var(--kfs-ink-100); font-size:12.5px;color:var(--kfs-ink-600);font-weight:600} .kfs-pc-foot .fa{margin-right:5px;opacity:.75} .kfs-foot-ok{color:var(--kfs-ok);font-weight:800} /* ---------- LIGNE ANNUAIRE — 97 % des résultats ---------- */ .kfs-an{display:flex;align-items:center;gap:11px;padding:10px 13px;background:#fff; border:1px solid var(--kfs-ink-200);border-radius:11px;margin-bottom:7px; text-decoration:none;color:var(--kfs-ink)} .kfs-an:hover{border-color:var(--kfs-navy);background:var(--kfs-navy-50); color:var(--kfs-ink);text-decoration:none} .kfs-an-av{width:40px;height:40px;border-radius:10px;flex:none;overflow:hidden; background:var(--kfs-ink-100);display:flex;align-items:center;justify-content:center; font-weight:800;font-size:13px;color:var(--kfs-ink-600)} .kfs-an-av img{width:100%;height:100%;object-fit:cover;display:block} .kfs-an-b{flex:1;min-width:0} .kfs-an-n{display:block;font-size:14px;font-weight:700;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kfs-an-l{display:block;font-size:12px;color:var(--kfs-ink-400);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kfs-an-c{flex:none;color:var(--kfs-ink-400);font-size:20px;line-height:1} /* ---------- desktop ---------- */ @media (min-width:992px){ .kfs-sect-h h2{font-size:18px} .kfs-pc-ph{width:64px;height:64px} .kfs-pc-nm{font-size:17px} } /* Le conteneur legacy imposait des marges de grille Bootstrap aux cartes ; la liste est désormais autonome. */ .kfs-listing{padding:0} .kfs-listing::before,.kfs-listing::after{content:none} /* ========================================================================= M-SEARCH.2 — RANGÉE DE CHAMPS DE LA BARRE D'INTENTION Reprise du bloc `.fields` de `_mockups/M-SEARCH.2_recherche.html` : cadre unique, champs séparés par un filet, étiquette capitale au-dessus de la valeur, bouton corail au bout. Les champs se montrent/se masquent selon l'intention (cf. le JS `SETS`), d'où le `flex-wrap`. ========================================================================= */ .kfs-fields{ display:flex;align-items:stretch;flex-wrap:wrap;gap:0; border:1.5px solid #dde2ed;border-radius:14px;padding:4px;margin-top:9px;background:#fff; } .kfs-fields .kfs-f{flex:1 1 130px;min-width:120px;padding:7px 12px;border-radius:10px;position:relative} .kfs-fields .kfs-f + .kfs-f{border-left:1px solid #eef1f7} .kfs-fields .kfs-f label{ display:block;font-size:10px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:#79829a;margin:0 0 1px; } .kfs-fields .kfs-f input[type="text"], .kfs-fields .kfs-f input[type="number"], .kfs-fields .kfs-f select{ width:100%;border:0;outline:0;background:none;padding:0;height:auto;box-shadow:none; font-size:14.5px;font-weight:600;color:#151a2e;line-height:1.3; } .kfs-fields .kfs-f input::placeholder{color:#79829a;font-weight:500} .kfs-fields .kfs-f select{font-weight:600;color:#151a2e;-webkit-appearance:none;appearance:none} .kfs-fields .kfs-f .field_talent, .kfs-fields .kfs-f .location_field{position:static;padding:0;margin:0;border:0;background:none} /* les listes d'autocomplétion restent ancrées sous leur champ */ .kfs-fields .kfs-f .drop_list{position:absolute;left:0;top:100%;z-index:70;min-width:240px} .kfs-go{ flex:none;background:#f15e61;color:#fff;border:0;border-radius:10px; padding:11px 20px;min-height:46px;font-size:14.5px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;gap:7px; } .kfs-go:hover,.kfs-go:focus{background:#e04a4d;color:#fff} @media (max-width:767px){ .kfs-fields{flex-direction:column;gap:2px} .kfs-fields .kfs-f + .kfs-f{border-left:0;border-top:1px solid #eef1f7} .kfs-go{width:100%;margin-top:4px} } /* M-SEARCH.2 — encadré « Le cashback sur cette page » (aside de la maquette) */ .kfs-aside-box{background:#fff;border:1px solid #dde2ed;border-radius:14px;padding:15px;margin-bottom:12px} .kfs-aside-box h3{font-size:14px;font-weight:800;color:#20285e;margin:0 0 9px} .kfs-cash-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;color:#4a5268} .kfs-cash-row b{color:#151a2e} .kfs-cash-tot{border-top:1px dashed #dde2ed;margin-top:4px;padding-top:7px;font-weight:800;color:#20285e} .kfs-cash-note{margin:10px 0 0;font-size:12.5px;color:#4a5268;line-height:1.5} /* ============================================================================= M-SEARCH.2 — TRANSCRIPTION FIDÈLE DE `_mockups/M-SEARCH.2_recherche.html` ============================================================================= Même méthode que sur l'accueil : relevé des styles CALCULÉS de la maquette et de la page servie côte à côte (Playwright), puis réimplantation des valeurs de la maquette à l'unité près. L'écart mesuré avant ce bloc : 73 % de conformité, la page héritant d'une base à 14 px là où la maquette est à 15 px/1.5 — toutes les tailles et tous les interlignages dérivaient. Tout est préfixé `.kf-search-v2`, le conteneur de la page de résultats, pour gagner les égalités de spécificité face à `style.css`. Bloc retirable d'un seul tenant. ⚠️ Même déviation assumée que sur l'accueil : on garde la police de marque (Geist) là où la maquette n'a qu'une pile système. Tout le reste — taille, graisse, interlignage, couleur, espacement, rayon — suit la maquette. ============================================================================= */ .kf-search-v2{ --kfm-navy:#20285e; --kfm-navy-50:#f0f4ff; --kfm-coral:#f15e61; --kfm-coral-50:#fff1f1; --kfm-ink:#151a2e; --kfm-ink-600:#4a5268; --kfm-ink-400:#79829a; --kfm-ink-200:#dde2ed; --kfm-ink-100:#eef1f7; --kfm-ok:#0f7b5a; --kfm-ok-50:#e7f6f0; --kfm-amber:#8a6100; --kfm-amber-50:#fff6e0; font-size:15px;line-height:1.5;color:#151a2e; } /* --- barre d'intention ----------------------------------------------------- */ .kf-search-v2 .kfs-intents{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;margin:0} .kf-search-v2 .kfs-intent{ flex:none;display:inline-flex;align-items:center;gap:7px;border:0;background:none; padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:700;line-height:1.5; color:#79829a;white-space:nowrap;min-height:0; } .kf-search-v2 .kfs-intent svg{width:15px;height:15px} .kf-search-v2 .kfs-intent.is-on{background:#20285e;color:#fff} /* --- rangée de champs ------------------------------------------------------ */ .kf-search-v2 .kfs-fields{ display:flex;gap:0;align-items:stretch;flex-wrap:wrap; border:1.5px solid #dde2ed;border-radius:14px;padding:4px;margin-top:9px;background:#fff; } .kf-search-v2 .kfs-fields .kfs-f{flex:1 1 0;min-width:120px;padding:7px 12px;border-radius:10px;position:relative} .kf-search-v2 .kfs-fields .kfs-f + .kfs-f{border-left:1px solid #eef1f7} .kf-search-v2 .kfs-fields .kfs-f label{ display:block;font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1.5; text-transform:uppercase;color:#79829a;margin:0;white-space:nowrap; } .kf-search-v2 .kfs-fields .kfs-f input[type="text"], .kf-search-v2 .kfs-fields .kfs-f input[type="number"], .kf-search-v2 .kfs-fields .kfs-f select{ width:100%;border:0;border-radius:0;outline:0;background:none;box-shadow:none;padding:0;height:auto; font:inherit;font-size:14.5px;font-weight:600;line-height:1.5;color:#151a2e;margin-top:1px; text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; -webkit-appearance:none;appearance:none; } .kf-search-v2 .kfs-fields .kfs-f input::placeholder{color:#79829a;font-weight:500;text-transform:none} .kf-search-v2 .kfs-fields .kfs-f select.kf-ph{color:#79829a;font-weight:500} .kf-search-v2 .kfs-go{ flex:none;background:#f15e61;color:#fff;border:0;border-radius:10px;padding:11px 20px; font-size:14.5px;font-weight:700;line-height:1.5;letter-spacing:normal; display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px; } .kf-search-v2 .kfs-go:hover,.kf-search-v2 .kfs-go:focus{background:#e04a4d;color:#fff} /* --- en-tête -------------------------------------------------------------- */ .kf-search-v2 .kf-h1{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.015em;color:#20285e;margin:0} .kf-search-v2 .kf-h1-sub{color:#4a5268;font-size:14px;line-height:1.5;margin-top:5px} .kf-search-v2 .kf-h1-sub strong{color:#151a2e} /* --- titres de couche ------------------------------------------------------ */ .kf-search-v2 .kfs-sect{margin-top:20px} .kf-search-v2 .kfs-sect-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px} .kf-search-v2 .kfs-sect-h h2{font-size:16px;font-weight:800;line-height:1.25;color:#20285e;margin:0} .kf-search-v2 .kfs-sect-c{font-size:12.5px;font-weight:600;line-height:1.5;color:#79829a} .kf-search-v2 .kfs-sect-s{font-size:13px;font-weight:400;line-height:1.5;color:#4a5268;margin:0 0 12px} /* --- carte prestation ------------------------------------------------------ */ .kf-search-v2 .kfs-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;line-height:1.5;white-space:nowrap} .kf-search-v2 .kfs-p-ok{background:#e7f6f0;color:#0f7b5a} .kf-search-v2 .kfs-p-new{background:#f0f4ff;color:#20285e} .kf-search-v2 .kfs-p-cash{background:#fff1f1;color:#e04a4d} .kf-search-v2 .kfs-p-an{background:#eef1f7;color:#4a5268} .kf-search-v2 .kfs-p-am{background:#fff6e0;color:#8a6100} .kf-search-v2 .kfs-pc{background:#fff;border:1px solid #dde2ed;border-radius:14px; box-shadow:0 1px 2px rgba(21,26,46,.05),0 10px 28px -16px rgba(21,26,46,.22); margin-bottom:12px;overflow:hidden;font-size:15px;line-height:1.5} .kf-search-v2 .kfs-pc-head{display:flex;gap:12px;padding:13px 14px;align-items:flex-start} .kf-search-v2 .kfs-pc-ph{width:58px;height:58px;border-radius:12px;flex:none;font-size:16px;font-weight:800;color:#20285e} .kf-search-v2 .kfs-pc-id{flex:1;min-width:0} .kf-search-v2 .kfs-pc-nm{font-size:16px;font-weight:800;line-height:1.2;color:#151a2e} .kf-search-v2 .kfs-pc-me{font-size:12.5px;line-height:1.5;color:#79829a;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .kf-search-v2 .kfs-pc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} .kf-search-v2 .kfs-svc-r{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid #eef1f7} .kf-search-v2 .kfs-svc-b{flex:1;min-width:0} .kf-search-v2 .kfs-svc-t{font-size:14.5px;font-weight:700;line-height:1.5;color:#151a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kf-search-v2 .kfs-svc-d{font-size:12px;font-weight:400;line-height:1.5;color:#79829a;margin-top:2px;display:flex;gap:8px;flex-wrap:wrap} .kf-search-v2 .kfs-svc-p{flex:none;text-align:right} .kf-search-v2 .kfs-price{font-size:15px;font-weight:800;line-height:1.5;white-space:nowrap;color:#151a2e} .kf-search-v2 .kfs-price-old{font-size:11px;font-weight:600;color:#79829a} .kf-search-v2 .kfs-svc-cta{ flex:none;background:#f15e61;color:#fff;border:0;border-radius:9px;padding:9px 14px; font-size:13px;font-weight:700;line-height:1.5;min-height:40px;white-space:nowrap; display:inline-flex;align-items:center;justify-content:center;text-decoration:none; } .kf-search-v2 .kfs-svc-cta.kfs-cta-alt{background:#fff;color:#20285e;border:1.5px solid #dde2ed} .kf-search-v2 .kfs-svc-more{padding:9px 14px;font-size:13px;font-weight:700;line-height:1.5;color:#20285e;border-top:1px solid #eef1f7;display:block} .kf-search-v2 .kfs-pc-foot{ border-top:1px solid #eef1f7;padding:10px 14px;display:flex;gap:14px;flex-wrap:wrap; font-size:12.5px;font-weight:400;line-height:1.5;color:#4a5268;background:transparent; } .kf-search-v2 .kfs-pc-foot span{display:inline-flex;align-items:center;gap:6px} .kf-search-v2 .kfs-foot-ok{color:#0f7b5a;font-weight:700} /* --- ligne annuaire compacte ---------------------------------------------- */ .kf-search-v2 .kfs-an{background:#fff;border:1px solid #dde2ed;border-radius:11px;padding:11px 13px; margin-bottom:8px;display:flex;gap:11px;align-items:center} .kf-search-v2 .kfs-an-av{width:42px;height:42px;border-radius:10px;flex:none;background:#eef1f7; display:grid;place-items:center;font-weight:800;color:#4a5268;font-size:13px} .kf-search-v2 .kfs-an-b{flex:1;min-width:0} .kf-search-v2 .kfs-an-n{font-size:14px;font-weight:700;line-height:1.5;color:#151a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kf-search-v2 .kfs-an-l{font-size:12.5px;font-weight:400;line-height:1.5;color:#79829a;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kf-search-v2 .kfs-an-c{flex:none;color:#79829a;font-size:18px} /* --- encadrés de la colonne de droite ------------------------------------- */ .kf-search-v2 .kfs-aside-box{background:#fff;border:1px solid #dde2ed;border-radius:14px;padding:15px;font-size:15px;line-height:1.5;color:#151a2e} .kf-search-v2 .kfs-aside-box h3{font-size:14px;font-weight:800;line-height:1.25;color:#20285e;margin:0 0 9px} .kf-search-v2 .kfs-cash-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:1.5;padding:4px 0;color:#4a5268} .kf-search-v2 .kfs-cash-tot{border-top:1px dashed #dde2ed;margin-top:4px;padding-top:7px;font-weight:800;color:#20285e} .kf-search-v2 .kfs-cash-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#4a5268} /* --- pastilles de maillage (`.links a` de la maquette) -------------------- */ .kf-search-v2 .kf-maillage-pills a{ background:#f0f4ff;color:#20285e;border-radius:999px;padding:6px 12px; font-size:12.5px;font-weight:600;line-height:1.5; } @media (min-width:992px){ .kf-search-v2 .kf-h1{font-size:26px} } /* Une règle du socle (`.dev-form` dans `style.css`) imposait `padding:0 1px` à la rangée de champs. Spécificité relevée pour rendre à la maquette ses 4 px. */ .kf-search-v2 form.dev-form .kfs-fields{padding:4px} /* --- rangée de filtres : la forme `.filters` / `.fil` de la maquette -------- ⚠️ La maquette y montre six pastilles (Réservation immédiate, Cashback ≥ 3 %, Chez vous, Moins de 50 €, Moins d'1 h, Paiement en ligne). Quatre d'entre elles s'adossent à des colonnes que SEUL le moteur orienté `service` sait lire ; les fabriquer maintenant produirait des filtres qui ne filtrent pas. On donne donc ici la FORME exacte de la maquette aux commandes qui existent réellement — le bouton « Filtres » et le tri — sans inventer les autres. */ .kf-search-v2 .kf-actions-bar{display:flex;gap:7px;margin:14px 0 4px;overflow-x:auto;padding-bottom:3px;align-items:center} .kf-search-v2 .kf-actions-bar::-webkit-scrollbar{display:none} .kf-search-v2 .kf-btn-filters{ flex:none;background:#fff;border:1.5px solid #dde2ed;border-radius:999px; padding:7px 13px;font-size:13px;font-weight:600;line-height:1.5;color:#4a5268; min-height:38px;display:inline-flex;align-items:center;gap:6px;text-transform:none; } .kf-search-v2 .kf-btn-filters:hover{border-color:#20285e} .kf-search-v2 .kf-btn-filters .kf-count{ background:#f15e61;color:#fff;border-radius:999px;font-size:10.5px;padding:1px 6px;font-weight:800; } .kf-search-v2 .kf-btn-filters svg{width:14px;height:14px} /* Même cause que le padding : une règle `.dev-form input` du socle reprenait la main sur la couleur du texte saisi. */ .kf-search-v2 form.dev-form .kfs-fields .kfs-f input, .kf-search-v2 form.dev-form .kfs-fields .kfs-f select{color:#151a2e} /* ========================================================================== M-SEARCH.4 / LOT 2 — GROUPES PAR LIEU -------------------------------------------------------------------------- Direction 1c : la liste de l'annuaire est découpée par commune ou arrondissement, le lieu demandé en tête. ⚠️ L'ÉCHELLE EST CELLE DE CETTE FEUILLE, pas celle du §E de la conception (h2 de groupe à 22 px). Le groupe est ici un SOUS-niveau de la section « Autres … référencés » dont le h2 fait 16 px : un titre de groupe plus gros que son parent inverserait la hiérarchie visuelle. L'échelle du §E arrive au lot 4, avec la suppression de l'en-tête de section. ========================================================================== */ .kf-search-v2 .kfs-grp{margin:0} .kf-search-v2 .kfs-grp + .kfs-grp{margin-top:18px} .kf-search-v2 .kfs-grp-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; margin:0 0 6px;padding-top:2px} .kf-search-v2 .kfs-grp-t{font-size:15px;font-weight:800;color:var(--kfs-navy); margin:0;line-height:1.25;letter-spacing:-.01em} .kf-search-v2 .kfs-grp-c{font-size:12.5px;font-weight:600;color:var(--kfs-ink-400)} .kf-search-v2 .kfs-grp-suite{font-size:12.5px;color:var(--kfs-ink-400);margin:6px 0 0} .kf-search-v2 .kfs-grp-nav{font-size:13px;line-height:1.5;color:var(--kfs-ink-600); background:var(--kfs-ink-100);border-radius:10px;padding:10px 14px;margin:16px 0 0} .kf-search-v2 .kfs-grp-nav strong{font-weight:600;color:var(--kfs-navy)} @media (min-width:992px){ .kf-search-v2 .kfs-grp-t{font-size:17px} .kf-search-v2 .kfs-grp + .kfs-grp{margin-top:22px} } /* ---------- M-SEARCH.4 / LOT 3 — provenance et entrée pro ---------- */ /* « Inscrit sur Konfian » : une mention de méta, au même rang que la ville. Jamais une pastille — ce n'est ni un statut vendeur ni une distinction. */ .kf-search-v2 .kfs-pc-orig{color:var(--kfs-ink-400)} /* Le lien de revendication s'adresse au PRO, pas au client : discret, sous la ligne, et jamais en concurrence visuelle avec « Voir la fiche ». */ .kf-search-v2 .kfs-an-claim{display:inline-block;font-size:12px;color:var(--kfs-ink-400); text-decoration:underline;margin:-4px 0 10px 54px} .kf-search-v2 .kfs-an-claim:hover{color:var(--kfs-navy)} @media (min-width:992px){ .kf-search-v2 .kfs-an-claim{margin-left:56px} } /* ---------- M-SEARCH.4 / LOT 4 — ordre dit, colonne latérale ---------- */ /* L'ordre n'est plus un menu : c'est une phrase. Poids de texte, pas de contrôle. */ .kf-search-v2 .kf-sort-said{font-size:13px;color:var(--kfs-ink-400);margin-left:auto} .kf-search-v2 .kfs-aside-box + .kfs-aside-box{margin-top:12px} .kf-search-v2 .kfs-aside-cta{display:inline-flex;align-items:center;justify-content:center; min-height:40px;padding:0 14px;margin-top:10px;border:1px solid var(--kfs-navy); border-radius:10px;color:var(--kfs-navy);font-weight:600;font-size:13px;text-decoration:none} .kf-search-v2 .kfs-aside-cta:hover{background:var(--kfs-navy);color:#fff} /* ========================================================================== M-SEARCH.4 / LOT 7 — L'ÉCHELLE DU §E ENTRE EN VIGUEUR -------------------------------------------------------------------------- Elle n'a pas pu venir plus tôt : tant que l'en-tête de section « Autres … référencés » existait à 16 px, un titre de groupe à 22 px inversait la hiérarchie visuelle. Ce sont deux faces du même geste, elles bougent ensemble (cf. le commentaire du retrait dans `recherche.php`). Valeurs du §E de la conception, vérifiées contre la maquette : h1 26/32 mobile · 34/40 desktop · -.02em paragraphe d'ouverture 16/24 · 17/26 · max-width 680 h2 de groupe 19/24 · 22/28 · -.01em ========================================================================== */ .kf-search-v2 .kf-h1{font-size:26px;line-height:32px;letter-spacing:-.02em} .kf-search-v2 .kf-h1-sub{font-size:16px;line-height:24px;max-width:680px} .kf-search-v2 .kfs-grp-t{font-size:19px;line-height:24px;letter-spacing:-.01em} .kf-search-v2 .kfs-grp-c{font-size:14px} .kf-search-v2 .kfs-grp + .kfs-grp{margin-top:24px} @media (min-width:992px){ .kf-search-v2 .kf-h1{font-size:34px;line-height:40px} .kf-search-v2 .kf-h1-sub{font-size:17px;line-height:26px} .kf-search-v2 .kfs-grp-t{font-size:22px;line-height:28px} .kf-search-v2 .kfs-grp + .kfs-grp{margin-top:28px} } /* ========================================================================== M-SEARCH.4 — DEUX DÉFAUTS VUS EN CAPTURE, INVISIBLES EN HTTP -------------------------------------------------------------------------- `curl` rend 200 et le bon texte : il ne dit rien d'un bouton qui recouvre un bloc ni d'une image qui échoue. Ces deux règles répondent à ce que la capture du 13/09 a montré. ========================================================================== */ /* A · « Rechercher dans cette zone » se posait SUR le bloc cashback. La règle du socle est `position:absolute; top:62px` sans ancre : le bouton se cale donc sur la colonne latérale, pas sur la carte. On le remet dans le flux, juste au-dessus de la carte à laquelle il appartient. Le socle n'est pas touché — seule la couche isolée corrige, et la retirer restaure l'état d'avant. */ .kf-search-v2 .button-search-in-map{position:static;padding:0;margin:0 0 8px;text-align:center} /* C · Les initiales vivent SOUS la photo. Si `user.avatar` pointe vers un fichier absent, `onerror` retire l'`` et elles réapparaissent — au lieu du carré vide vu en capture. Quand la photo charge, elle les recouvre. */ .kf-search-v2 .kfs-pc-ph, .kf-search-v2 .kfs-an-av{position:relative} .kf-search-v2 .kfs-pc-ph img, .kf-search-v2 .kfs-an-av img{position:absolute;top:0;left:0;width:100%;height:100%} .kf-search-v2 .kfs-ph-ini{display:inline-flex;align-items:center;justify-content:center; width:100%;height:100%;font-weight:800;line-height:1} /* ========================================================================== M-SEARCH.4 — SORTIES DES PAGES À MOINS DE 3 RÉSULTATS -------------------------------------------------------------------------- Deux cartes, jamais plus. Contour discret : ce sont des issues, pas des appels à l'action — le bouton corail reste réservé à la réservation. ========================================================================== */ .kf-search-v2 .kfs-sorties{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0 4px} .kf-search-v2 .kfs-sortie{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--kfs-ink-200); border-radius:12px;text-decoration:none;color:var(--kfs-ink);background:#fff} .kf-search-v2 .kfs-sortie:hover{border-color:var(--kfs-navy);background:var(--kfs-navy-50); color:var(--kfs-ink);text-decoration:none} .kf-search-v2 .kfs-sortie-k{font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--kfs-ink-400)} .kf-search-v2 .kfs-sortie-t{font-size:15px;font-weight:700;color:var(--kfs-navy);line-height:1.3} .kf-search-v2 .kfs-sortie-s{font-size:13px;color:var(--kfs-ink-400)} @media (min-width:992px){ .kf-search-v2 .kfs-sorties{grid-template-columns:1fr 1fr;gap:12px} } /* ========================================================================== M-SEARCH.4 — TEXTE SUR CORAIL : ENCRE, PAS BLANC -------------------------------------------------------------------------- RECALCULÉ (WCAG 2.1, luminance relative) : #fff sur #f15e61 rend 3,22:1, sous le seuil AA de 4,5:1 pour du texte normal. #151a2e rend 5,34:1. Cinq règles de cette feuille posaient du blanc sur corail — c'est la couleur du bouton de RÉSERVATION, donc le texte que le visiteur doit lire au moment où il décide. Corrigé ici, en fin de feuille, plutôt qu'en réécrivant cinq déclarations : le correctif se lit d'un bloc et se retire d'un bloc. ========================================================================== */ .kf-search-v2 .kfs-svc-cta, .kf-search-v2 .kfs-svc-cta:hover, .kf-search-v2 .kfs-svc-cta:focus{color:#151a2e} .kf-search-v2 .kfs-svc-cta.kfs-cta-alt{color:var(--kfs-navy)} /* ========================================================================== M-SEARCH.4 — ZONE ÉPINGLÉE : CARTE PLEINE ET CARTE COMPACTE -------------------------------------------------------------------------- La forme dit la distance. Pleine et cerclée quand le réservable est DANS le lieu demandé ; compacte et sobre quand il est ailleurs. 2026-09-15 — LE CONTOUR PASSE DU VERT AU CORAIL (demande du fondateur). Le corail `--kfs-coral` est déjà la couleur du geste de réservation (bouton « Réserver », pastille de cashback) : cercler de corail la carte d'un pro ouvert à la réservation en ligne dit la même chose que son bouton, au lieu d'introduire un troisième signal chromatique. ⚠️ On ne touche PAS à `--kfs-ok` lui-même : cette variable sert aussi aux pastilles `.kfs-p-ok` et à `.kfs-foot-ok`, qui ne sont pas concernées. Seules les deux règles de la zone épinglée changent. ⚠️ Le libellé « Réservable en ligne » passe au NAVY, pas au corail. À 11 px en majuscules, `#f15e61` sur blanc tombe à ~3,2:1 de contraste — sous le seuil AA de 4,5:1, donc illisible pour une partie des visiteurs. Le navy tient ~12:1 et laisse le corail porter seul le signal, ce qui est plus lisible qu'un texte de la même couleur que son cadre. ========================================================================== */ .kf-search-v2 .kfs-pin{border:2px solid var(--kfs-coral);border-radius:14px;padding:12px 12px 4px; margin:0 0 12px;background:#fff} .kf-search-v2 .kfs-pin .kfs-pc{border:0;box-shadow:none;margin:0} .kf-search-v2 .kfs-pin-k{font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--kfs-navy);display:block;margin:2px 0 2px 2px} .kf-search-v2 .kfs-compact{display:flex;align-items:center;gap:14px;justify-content:space-between; border:1px solid var(--kfs-ink-200);border-radius:14px;padding:12px 16px;margin:0 0 12px; background:#fff;text-decoration:none;color:var(--kfs-ink)} .kf-search-v2 .kfs-compact:hover{border-color:var(--kfs-navy);background:var(--kfs-navy-50); color:var(--kfs-ink);text-decoration:none} .kf-search-v2 .kfs-compact-b{min-width:0} .kf-search-v2 .kfs-compact-t{display:block;font-size:14.5px;line-height:1.45;margin-top:2px} .kf-search-v2 .kfs-compact-cta{flex:none;display:inline-flex;align-items:center;min-height:40px; padding:0 14px;border:1px solid var(--kfs-navy);border-radius:10px;color:var(--kfs-navy); font-weight:600;font-size:14px;white-space:nowrap} @media (max-width:600px){ .kf-search-v2 .kfs-compact{flex-direction:column;align-items:stretch} .kf-search-v2 .kfs-compact-cta{justify-content:center} } /* ========================================================================== M-SEARCH.4 — PASTILLES DE MODE ET ÉCHELLE TYPOGRAPHIQUE DU §E -------------------------------------------------------------------------- Les pastilles ne se valent pas : une seule annonce un geste immédiat. · M1 corail plein, texte encre (5,34:1) — « ⚡ Réservation instantanée » · M2 / M3 contour discret — une étape sépare encore le client du créneau Le rayon passe de 999 à 6 px (§E) : une pastille n'est pas une puce. ========================================================================== */ .kf-search-v2 .kfs-pill{border-radius:6px;font-size:13px;font-weight:700; padding:4px 10px;line-height:16px} .kf-search-v2 .kfs-p-m1{background:var(--kfs-coral);color:#151a2e} .kf-search-v2 .kfs-p-m2{background:var(--kfs-navy-50);color:var(--kfs-navy); border:1px solid var(--kfs-ink-200)} .kf-search-v2 .kfs-p-cash{background:var(--kfs-ok-50);color:var(--kfs-ok)} /* --- échelle §E, au-delà des titres déjà posés ---------------------------- */ /* Nom d'une carte réservable : c'est l'entité qu'on choisit, pas une ligne. */ .kf-search-v2 .kfs-pin .kfs-pc-nm{font-size:19px;line-height:24px;letter-spacing:-.01em} /* Ligne de prestation : titre 16/600, méta 14/400/20 — lisible à bout de bras. */ .kf-search-v2 .kfs-svc-t{font-size:16px;font-weight:600;line-height:1.35} .kf-search-v2 .kfs-svc-d{font-size:14px;line-height:20px} .kf-search-v2 .kfs-price{font-size:16px} /* Ligne d'annuaire : nom 16/600, sous-titre 14/400/20. */ .kf-search-v2 .kfs-an-n{font-size:16px;font-weight:600} .kf-search-v2 .kfs-an-l{font-size:14px;line-height:20px} /* Méta de carte (métier · commune · distance) : même échelle que les lignes. */ .kf-search-v2 .kfs-pc-me{font-size:14px;line-height:20px} /* Boutons : 15–16 px, 800 pour l'action primaire, 600 pour les autres. */ .kf-search-v2 .kfs-svc-cta{font-size:15px;font-weight:800;min-height:44px} .kf-search-v2 .kfs-svc-cta.kfs-cta-alt{font-weight:600} /* --- chip « À domicile », dans la barre et non dans une modale ------------- */ .kf-search-v2 .kf-chip-home{display:inline-flex;align-items:center;gap:8px;min-height:44px; padding:0 14px;border:1px solid var(--kfs-ink-200);border-radius:10px; font-size:15px;font-weight:600;color:var(--kfs-navy);text-decoration:none;background:#fff} .kf-search-v2 .kf-chip-home:hover{border-color:var(--kfs-navy);color:var(--kfs-navy);text-decoration:none} .kf-search-v2 .kf-chip-home .kf-chip-box{width:18px;height:18px;border:2px solid var(--kfs-navy); border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1} .kf-search-v2 .kf-chip-home.is-on{background:var(--kfs-navy);color:#fff;border-color:var(--kfs-navy)} .kf-search-v2 .kf-chip-home.is-on .kf-chip-box{border-color:#fff;color:#fff} .kf-search-v2 .kf-chip-home .kf-chip-x{opacity:.75;margin-left:2px} /* --- écran « zéro après filtre » (canvas 4-08) ----------------------------- */ .kf-search-v2 .kfs-zero{background:var(--kfs-ink-100);border-radius:14px;padding:22px 24px; display:grid;gap:10px;margin:8px 0 0} .kf-search-v2 .kfs-zero-t{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--kfs-ink);line-height:1.3} .kf-search-v2 .kfs-zero-s{font-size:15px;line-height:22px;color:var(--kfs-ink-600);margin:0} .kf-search-v2 .kfs-zero-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:12px; min-height:48px;padding:0 16px;border:1px solid var(--kfs-navy);border-radius:10px; color:var(--kfs-navy);font-weight:700;text-decoration:none;background:#fff;margin-top:4px} .kf-search-v2 .kfs-zero-cta span{font-weight:600;color:var(--kfs-ink-600);font-size:14px} .kf-search-v2 .kfs-zero-cta:hover{background:var(--kfs-navy);color:#fff;text-decoration:none} .kf-search-v2 .kfs-zero-cta:hover span{color:#fff} /* ⚠️ Spécificité relevée : mesuré le 13/09, la bordure du chip sortait à « 0px none » — une règle du socle visant les `a` de ce conteneur la gagnait. On ancre sur la barre ET sur la balise plutôt que de modifier le socle, dont les collisions Bootstrap 3 sont documentées. */ .kf-search-v2 .kf-actions-bar a.kf-chip-home{border:1px solid var(--kfs-ink-200)} .kf-search-v2 .kf-actions-bar a.kf-chip-home:hover{border-color:var(--kfs-navy)} .kf-search-v2 .kf-actions-bar a.kf-chip-home.is-on{border-color:var(--kfs-navy)} /* ========================================================================== M-SEARCH.4 — LES JETONS MONTENT À LA RACINE DE LA PAGE -------------------------------------------------------------------------- Ils n'étaient déclarés que sur `.kfs-listing`, c'est-à-dire la LISTE. Tout ce qui vit ailleurs dans la page — barre d'actions, chip « À domicile », écran « zéro après filtre », sorties d'élargissement — héritait donc de variables INDÉFINIES. ⚠️ Une déclaration qui référence une variable indéfinie est invalide au calcul et retombe à sa valeur initiale : `border:1px solid var(--kfs-ink-200)` devenait `0px none`, SANS erreur ni avertissement. Mesuré le 13/09 sur le chip, dont la bordure sortait à « 0px none » alors que la règle s'appliquait bien (display et min-height, eux, passaient). Les jetons sont donc portés par la racine `.kf-search-v2`. `.kfs-listing` garde les siens : rien ne change pour la liste, et la redondance protège si l'un des deux conteneurs disparaît. ========================================================================== */ .kf-search-v2{ --kfs-navy:#20285e; --kfs-navy-50:#f0f4ff; --kfs-coral:#f15e61; --kfs-coral-600:#e04a4d; --kfs-coral-50:#fff1f1; --kfs-ink:#151a2e; --kfs-ink-600:#4a5268; --kfs-ink-400:#4a5268; --kfs-ink-200:#dde2ed; --kfs-ink-100:#eef1f7; --kfs-ok:#0f7b5a; --kfs-ok-50:#e7f6f0; --kfs-amber:#8a6100; --kfs-amber-50:#fff6e0; } /* ========================================================================== M-SEARCH.4 / §D.2 — LES ÉTATS MOBILE (600 →) -------------------------------------------------------------------------- Relevé du 14/09 sur `/cashback/coiffeur/paris-18` en 390 px, AVANT ce bloc : page de 13 609 px pour 20 résultats, soit seize écrans. Trois postes : · le module de recherche déplié, ~180 px avant le h1, alors que la requête du visiteur est déjà satisfaite ; · trois boutons « Voir la fiche » pleine largeur par carte N2, tous vers la même URL ; · trois blocs de maillage dépliés en pied de page. 🔑 TOUT CE BLOC EST CONDITIONNÉ À `.kfs-mob`, posée par le JS de bas de page. Sans JavaScript, aucune de ces règles ne s'applique et la page reste celle d'aujourd'hui : rien n'est masqué par la seule feuille de style, donc rien ne peut devenir inatteignable. ========================================================================== */ /* --- 1b · le résumé de recherche ------------------------------------------ */ /* Hors repli mobile il n'existe pas : le module lui-même est à l'écran. */ .kf-search-v2 .kfs-resume{display:none} @media (max-width:600px){ .kf-search-v2.kfs-mob .kfs-resume{ display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:52px;padding:8px 14px;margin:0 0 10px;background:#fff; border:1px solid var(--kfs-ink-200);border-radius:12px; } .kf-search-v2.kfs-mob .kfs-resume-t{ min-width:0;font-size:15px;font-weight:700;color:var(--kfs-ink);line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .kf-search-v2.kfs-mob .kfs-resume-b{ flex:none;min-height:36px;padding:0 12px;background:none; border:1px solid var(--kfs-navy);border-radius:9px; color:var(--kfs-navy);font-size:14px;font-weight:600; } /* Replié : le module sort du flux. Déplié : le résumé reste, il sert de titre à ce qu'on est en train de modifier. */ .kf-search-v2.kfs-mob .kfs-module{display:none} .kf-search-v2.kfs-mob .kfs-module.is-open{display:block} /* --- 2 · le fil d'Ariane visuel ----------------------------------------- */ /* Le BreadcrumbList du JSON-LD est intouché : c'est lui que Google lit pour le fil de résultat, pas ce `nav`. */ .kf-search-v2.kfs-mob .kf-breadcrumb{display:none} /* --- 5 et 7 · une carte, un bouton -------------------------------------- */ /* Sur les cartes NON réservables le bouton par prestation répétait la même URL. Il disparaît au profit d'un seul, au pied de la carte. */ .kf-search-v2.kfs-mob .kfs-pc:not(.is-reservable) .kfs-svc-cta{display:none} .kf-search-v2.kfs-mob .kfs-pc:not(.is-reservable) .kfs-svc-p{margin-left:auto} /* Sur la carte réservable, « Réserver » reste par prestation — ce sont des gestes distincts — mais §D.2 n'en garde que deux à l'écran. */ .kf-search-v2.kfs-mob .kfs-pc.is-reservable .kfs-svc-r:nth-of-type(n+3){display:none} /* Le lien de secours, rendu pour toutes les cartes, devient LE bouton. */ .kf-search-v2.kfs-mob .kfs-svc-more{display:none} .kf-search-v2.kfs-mob .kfs-svc-all{ display:flex;align-items:center;justify-content:center; min-height:48px;padding:0 14px;margin:0; border-top:1px solid var(--kfs-ink-100); color:var(--kfs-navy);font-size:15px;font-weight:600;text-decoration:none; } .kf-search-v2.kfs-mob .kfs-svc-all:hover{background:var(--kfs-navy-50); color:var(--kfs-navy);text-decoration:none} /* --- 7 · la revendication ne se répète plus ligne à ligne --------------- */ /* Vingt fiches N3, c'est vingt « Vous êtes ce professionnel ? » intercalés entre les résultats. Sur mobile il n'en reste qu'un, dans la colonne — qui, les colonnes s'empilant sous 992 px, tombe SOUS la liste. */ .kf-search-v2.kfs-mob .kfs-an-claim{display:none} /* --- 11 · l'aside : voir le bloc dédié en fin de fichier ----------------- */ /* Le tri de la colonne se joue au seuil du socle (768 px) et non ici, parce que c'est le socle qui la masquait. ⚠️ La conception retire aussi le bloc professionnel ; je ne la suis pas : combiné au retrait ci-dessus des revendications ligne à ligne, cela ferait disparaître TOUT point d'entrée pro du mobile. La conception renvoie sur la provenance (§9) ; dans cette page la provenance est un sous-titre placé AVANT la liste et ne porte aucun lien. Le bloc reste : c'est la « fois sous la liste » demandée. */ /* --- 12 · le maillage en accordéon -------------------------------------- */ .kf-search-v2.kfs-mob .kf-maillage-card{border-radius:12px} .kf-search-v2.kfs-mob .kf-maillage-sum{ display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:52px;padding:0 14px;cursor:pointer;list-style:none; } .kf-search-v2.kfs-mob .kf-maillage-sum::-webkit-details-marker{display:none} .kf-search-v2.kfs-mob .kf-maillage-sum::after{ content:'⌄';flex:none;font-size:18px;line-height:1;color:var(--kfs-ink-400); transform:translateY(-3px); } .kf-search-v2.kfs-mob .kf-maillage-card[open] .kf-maillage-sum::after{ content:'⌃';transform:translateY(3px); } .kf-search-v2.kfs-mob .kf-maillage-title{margin:0;font-size:15px;line-height:1.3} /* La carte porte son propre rembourrage vertical dans le socle : replié, un en-tête sortait à 84 px au lieu des 52 demandés. Il repasse dans le `summary`, qui est la seule zone cliquable. */ .kf-search-v2.kfs-mob .kf-maillage-card{padding:0} .kf-search-v2.kfs-mob .kf-maillage-card[open] .kf-maillage-pills{padding:0 14px 14px} } /* ========================================================================== M-SEARCH.4 / §D.2 §11 — LA COLONNE REVIENT SUR MOBILE -------------------------------------------------------------------------- MESURÉ le 14/09 en 390 px : la colonne latérale sortait à `height=0`. Elle porte la classe `only-mobile-show`, dont le socle (`style.css`, sous 768 px) fait… `display:none !important`. Le nom dit l'inverse de la règle. Conséquence : l'encadré « Le cashback sur cette page » — la SEULE chose que cette page explique et qu'on ne lit nulle part ailleurs — était invisible pour le mobile, c'est-à-dire pour l'essentiel du trafic de recherche. 🔑 CE BLOC N'EST PAS GARDÉ PAR `.kfs-mob`, et c'est délibéré : il ne fait que RENDRE VISIBLE. Une règle qui ajoute ne peut rien rendre inatteignable, donc elle n'a pas besoin du filet de sécurité JS. Le seuil est celui du socle (768 px), pas celui du §D.2 (600 px) : entre les deux la colonne était masquée par la même règle, et la laisser masquée là aurait recréé le trou sur tablette. ⚠️ `!important` est nécessaire pour reprendre la main sur la règle du socle, qui en porte un. Portée au `.kf-search-v2` : aucune autre page n'est touchée. ========================================================================== */ @media (max-width:768px){ .kf-search-v2 .col-md-4.only-mobile-show{display:block !important;margin-top:4px} /* §D.2 ne garde que le cashback et l'entrée pro : la réassurance vit sur la fiche et à la réservation, et ne dit rien de propre à cette page. */ .kf-search-v2 .kfs-aside-trust{display:none} /* ⚠️ La colonne porte AUSSI la carte. Leaflet n'est chargé qu'au-dessus de 992 px : sous ce seuil `#result-map` reste un conteneur vide — MESURÉ à 800 px de blanc le 14/09, aussitôt la colonne rendue. Le bouton « Rechercher dans cette zone » n'a pas d'objet sans carte. Les deux sont donc masqués, et rien n'est perdu : il n'y avait rien dedans. */ .kf-search-v2 #result-map, .kf-search-v2 .button-search-in-map{display:none} } /* Hors mobile, le lien de secours n'a pas lieu d'être : `.kfs-svc-more` dit déjà « toutes les prestations », et chaque prestation porte son bouton. */ .kf-search-v2 .kfs-svc-all{display:none} /* Le `summary` ne doit pas décorer la carte hors accordéon. */ .kf-search-v2 .kf-maillage-sum{list-style:none} .kf-search-v2 .kf-maillage-sum::-webkit-details-marker{display:none} /* ========================================================================== M-SEARCH.4 / canvas 4-16 — LA PHOTO DE COUVERTURE -------------------------------------------------------------------------- Elle entre par la CARTE, jamais par la liste : mesuré sur dev le 14/09, `account_portfolio` porte 3 couvertures pour 3 comptes. Une bande présente sur une poignée d'unités ferait une liste à trous. 🔑 AUCUNE RÈGLE « SI ABSENTE ». Le PHP ne rend rien du tout quand il n'y a pas d'image : il n'y a donc ni pavé gris, ni icône, ni réserve d'espace à neutraliser. C'est le défaut corrigé sur la page prestation — une couverture 16/9 vide en tête de page — et on ne le réintroduit pas. Les dimensions sont écrites dans le HTML (800×180, 96×64) ET ici : l'attribut évite le décalage avant chargement, la règle tient la géométrie après. ========================================================================== */ /* --- bande de la carte pleine, en tête ------------------------------------ */ .kf-search-v2 .kfs-cover{display:block;margin:0 0 12px;border-radius:12px; overflow:hidden;background:var(--kfs-ink-100);line-height:0} .kf-search-v2 .kfs-cover img{display:block;width:100%;height:180px; object-fit:cover;object-position:center} /* La carte épinglée pose son propre cadre (bordure 2 px, padding 12). La bande doit venir À FLEUR de ce cadre et en épouser les coins hauts : d'où les marges négatives qui annulent le padding, et le rayon 12 = 14 du cadre moins ses 2 px de bordure. `overflow:hidden` sur le cadre fait le reste. */ .kf-search-v2 .kfs-pin{overflow:hidden} .kf-search-v2 .kfs-pin .kfs-cover{margin:-12px -12px 12px;border-radius:12px 12px 0 0} /* --- vignette de la carte compacte ---------------------------------------- */ .kf-search-v2 .kfs-compact-cov{flex:none;display:block;width:96px;height:64px; border-radius:10px;overflow:hidden;background:var(--kfs-ink-100);line-height:0} .kf-search-v2 .kfs-compact-cov img{display:block;width:100%;height:100%; object-fit:cover;object-position:center} @media (max-width:600px){ /* 390 px de large moins 2 × 16 de gouttière = 358 ; ratio conservé. */ .kf-search-v2 .kfs-cover img{height:140px} .kf-search-v2 .kfs-compact-cov{width:88px;height:60px} /* La carte compacte s'empile sous 600 px (règle du §D.2) : la vignette reprend toute la largeur plutôt que de flotter seule sur une ligne. */ .kf-search-v2 .kfs-compact-cov{width:100%;height:120px} } /* ========================================================================== M-SEARCH.4 / canvas 4-17 — DENSITÉ DE LA CARTE N1 SUR MOBILE (variante B1) -------------------------------------------------------------------------- Signalé par le fondateur : « le Réserver prend tout le visuel ». MESURÉ le 14/09 en 390 px, AVANT ce bloc : · carte entière ......... 578 px à UNE prestation, 595 à deux · ligne de prestation ... 131 px CHACUNE · pastilles ............. 53 px (deux, empilées) · pied .................. 73 px (deux lignes) 🔑 LE FAUTIF N'EST PAS LE BOUTON, C'EST L'EMPILEMENT. Une règle héritée de M-SEARCH.2 passait le bouton en `width:100%` sous 600 px : prix sur une bande, bouton sur une autre, et la ligne de prestation coûtait 131 px là où son contenu tient en 80. Cette règle avait sa raison — un bouton de 40 px coincé à droite d'un prix est intouchable à 360 px — mais la bonne réponse est une COLONNE DROITE (prix au-dessus du bouton), pas une bande. Budget §H : carte ≤ 420 px à une prestation, ≤ 480 à deux. Sous la ligne de flottaison (690 px utiles) doivent tenir la carte, le titre du premier groupe et deux lignes de liste — sinon la page de résultats n'est plus une liste. ========================================================================== */ @media (max-width:600px){ /* --- 1 · prix ET bouton dans la colonne droite ---------------------------- */ /* La règle `width:100%` de M-SEARCH.2 est annulée ICI seulement, pour la carte épinglée : ailleurs (cartes N2 de la liste) les boutons par prestation sont déjà masqués, la question ne se pose pas. */ .kf-search-v2.kfs-mob .kfs-pin .kfs-svc-r{ display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:4px; align-items:center;padding:10px 14px; } .kf-search-v2.kfs-mob .kfs-pin .kfs-svc-b{grid-column:1;grid-row:1 / span 2;min-width:0} .kf-search-v2.kfs-mob .kfs-pin .kfs-svc-p{grid-column:2;grid-row:1;justify-self:end;text-align:right} .kf-search-v2.kfs-mob .kfs-pin .kfs-svc-cta{ grid-column:2;grid-row:2;justify-self:end; width:auto;margin:0;min-height:44px;padding:0 14px; } /* --- 2 · une seule pastille ---------------------------------------------- */ /* §4-17 : « au plus une pastille par carte — le mode de réservation ». Le taux de cashback est déjà écrit en toutes lettres dans le pied ; en faire AUSSI une pastille, c'est dire deux fois la même chose et payer 27 px. */ .kf-search-v2.kfs-mob .kfs-pin .kfs-pill.kfs-p-cash{display:none} .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-tags{margin-top:4px} /* --- 3 · avatar 40, pas 58 ------------------------------------------------ */ .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-ph{width:40px;height:40px;border-radius:10px} .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-head{padding:12px 14px;gap:10px} .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-nm{font-size:17px;line-height:22px} /* --- 4 · pied d'une seule ligne ------------------------------------------ */ .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-foot{padding:8px 14px;gap:8px;font-size:12.5px} /* --- 5 · surtitre sur une ligne ------------------------------------------ */ /* « Réservable en ligne · dans le 18e arrondissement » passait sur deux lignes. Le périmètre est déjà dit par le h1 et par le titre du groupe juste dessous : ici il suffit de ne pas déborder. */ .kf-search-v2.kfs-mob .kfs-pin-k{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 0 2px; } /* --- 6 · l'accès à la fiche reste, sans occuper une bande ---------------- */ .kf-search-v2.kfs-mob .kfs-pin .kfs-svc-all{min-height:40px;font-size:14px} } /* La bande « Voir la fiche » n'est rendue inutile QUE sur une carte réservable dont toutes les prestations sont à l'écran (cf. `$kf_all_utile` dans la vue). Elle reste dans le DOM — donc atteignable au clavier et par les moteurs — mais sort du flux mobile, où chaque bande compte. */ @media (max-width:600px){ .kf-search-v2.kfs-mob .kfs-svc-all-off{display:none} } /* ========================================================================== M-SEARCH.4 — PIED DE CARTE : CRÉNEAU + TAUX SUR UNE SEULE LIGNE (mobile) -------------------------------------------------------------------------- Le fondateur a tranché le 14/09 : la prochaine disponibilité reste affichée. Elle a donc besoin de sa place dans un pied qui, en B1, ne fait qu'une ligne de 36 px. La place vient de la formulation du cashback, pas d'un rognage : « garanti par Konfian » est déjà écrit une fois par page dans l'encadré « Le cashback sur cette page ». Le redire sous chaque carte coûtait la ligne du créneau pour une information que le visiteur a déjà lue — c'est la règle « un énoncé par information » du §4-17. ========================================================================== */ /* ⚠️ SPÉCIFICITÉ — le mot `span` dans ces sélecteurs n'est pas décoratif. `.kf-search-v2 .kfs-pc-foot span` (ligne 299) vaut (0,2,1) ; un `.kf-search-v2 .kfs-foot-cash-court` à (0,2,0) PERDAIT, et les deux formulations s'affichaient à la suite sur desktop — mesuré le 14/09 : « 1 % de cashback, garanti par Konfian1 % de cashback ». Le sélecteur de type compte dans le calcul, même placé en fin de fichier. */ .kf-search-v2 .kfs-pc-foot span.kfs-foot-cash-court{display:none} @media (max-width:600px){ .kf-search-v2.kfs-mob .kfs-pc-foot span.kfs-foot-cash-long{display:none} .kf-search-v2.kfs-mob .kfs-pc-foot span.kfs-foot-cash-court{display:inline-flex} /* Le pied reste sur une ligne : si les deux mentions ne tiennent pas, c'est le taux qui s'efface, jamais le créneau — c'est lui que le client lit. */ .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-foot{flex-wrap:nowrap;overflow:hidden} .kf-search-v2.kfs-mob .kfs-pin .kfs-pc-foot > span{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .kf-search-v2.kfs-mob .kfs-pin .kfs-foot-ok{flex:none} } /* ========================================================================== M-SEARCH.4 — LE PLAN DES TITRES SUIT LE §J -------------------------------------------------------------------------- Relevé du 14/09 sur `/cashback/photographe-mariage/paris-14` : 20 titres, dont 9 noms d'enseigne en `h3`, 4 blocs d'aside en `h3` rangés sous le dernier groupe de communes, et un « Filtres » invisible en `h2`. §J : un `h1`, des `h2` (groupes · aside · maillage), AUCUN `h3`. Trois balises changent dans la vue ; ces règles reprennent leur mise en forme à l'identique, pour que RIEN ne bouge à l'écran. ========================================================================== */ /* Titre d'un bloc d'aside : `h3` → `h2.kfs-aside-h`, même rendu qu'avant (14/800), volontairement PLUS PETIT que les h2 de groupe — un h2 ne se reconnaît pas à sa taille, il se reconnaît à son rang dans le plan. */ .kf-search-v2 .kfs-aside-box .kfs-aside-h{ font-size:14px;font-weight:800;line-height:1.25;color:var(--kfs-navy);margin:0 0 9px} /* Titre de la modale de filtres : `h2` → `div`, mise en forme reprise de `recherche-v2.css` (18/700) pour ne rien déplacer à l'ouverture. */ .kf-search-v2 .kf-modal-header .kf-modal-title{ font-size:18px;font-weight:700;color:var(--kfs-ink);margin:0} /* ========================================================================== M-SEARCH.4 (2026-09-15) — UN PANNEAU DE SUGGESTIONS VIDE NE S'AFFICHE PAS -------------------------------------------------------------------------- SIGNALÉ par le fondateur : après « Modifier » sur mobile, le champ « Où » apparaissait tronqué, sans son libellé. MESURÉ : le panneau du champ « Quoi » sortait à `display:block`, hauteur **33 px**, à y=270 — pile sur le libellé « Où » (y=278), avec **zéro suggestion** dedans. Sa hauteur ne vient pas des résultats mais du `
` que le gabarit place toujours à l'intérieur. Comme le panneau est en `position:absolute; top:100%`, cette bande blanche se pose sur le champ suivant. 🔑 LA RÈGLE PORTE SUR LE CONTENU, PAS SUR L'ÉTAT. On ne peut pas masquer ces panneaux par défaut : celui des LIEUX n'est jamais révélé par un `.show()` — le script se contente de remplir son `