/* Additions to the prototype's stylesheet (site.css, copied as is): real maps,
   real photos, pagination, server-rendered states. */

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; }
.search-msg { margin: 6px 0 0; font-size: 14px; color: var(--text-2); min-height: 0; }
.search-msg:empty { display: none; }
.field-where { position: relative; }
/* The search box stays white in both themes (it sits on the always-dark hero band): give it the
   light tokens back, or its var(--text) turns white on white in dark mode. Same values as :root. */
.search {
  color-scheme: light;
  --surface: #FFFFFF; --grey-light: #F6F8FC; --grey: #DDDFE3;
  --text: #131825; --text-2: #617186; --primary-tint: #E6F1FD; --primary-alpha: rgba(2,102,241,.06);
  color: var(--text);
}

/* POI hero in dark mode: site.css paints it pastel in both themes. Same hues, dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .poi-hero { background: linear-gradient(130deg, #14223A 0%, #1A1B33 25%, #1D1C25 50%, #201C1A 75%, #161B28 100%); }
  :root:not([data-theme="light"]) .poi-hero-foot { background: rgba(19,24,37,.6); }
}
:root[data-theme="dark"] .poi-hero { background: linear-gradient(130deg, #14223A 0%, #1A1B33 25%, #1D1C25 50%, #201C1A 75%, #161B28 100%); }
:root[data-theme="dark"] .poi-hero-foot { background: rgba(19,24,37,.6); }

/* Leaflet map in place of the prototype's SVG one */
.lmap { width: 100%; height: 100%; z-index: 0; }
.map-wrap .lmap + .map-legend { z-index: 500; }
.pm-pin b { display: block; width: 32px; height: 40px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42'%3E%3Cpath d='M16 0C7.2 0 0 7 0 15.8 0 27.7 16 42 16 42s16-14.3 16-26.2C32 7 24.8 0 16 0z' fill='%230266F1' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); transition: transform .15s; transform-origin: 50% 100%; }
.pm-pin.hl b { transform: scale(1.25); filter: hue-rotate(10deg) brightness(.8); }
.pm-pin i { display: block; font: 700 13px/32px Outfit, sans-serif; color: #fff; text-align: center; font-style: normal; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content a { font-weight: 600; color: var(--primary); }

/* Real photos */
.gallery .ph { overflow: hidden; background: var(--grey-light); }
.gallery .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poi-desc { white-space: pre-line; max-width: 75ch; color: var(--text); line-height: 1.6; }
.poi-hero-foot address { font-style: normal; }
.poi-tags a.tag { text-decoration: none; color: inherit; }
/* Category links in the business header: a soft pill on hover instead of a bare link. */
.poi-hero .poi-tags a.tag { padding: 4px 10px; margin: -4px -10px; border-radius: var(--r-circle); transition: background-color .15s, color .15s; }
.poi-hero .poi-tags a.tag + a.tag { margin-left: -4px; }
.poi-hero .poi-tags a.tag:hover { background: var(--primary-tint, #E8F0FE); color: var(--primary); }
/* No blue frame on hovered links (site.css draws one): the tint above, or the chips' grey, is enough. */
.poi-hero a.tag:hover, .nchip-sub:hover, .th-list .nchip-sub:hover { box-shadow: none; }
/* Focus ring for keyboard users only, thin and rounded; a mouse click leaves no frame behind. */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }

/* Categories index: app.js shows the Google categories that fit in the card's first rows */
.th-card:not(.filtering) .th-list a.is-extra.fits:not([hidden]) { display: block; }
.th-more[hidden] { display: none; }
/* One colour for every theme card's "Voir plus" (site.css gives it the theme's colour). */
.th-more { color: var(--primary); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-m); margin: var(--s-l) 0; font-size: 14px; color: var(--text-2); }
.rcard[hidden] { display: none; }

/* ===== Business page ===== */

/* Logo from the Partoo app over the monogram, which stays as the fallback. Same tile: a square logo
   fills it edge to edge (app.js adds .logo-fill), any other shape is centred on white. */
.poi-logo.has-img { overflow: hidden; }
.poi-logo.has-img > svg { display: none; }
.poi-logo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10%; border-radius: calc(var(--r-l) - 4px); background: #fff; }
.poi-logo.logo-fill img { object-fit: cover; padding: 0; }
.poi-logo.has-img > .logo-ico { display: none; }
.logo-ico { display: grid; place-items: center; width: 100%; height: 100%; border-radius: calc(var(--r-l) - 4px); color: #fff; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.18)), var(--cc, #3A4450); }
.logo-ico .icon { width: 48%; height: 48%; stroke-width: 1.5; }
/* Cover photo (the app's main photo, Google's COVER) as a band on top of the hero, the logo straddling
   its lower edge, as in the Partoo app's Business Edit: the photo fills the band (cover, centered). */
.poi-cover-band { height: 200px; background: var(--grey-light); }
.poi-cover-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.poi-hero.has-cover .poi-hero-main { align-items: flex-start; }
.poi-hero.has-cover .poi-logo { margin-top: calc(-52px - var(--s-xl)); }

/* Answer-first summary, FAQ and data freshness */
.qa summary h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.updated { display: flex; align-items: center; gap: var(--s-xs); margin: var(--s-l) 0 0; font-size: 13px; color: var(--text-2); }
.updated .icon { width: 16px; height: 16px; }

/* Exceptional hours, merged into the coming week */
.special-next { display: flex; align-items: flex-start; gap: var(--s-xs); margin: 0 var(--s-s) var(--s-s); padding: var(--s-s); border-radius: var(--r-m); background: rgba(199,119,0,.1); color: #9A5C00; font-weight: 600; font-size: 15px; }
.special-next.is-closed { background: rgba(217,54,62,.1); color: #B4232A; }
.special-next .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.week li.is-special .sl { color: var(--success); font-weight: 600; }
.week li.is-special.is-closed .sl { color: #D9363E; }
.week .wd .sp { flex-basis: 100%; font-size: 13px; font-weight: 400; color: var(--text-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .special-next { color: #FFB547; } :root:not([data-theme="light"]) .special-next.is-closed { color: #FF7A80; }
  :root:not([data-theme="light"]) .week li.is-special .sl { color: #4CD38A; } :root:not([data-theme="light"]) .week li.is-special.is-closed .sl { color: #FF7A80; } }
:root[data-theme="dark"] .special-next { color: #FFB547; } :root[data-theme="dark"] .week li.is-special .sl { color: #4CD38A; }
:root[data-theme="dark"] .special-next.is-closed, :root[data-theme="dark"] .week li.is-special.is-closed .sl { color: #FF7A80; }

/* All photos: a button over the gallery opens them in a dialog */
.gallery { position: relative; }
.ph-more { position: absolute; right: var(--s-s); bottom: var(--s-s); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: var(--r-circle); cursor: pointer; background: rgba(255,255,255,.95); color: var(--blackberry-light); font: 600 14px var(--font); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.ph-more .icon { width: 18px; height: 18px; }
.photos-dlg { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.photos-dlg::backdrop { background: rgba(11,14,22,.7); }
.photos-dlg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-m); padding: var(--s-m) var(--s-l); background: var(--surface); border-bottom: 1px solid var(--grey); }
.photos-dlg-head h2 { margin: 0; font-size: 18px; }
.photos-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--grey-light); color: var(--text); cursor: pointer; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-s); padding: var(--s-l); }
.photos-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); background: var(--grey-light); }

/* Dark mode: the header card is dark (see the top of this file), so its outline buttons go light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .poi-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,.35); }
}
:root[data-theme="dark"] .poi-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,.35); }

/* ===== Listings ===== */
.listing-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s-xs) 0 0; font-size: 15px; color: var(--text-2); }
.listing-rating b { color: var(--text); }
.listing-head .thin { margin-top: var(--s-m); }

/* ===== Language menus: mobile menu pills, footer dropdown (opens upwards, no JS needed) ===== */
.mnav-langs { display: flex; gap: var(--s-xs); margin-top: var(--s-l); }
.mnav-langs a { flex: 1; text-align: center; padding: 10px 0; border-radius: var(--r-circle); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); font-weight: 600; font-size: 14px; text-decoration: none; }
.mnav-langs a:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.mnav-langs a[aria-current] { background: var(--white); border-color: var(--white); color: var(--blackberry-light); }
.lang-dd { position: relative; display: inline-block; }
.lang-dd summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-circle); color: #fff; font-weight: 500; }
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover { border-color: rgba(255,255,255,.55); }
.lang-dd summary .icon { width: 16px; height: 16px; }
.lang-dd[open] summary .icon { transform: rotate(180deg); }
.lang-dd ul { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--blackberry-light); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-m); box-shadow: 0 16px 32px rgba(0,0,0,.35); }
.lang-dd li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); color: rgba(255,255,255,.85); text-decoration: none; }
.lang-dd li a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-dd li a[aria-current] { color: #fff; font-weight: 600; }

/* ===== Layout: denser, and nothing wider than the screen =====
   Grid tracks default to min-content, so one long word (URL, address, category) would widen the page. */
html, body { overflow-x: clip; }
.rcard { grid-template-columns: 32px minmax(0, 1fr); }
.rcard h2, .rcard .meta, .c-txt b, .poi-hero h1, .poi-desc, .pf, .qa summary h3 { overflow-wrap: anywhere; }
.c-txt, .poi-grid > *, .listing > *, .mesh > * { min-width: 0; }
/* Result cards show the number itself; the Call button only where a tap dials (no mouse). */
.rcard .tel { margin: 0 0 4px; font-size: 14px; }
.rcard .tel a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; }
.rcard .tel a:hover { color: var(--primary); }
.rcard .tel svg { width: 14px; height: 14px; color: var(--text-2); }
.pf-tel { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.pf-tel:hover { color: var(--primary); }
@media (hover: hover) and (pointer: fine) { .rcard .acts .call, .poi-actions .call { display: none; } }
.week li { gap: var(--s-s); }
.pro { padding: 56px 0; }
.poi-section { padding-top: 40px; }
.mesh { padding: var(--s-xl) 0 var(--s-xxl); }
.poi-hero { margin-bottom: var(--s-l); }
.poi-grid .map-wrap { height: 480px; }
.hero { padding-bottom: 72px; }
body.is-home .hero { padding-top: 136px; }
/* Home hero fills the first screen, content centered below the header (the paddings stay the minimum). */
body.is-home .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
body.is-home .hero > .container { width: 100%; }
@media (max-width: 1100px) { .poi-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .listing { grid-template-columns: minmax(0, 1fr); }
  .rcard .acts { flex-wrap: wrap; }
  .poi-logo img { border-radius: calc(var(--r-m) - 3px); }
  .logo-ico { border-radius: calc(var(--r-m) - 3px); }
  .poi-cover-band { height: 140px; }
  .poi-hero.has-cover .poi-logo { margin-top: calc(-36px - var(--s-l)); }
  .poi-grid .map-wrap { width: 100%; height: 260px; }
  .photos-grid { grid-template-columns: 1fr 1fr; padding: var(--s-m); gap: var(--s-xs); }
  /* No sideways scrolling on phones: chip rows wrap (long ones are cut by their "+ N" button). */
  .popular, .chips-row, .chips-row.nav-chips { flex-wrap: wrap; overflow-x: visible; margin-right: 0; padding-right: 0; }
  .popular .chip, .nav-chips .nchip { flex-shrink: 1; }
  .pro { padding: 40px 0; }
  .poi-section { padding-top: 32px; }
  .hero { padding-bottom: 48px; }
  body.is-home .hero { padding-top: 96px; }
}

/* ===== Motion =====
   Text never moves or fades on its own: only whole pages, panels and cards do, briefly and
   ease-out, with transform and opacity (no layout shift). All off with reduced motion. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-14px) scale(.8); } 60% { opacity: 1; transform: translateY(2px); } 100% { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress { 0% { transform: scaleX(0); } 40% { transform: scaleX(.55); } 100% { transform: scaleX(.92); } }

/* Page to page: the new page cross-fades over the old one (View Transitions: Chrome, Edge,
   Safari). Header, search bar and footer are captured on their own and stay perfectly still,
   so only the content changes. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.search-band { view-transition-name: search-band; }
.site-footer { view-transition-name: site-footer; }
::view-transition-old(root) { animation: .22s ease-out both fade-out; }
::view-transition-new(root) { animation: .3s ease-out both fade-in; }
::view-transition-group(site-header), ::view-transition-group(search-band), ::view-transition-group(site-footer),
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(search-band), ::view-transition-new(search-band),
::view-transition-old(site-footer), ::view-transition-new(site-footer) { animation: none; }
/* Browsers without View Transitions (Firefox): the content fades in on load. */
@supports not (view-transition-name: none) { main { animation: fade-in .3s ease-out; } }

/* While the next page loads (not prerendered): a thin progress bar under the top edge (app.js). */
.nav-progress { position: fixed; z-index: 1000; inset: env(safe-area-inset-top, 0px) 0 auto; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #0266F1, #8A38F5); opacity: 0; pointer-events: none; }
html.is-navigating .nav-progress { opacity: 1; animation: progress 2.4s var(--ease-out) forwards; }

/* Hover and press feedback */
.btn { transition: background .2s, border-color .2s, color .2s, transform .15s var(--ease-out), box-shadow .2s; }
.btn:active, .ph-more:active, .fchip:active, .nchip:active { transform: scale(.97); }
.cat, .cxc, .country-card, .rcard { transition: border-color .2s, box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.cat-ico, .city-card .icon, .c-go, .gallery .ph img, .ph-more, .lang-dd summary .icon, .qa summary .icon { transition: transform .25s var(--ease-out), box-shadow .2s; }
.mnav-langs a, .lang-dd summary { transition: background .2s, border-color .2s, color .2s; }
@media (hover: hover) {
  .cat:hover, .cxc:hover, .country-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(19,24,37,.10); }
  .rcard:hover { transform: translateY(-2px); }
  .cat:hover .cat-ico { transform: scale(1.08); }
  .city-card:hover .icon, .c-row:hover .c-go { transform: translateX(3px); }
  .gallery .ph:hover img { transform: scale(1.04); }
  .ph-more:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
}

/* Panels that open: menu, suggestions, dialogs */
.mnav:not([hidden]) { animation: drop-in .25s var(--ease-out); }
.mnav-backdrop:not([hidden]) { animation: fade-in .25s ease-out; }
.ac:not([hidden]) { animation: drop-in .18s var(--ease-out); }
.lang-dd[open] ul { animation: fade-in .18s ease-out; }
.photos-dlg[open] { animation: pop-in .25s var(--ease-out); }
.photos-dlg[open]::backdrop { animation: fade-in .25s ease-out; }
.poi-logo img, .photos-grid img { animation: fade-in .4s ease-out; }
.listing.show-map .map-wrap { animation: fade-in .25s ease-out; }
.pm-pin b { transition: transform .2s var(--ease-out), filter .2s; animation: pin-drop .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
/* Search button while the results load: its icon becomes a spinner */
.search.is-loading [type=submit] .icon { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.search.is-loading [type=submit] .icon use { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ===== Cities index, A–Z: a letter tile, then compact city tiles with their count ===== */
.az-index { margin-top: var(--s-xxl); }
.az-title { font-size: 28px; margin: 0 0 var(--s-m); }
/* The letter bar follows the scroll; jumping to a letter lands below it. */
.az-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin: 0 0 var(--s-l); padding: var(--s-s) 0; background: var(--surface); border-bottom: 1px solid var(--grey); }
.az-bar .nchip { min-width: 36px; justify-content: center; padding: 7px 10px; }
/* The mobile edge fade of chip rows would also fade this bar's background, letting the list show through. */
.az-bar.nav-chips { -webkit-mask-image: none; mask-image: none; }
.az-block { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-l); padding: var(--s-l) 0; border-bottom: 1px solid var(--grey); scroll-margin-top: 80px; }
.az-block:last-child { border-bottom: 0; }
.az-letter { position: sticky; top: 80px; align-self: start; display: grid; place-items: center; width: 56px; height: 56px; margin: 0; border-radius: var(--r-m); background: var(--primary-tint); color: var(--primary); font-size: 26px; font-weight: 700; }
.az-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-xs); list-style: none; margin: 0; padding: 0; }
.az-grid a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); min-height: 44px; padding: 10px 14px; border-radius: var(--r-m); background: var(--grey-light); color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; transition: background .15s, color .15s; }
.az-grid a:hover { background: var(--primary-tint); color: var(--primary); }
.az-name { min-width: 0; overflow-wrap: anywhere; }
.az-n { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.az-grid a:hover .az-n { color: var(--primary); }
@media (max-width: 860px) {
  .az-title { font-size: 22px; }
  .az-block { grid-template-columns: minmax(0, 1fr); gap: var(--s-s); padding: var(--s-m) 0; }
  .az-letter { position: static; width: 44px; height: 44px; font-size: 20px; }
  .az-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 480px) { .az-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; } .az-grid a { min-height: 40px; padding: 8px 14px; } }

