/* Annuaire [bawai_annuaire] — liste + carte, filtres partagés. */ .bawai-dir { --bawai-dir-gap: 20px; margin: 24px 0; } /* ── Filtres ── */ .bawai-dir-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; } /* * ── ⚠️ UNE BARRE DE FILTRES VIDE OCCUPE QUAND MÊME SA MARGE ──────────────── * * *Baptiste, 22 octobre, capture de l'inspecteur à l'appui : « Il y a des * marges non demandées quand j'affiche la map seule. »* * * En « carte seule » le gabarit rend bien `.bawai-dir-filters`, mais sans rien * dedans : ni recherche, ni facettes, ni compteur. Le conteneur ne se voit * pas — il n'a pas de fond — et pourtant il pousse la carte de 16 px vers le * bas. On cherche alors la marge dans la carte, dans le thème, dans Elementor, * partout sauf dans un élément invisible. * * `:empty` ne suffit pas : le compteur est un enfant — invisible, mais que le * script réécrit à chaque filtrage, donc impossible à supprimer — et un simple * retour à la ligne en est un aussi. C'est donc le gabarit qui décide, parce * que lui SAIT si la barre porte quelque chose (voir `DirectoryWidget`). * * ⚠️ Et on ne la met pas en `display:none` : le compteur doit rester dans le * document, c'est la seule phrase qui annonce aux lecteurs d'écran qu'un filtre * a eu un effet. Hauteur nulle, marge nulle, contenu débordant masqué. */ .bawai-dir-filters--muette { display: block; height: 0; margin: 0; gap: 0; overflow: hidden; } .bawai-dir-search { flex: 1 1 240px; min-width: 0; padding: 10px 14px; border: 1px solid var(--ow-bord); border-radius: var(--ow-r-menu); font-size: var(--ow-t-carte,15px); } .bawai-dir-facet { padding: 10px 12px; border: 1px solid var(--ow-bord); border-radius: var(--ow-r-menu); font-size: var(--ow-t-lecture,14px); background: #fff; max-width: 100%; } .bawai-dir-reset { padding: 9px 14px; border: 1px solid var(--ow-bord); border-radius: var(--ow-r-menu); background: #fff; cursor: pointer; font-size: var(--ow-t-lecture,14px); } .bawai-dir-reset:hover { border-color: var(--ow-texte-3); } .bawai-dir-count { margin-left: auto; font-size: var(--ow-t-courant,13px); color: var(--ow-texte-2); } /* ── Corps : liste + carte ── */ .bawai-dir-body { display: grid; gap: var(--bawai-dir-gap); align-items: start; } /* La carte est COLLANTE : elle reste visible pendant qu'on fait défiler la liste, sinon on perd le repère géographique dès le 5e commerçant. */ .bawai-dir-map { position: sticky; top: 20px; border-radius: var(--ow-r-carte); overflow: hidden; } @media (min-width: 900px) { .bawai-dir--right .bawai-dir-body { grid-template-columns: 1fr 1fr; } .bawai-dir--left .bawai-dir-body { grid-template-columns: 1fr 1fr; } .bawai-dir--left .bawai-dir-list { order: 2; } .bawai-dir--left .bawai-dir-map { order: 1; } } /* Sous 900px la carte passe AU-DESSUS, en hauteur réduite : côte à côte, deux colonnes de 45 % sont illisibles sur mobile. */ @media (max-width: 899px) { .bawai-dir-map { height: 300px !important; position: static; order: -1; } } .bawai-dir-list { display: flex; flex-direction: column; gap: 12px; max-height: none; } @media (min-width: 900px) { .bawai-dir--right .bawai-dir-list, .bawai-dir--left .bawai-dir-list { max-height: 70vh; overflow-y: auto; padding-right: 6px; } } /* ── Fiche ── */ .bawai-dir-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--ow-bord-doux); border-radius: var(--ow-r-carte); background: #fff; transition: border-color .15s, box-shadow .15s; } .bawai-dir-card:hover { border-color: var(--ow-bord); box-shadow: 0 2px 10px rgba(15,23,42,.06); } .bawai-dir-card.is-active { border-color: var(--ow-bleu); box-shadow: 0 0 0 2px rgba(37,99,235,.15); } .bawai-dir-card[hidden] { display: none; } .bawai-dir-thumb { width: 84px; height: 84px; flex: none; object-fit: cover; border-radius: var(--ow-r-menu); } .bawai-dir-info { min-width: 0; } .bawai-dir-name { margin: 0 0 2px; font-size: var(--ow-t-zone,17px); line-height: 1.3; } .bawai-dir-name a { text-decoration: none; } .bawai-dir-name a:hover { text-decoration: underline; } .bawai-dir-type { margin: 0 0 4px; font-size: var(--ow-t-commande,12px); color: var(--ow-bleu); font-weight: 600; } .bawai-dir-addr { margin: 0; font-size: var(--ow-t-lecture,14px); color: var(--ow-texte-2); } .bawai-dir-meta { margin: 6px 0 0; font-size: var(--ow-t-courant,13px); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ⚠️ `--ow-attention` est une couleur de TRACÉ : sur blanc, l'étoile et sa note sortaient à 3,29:1 pour 13 px, sous le seuil AA de 4,5:1. La charte porte depuis 4.553.0 une variante lisible pour le texte, et c'est elle qu'il faut ici. Trouvé le jour où l'outil de contraste a pu enfin ouvrir l'annuaire — la seule surface du produit que voient des visiteurs, et la seule qui n'avait pas de décor mesurable. */ .bawai-dir-rating { color: var(--ow-attention-texte); font-weight: 600; } .bawai-dir-reviews { color: var(--ow-texte-3); } /* ⚠️ La règle existait, SANS couleur : le numéro sortait en `#0000EE`, le bleu par défaut du navigateur, sur la seule surface que voient les clients de nos clients. Huit numéros par annuaire, sur les huit variantes. Celui qui a écrit cette ligne a retiré le soulignement et oublié la couleur — et un lien bleu RESSEMBLE à un lien, donc personne ne l'a relevé en quatre mois. C'est la famille de défaut que `verif_tour_ecrans.mjs` compte désormais : on ne la voit pas à l'œil, on la voit en comparant la couleur rendue à la charte. */ .bawai-dir-tel { color: var(--ow-bleu); text-decoration: none; font-weight: 600; } .bawai-dir-none, .bawai-dir-empty { color: var(--ow-texte-2); font-size: var(--ow-t-lecture,14px); padding: 20px 0; } /* ── Modes d'affichage ── En mode « carte seule » ou « liste seule », la grille repasse en 1 colonne : garder 2 colonnes laisserait une moitié vide. */ .bawai-dir-mode-list .bawai-dir-body, /* * ⚠️ `gap: 0` en carte seule, et c'est la SECONDE moitié des « marges non * demandées » de Baptiste. * * La liste reste dans le document (marqueurs + référencement) et sort de * l'affichage par `position:absolute`. Elle ne se voit plus — mais elle garde * sa place de premier enfant de la grille, et la carte se retrouve derrière * elle, séparée par les 20 px de `gap`. Mesuré : la carte commençait à 20 px * du haut d'un bloc qui ne contenait qu'elle. * * Une gouttière entre un élément visible et un élément invisible n'est pas une * gouttière : c'est une marge que personne n'a demandée et que personne ne peut * expliquer en regardant l'écran. */ .bawai-dir-mode-map .bawai-dir-body { grid-template-columns: 1fr !important; gap: 0; } /* * ── ⚠️ ET C'EST `top: 20px` QUI POUSSAIT, PAS UNE MARGE ──────────────────── * * *Baptiste, 22 octobre : « Il y a des marges non demandées quand j'affiche la * map seule. »* * * Mesuré : aucune marge nulle part, aucun remplissage, la gouttière à zéro — et * la carte à 20 px quand même. Le coupable est au-dessus, ligne 52 : * `.bawai-dir-map { position: sticky; top: 20px }`. Ce décalage sert en mode * « liste + carte », où la carte suit le défilement en gardant 20 px de * respiration sous l'en-tête. * * Mais **Leaflet écrit `position: relative` en ligne sur son conteneur**, ce * qu'aucune règle de feuille ne peut reprendre : `position: static` déclaré * ici perdait contre l'attribut `style`. Le collant devenait donc du * positionnement relatif — et `top: 20px`, lui, restait parfaitement valide. * Un décalage de 20 px vers le bas, sans marge et sans remplissage : on peut * fouiller l'inspecteur longtemps. * * `top: auto` règle les deux cas d'un coup, quelle que soit la position que * Leaflet impose. On ne se bat pas contre le style en ligne : on retire ce qui * en dépendait. */ .bawai-dir-mode-map .bawai-dir-map { position: static; top: auto; } /* Carte seule : la liste reste dans le HTML (marqueurs + référencement) mais sort de l'affichage. `display:none` la retirerait de l'accessibilité ; ici elle reste lisible par les moteurs. */ .bawai-dir-mode-map .bawai-dir-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (min-width: 900px) { .bawai-dir-mode-map .bawai-dir-map { height: 620px; } } /* ── La fiche en modale ──────────────────────────────────────────────────── Pour un établissement sans page dédiée : l'annuaire reste complet, le nom réagit au clic, et le commerçant a de quoi demander la sienne. */ .bawai-dir-ouvre { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .bawai-dir-ouvre:hover { color: var(--ow-bleu); } /* * ── ⚠️ LE NOM EST LA CIBLE PRINCIPALE DE CETTE PAGE ──────────────────── * * C'est une page PUBLIQUE, lue au téléphone par des visiteurs : le nom de * l'établissement est ce sur quoi on appuie. Il sortait à 22 px de haut — la * moitié de ce qu'un pouce demande — parce que c'est un bouton déguisé en * titre, et qu'un titre n'a pas de hauteur de bouton. * * On ne lui donne pas 44 px de haut : ça creuserait un blanc au milieu du * `

`. On agrandit la CIBLE, pas l'objet — une zone transparente qui * déborde de 11 px en haut et en bas. Ce qu'on voit reste un nom ; ce qu'on * touche fait 44 px. */ .bawai-dir-ouvre { position: relative; } .bawai-dir-ouvre::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; } /* Celui-là est un vrai bouton : il prend la hauteur d'un bouton. */ .bawai-dir-reset { min-height: 44px; } /* Et les champs du filtre : la recherche sortait à 39 px, les facettes à 40. C'est une page publique lue au téléphone — ce filtre est la première chose qu'un visiteur touche. */ .bawai-dir-search, .bawai-dir-facet { min-height: 44px; } .bawai-dir-modale { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .bawai-dir-modale[hidden] { display: none; } .bawai-dir-modale-fond { position: absolute; inset: 0; background: rgba(15, 27, 76, .55); } .bawai-dir-modale-boite { position: relative; width: 100%; max-width: 430px; max-height: 90vh; overflow: auto; background: var(--ow-carte); color: var(--ow-texte-1); border-radius: var(--ow-r-carte); padding: 24px; box-shadow: 0 18px 60px rgba(15, 27, 76, .28); } .bawai-dir-modale-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; background: none; border: 0; font-size: var(--ow-t-page,22px); line-height: 1; color: var(--ow-texte-3); cursor: pointer; } .bawai-dir-modale-boite h3 { margin: 0 0 2px; font-size: var(--ow-t-zone,17px); padding-right: 32px; } .bawai-dir-modale-type { margin: 0 0 14px; font-size: var(--ow-t-courant,13px); color: var(--ow-texte-2); } .bawai-dir-modale-note { margin: 0 0 12px; font-size: var(--ow-t-lecture,14px); } .bawai-dir-modale-note strong { font-size: var(--ow-t-page,22px); } .bawai-dir-modale-note span { color: var(--ow-texte-2); margin-left: 6px; } .bawai-dir-modale-ligne { margin: 0 0 7px; font-size: var(--ow-t-lecture,14px); line-height: 1.5; } .bawai-dir-modale-ligne span { color: var(--ow-texte-3); display: block; font-size: var(--ow-t-commande,12px); } .bawai-dir-modale-lien { margin: 12px 0 0; font-size: var(--ow-t-lecture,14px); } .bawai-dir-modale-demande { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ow-bord-doux); } .bawai-dir-modale-invite { margin: 0 0 10px; font-size: var(--ow-t-lecture,14px); color: var(--ow-texte-2); } .bawai-dir-modale-form { display: grid; gap: 8px; } .bawai-dir-modale-form input[type=text], .bawai-dir-modale-form input[type=email], .bawai-dir-modale-form input[type=tel] { width: 100%; padding: 10px 12px; font-size: var(--ow-t-lecture,14px); border: 1px solid var(--ow-bord); border-radius: var(--ow-r-controle); background: #fff; } /* Ce que le commerçant demande : une page, un accès, ou les deux. `all:unset` sur le fieldset — sa bordure et sa marge par défaut varient d'un navigateur à l'autre, et dessinaient un cadre gris au milieu d'un formulaire qui n'en a aucun. La cible tactile fait 44 px de haut : ces deux cases se cochent au pouce, sur le trottoir, devant la boutique. */ .bawai-dir-modale-objets { all: unset; display: grid; gap: 2px; margin-bottom: 2px; } .bawai-dir-modale-objets legend { font-size: var(--ow-t-commande,12px); font-weight: 600; color: var(--ow-texte-3); text-transform: uppercase; letter-spacing: .03em; padding: 0 0 4px; } .bawai-dir-modale-objets label { display: flex; align-items: flex-start; gap: 9px; font-size: var(--ow-t-lecture,14px); line-height: 1.4; color: var(--ow-texte-1); min-height: 44px; padding: 6px 0; cursor: pointer; } .bawai-dir-modale-objets input { margin: 3px 0 0; width: 17px; height: 17px; flex: 0 0 auto; } .bawai-dir-modale-envoi { padding: 11px; font-size: var(--ow-t-lecture,14px); font-weight: 600; color: #fff; background: var(--ow-bleu); border: 0; border-radius: var(--ow-r-controle); cursor: pointer; } .bawai-dir-modale-envoi:hover { background: var(--ow-bleu-sombre); } .bawai-dir-modale-retour { margin: 4px 0 0; font-size: var(--ow-t-courant,13px); } /* ── Store locator : « Autour de moi » ─────────────────────────────────────── La distance n'apparaît qu'après un tri réussi — un emplacement vide ne doit ni prendre de place ni laisser croire qu'une mesure a échoué. */ .bawai-dir-km{ display:none; } .bawai-dir.is-geotrie .bawai-dir-km{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px; background:var(--bw-tinte, #f1f4ff); color:var(--ow-texte-2, #4a5173); font-size:12px; font-weight:600; white-space:nowrap; } .bawai-dir-pres{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid var(--ow-bord, #dce3fa); border-radius:var(--ow-r-controle, 10px); background:#fff; color:var(--ow-nuit, #0f1b4c); font-weight:600; cursor:pointer; } .bawai-dir-pres:hover{ border-color:var(--bw-primary, #2450de); } .bawai-dir-pres[disabled]{ opacity:.6; cursor:progress; } /* Le message occupe toute la largeur sous les filtres : il doit se lire, pas se glisser entre deux contrôles. */ .bawai-dir-geomsg{ flex-basis:100%; margin:6px 0 0; font-size:13px; color:var(--ow-texte-3, #6e7191); } /* ════════════════════════════════════════════════════════════════════════════ LA CARTE : ÉPINGLES, GRAPPES ET BULLES DESSINÉES PAR NOUS ---------------------------------------------------------------------------- *Baptiste, 20 octobre : « Rendre la map plus ludique au niveau des points proposés, avec leur nom, les infos au clic, etc. Pouvoir changer le picto de la map. »* Jusqu'ici la carte rendait l'épingle bleue par défaut de Leaflet — une image servie par le CDN de la bibliothèque, la même sur tous les annuaires du monde, et sans rapport avec la charte du client chez qui on la pose. Tout ce qui suit se peint avec `--bawai-dir-teinte`, posée par le script d'après l'attribut du shortcode. ════════════════════════════════════════════════════════════════════════════ */ .bawai-dir-map { --bawai-dir-teinte: var(--ow-bleu,#2450de); } /* ⚠️ L'hôte du `divIcon` ne porte AUCUN style : Leaflet lui met une taille et une position absolues, et un fond ou une bordure s'y verrait comme un carré blanc derrière chaque épingle. Tout le dessin vit dans l'enfant. */ .bawai-dir-epingle-hote { background: none; border: 0; } .bawai-dir-epingle { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; color: #fff; background: var(--bawai-dir-teinte); /* La goutte : trois coins ronds, le quatrième pointu, tourné vers le bas. C'est la forme qu'on lit comme « ici », et elle se recolore — ce qu'une image PNG ne sait pas faire. */ border: 2px solid #fff; border-radius: 50% 50% 50% 2px; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(16, 22, 48, .35); transition: transform .12s ease, box-shadow .12s ease; } .bawai-dir-epingle > svg { transform: rotate(45deg); display: block; } /* Le survol d'une fiche de la liste fait LEVER son point. Ouvrir sa bulle recadrait la carte et recouvrait les voisins : en parcourant trente commerces, la carte clignotait trente fois. */ .bawai-dir-epingle-hote.est-survole .bawai-dir-epingle, .bawai-dir-epingle-hote:hover .bawai-dir-epingle { transform: rotate(-45deg) scale(1.18); box-shadow: 0 5px 14px rgba(16, 22, 48, .45); } /* Le nom à côté du point — facultatif (`etiquettes="1"`). Sur un annuaire de huit cents commerces il ferait une bouillie ; sur douze, c'est lui qui rend la carte lisible sans cliquer. */ .bawai-dir-etiquette { position: absolute; left: 34px; bottom: 4px; max-width: 160px; padding: 3px 8px; background: #fff; color: var(--ow-texte-1,#191919); border: 1px solid var(--ow-bord,#e2e4f3); border-radius: var(--ow-r-pastille,999px); font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 4px rgba(16, 22, 48, .18); pointer-events: none; } /* ⚠️ La grappe reprend la teinte de l'annuaire. Le thème par défaut de `markercluster` est vert / jaune / rouge selon le nombre — trois couleurs qui, dans ce produit, veulent dire bon / moyen / mauvais. Une grappe de douze commerces s'affichait en rouge au milieu d'un outil où le rouge est une alerte. */ .bawai-dir-grappe-hote { background: none; border: 0; } .bawai-dir-grappe { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; background: var(--bawai-dir-teinte); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 2px 8px rgba(16, 22, 48, .35); } /* ── La bulle ────────────────────────────────────────────────────────────── * * *Baptiste, 20 octobre : « Améliorer le design des fenêtres d'établissements * sur la map. »* * * Elle empilait quatre paragraphes et trois boutons en rangée libre. Sur la * capture : « Voir la fiche » et « Itinéraire » sur une ligne, « Appeler » seul * sous les deux — parce qu'un `flex-wrap` casse où il peut, et que l'endroit où * il casse dépend de la longueur du nom du commerce. * * Elle est maintenant une VIGNETTE : une photo quand il y en a une, le nom, une * seule ligne de repères, l'adresse, et des gestes rangés en grille. */ .bawai-dir-bulle-hote .leaflet-popup-content-wrapper { border-radius: var(--ow-r-carte,16px); box-shadow: 0 12px 34px rgba(16, 22, 48, .22); /* ⚠️ La photo va au bord : sans ça, Leaflet laisse voir les coins blancs du conteneur par-dessus l'image. */ overflow: hidden; padding: 0; } /* Leaflet pose 13px/19px de marge par défaut sur son contenu. La vignette gère les siennes — sinon la photo ne touche aucun bord. ⚠️ On ne touche PAS à la largeur : Leaflet l'écrit en ligne d'après `minWidth`/`maxWidth`, et un `width:auto !important` la lui reprenait — la bulle retombait alors à la largeur de son mot le plus long, soit 130 px. */ .bawai-dir-bulle-hote .leaflet-popup-content { margin: 0; } .bawai-dir-bulle-hote .leaflet-popup-close-button { width: 26px; height: 26px; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ow-texte-1,#101630); font: 700 17px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgba(16,22,48,.2); } .bawai-dir-bulle-hote .leaflet-popup-close-button:hover { background: #fff; } /* * ── ⚠️ UN LOGO N'EST PAS UNE PHOTO, ET `cover` LE DÉCAPITE ───────────────── * * *Baptiste, 22 octobre, capture à l'appui : « Image toujours coupée au clic * sur un établissement sur la map. »* On y voit « ANC SAV » dont le haut des * lettres est tranché. * * `background-size: cover` remplit le bandeau en rognant ce qui dépasse. C'est * le bon choix pour une PHOTO de devanture — on ne perd que du ciel et du * trottoir. C'est le mauvais pour un LOGO, qui est fait de marges : les rogner, * c'est couper la marque en deux. * * Et on ne peut pas deviner lequel des deux on a : la vignette d'une fiche * Google est tantôt la devanture, tantôt le logo déposé par le commerçant. Il * n'existe donc pas de réglage juste — il existe un réglage qui ne casse * jamais, et c'est `contain` : un logo garde ses marges, une photo garde ses * bords. Une photo « en entier » dans un bandeau un peu large, c'est une image * qu'on reconnaît ; un logo rogné, c'est une marque qu'on ne reconnaît plus. * * ⚠️ Le fond prend la teinte de l'annuaire, très diluée, plutôt qu'un gris : un * logo sur fond blanc posé sur un bandeau blanc flotte dans le vide. */ .bawai-dir-bulle-photo { display: block; height: 108px; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: var(--ow-fond,#f4f5fb); } .bawai-dir-bulle-corps { padding: 12px 14px 14px; } .bawai-dir-bulle p { margin: 0; } .bawai-dir-bulle-nom { font-size: 15px; font-weight: 800; line-height: 1.25; } /* ⚠️ Catégorie et note sur UNE ligne, en pastilles. Deux repères de trois mots ne méritent pas deux paragraphes — et la note en texte orange sur fond blanc se lisait comme un avertissement plutôt que comme une qualité. */ .bawai-dir-bulle-reperes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px !important; } .bawai-dir-bulle-type, .bawai-dir-bulle-note { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .bawai-dir-bulle-type { background: var(--ow-fond,#f4f5fb); color: var(--ow-texte-2,#4b4f5e); } .bawai-dir-bulle-note { background: var(--ow-attention-fond,#fdf3e0); color: var(--ow-attention-texte,#8a5a06); } .bawai-dir-bulle-note b { font-size: 12px; } .bawai-dir-bulle-note i { font-style: normal; font-weight: 600; opacity: .8; } .bawai-dir-bulle-adr { font-size: 12px; color: var(--ow-texte-2,#4b4f5e); margin-top: 7px !important; line-height: 1.45; } /* ⚠️ Une GRILLE, et non un `flex-wrap` : la forme ne dépend plus de la longueur des mots. « Voir la fiche » prend la ligne, les deux autres se partagent la suivante — avec un seul des deux, il prend toute la largeur. Aucun cas ne laisse un bouton orphelin. */ .bawai-dir-bulle-gestes { display: grid; gap: 6px; margin-top: 12px; } .bawai-dir-bulle-duo { display: grid; grid-template-columns: repeat(auto-fit,minmax(0,1fr)); gap: 6px; } /* ⚠️ 36px de haut et non 44 : dans une bulle de carte, trois boutons au pouce occuperaient plus de place que l'information qu'ils accompagnent. Ils restent au-dessus du seuil confortable pour un lien de texte, et la fiche complète — avec ses vrais boutons — est à un clic. */ .bawai-dir-bulle-geste { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border-radius: var(--ow-r-controle,8px); border: 1px solid var(--ow-bord,#e2e4f3); background: #fff; color: var(--bawai-dir-teinte, var(--ow-bleu,#2450de)); font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; /* Un nom de geste ne se coupe pas en deux lignes dans un bouton de 36 px. ⚠️ Et pas d'`overflow:hidden` ici : sur un conteneur flex, il rognait le libellé au lieu de la boîte — « Itinéraire » s'affichait « nedItin ». */ white-space: nowrap; } .bawai-dir-bulle-geste svg { flex: 0 0 auto; } .bawai-dir-bulle-geste:hover { border-color: var(--bawai-dir-teinte, var(--ow-bleu,#2450de)); } .bawai-dir-bulle-geste.est-plein { background: var(--bawai-dir-teinte, var(--ow-bleu,#2450de)); color: #fff; border-color: transparent; } .bawai-dir-bulle-geste.est-plein:hover { filter: brightness(1.08); } /* Le compteur peut être masqué sans quitter le document : il reste lu par les lecteurs d'écran, qui n'ont que lui pour savoir qu'un filtre a eu un effet. */ .bawai-dir-count--muet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ════════════════════════════════════════════════════════════════════════════ LA LISTE — ce qui se lit avant qu'on clique ---------------------------------------------------------------------------- *Baptiste, 20 octobre : « Rendre la map et la liste plus esthétiques. »* La fiche empilait quatre lignes de texte de poids voisins : nom, catégorie, adresse, note. Rien n'y guidait l'œil, et la catégorie — la seule chose qui distingue une boulangerie d'un garagiste dans une colonne de trente — sortait en bleu, exactement comme un lien. ════════════════════════════════════════════════════════════════════════════ */ /* * ⚠️ `flex: 0 0 auto`, et ce n'est pas de la mise au point : la liste est une * colonne flex à `max-height: 70vh`. Au-delà de cette hauteur, les enfants * d'un conteneur flex RÉTRÉCISSENT par défaut — les huit fiches étaient donc * comprimées à la hauteur de leur nom, et leur adresse, leur note et leur * téléphone DÉBORDAIENT de la boîte sans se faire remarquer, parce que le * débordement était visible. * * Le filet de sélection ci-dessous impose `overflow: hidden`, et le défaut * s'est déclaré d'un coup : huit fiches coupées net après leur catégorie. Il * était là depuis le début — on voyait le texte, il n'était simplement plus * dans sa carte. */ .bawai-dir-card { position: relative; overflow: hidden; flex: 0 0 auto; } /* Le filet de gauche ne se montre qu'à la sélection : posé sur toutes les fiches, il ferait trente traits de couleur dans une colonne. */ .bawai-dir-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ow-bleu,#2450de); opacity: 0; transition: opacity .15s; } .bawai-dir-card.is-active::before { opacity: 1; } .bawai-dir-card.is-active { box-shadow: 0 4px 16px rgba(36, 80, 222, .14); } /* La catégorie devient une PASTILLE : elle se lit d'un coup d'œil en balayant la colonne, et ne se confond plus avec un lien. */ .bawai-dir-type { display: inline-block; margin: 0 0 6px; padding: 3px 10px; background: var(--ow-bleu-fond,#eceeff); color: var(--ow-bleu-sombre,#1b3caf); border-radius: var(--ow-r-pastille,999px); font-size: var(--ow-t-mention,11px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .bawai-dir-thumb { border-radius: var(--ow-r-controle,8px); } .bawai-dir-meta { gap: 6px 12px; } /* Un point entre la note et le téléphone : sans séparateur, « 4,6 (82 avis) 02 40 00 00 01 » se lit comme une seule suite de chiffres. */ .bawai-dir-meta > * + *::before { content: '·'; margin-right: 12px; color: var(--ow-bord,#e2e4f3); font-weight: 400; } /* * ── ⚠️ LA MENTION DE LEAFLET EST DU TEXTE, ET ELLE EST ILLISIBLE ────────── * * Leaflet pose sa mention sur un fond blanc à 70 % d'opacité : le lien sort à * **3,64:1** pour 12 px, sous le seuil de 4,5. C'est le réglage par défaut de * la bibliothèque, donc le défaut est sur tous les annuaires du monde — ce qui * n'en fait pas moins un texte de notre page. * * Il est sorti le jour où le décor a enfin servi Leaflet en local : avant, la * carte n'était jamais rendue, donc cette mention non plus, et l'outil de * contraste ne pouvait pas la voir. Cinq écrans d'un coup. * * ⚠️ Le fond devient opaque plutôt que de forcer une teinte de texte : sous la * mention, il y a une tuile de carte dont on ne connaît pas la couleur, et * assombrir le lien sur un fond inconnu ne garantit rien. */ .bawai-dir .leaflet-control-attribution { background: #fff; color: var(--ow-texte-2,#4b4f5e); padding: 2px 8px; border-radius: var(--ow-r-micro,4px) 0 0 0; } .bawai-dir .leaflet-control-attribution a { color: var(--ow-bleu-sombre,#1b3caf); } /* * ── ⚠️ UN MORCEAU OCCUPE TOUTE SA PLACE ─────────────────────────────────── * * *Baptiste, 20 octobre : « Dissocier la partie "Moteur de recherche" de la * partie "Liste" et la partie "Map" […] et que tout fonctionne ensemble quand * c'est sur la même page. »* * * Le mode en trois morceaux existait depuis le 13 octobre, avec son harnais. * Il n'avait jamais été RENDU : aucun décor ne le posait. Première capture, le * défaut saute aux yeux — la carte occupait la moitié droite d'un bloc à deux * colonnes dont la colonne de gauche était vide, et la liste faisait pareil en * dessous. Chaque morceau héritait de la grille du bloc entier. * * Un morceau n'a qu'un contenu : il prend la largeur que le constructeur lui * donne, et c'est au constructeur de le mettre en colonnes s'il le veut. */ .bawai-dir-partie .bawai-dir-body { grid-template-columns: 1fr !important; } /* ⚠️ Et la carte d'un morceau n'est pas collante : `sticky` n'a de sens que face à une liste qui défile à côté d'elle. Seule dans son bloc, elle se décollait du flux et venait recouvrir le titre suivant. */ .bawai-dir-partie--carte .bawai-dir-map { position: static; } /* ════════════════════════════════════════════════════════════════════════════ LES TROIS FORMES D'UN FILTRE ---------------------------------------------------------------------------- *Baptiste, 20 octobre : « le type de filtre (sélecteur, case, etc.) » et « ok pour le "ou" ».* Un sélecteur ne retient qu'une valeur : c'est sa nature. Des cases et des pastilles n'ont d'intérêt que parce qu'on peut en cocher plusieurs — sinon ce sont des boutons radio déguisés. ════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ `display: block` et non `flex` : une `legend` dans un conteneur flex se place différemment selon les navigateurs, et la place du titre d'un groupe de filtres n'est pas un endroit où accepter trois rendus possibles. */ .bawai-dir-groupe { display: block; border: 0; margin: 0; padding: 0; min-width: 0; } .bawai-dir-groupe legend { display: block; padding: 0; margin: 0 0 6px; font-size: var(--ow-t-commande,12px); font-weight: 700; color: var(--ow-texte-2,#4b4f5e); text-transform: uppercase; letter-spacing: .04em; } .bawai-dir-choix { display: inline-flex; align-items: center; gap: 7px; margin: 0 8px 6px 0; cursor: pointer; font-size: var(--ow-t-lecture,14px); line-height: 1.3; } /* ── Cases : la case reste visible, c'est tout son intérêt ── */ .bawai-dir-groupe--cases .bawai-dir-choix input { width: 17px; height: 17px; accent-color: var(--ow-bleu,#2450de); } /* ── Pastilles : la case disparaît, l'étiquette DEVIENT le bouton ── ⚠️ La case reste dans le document et garde le focus : c'est elle qu'on coche au clavier, et `:focus-visible` doit se voir sur la pastille, sinon on navigue à l'aveugle. */ .bawai-dir-groupe--pastilles .bawai-dir-choix { margin: 0 6px 6px 0; } .bawai-dir-groupe--pastilles .bawai-dir-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); clip-path: inset(50%); } .bawai-dir-groupe--pastilles .bawai-dir-choix span { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border-radius: var(--ow-r-pastille,999px); border: 1px solid var(--ow-bord,#e2e4f3); background: #fff; font-size: var(--ow-t-courant,13px); font-weight: 600; transition: background .12s, border-color .12s, color .12s; } .bawai-dir-groupe--pastilles .bawai-dir-choix:hover span { border-color: var(--ow-texte-3,#6b7280); } .bawai-dir-groupe--pastilles .bawai-dir-choix input:checked + span { background: var(--ow-bleu,#2450de); border-color: transparent; color: #fff; } .bawai-dir-groupe--pastilles .bawai-dir-choix input:focus-visible + span { outline: 2px solid var(--ow-bleu,#2450de); outline-offset: 2px; }