/* Carte des agences : hauteur pilotée par le shortcode, palette du kit global. */ .tv-ag-carte { width: 100%; } .tv-ag-toile { width: 100%; height: var(--tv-ag-h, 458px); background: var(--e-global-color-e2e2e200, #e2e2e2); z-index: 0; /* sous les rails fixes et l'en-tête */ } @media (max-width: 767px) { .tv-ag-toile { height: var(--tv-ag-h-mobile, 360px); } } /* Fond de plan clair, retour Podium du 06/09 : « Map : fond blanc ». Le filtre ne touche que les TUILES ; les épingles, les bulles et la mention de crédit vivent dans d'autres couches et gardent leurs couleurs. Le style visé est celui de la maquette (nœud Figma 750:356) : fond blanc, routes fines grises, libellés noirs. C'est une famille de tuiles « light / Positron » que nous ne pouvons pas servir sans clé d'API. Décision du 07/09 : on reste sans clé, donc on approche au filtre. NE PAS REMETTRE grayscale(1) NI UN CONTRASTE ÉLEVÉ. Essayé le 07/09, puis retiré le 08/09 : la mer et la terre ne se distinguent presque pas par la luminance, elles se distinguent par la TEINTE. Relevé sur les tuiles brutes : Atlantique 170,211,223 (bleu) luminance 200 intérieur France 237,240,213 (beige) luminance 236 36 points d'écart seulement. `grayscale(1)` jette la teinte, seul indice fort, et `contrast(1.4)` écrête ce qui reste : les deux ressortaient à 255,255,255. Résultat, plus de littoral, plus de frontières, plus de régions reconnaissables, sur une carte dont c'est tout l'objet. Le réglage retenu garde donc un quart de la saturation, ce qui suffit à laisser la mer bleutée, et monte la luminosité plutôt que le contraste pour blanchir les terres sans écrêter. Mesuré sur la bande : maquette moyenne 246, médiane 255 réglage écarté (grayscale/1.4) moyenne 249, médiane 255, mer = terre ce réglage moyenne 242, médiane 248, mer 241 / terre 255 La maquette montre Lyon à l'échelle de la ville, sans mer ni frontière : c'est pourquoi le premier réglage y semblait juste et se cassait ici, où la carte s'ouvre sur toute la France et ses voisins. */ .tv-ag-carte .leaflet-tile-pane { filter: saturate(.25) brightness(1.18) contrast(1.02); } /* Épingle : le divIcon ne mesure rien, c'est le bouton qui se place sur le point. */ .tv-ag-pin { pointer-events: none; } .tv-ag-pin .tv-ag-pin__btn { position: absolute; transform: translate(-50%, -100%); /* la pointe de l'épingle sur la coordonnée */ width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; appearance: none; line-height: 0; cursor: pointer; pointer-events: auto; transition: scale .2s ease; } .tv-ag-pin .tv-ag-pin__btn:hover { scale: 1.08; background: none; } /* TROIS classes, et ce n'est pas de la coquetterie : Leaflet pose `.leaflet-container .leaflet-marker-pane img { width: auto }`, spécificité 0-2-1, sur toute image de marqueur. Une règle à deux classes perd, la largeur demandée n'arrive jamais, et un SVG sans ratio intrinsèque s'étire sur toute la largeur du conteneur (rectangle rouge, vécu ici le 31/08). */ .tv-ag-toile .tv-ag-pin .tv-ag-pin__img { display: block; width: 46px; height: 46px; max-width: none; } .tv-ag-pin .tv-ag-pin__btn:focus-visible { outline: 3px solid var(--e-global-color-accent, #ea1825); outline-offset: 3px; } /* Bulle d'information */ .tv-ag-popup .leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 6px 24px rgba(0,0,0,.18); } .tv-ag-popup .leaflet-popup-content { margin: 16px 18px; } .tv-ag-bulle { display: flex; flex-direction: column; gap: 6px; } /* DEUX RÈGLES DE LEAFLET À BATTRE, retour Podium du 06/09 « trop d'espace blanc ». Sa feuille pose « .leaflet-popup-content p { margin: 18px 0 } » et « .leaflet-container a { color: #0078A8 } », deux sélecteurs à 0-1-1 qui passaient devant nos classes simples à 0-1-0. Mesuré avant correction : 28,6 px de marge sous le nom, 16,9 px sous la zone, 18,2 px sous l'adresse, et un téléphone en bleu de lien par défaut, pour une bulle de 309 px de haut. Le préfixe `.tv-ag-popup` porte nos règles à 0-2-1 et rend la main au `gap` du conteneur, qui est le seul à devoir décider de l'espacement. */ .tv-ag-popup .tv-ag-bulle p { margin: 0; } .tv-ag-popup .tv-ag-bulle a { color: var(--e-global-color-text, #000); } .tv-ag-popup .tv-ag-bulle__site { color: var(--e-global-color-accent, #ea1825); } /* Logo de la filiale, en tête de bulle. Hauteur bornée plutôt que largeur fixe : les logos vont du carré (220 x 210) au bandeau (2560 x 1084), et seule une borne sur les deux côtés les fait tenir sur une ligne commune. `align-self` est indispensable : la bulle est un flex en colonne, donc en `stretch` par défaut, et le logo s'étirait sur toute la largeur (mesuré à 155 px pour un carré de 220 x 210). Le préfixe `.tv-ag-popup` est là pour la même raison que plus haut, passer devant les règles d'image de Leaflet. */ .tv-ag-popup .tv-ag-bulle__logo { align-self: flex-start; display: block; width: auto; height: auto; max-width: 120px; max-height: 60px; object-fit: contain; object-position: left center; margin-bottom: 2px; } .tv-ag-bulle:focus { outline: none; } .tv-ag-bulle__nom { margin: 0; font-size: 22px; line-height: 1.15; text-transform: uppercase; font-family: var(--e-global-typography-primary-font-family, inherit); color: var(--e-global-color-primary, #000); } .tv-ag-bulle__zone { margin: 0; font-size: 13px; color: #6b6b6b; } .tv-ag-bulle__adresse { margin: 0; font-size: 14px; line-height: 1.45; } .tv-ag-bulle__lien { font-size: 14px; color: var(--e-global-color-text, #000); text-decoration: none; } .tv-ag-bulle__lien:hover { text-decoration: underline; } .tv-ag-bulle__site { margin-top: 6px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--e-global-color-accent, #ea1825); text-decoration: none; } .tv-ag-bulle__site:hover { text-decoration: underline; } /* Liste de repli : visible tant que la carte n'est pas debout. */ .tv-ag-liste[hidden] { display: none; } .tv-ag-liste { list-style: none; margin: 0; padding: 32px 5%; display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tv-ag-liste__item { display: flex; flex-direction: column; gap: 4px; } .tv-ag-liste__nom { font-size: 18px; text-transform: uppercase; } .tv-ag-liste__zone, .tv-ag-liste__adresse { font-size: 14px; color: #6b6b6b; } .tv-ag-liste__lien { font-size: 14px; color: inherit; } .tv-ag-liste__site { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--e-global-color-accent, #ea1825); } /* Intitulé réservé aux lecteurs d'écran. */ .tv-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Horaires et lien vers le site propre de l’agence. */ .tv-ag-bulle__horaires { margin: 0; font-size: 13px; color: #6b6b6b; } .tv-ag-liste__horaires { font-size: 13px; color: #6b6b6b; } .tv-ag-liste__site-web { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--e-global-color-accent, #ea1825); }