/* Anchor jumps (A–Z letters, skip link…) scroll smoothly, unless the visitor asked for less motion. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ===== Map pin popups ===== */
.pm-popup .leaflet-popup-content-wrapper { border-radius: var(--r-l); padding: 0; box-shadow: 0 12px 32px rgba(19,24,37,.22); }
.pm-popup .leaflet-popup-content { margin: 0; width: auto !important; min-width: 240px; font: 14px/1.4 var(--font); color: #131825; }
.pm-popup .leaflet-popup-close-button { top: 8px; right: 8px; }
.pp { display: grid; gap: 6px; padding: 14px 16px; }
.pp-head { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding-right: 16px; }
.pp-title { display: grid; gap: 2px; min-width: 0; }
.pp-head strong { font-size: 15px; line-height: 1.25; }
.pp-title small { color: #617186; font-size: 13px; }
.pp-head:hover strong { color: var(--primary); }
.pp-logo { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-s); overflow: hidden; box-shadow: 0 0 0 1px #DDDFE3; background: #fff; }
.pp-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pp-mono { display: grid; place-items: center; width: 100%; height: 100%; background: var(--cc, #3A4450); color: #fff; font-weight: 700; font-size: 16px; }
.pp-rating { display: flex; align-items: center; gap: 6px; color: #617186; }
.pp-rating b { color: #131825; }
.pp-stars { position: relative; display: inline-block; width: 70px; height: 13px; background: 0 0 / 14px 13px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23DDDFE3'/%3E%3C/svg%3E"); }
.pp-stars i { position: absolute; inset: 0 auto 0 0; background: 0 0 / 14px 13px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23F5B400'/%3E%3C/svg%3E"); }
.pp .pp-addr { display: flex; gap: 6px; margin: 0; color: #617186; }  /* beats Leaflet's popup p margins */
.pp-addr .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.pp-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary); text-decoration: none; }
.pp-phone .icon { width: 16px; height: 16px; }

/* ===== Brand filter (listing) ===== */

/* Header "Contactez-nous" (as in the footer); in the mobile menu below 1100 px */
.mnav-contact { width: 100%; margin-top: var(--s-l); }
@media (min-width: 1101px) { .mnav-contact { display: none; } }
.pp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #617186; }
.pp-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #9AA4B2; }
.pp-status b { color: #617186; }
.pp-status.open .dot { background: #2E9E5B; } .pp-status.open b { color: #1F7A44; }
.pp-status.soon .dot { background: #E08A00; } .pp-status.soon b { color: #B56F00; }
.pp-status.closed .dot { background: #D9363E; } .pp-status.closed b { color: #B4232A; }
.pp-acts { display: flex; gap: 6px; margin-top: 4px; }
.pp-act { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-m); background: #F0F5FE; color: var(--primary); font-size: 12px; font-weight: 600; text-decoration: none; transition: background .2s; }
.pp-act:hover { background: #E1ECFD; }
.pp-act .icon { width: 18px; height: 18px; }
.pp-more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; padding: 6px; font-weight: 600; color: var(--primary); text-decoration: none; }
.pp-more .icon { width: 16px; height: 16px; }
.pp-more:hover { text-decoration: underline; }

/* Categories page: room between the intro and the "Most searched" heading. */
.index-head + .section-head { margin-top: var(--s-l); }

/* ===== Brand filter: a dropdown of links (a bottom sheet on phones) ===== */
.bdd { position: relative; }
.bdd summary { list-style: none; }
.bdd summary::-webkit-details-marker { display: none; }
.bdd summary > .icon:last-child { width: 16px; height: 16px; color: var(--text-2); transition: transform .2s; }
.bdd[open] summary > .icon:last-child { transform: rotate(180deg); }
.bdd[open]:not(.on) summary { border-color: var(--grey); background: var(--grey-light); color: var(--text); }
.bdd-v { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdd.on summary { background: var(--primary-tint); border-color: var(--primary-tint); color: var(--primary); font-weight: 600; }
.bdd.on summary > .icon:last-child { color: var(--primary); }
.bdd-panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 300px; max-width: calc(100vw - 32px); padding: 8px; background: var(--surface); border: 1px solid var(--grey); border-radius: 16px; box-shadow: 0 16px 40px rgba(19,24,37,.14); animation: bdd-in .14s ease-out; }
@keyframes bdd-in { from { opacity: 0; transform: translateY(-4px); } }
.bdd-search { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 12px; border-radius: 10px; background: var(--grey-light); }
.bdd-search .icon { width: 16px; height: 16px; color: var(--text-2); }
.bdd-search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.bdd-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.bdd-list li[hidden] { display: none; }
.bdd-list a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--text); text-decoration: none; }
.bdd-list a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdd-list small { color: var(--text-2); font-variant-numeric: tabular-nums; }
.bdd-list .icon { width: 16px; height: 16px; color: var(--primary); visibility: hidden; }
.bdd-list a:hover { background: var(--grey-light); }
.bdd-list a[aria-current] { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.bdd-list a[aria-current] small { color: var(--primary); }
.bdd-list a[aria-current] .icon { visibility: visible; }
.bdd-clear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -4px; border-radius: 50%; color: var(--text-2); }
.bdd-clear:hover { background: var(--grey-light); color: var(--text); }
.bdd-clear .icon { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .bdd-panel { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; border-radius: 20px; }
  .bdd-list { max-height: 55vh; }
  .bdd[open]::before { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(19,24,37,.35); }
}

/* ===== Info notes (no exact result, few places here): a calm card, not a blue banner ===== */
.thin { align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--grey); border-radius: 16px; box-shadow: 0 1px 2px rgba(19,24,37,.04); font-size: 14px; color: var(--text-2); }
.thin > .icon { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--primary-tint); color: var(--primary); }
.thin p { margin: 0; }
.thin p:first-child { font-size: 15px; font-weight: 600; color: var(--text); }
.thin .links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.thin .links a { margin: 0; padding: 5px 12px; border-radius: var(--r-circle); background: var(--primary-tint); color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.thin .links a:hover { background: var(--primary); color: #fff; }

/* ===== Brands: index cards, brand page header ===== */
.brand-grid { list-style: none; margin: var(--s-m) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.brand-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--grey); border-radius: 16px; color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.brand-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19,24,37,.08); }
.brand-card > .icon { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--text-2); transition: transform .2s; }
.brand-card:hover > .icon { transform: translateX(3px); color: var(--primary); }
.bc-txt { display: flex; flex-direction: column; min-width: 0; }
.bc-txt strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-txt small { font-size: 13px; color: var(--text-2); }
.bl-logo { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--grey); border-radius: 12px; background: var(--primary-tint); color: var(--primary); font-size: 20px; font-weight: 700; }
.bl-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bl-logo.has-img > span { visibility: hidden; }
.brand-head { display: flex; align-items: center; gap: 16px; }
.brand-head .bl-logo { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }
.brand-head h1 { margin: 0; }
.nchip-n { margin-left: 6px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ===== Cookie choice: a small card, bottom left (bottom sheet on phones); never blocks the page ===== */
.cookie { position: fixed; z-index: 60; left: 24px; bottom: 24px; width: 380px; max-width: calc(100vw - 32px); padding: 18px 20px; background: var(--surface); color: var(--text); border: 1px solid var(--grey); border-radius: 18px; box-shadow: 0 18px 48px rgba(19,24,37,.18); font-size: 14px; line-height: 1.5; animation: cookie-in .25s ease-out; }
.cookie[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
.cookie p { margin: 0 0 12px; color: var(--text-2); }
.cookie .cookie-t { margin-bottom: 4px; font-size: 16px; font-weight: 700; color: var(--text); }
.cookie a { color: var(--primary); font-weight: 600; }
.cookie-acts { display: flex; gap: 8px; justify-content: flex-end; }
.cookie-acts .btn { flex: 1; }
.footer-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.footer-link:hover { text-decoration: underline; }
@media (max-width: 560px) { .cookie { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; } }

/* ===== Regions and departments: index cards, chips on the cities page ===== */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: var(--s-m); }
.region-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--grey); border-radius: 16px; }
.region-card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 18px; }
.region-card h2 a { color: var(--text); text-decoration: none; }
.region-card h2 a:hover { color: var(--primary); }
.region-card h2 small { font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.region-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.region-card li a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; }
.region-card li a:hover { background: var(--primary-tint); color: var(--primary); }
.region-card em { font-style: normal; color: var(--text-2); font-size: 12px; margin-left: 4px; }
.region-card small { color: var(--text-2); font-variant-numeric: tabular-nums; }
.region-chips { list-style: none; margin: var(--s-s) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.region-chips .nchip { text-decoration: none; }
.ac-kind { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-2); }

/* ===== Photos: click to view full screen ===== */
.gallery button.ph, .photos-grid .ph-btn { padding: 0; border: 0; background: none; font: inherit; cursor: zoom-in; }
.photos-grid .ph-btn { display: block; border-radius: var(--r-m); overflow: hidden; }
.photos-grid .ph-btn img { display: block; transition: transform .25s var(--ease-out); }
.photos-grid .ph-btn:hover img { transform: scale(1.03); }
button.poi-cover-band { display: block; width: 100%; padding: 0; border: 0; font: inherit; cursor: zoom-in; }
/* A broken photo: a placeholder (camera icon) in its place, so the counts hold */
.gallery .ph.is-broken, .photos-grid .ph-btn.is-broken { display: grid; place-items: center; background: var(--grey-light); color: var(--text-2); cursor: default; }
.photos-grid .ph-btn.is-broken { aspect-ratio: 4 / 3; }
.ph.is-broken img, .ph-btn.is-broken img { display: none; }
.ph.is-broken .icon, .ph-btn.is-broken .icon { width: 32px; height: 32px; }
.lb-broken { grid-area: 1 / 1; display: none; color: rgba(255,255,255,.5); }
.lb-broken .icon { width: 48px; height: 48px; }
.lightbox.is-broken .lb-img { display: none; }
.lightbox.is-broken .lb-broken { display: block; }
/* An open photo dialog holds the page still: no scrolling behind it, nor past its own ends */
html:has(.photos-dlg[open], .lightbox[open]) { overflow: hidden; }
@media (max-width: 860px) { .gallery .ph:nth-child(n+4) { display: none; } }  /* hidden by site.css; a broken one stays hidden */
.photos-dlg, .lightbox { overscroll-behavior: contain; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,10,16,.95); color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(8,10,16,.95); }
.lightbox[open] { display: grid; place-items: center; animation: lb-fade .2s ease-out; }
@keyframes lb-fade { from { opacity: 0; } }
.lb-img { max-width: min(92vw, 1600px); max-height: 84vh; object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none; }
.lb-btn { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background-color .15s; }
.lb-btn:hover { background: rgba(255,255,255,.24); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-prev .icon { transform: rotate(90deg); } .lb-next .icon { transform: rotate(-90deg); }
.lb-count { position: fixed; left: 50%; bottom: 20px; margin: 0; transform: translateX(-50%); font-size: 14px; color: rgba(255,255,255,.8); }
@media (max-width: 560px) {
  .lb-img { max-width: 100vw; max-height: 74vh; border-radius: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
  .lb-count { bottom: 26px; }
}

/* Chip rows scroll sideways on mobile: their screen-reader text (.sr-only, absolute) must stay
   inside, or it widens the page (Chrome on Android then zooms the page out). */
.nav-chips { position: relative; }

/* A card without opening hours keeps its buttons on the right */
.rcard .acts { margin-left: auto; }

/* Long business names: a smaller title rather than a wall of text */
.poi-hero h1.is-long { font-size: 30px; line-height: 1.15; }
@media (max-width: 860px) { .poi-hero h1.is-long { font-size: 22px; line-height: 1.2; } }

/* Nothing found: no map, the message takes the full width */
.listing.no-map { grid-template-columns: minmax(0, 1fr); }

/* Maps: "you are here" */
.pm-me { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(2,102,241,.22), 0 1px 4px rgba(0,0,0,.3); }

/* ===== 404: the home hero, a lost pin, the closest pages that exist ===== */
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-xl); align-items: center; }
.nf-art { order: 2; width: 100%; height: auto; overflow: visible; }
.nf-trail { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; }
.nf-4 { font: 700 150px/1 Outfit, sans-serif; fill: #fff; text-anchor: middle; }
.nf-shadow { fill: rgba(0,0,0,.35); transform-origin: 180px 190px; }
.nf-pin, .nf-shadow { animation: nf-bob 3.2s ease-in-out infinite; }
.nf-shadow { animation-name: nf-shadow; }
@keyframes nf-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes nf-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.75); opacity: .6; } }
.nf-pin { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .nf-pin, .nf-shadow { animation: none; } }
.nf-hero .hero-lead { margin-bottom: var(--s-xl); }
.nf-home { display: inline-flex; align-items: center; gap: var(--s-xs); margin-top: var(--s-l); color: rgba(255,255,255,.8); font-size: 14px; font-weight: 500; }
.nf-home:hover { color: #fff; }
.nf-home .icon { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-m); }
  .nf-art { order: 0; max-width: 240px; margin: 0 auto; }
}
.nf-hero + .block { padding-bottom: 96px; }

