/* =========================================================
SEARCH-RESULTS.CSS — page de recherche (liste + filtres + carte)
Chargé uniquement par le gabarit tpl-resultats
========================================================= */
.res-header-bar { background: var(--navy); padding: .875rem 1.5rem; display: flex; align-items: center; gap: 12px; position: sticky; top: 64px; z-index: 100; }
.res-search-mini { flex: 1; display: flex; gap: 8px; max-width: 640px; }
.rsi { flex: 1; border: none; border-radius: 9px; padding: 9px 14px; font-size: 13px; font-family: inherit; outline: none; }
.rsb { background: var(--orange); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 700; }
.res-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 170px); }
.res-side { background: #fff; border-right: 1px solid var(--gray-100); padding: 1.5rem; overflow-y: auto; }
.rsf-title { font-size: 15px; font-weight: 700; margin-bottom: 1.25rem; display: flex; justify-content: space-between; }
.rsf-reset { font-size: 13px; color: var(--orange); font-weight: 600; cursor: pointer; }
.rsf-sec { margin-bottom: 1.5rem; }
.rsf-label { font-size: 14px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.rsf-opt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--gray-600); cursor: pointer; }
.rsf-opt input { accent-color: var(--orange); width: 15px; height: 15px; }
.rsf-count { margin-left: auto; font-size: 13px; color: var(--gray-400); }
.range-row { display: flex; gap: 6px; }
.srange { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 6px 10px; font-size: 13px; width: 80px; outline: none; font-family: inherit; }
.star-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.star-btn { border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 5px 12px; font-size: 14px; cursor: pointer; font-weight: 600; background: #fff; color: var(--gray-600); transition: all .15s; }
.star-btn.on { background: #fff7f4; border-color: var(--orange); color: var(--orange); }
/* ═══════════════════════════════════════════════════════════════════
LOT B — DOUBLE CURSEUR DE BUDGET
Deux EMPILÉS sur la même piste, pas côte à côte.
C'est la seule façon d'obtenir deux poignées natives (donc gratuitement
accessibles au clavier et aux lecteurs d'écran) sans écrire un curseur
maison à coups de mousemove — lequel serait inutilisable au clavier et
au toucher sans un travail considérable.
Le montage :
* .bud-piste porte le fond gris et la portion orange (.bud-active) ;
* les deux input sont en position absolue par-dessus, FOND
TRANSPARENT et pointer-events:none ;
* seules les POIGNÉES reçoivent pointer-events:auto.
Sans ce dernier point, l'input du dessus intercepterait tous les clics
et la poignée du dessous serait inatteignable — le piège classique de
ce composant.
═══════════════════════════════════════════════════════════════════ */
.bud-valeurs { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.bud-val { font-size: 13px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.bud-sep { flex: 1; height: 1px; background: var(--gray-200); }
/* Hauteur suffisante pour une zone tactile de 44 px autour des poignées,
recommandation WCAG 2.5.5 : la piste ne fait que 5 px, mais le conteneur
ménage la marge de préhension au-dessus et au-dessous. */
.bud-zone { position: relative; height: 44px; display: flex; align-items: center; margin-bottom: 10px; }
.bud-piste { position: absolute; left: 9px; right: 9px; height: 5px; border-radius: 100px; background: var(--gray-200); }
.bud-active { position: absolute; height: 100%; border-radius: 100px; background: var(--orange); }
.bud-range {
position: absolute; left: 0; right: 0; width: 100%;
margin: 0; padding: 0; height: 44px;
background: none; -webkit-appearance: none; appearance: none;
pointer-events: none; /* la piste ne capte rien… */
outline: none;
}
.bud-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
pointer-events: auto; /* …seule la poignée est saisissable */
width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 3px solid var(--orange);
box-shadow: 0 1px 4px rgba(15,15,35,.28);
cursor: grab;
}
.bud-range::-moz-range-thumb {
pointer-events: auto;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 3px solid var(--orange);
box-shadow: 0 1px 4px rgba(15,15,35,.28);
cursor: grab;
}
.bud-range::-webkit-slider-thumb:active { cursor: grabbing; }
.bud-range::-moz-range-thumb:active { cursor: grabbing; }
/* Firefox dessine une piste par défaut : on la neutralise, la nôtre est
dans .bud-piste. */
.bud-range::-moz-range-track { background: transparent; border: none; }
/* Focus clavier VISIBLE sur la poignée elle-même. Un outline sur l'input
entourerait toute la largeur de la piste et n'indiquerait pas quelle
poignée est active — inutilisable quand il y en a deux. */
.bud-range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy);
}
.bud-range:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy);
}
.bud-note { font-size: 13px; color: var(--gray-400); line-height: 1.5; }
/* Pastille du filtre budget actif, dans la barre des filtres actifs. */
.atag-budget { background: var(--orange); color: #fff; border-color: var(--orange); }
.atag-budget:hover { background: #e8541e; }
/* LOT B.2 — les règles .rsf-inactif et .rsf-bientot ont été SUPPRIMÉES en
même temps que le balisage qu'elles habillaient. Du CSS qui ne
correspond plus à aucun élément survit longtemps et finit par être
recopié ailleurs « parce qu'il existe ». */
/* ── Filtres repliables sur téléphone ──
La colonne latérale était simplement `display:none` sous 768 px : les
filtres devenaient inaccessibles au lieu d'être adaptés. */
.res-filtres-toggle { display: none; }
/* ── Cartes de résultats ── */
.rc-bio { font-size: 14px; color: var(--gray-500); line-height: 1.55; margin-top: 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-price-sans { font-size: 13px; font-weight: 700; color: var(--gray-400); }
.res-etat { background: #fff; border: 1.5px solid var(--gray-100); border-radius: var(--radius-lg);
padding: 2.5rem 1.5rem; text-align: center; }
.res-etat-icone { font-size: 30px; margin-bottom: 10px; }
.res-etat-titre { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.res-etat-sous { font-size: 13px; color: var(--gray-500); line-height: 1.6; max-width: 460px; margin: 0 auto; }
.res-etat-btn { margin-top: 14px; background: var(--orange); color: #fff; border: none;
border-radius: 9px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.res-plus { margin-top: 14px; text-align: center; }
.res-plus-btn { background: #fff; color: var(--navy); border: 1.5px solid var(--gray-200);
border-radius: 10px; padding: 10px 24px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.res-plus-btn:hover { border-color: var(--orange); color: var(--orange); }
.res-plus-btn[disabled] { opacity: .6; cursor: default; }
/* Squelette de chargement — préférable à un texte « Chargement… » qui
fait sauter la mise en page quand les vraies cartes arrivent. */
.res-skel { background: #fff; border: 1.5px solid var(--gray-100); border-radius: var(--radius-lg);
padding: 1.25rem; display: grid; grid-template-columns: 72px 1fr; gap: 1rem; }
.res-skel-bloc { background: linear-gradient(90deg, var(--gray-100) 25%, #f3f4f6 50%, var(--gray-100) 75%);
background-size: 400% 100%; animation: resSkel 1.3s ease infinite; border-radius: 8px; }
.res-skel-photo { width: 72px; height: 72px; border-radius: 50%; }
@keyframes resSkel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .res-skel-bloc { animation: none; } }
.res-main { padding: 1.5rem; background: var(--gray-50); }
.res-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 10px; }
.res-count { font-size: 15px; font-weight: 700; }
.res-count b { color: var(--orange); }
.res-sort select { border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 8px 12px; font-size: 13px; outline: none; background: #fff; font-family: inherit; }
.atags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.atag {
background: #fff7f4; color: var(--orange);
border: 1px solid rgba(255,107,53,.3); border-radius: 100px;
padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
transition: all .15s; user-select: none; display: inline-flex; align-items: center; gap: 5px;
}
.atag:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.atag span { font-size: 14px; line-height: 1; opacity: .7; }
.atag:hover span { opacity: 1; }
.res-cards { display: flex; flex-direction: column; gap: 12px; }
.res-card {
background: #fff; border: 1.5px solid var(--gray-100); border-radius: var(--radius-lg);
padding: 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem;
align-items: start; cursor: pointer; transition: all .15s;
}
.res-card:hover { border-color: var(--orange); box-shadow: 0 4px 20px rgba(255,107,53,.08); }
.res-card.featured { border: 2px solid var(--orange); }
.rc-feat { grid-column: 1/-1; background: #fff7f4; color: var(--orange); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 7px; width: fit-content; margin-bottom: -4px; }
/* ── LOT 6.1 — cercle de la photo de profil ──
`aspect-ratio: 1` en plus de width/height : si un jour la grille passe
la colonne en `1fr` (c'est déjà le cas sous 380 px), la hauteur suit la
largeur au lieu de rester figée, et le cercle ne devient jamais un ovale.
`min-width` empêche l'écrasement si le nom est très long. */
.rc-photo {
width: 72px; height: 72px; min-width: 72px; aspect-ratio: 1 / 1;
border-radius: 50%; overflow: hidden; flex-shrink: 0;
background: var(--gray-100);
/* Anneau discret : détache la photo du fond blanc de la carte sans
ajouter de bordure épaisse, et donne une limite nette aux portraits
dont le fond est lui-même clair. */
box-shadow: 0 0 0 1px rgba(15,15,35,.08) inset;
}
/* Le portrait remplit le cercle sans déformation : `cover` recadre,
il n'étire jamais. `center` garde le visage au milieu plutôt qu'en
haut à gauche. `display:block` supprime l'espace de ligne de base qui
décalerait l'image de 3 px vers le bas dans son cercle. */
.rc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Repli : initiales sur fond navy. La même classe sert de conteneur à
l'image, pour que le retrait de celle-ci révèle directement ce fond. */
.rc-photo-initiales {
display: flex; align-items: center; justify-content: center;
background: var(--navy); color: #fff;
font-weight: 900; font-size: 22px; letter-spacing: .02em;
user-select: none;
}
.rc-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.rc-meta { font-size: 13px; color: var(--gray-400); margin-bottom: 7px; }
.rc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rcb { padding: 3px 9px; border-radius: 100px; font-size: 14px; font-weight: 600; }
.rcb-g { background: #dcfce7; color: #15803d; }
.rcb-b { background: #dbeafe; color: #1d4ed8; }
.rcb-o { background: #ffedd5; color: #c2410c; }
.rc-stats { display: flex; gap: 14px; font-size: 13px; color: var(--gray-400); }
/* La zone d'information est devenue un : elle reprend les deux
premières colonnes de l'ancienne grille — photo, puis texte — pour un
rendu identique. La carte n'a donc plus que deux colonnes. */
.rc-lien { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: start; min-width: 0; }
.rc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rc-note-big { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 900; color: var(--orange); }
.rc-price { font-size: 13px; font-weight: 700; }
.rc-price-sub { font-size: 13px; color: var(--gray-400); }
.rc-cta {
background: var(--orange); color: #fff; border: none; border-radius: 9px;
padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: all .18s cubic-bezier(.4,0,.2,1);
box-shadow: 0 2px 8px rgba(255,107,53,.25);
white-space: nowrap;
}
.rc-cta:hover { background: #e8541e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,.4); }
.rc-cta:active { transform: translateY(0px) scale(.97); box-shadow: 0 1px 4px rgba(255,107,53,.2); }
/* Vue carte */
.res-map-toggle { display: flex; gap: 0; border: 1.5px solid #e5e7eb; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.rmt-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; border: none; background: #fff; color: #6b7280; cursor: pointer; font-family: inherit; transition: all .15s; }
.rmt-btn.active { background: #1a1a2e; color: #fff; }
.rmt-btn:first-child { border-right: 1.5px solid #e5e7eb; }
.res-layout-map { display: grid; grid-template-columns: 420px 1fr; }
.res-list-pane { overflow-y: auto; background: #fff; border-right: 1px solid #e5e7eb; height: calc(100vh - 148px); }
.res-map-pane { position: sticky; top: 148px; height: calc(100vh - 148px); overflow: hidden; background: #e8e0d8; }
#artisanMap { width: 100% !important; height: 100% !important; min-height: 500px; }
.res-list-card { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background .12s; align-items: flex-start; }
.res-list-card:hover { background: #fff7f4; }
.res-list-card.highlighted { background: #fff7f4; border-left: 3px solid #FF6B35; }
.rlc-num { width: 26px; height: 26px; border-radius: 50%; background: #FF6B35; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; }
.rlc-num.top { background: #1a1a2e; }
.rlc-photo { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.rlc-photo img { width: 100%; height: 100%; object-fit: cover; }
.rlc-body { flex: 1; min-width: 0; }
.rlc-name { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.rlc-meta { font-size: 13px; color: #9ca3af; margin-top: 2px; }
.rlc-rating { font-size: 13px; color: #f59e0b; margin-top: 4px; }
.rlc-rating span { color: #6b7280; }
.rlc-dispo { font-size: 13px; font-weight: 600; margin-top: 4px; }
.rlc-price { font-size: 13px; font-weight: 700; color: #FF6B35; margin-top: 4px; }
/* Deux règles .leaflet-popup-* vivaient ici. Elles habillaient les bulles
de Leaflet — bibliothèque retirée du projet, car chargée depuis unpkg.com
sans jamais être appelée. Plus rien ne peut générer ces classes : les
règles ne ciblaient donc plus aucun élément.
Les styles .map-popup / .mp-* ci-dessous sont ceux du projet, pas ceux de
Leaflet. Ils sont conservés tels quels ; leur sort se décidera à part. */
.map-popup { padding: 14px 16px; min-width: 190px; }
.mp-name { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 900; color: #0f0f23; }
.mp-job { font-size: 14px; color: #6b7280; margin-top: 2px; }
.mp-rating { font-size: 13px; color: #f59e0b; margin-top: 5px; }
.mp-dispo { font-size: 13px; font-weight: 600; margin-top: 3px; }
.mp-btn { width: 100%; margin-top: 10px; background: #FF6B35; color: #fff; border: none; border-radius: 8px; padding: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
@media (max-width: 900px) { .res-layout-map { grid-template-columns: 1fr; } .res-map-pane { display: none; } }
/* ── LOT B — adaptation aux petites largeurs ──
AVANT : `.res-side { display: none }` sous 768 px. Les filtres
n'étaient pas adaptés au mobile, ils DISPARAISSAIENT — un client sur
téléphone ne pouvait pas filtrer par budget du tout. Ils deviennent
maintenant un panneau repliable, fermé par défaut pour ne pas repousser
les résultats hors de l'écran. */
@media (max-width: 1024px) { .res-layout { grid-template-columns: 220px 1fr; } }
@media (max-width: 768px) {
.res-layout { grid-template-columns: 1fr; min-height: 0; }
.res-header-bar { position: static; padding: .75rem 1rem; }
.res-search-mini { flex-wrap: wrap; max-width: none; }
.res-search-mini .rsi { min-width: 0; }
.res-filtres-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; background: #fff; border: 1.5px solid var(--gray-200);
border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 700;
color: var(--navy); font-family: inherit; cursor: pointer; margin-bottom: 12px;
}
.res-side {
border-right: none; border-bottom: 1px solid var(--gray-100);
padding: 0 1rem 1rem; overflow: visible;
}
.res-side[hidden] { display: none; }
.res-main { padding: 1rem; }
/* LOT 6.1 — 60 px sous 768 px : assez grand pour rester lisible, assez
petit pour laisser respirer le nom et le métier sur une colonne
étroite. min-width suit, sinon la grille pourrait le comprimer. */
.res-card { grid-template-columns: 60px 1fr; gap: .875rem; }
.rc-photo { width: 60px; height: 60px; min-width: 60px; }
.rc-photo-initiales { font-size: 18px; }
.rc-right { grid-column: 1 / -1; flex-direction: row; align-items: center;
justify-content: space-between; width: 100%; margin-top: 4px; }
.rc-cta { flex: 1; max-width: 200px; }
}
@media (max-width: 380px) {
/* Sous 380 px la carte passe sur une seule colonne : la photo n'est plus
contrainte par une largeur de colonne, d'où le width fixe explicite
(sans lui, `1fr` l'étirerait sur toute la largeur et le cercle
deviendrait un ovale — c'est le rôle de aspect-ratio en filet). */
.res-card { grid-template-columns: 1fr; }
.rc-photo { width: 64px; height: 64px; min-width: 64px; }
}
/* ═══════════════════════════════════════════════════════════════════
LOT B.2 — COLONNE DE FILTRES COMPACTE + NOTE MINIMALE
La colonne perdait de la hauteur en contrôles inertes : quatre blocs
« Bientôt disponible » qui n'interrogeaient rien. Ils ont été retirés du
balisage. Ce qui reste — budget et note minimale — est resserré pour
qu'un client voie les deux sans faire défiler, même sur un portable.
═══════════════════════════════════════════════════════════════════ */
.res-side { padding: 1.25rem 1.1rem; }
.rsf-title { margin-bottom: 1rem; }
.rsf-sec { margin-bottom: 1.15rem; }
.rsf-sec:last-child { margin-bottom: 0; }
.rsf-label { margin-bottom: 8px; }
.bud-valeurs { margin-bottom: 8px; }
.bud-zone { height: 38px; margin-bottom: 6px; }
/* Note minimale — quatre boutons réels, branchés sur la table reviews. */
.note-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.note-btn {
border: 1.5px solid var(--gray-200); border-radius: 100px;
padding: 6px 12px; font-size: 14px; font-weight: 700;
background: #fff; color: var(--gray-600);
cursor: pointer; font-family: inherit; transition: all .15s;
/* 32 px de haut minimum : assez pour être touché sans viser. */
min-height: 32px;
}
.note-btn:hover { border-color: var(--orange); color: var(--orange); }
.note-btn.on { background: #fff7f4; border-color: var(--orange); color: var(--orange); }
.note-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* « Toutes » = absence de filtre, pas un cinquième critère. Aucun cercle,
aucun contour permanent, aucun fond. La bordure reste DÉCLARÉE mais
transparente : c'est elle qui garde la hauteur alignée sur les étoiles,
et rien ne se déplace au moment de l'activation. Actif, le bouton change
de couleur et de rien d'autre. */
.note-btn-neutre,
.note-btn-neutre:hover,
.note-btn-neutre.on {
background: transparent;
border-color: transparent;
}
.note-btn-neutre:hover { color: var(--orange); }
.note-btn-neutre.on { color: var(--orange); }
/* Le focus clavier, lui, doit rester parfaitement visible : c'est la seule
indication dont dispose quelqu'un qui n'utilise pas la souris. */
.note-btn-neutre:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* ── TOP PRO ──────────────────────────────────────────────────────────
Un cadre sobre, de la largeur du panneau : ni pilule, ni dégradé, ni
ombre portée. Les dimensions sont IDENTIQUES dans les deux états —
seules la couleur du fond et celle de la bordure changent — pour que
l'activation ne fasse pas sauter la colonne de filtres. */
.toppro-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
width: 100%; min-height: 46px; padding: 7px 12px;
border: 1.5px solid var(--gray-200); border-radius: 10px;
background: #fff; color: var(--navy);
font-family: inherit; text-align: left; cursor: pointer;
transition: background .15s, border-color .15s;
}
.toppro-btn:hover { border-color: var(--orange); }
.toppro-btn[aria-pressed="true"] { background: #fff7f4; border-color: var(--orange); }
.toppro-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.toppro-titre { font-size: 13px; font-weight: 700; line-height: 1.2; }
.toppro-critere { font-size: 13px; font-weight: 500; color: var(--gray-400); line-height: 1.35; }
.toppro-btn[aria-pressed="true"] .toppro-titre { color: var(--orange); }
/* ═══════════════════════════════════════════════════════════════════
LOT B.3 — AUTOCOMPLÉTION MÉTIER ET VILLE
La liste doit rester lisible par quelqu'un qui n'a pas l'habitude
d'Internet : une proposition par ligne, une zone de touche généreuse,
et une mise en évidence qui ne repose PAS uniquement sur la couleur.
── DEUX PIÈGES DE POSITIONNEMENT ────────────────────────────────────
1. LA LISTE NE DOIT PAS ÊTRE COUPÉE. `.res-header-bar` est une barre
collante d'une soixantaine de pixels de haut : une liste en flux
normal serait rognée. Elle est donc en position absolue, hors du
flux, ancrée sur `.cb` qui est le seul ancêtre positionné.
2. LA LISTE NE DOIT PAS PASSER DERRIÈRE LA PAGE. Au-dessus de 768 px,
`.res-header-bar` est `sticky` avec `z-index: 100`, ce qui crée un
contexte d'empilement : la liste y est en sécurité. MAIS sous
768 px la barre repasse en `position: static`, le contexte
disparaît, et la liste se retrouve à égalité avec le reste de la
page. D'où un z-index volontairement élevé (500) : au-dessus des
cartes et de la colonne de filtres, sous les fenêtres modales
(9000 et plus) qui doivent, elles, rester au-dessus de tout.
═══════════════════════════════════════════════════════════════════ */
.cb { position: relative; flex: 1; min-width: 0; }
.cb-ville { max-width: 190px; }
.cb .cb-champ { width: 100%; }
.cb-liste {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
z-index: 500;
margin: 0; padding: 6px; list-style: none;
background: #fff; border: 1.5px solid var(--gray-200); border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
/* Défilement propre sur téléphone : la liste ne dépasse jamais la
moitié de l'écran, et ne pousse rien puisqu'elle est hors du flux. */
max-height: min(46vh, 330px);
overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* le doigt ne fait pas défiler la page derrière */
}
.cb-liste[hidden] { display: none; }
.cb-option {
/* 44 px : la plus petite cible qu'un doigt atteint sans viser. */
min-height: 44px; display: flex; align-items: center;
padding: 11px 14px; border-radius: 9px;
font-size: 14.5px; font-weight: 600; color: var(--navy);
cursor: pointer; user-select: none;
/* Une proposition par ligne, toujours : un nom de ville long est coupé
par des points de suspension plutôt que replié sur deux lignes. */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-option:hover { background: var(--gray-100); }
/* La proposition active se distingue par TROIS signaux : fond, couleur et
barre latérale. La couleur seule serait invisible pour une partie des
utilisateurs, et illisible sur un écran mal réglé au soleil. */
.cb-option-actif {
background: #fff7f4; color: var(--orange);
box-shadow: inset 3px 0 0 var(--orange);
}
/* Message discret sous le champ : valeur inconnue, aucune correspondance,
ou suggestions momentanément indisponibles. Hors du flux lui aussi,
sinon l'apparition d'une phrase décalerait toute la barre de recherche. */
.cb-message {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 501;
margin: 0; padding: 8px 12px;
background: #fff7f4; border: 1.5px solid var(--orange); border-radius: 10px;
font-size: 14px; font-weight: 600; line-height: 1.35; color: #9a3412;
box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
}
.cb-message[hidden] { display: none; }
/* Le message précède la liste dans le balisage : quand il est affiché, la
liste descend pour se placer dessous au lieu de le recouvrir. */
.cb-message:not([hidden]) ~ .cb-liste { top: calc(100% + 52px); }
.cb-champ:focus-visible { outline: none; }
.cb:focus-within { box-shadow: 0 0 0 2px rgba(100,116,139,.45); border-radius: 10px; }
@media (max-width: 768px) {
.cb-ville { max-width: none; }
/* 16 px : en dessous, Safari sur iPhone zoome automatiquement à la mise
au point du champ, et l'utilisateur se retrouve avec une page agrandie
qu'il doit repincer pour lire les résultats. */
.cb .cb-champ { font-size: 16px; padding: 11px 14px; }
.cb-option { min-height: 48px; font-size: 15.5px; }
.cb-liste { max-height: min(50vh, 300px); }
}
/* ═══════════════════════════════════════════════════════════════════
LOT B.3.2 — DISPONIBILITÉ DANS LA LISTE, ÉCRAN VIDE ACTIONNABLE
Chaque proposition porte maintenant deux lignes : le nom, puis ce que
la base contient réellement. La seconde ligne est volontairement plus
petite et plus pâle — c'est une précision, pas une promesse. Quand le
compte est nul, elle passe en gris franc plutôt qu'en rouge : « aucun
professionnel actuellement » est une information, pas une erreur.
═══════════════════════════════════════════════════════════════════ */
.cb-option {
/* Deux lignes : le passage en colonne remplace l'alignement central. */
flex-direction: column; align-items: flex-start; justify-content: center;
gap: 2px; white-space: normal;
}
.cb-option-texte {
display: block; width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-option-dispo {
font-size: 13px; font-weight: 600; color: var(--gray-500); line-height: 1.2;
}
.cb-option-vide { color: var(--gray-400); font-weight: 500; }
.cb-option-actif .cb-option-dispo { color: #b45309; }
/* Les deux boutons d'élargissement de l'écran vide. Ils retirent UN SEUL
filtre chacun ; ils sont donc côte à côte et de même poids visuel, sans
action « principale » qui orienterait le choix. */
.res-etat-actions {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
margin-top: 1.1rem;
}
/* `.res-etat-btn` porte un margin-top hérité du bouton « Réessayer »,
qui est seul dans son bloc. Dans le conteneur d'actions, c'est `gap`
qui espace : la marge ferait un décalage vertical entre les deux. */
.res-etat-actions .res-etat-btn { margin-top: 0; min-height: 44px; }
@media (max-width: 480px) {
.res-etat-actions { flex-direction: column; }
.res-etat-actions .res-etat-btn { width: 100%; }
}
@media (max-width: 400px) {
/* Les quatre choix tiennent sur UNE ligne, y compris sur un téléphone :
depuis que « et + » a disparu des libellés, deux caractères suffisent.
Repasser à deux colonnes casserait la lecture « Toutes · 3★ · 4★ · 5★ ». */
.note-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.note-btn { padding: 6px 4px; }
}
/* Lot distance — le menu suit le style des filtres, sans rectangle orange.
L'anneau de focus reprend le bleu-gris discret adopte precedemment. */
.rsf-select {
width: 100%; box-sizing: border-box;
border: 1.5px solid var(--gray-200); border-radius: 9px;
padding: 8px 12px; font-size: 13px; font-family: inherit;
background: #fff; color: var(--gray-600); cursor: pointer;
min-height: 38px;
}
.rsf-select:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(100,116,139,.45); }
.rsf-select:disabled { background: var(--gray-50, #f9fafb); color: var(--gray-400); cursor: not-allowed; }
@media (max-width: 768px) { .rsf-select { font-size: 16px; padding: 10px 12px; } }
/* Autocompletion — les lettres deja saisies ressortent, sans surlignage.
Aucun , aucun fond colore : seule la graisse change, donc la
largeur du texte ne bouge pas et la liste ne se decale pas. */
.cb-option-texte { font-weight: 500; }
.cb-option-corr { font-weight: 700; }