/* "Search this area": a pill at the top of the map once the visitor has moved it */
.map-zone { position: absolute; z-index: 600; top: var(--s-s); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--r-circle); background: var(--surface); color: var(--primary); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(19,24,37,.18); cursor: pointer; animation: zone-in .18s ease-out; }
.map-zone[hidden] { display: none; }
.map-zone:hover { background: var(--primary); color: #fff; }
.map-zone .icon { width: 16px; height: 16px; }
.map-zone.is-loading { opacity: .7; pointer-events: none; }
@keyframes zone-in { from { opacity: 0; transform: translate(-50%, -6px); } }

/* Hero: its colour blobs (site.css's gradients, same sizes and colours) drift very slowly. Their
   positions are registered custom properties, so they animate; browsers without @property just
   keep the values below. */
@property --hb1x { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --hb1y { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --hb2x { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --hb2y { syntax: '<percentage>'; inherits: false; initial-value: 26%; }
@property --hb3x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --hb3y { syntax: '<percentage>'; inherits: false; initial-value: 115%; }
@property --hb4x { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --hb4y { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
.hero {
  --hb1x: 12%; --hb1y: 18%; --hb2x: 88%; --hb2y: 26%; --hb3x: 50%; --hb3y: 115%; --hb4x: 70%; --hb4y: 85%;
  background:
    radial-gradient(620px 420px at var(--hb1x) var(--hb1y), rgba(2,102,241,.38), transparent 70%),
    radial-gradient(520px 380px at var(--hb2x) var(--hb2y), rgba(138,56,245,.30), transparent 70%),
    radial-gradient(760px 420px at var(--hb3x) var(--hb3y), rgba(3,143,255,.28), transparent 70%),
    radial-gradient(360px 260px at var(--hb4x) var(--hb4y), rgba(64,219,162,.12), transparent 70%),
    linear-gradient(180deg, var(--blackberry-light) 0%, #161C2C 100%);
  animation: hero-blobs 10s ease-in-out infinite alternate;
}
@keyframes hero-blobs {
  0% { --hb1x: 12%; --hb1y: 18%; --hb2x: 88%; --hb2y: 26%; --hb3x: 50%; --hb3y: 115%; --hb4x: 70%; --hb4y: 85%; }
  50% { --hb1x: 21%; --hb1y: 28%; --hb2x: 79%; --hb2y: 16%; --hb3x: 43%; --hb3y: 107%; --hb4x: 61%; --hb4y: 77%; }
  100% { --hb1x: 8%; --hb1y: 31%; --hb2x: 91%; --hb2y: 36%; --hb3x: 57%; --hb3y: 111%; --hb4x: 77%; --hb4y: 91%; }
}
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } }

/* Theme toggle (header): light ↔ dark. The icon shows the theme in use: <html data-theme> once the
   visitor picked one (set before first paint by base.html), the OS setting until then. */
.theme-btn { display: inline-flex; background: none; border: 0; color: var(--white); padding: var(--s-xs); cursor: pointer; border-radius: var(--r-s); }
.theme-btn:hover { background: rgba(255,255,255,.08); }
.theme-btn .icon { width: 20px; height: 20px; display: none; }
:root[data-theme="light"] .theme-btn .ti-light, :root[data-theme="dark"] .theme-btn .ti-dark { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-btn .ti-light { display: block; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-btn .ti-dark { display: block; } }
@media (max-width: 860px) { .header-actions { gap: var(--s-xxs); } }

/* Regulated activities (app/regulated.py) and the "how the directory works" page. */
.notice { display: flex; margin-top: var(--s-m); }
.notice p { margin: 0; }
.notice p + p { margin-top: 4px; }
.notice a { color: var(--primary); font-weight: 600; }
.rank-note { margin-left: auto; font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.rating-src { font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.about section { max-width: 760px; margin-top: var(--s-xl); }
.about h2 { margin: 0 0 var(--s-s); font-size: 20px; }
.about p { margin: 0 0 var(--s-s); color: var(--text-2); line-height: 1.6; }
@media (max-width: 560px) { .rank-note { margin-left: 0; flex-basis: 100%; } }