TypeScript 87.7%
CSS 12.3%
1/*2 * Author: Simon-Pierre Boucher3 * Contact: contact@spboucher.ai4 * Project: Groupe Ka / Ka Maps5 *6 * Framework chrome styles, themed per app via CSS custom properties.7 * Apps set these on the .ka-map container (or an ancestor):8 * --ka-accent app accent color9 * --ka-on-accent text on accent10 * --ka-surface control surface11 * --ka-ink primary text12 * --ka-line border color13 * --ka-radius control radius14 * --ka-shadow control shadow15 * --ka-font UI font stack16 */1718.ka-map {19 --ka-accent: #141814;20 --ka-on-accent: #ffffff;21 --ka-surface: #ffffff;22 --ka-ink: #141814;23 --ka-line: rgba(20, 24, 20, 0.85);24 --ka-radius: 8px;25 --ka-shadow: 4px 4px 0 rgba(20, 24, 20, 0.18);26 --ka-font: system-ui, sans-serif;27 font-family: var(--ka-font);28}2930.ka-map-canvas {31 outline: none;32}3334/* ---- Search this area ---- */35.ka-search-area {36 position: absolute;37 top: 12px;38 left: 50%;39 transform: translateX(-50%);40 z-index: 10;41 display: flex;42 flex-direction: column;43 align-items: center;44 gap: 6px;45 pointer-events: none;46}4748.ka-search-area-btn {49 pointer-events: auto;50 border: 1.5px solid var(--ka-line);51 background: var(--ka-accent);52 color: var(--ka-on-accent);53 font: 600 13px/1 var(--ka-font);54 padding: 10px 16px;55 border-radius: 999px;56 box-shadow: var(--ka-shadow);57 cursor: pointer;58 min-height: 40px;59}6061.ka-search-area-btn:active {62 transform: translate(2px, 2px);63 box-shadow: none;64}6566.ka-search-area-btn:disabled {67 opacity: 0.7;68 cursor: default;69}7071.ka-search-area-auto {72 pointer-events: auto;73 display: inline-flex;74 align-items: center;75 gap: 6px;76 background: var(--ka-surface);77 color: var(--ka-ink);78 border: 1px solid var(--ka-line);79 border-radius: 999px;80 padding: 5px 10px;81 font: 500 11px/1 var(--ka-font);82 cursor: pointer;83 user-select: none;84}8586.ka-search-area-auto input {87 accent-color: var(--ka-accent);88 margin: 0;89}9091/* ---- Loading / count / empty ---- */92.ka-loading {93 position: absolute;94 bottom: 14px;95 left: 50%;96 transform: translateX(-50%);97 z-index: 10;98 display: inline-flex;99 align-items: center;100 gap: 8px;101 background: var(--ka-surface);102 color: var(--ka-ink);103 border: 1.5px solid var(--ka-line);104 border-radius: 999px;105 padding: 7px 14px;106 font: 500 12px/1 var(--ka-font);107 box-shadow: var(--ka-shadow);108}109110.ka-loading-dot {111 width: 8px;112 height: 8px;113 border-radius: 50%;114 background: var(--ka-accent);115 animation: ka-pulse 1.2s ease-in-out infinite;116}117118@keyframes ka-pulse {119 0%,120 100% {121 opacity: 1;122 transform: scale(1);123 }124 50% {125 opacity: 0.35;126 transform: scale(0.7);127 }128}129130@media (prefers-reduced-motion: reduce) {131 .ka-loading-dot {132 animation: none;133 }134}135136.ka-count {137 position: absolute;138 bottom: 14px;139 left: 14px;140 z-index: 9;141 background: var(--ka-surface);142 color: var(--ka-ink);143 border: 1px solid var(--ka-line);144 border-radius: 999px;145 padding: 6px 12px;146 font: 600 11px/1 var(--ka-font);147}148149.ka-empty {150 position: absolute;151 top: 50%;152 left: 50%;153 transform: translate(-50%, -50%);154 z-index: 9;155 display: flex;156 flex-direction: column;157 gap: 4px;158 text-align: center;159 background: var(--ka-surface);160 color: var(--ka-ink);161 border: 1.5px solid var(--ka-line);162 border-radius: var(--ka-radius);163 padding: 18px 22px;164 font: 400 13px/1.5 var(--ka-font);165 box-shadow: var(--ka-shadow);166 max-width: 320px;167}168169/* ---- Locate ---- */170.ka-locate {171 position: absolute;172 top: 12px;173 right: 52px;174 z-index: 10;175 border: 1.5px solid var(--ka-line);176 background: var(--ka-surface);177 color: var(--ka-ink);178 font: 600 12px/1 var(--ka-font);179 padding: 9px 13px;180 border-radius: 999px;181 cursor: pointer;182 min-height: 40px;183}184185/* ---- Preview: desktop panel / mobile bottom sheet ---- */186.ka-preview {187 z-index: 20;188 background: var(--ka-surface);189 border: 1.5px solid var(--ka-line);190 box-shadow: var(--ka-shadow);191}192193.ka-preview-panel {194 position: absolute;195 top: 14px;196 left: 14px;197 width: 290px;198 max-width: calc(100% - 28px);199 border-radius: var(--ka-radius);200 overflow: hidden;201}202203.ka-preview-sheet {204 position: absolute;205 left: 0;206 right: 0;207 bottom: 0;208 border-radius: 14px 14px 0 0;209 border-bottom: none;210 padding-bottom: env(safe-area-inset-bottom);211 animation: ka-sheet-in 0.22s ease-out;212}213214@keyframes ka-sheet-in {215 from {216 transform: translateY(24px);217 opacity: 0;218 }219 to {220 transform: translateY(0);221 opacity: 1;222 }223}224225@media (prefers-reduced-motion: reduce) {226 .ka-preview-sheet {227 animation: none;228 }229}230231.ka-preview-close {232 position: absolute;233 top: 6px;234 right: 6px;235 z-index: 2;236 width: 30px;237 height: 30px;238 border-radius: 50%;239 border: 1px solid var(--ka-line);240 background: var(--ka-surface);241 color: var(--ka-ink);242 font: 600 16px/1 var(--ka-font);243 cursor: pointer;244}245246/* ---- MapLibre control skinning (no default-looking buttons) ---- */247.ka-map .mapboxgl-ctrl-group {248 border-radius: var(--ka-radius);249 border: 1.5px solid var(--ka-line);250 box-shadow: var(--ka-shadow);251 overflow: hidden;252 background: var(--ka-surface);253}254255.ka-map .mapboxgl-ctrl-group button {256 background: var(--ka-surface);257 width: 34px;258 height: 34px;259}260261.ka-map .mapboxgl-ctrl-group button + button {262 border-top: 1px solid var(--ka-line);263}264265.ka-map .mapboxgl-ctrl-attrib {266 font: 400 10px/1.4 var(--ka-font);267 background: color-mix(in srgb, var(--ka-surface) 85%, transparent);268 border-radius: 6px 0 0 0;269}270271/* ---- Groupe Ka brand badge ---- */272.ka-brand {273 position: absolute;274 bottom: 14px;275 right: 14px;276 z-index: 9;277 display: flex;278 flex-direction: column;279 align-items: flex-end;280 gap: 1px;281 background: var(--ka-surface);282 color: var(--ka-ink);283 border: 1.5px solid var(--ka-line);284 border-radius: var(--ka-radius);285 padding: 6px 10px;286 pointer-events: none;287 box-shadow: var(--ka-shadow);288}289290.ka-brand-name {291 font: 700 11px/1.2 var(--ka-font);292 letter-spacing: 0.02em;293}294295.ka-brand-sub {296 font: 600 8.5px/1.2 var(--ka-font);297 text-transform: uppercase;298 letter-spacing: 0.12em;299 opacity: 0.6;300}301302/* attribution slides left of the badge so both stay readable */303.ka-map .mapboxgl-ctrl-bottom-right {304 right: 0;305 bottom: 58px;306}307308/* ---- 3D tilt toggle ---- */309.ka-3d {310 position: absolute;311 top: 96px;312 right: 10px;313 z-index: 10;314 width: 38px;315 height: 38px;316 border: 1.5px solid var(--ka-line);317 border-radius: var(--ka-radius);318 background: var(--ka-surface);319 color: var(--ka-ink);320 font: 700 12px/1 var(--ka-font);321 cursor: pointer;322 box-shadow: var(--ka-shadow);323}324325.ka-3d.on {326 background: var(--ka-accent);327 color: var(--ka-on-accent);328}329330/* ---- Dessiner une zone (Ka Draw) ---- */331.ka-draw-btn {332 position: absolute;333 top: 12px;334 left: 12px;335 z-index: 10;336 border: 1.5px solid var(--ka-line);337 background: var(--ka-surface);338 color: var(--ka-ink);339 font: 600 12.5px/1 var(--ka-font);340 padding: 9px 14px;341 border-radius: var(--ka-radius);342 box-shadow: var(--ka-shadow);343 cursor: pointer;344 min-height: 38px;345}346.ka-draw-btn.drawing {347 background: var(--ka-accent);348 color: var(--ka-on-accent);349}350.ka-draw-btn.has-zone {351 background: var(--ka-accent);352 color: var(--ka-on-accent);353}354@media (max-width: 780px) {355 .ka-draw-btn {356 top: auto;357 bottom: 68px;358 left: 12px;359 }360}361362/* ---- Tooltip de cluster (fourchette de prix) ---- */363.ka-cluster-tip {364 position: absolute;365 z-index: 11;366 transform: translate(-50%, calc(-100% - 14px));367 background: var(--ka-surface);368 color: var(--ka-ink);369 border: 1.5px solid var(--ka-line);370 border-radius: var(--ka-radius);371 box-shadow: var(--ka-shadow);372 font: 600 12px/1.35 var(--ka-font);373 padding: 7px 10px;374 pointer-events: none;375 white-space: nowrap;376}377.ka-cluster-tip small {378 display: block;379 font-weight: 500;380 opacity: 0.75;381}382383/* =============================================================================384 KA MAP SYSTEM v2 — mode carte immersif (shell, sheet, split, toolbar,385 mode dessin, fiche contextuelle). Chrome minimal : surfaces translucides386 floutées, hairlines, une seule grappe de contrôles. Thémé par les mêmes387 variables --ka-* que la v1.388============================================================================= */389390.ka-shell {391 position: fixed;392 inset: 0;393 z-index: var(--ka-shell-z, 640);394 background: var(--ka-surface);395 font-family: var(--ka-font);396 display: flex;397 flex-direction: column;398 overscroll-behavior: contain;399}400401/* ---- barre supérieure ultra compacte ---- */402.ka-shell-top {403 flex: 0 0 auto;404 height: 52px;405 display: flex;406 align-items: center;407 gap: 10px;408 padding: 0 10px 0 6px;409 background: var(--ka-surface);410 border-bottom: 1px solid color-mix(in srgb, var(--ka-ink) 14%, transparent);411 z-index: 30;412}413414.ka-shell-exit {415 display: inline-flex;416 align-items: center;417 gap: 4px;418 border: 0;419 background: transparent;420 color: var(--ka-ink);421 font: 600 13px/1 var(--ka-font);422 padding: 8px 10px;423 border-radius: 10px;424 cursor: pointer;425 min-height: 40px;426}427.ka-shell-exit:hover { background: color-mix(in srgb, var(--ka-ink) 7%, transparent); }428429.ka-shell-brand {430 display: inline-flex;431 align-items: center;432 gap: 8px;433 min-width: 0;434 font: 700 14px/1 var(--ka-font);435 color: var(--ka-ink);436}437438.ka-shell-extras {439 margin-left: auto;440 display: inline-flex;441 align-items: center;442 gap: 8px;443 min-width: 0;444}445446/* ---- mobile : carte edge-to-edge ---- */447.ka-shell-mobile .ka-shell-map {448 position: relative;449 flex: 1 1 auto;450 min-height: 0;451}452.ka-shell-mobile .ka-shell-map .ka-map { position: absolute; inset: 0; }453454/* ---- bottom sheet à crans ---- */455.ka-sheet {456 position: absolute;457 left: 0;458 right: 0;459 bottom: 0;460 z-index: 40;461 display: flex;462 flex-direction: column;463 background: var(--ka-surface);464 border-radius: 18px 18px 0 0;465 box-shadow: 0 -10px 34px rgba(12, 14, 18, 0.18);466 border-top: 1px solid color-mix(in srgb, var(--ka-ink) 10%, transparent);467 transition: height 0.26s cubic-bezier(0.3, 0.9, 0.3, 1);468 padding-bottom: env(safe-area-inset-bottom);469 touch-action: none;470}471.ka-sheet.dragging { transition: none; }472.ka-sheet-body { touch-action: pan-y; }473474.ka-sheet-grip {475 flex: 0 0 auto;476 padding: 7px 14px 8px;477 cursor: grab;478 user-select: none;479}480.ka-sheet-grip:active { cursor: grabbing; }481.ka-sheet-handle {482 display: block;483 width: 42px;484 height: 4px;485 border-radius: 999px;486 margin: 0 auto 6px;487 background: color-mix(in srgb, var(--ka-ink) 22%, transparent);488}489.ka-sheet-head {490 display: flex;491 align-items: center;492 justify-content: space-between;493 gap: 10px;494 min-height: 30px;495}496497.ka-sheet-body {498 flex: 1 1 auto;499 min-height: 0;500 overflow: hidden;501 padding: 0 14px;502}503.ka-sheet-full .ka-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }504.ka-sheet-half .ka-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }505.ka-sheet-mini .ka-sheet-body { visibility: hidden; }506507/* ---- desktop : split résultats | carte ---- */508.ka-split {509 position: relative;510 flex: 1 1 auto;511 min-height: 0;512 display: grid;513 grid-template-columns: var(--ka-split, 40%) 14px 1fr;514}515.ka-split.dragging { cursor: col-resize; user-select: none; }516.ka-split-map { grid-column: 3; position: relative; min-width: 0; }517.ka-split-map .ka-map { position: absolute; inset: 0; }518519.ka-split-list {520 grid-column: 1;521 min-width: 0;522 min-height: 0;523 display: flex;524 flex-direction: column;525 background: var(--ka-surface);526}527.ka-split.ka-mode-map { grid-template-columns: 0 14px 1fr; }528.ka-split.ka-mode-map .ka-split-list { display: none; }529530.ka-pane-head {531 flex: 0 0 auto;532 padding: 10px 16px 8px;533 border-bottom: 1px solid color-mix(in srgb, var(--ka-ink) 10%, transparent);534}535.ka-pane-body {536 flex: 1 1 auto;537 min-height: 0;538 overflow-y: auto;539 padding: 12px 16px 22px;540 scrollbar-width: thin;541}542543.ka-split-handle {544 grid-column: 2;545 position: relative;546 cursor: col-resize;547 z-index: 20;548}549.ka-split-handle::before {550 content: "";551 position: absolute;552 top: 0;553 bottom: 0;554 left: 50%;555 width: 1px;556 background: color-mix(in srgb, var(--ka-ink) 14%, transparent);557}558.ka-split-handle:hover::before,559.ka-split.dragging .ka-split-handle::before {560 width: 3px;561 margin-left: -1px;562 background: var(--ka-accent);563}564.ka-split-toggle {565 position: absolute;566 top: 50%;567 left: 50%;568 transform: translate(-50%, -50%);569 width: 26px;570 height: 44px;571 border-radius: 8px;572 border: 1px solid color-mix(in srgb, var(--ka-ink) 16%, transparent);573 background: var(--ka-surface);574 color: var(--ka-ink);575 cursor: pointer;576 display: grid;577 place-items: center;578 box-shadow: 0 2px 10px rgba(12, 14, 18, 0.12);579}580.ka-split-toggle:hover { border-color: var(--ka-accent); color: var(--ka-accent); }581582/* ---- toolbar : LA grappe de contrôles ---- */583.ka-toolbar {584 position: absolute;585 top: 12px;586 right: 12px;587 z-index: 20;588 display: flex;589 flex-direction: column;590 gap: 8px;591}592.ka-tb-group {593 display: flex;594 flex-direction: column;595 border-radius: 12px;596 overflow: hidden;597 border: 1px solid color-mix(in srgb, var(--ka-ink) 14%, transparent);598 background: color-mix(in srgb, var(--ka-surface) 88%, transparent);599 backdrop-filter: blur(10px);600 -webkit-backdrop-filter: blur(10px);601 box-shadow: 0 3px 14px rgba(12, 14, 18, 0.13);602}603.ka-tb-btn {604 position: relative;605 width: 42px;606 height: 42px;607 border: 0;608 background: transparent;609 color: var(--ka-ink);610 display: grid;611 place-items: center;612 cursor: pointer;613}614.ka-tb-btn + .ka-tb-btn {615 border-top: 1px solid color-mix(in srgb, var(--ka-ink) 9%, transparent);616}617.ka-tb-btn:hover { background: color-mix(in srgb, var(--ka-ink) 6%, transparent); }618.ka-tb-btn.on { background: var(--ka-accent); color: var(--ka-on-accent); }619.ka-tb-btn:disabled { opacity: 0.5; cursor: default; }620.ka-tb-txt { font: 800 11px/1 var(--ka-font); letter-spacing: 0.02em; }621.ka-tb-badge {622 position: absolute;623 top: 5px;624 right: 5px;625 min-width: 15px;626 height: 15px;627 padding: 0 4px;628 border-radius: 999px;629 background: var(--ka-accent);630 color: var(--ka-on-accent);631 font: 700 9.5px/15px var(--ka-font);632 text-align: center;633}634.ka-tb-btn.on .ka-tb-badge { background: var(--ka-on-accent); color: var(--ka-accent); }635636/* ---- mode dessin (temporaire) ---- */637.ka-drawmode {638 position: absolute;639 top: 12px;640 left: 50%;641 transform: translateX(-50%);642 z-index: 25;643 display: inline-flex;644 align-items: center;645 gap: 10px;646 max-width: calc(100% - 24px);647 background: color-mix(in srgb, var(--ka-ink) 88%, transparent);648 color: #fff;649 border-radius: 999px;650 padding: 8px 8px 8px 16px;651 font: 500 12px/1.3 var(--ka-font);652 backdrop-filter: blur(8px);653 -webkit-backdrop-filter: blur(8px);654 box-shadow: 0 4px 18px rgba(12, 14, 18, 0.25);655}656.ka-drawmode-cancel {657 border: 0;658 border-radius: 999px;659 background: rgba(255, 255, 255, 0.16);660 color: #fff;661 font: 600 12px/1 var(--ka-font);662 padding: 7px 12px;663 cursor: pointer;664}665.ka-drawmode-cancel:hover { background: rgba(255, 255, 255, 0.28); }666667.ka-drawzone {668 position: absolute;669 bottom: 18px;670 left: 50%;671 transform: translateX(-50%);672 z-index: 25;673 display: inline-flex;674 align-items: stretch;675 border-radius: 999px;676 overflow: hidden;677 box-shadow: 0 5px 20px rgba(12, 14, 18, 0.22);678}679.ka-drawzone-see {680 border: 0;681 background: var(--ka-accent);682 color: var(--ka-on-accent);683 font: 700 13px/1 var(--ka-font);684 padding: 12px 18px;685 cursor: pointer;686 white-space: nowrap;687}688.ka-drawzone-see:hover { filter: brightness(0.94); }689.ka-drawzone-clear {690 border: 0;691 border-left: 1px solid color-mix(in srgb, var(--ka-on-accent) 30%, transparent);692 background: var(--ka-accent);693 color: var(--ka-on-accent);694 font: 600 13px/1 var(--ka-font);695 padding: 0 14px;696 cursor: pointer;697}698.ka-drawzone-clear:hover { filter: brightness(0.88); }699700/* ---- fiche contextuelle v2 ---- */701.ka-prev {702 position: absolute;703 z-index: 50;704}705.ka-prev-desktop {706 left: 14px;707 bottom: 14px;708 width: 332px;709 max-width: calc(100% - 28px);710}711.ka-prev-mobile {712 left: 10px;713 right: 10px;714 bottom: calc(104px + env(safe-area-inset-bottom));715}716717.ka-prev-card {718 background: var(--ka-surface);719 border: 1px solid color-mix(in srgb, var(--ka-ink) 12%, transparent);720 border-radius: 16px;721 overflow: hidden;722 box-shadow: 0 10px 34px rgba(12, 14, 18, 0.22);723}724.ka-slide-left { animation: ka-slide-left 0.22s cubic-bezier(0.3, 0.8, 0.3, 1); }725.ka-slide-right { animation: ka-slide-right 0.22s cubic-bezier(0.3, 0.8, 0.3, 1); }726@keyframes ka-slide-left {727 from { transform: translateX(34px); opacity: 0.4; }728 to { transform: translateX(0); opacity: 1; }729}730@keyframes ka-slide-right {731 from { transform: translateX(-34px); opacity: 0.4; }732 to { transform: translateX(0); opacity: 1; }733}734@media (prefers-reduced-motion: reduce) {735 .ka-slide-left, .ka-slide-right { animation: none; }736}737738.ka-prev-close {739 position: absolute;740 top: 8px;741 right: 8px;742 z-index: 3;743 width: 28px;744 height: 28px;745 border-radius: 50%;746 border: 0;747 background: rgba(16, 18, 22, 0.55);748 color: #fff;749 display: grid;750 place-items: center;751 cursor: pointer;752 backdrop-filter: blur(4px);753 -webkit-backdrop-filter: blur(4px);754}755.ka-prev-close:hover { background: rgba(16, 18, 22, 0.75); }756757.ka-prev-nav {758 position: absolute;759 top: 64px;760 z-index: 3;761 width: 30px;762 height: 30px;763 border-radius: 50%;764 border: 0;765 background: rgba(16, 18, 22, 0.5);766 color: #fff;767 display: grid;768 place-items: center;769 cursor: pointer;770 backdrop-filter: blur(4px);771 -webkit-backdrop-filter: blur(4px);772}773.ka-prev-nav:hover { background: rgba(16, 18, 22, 0.75); }774.ka-prev-prev { left: 8px; }775.ka-prev-next { right: 8px; }776777.ka-prev-pos {778 position: absolute;779 top: 10px;780 left: 10px;781 z-index: 3;782 background: rgba(16, 18, 22, 0.55);783 color: #fff;784 border-radius: 999px;785 padding: 3px 9px;786 font: 600 10.5px/1.3 var(--ka-font);787 pointer-events: none;788 backdrop-filter: blur(4px);789 -webkit-backdrop-filter: blur(4px);790}791792/* structure de contenu de fiche partagée (les apps remplissent) */793.ka-prevcard-media { position: relative; height: 148px; background: color-mix(in srgb, var(--ka-ink) 8%, transparent); }794.ka-prevcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }795.ka-prevcard-noimg { display: grid; place-items: center; height: 100%; font-size: 30px; color: color-mix(in srgb, var(--ka-ink) 40%, transparent); }796.ka-prevcard-body { padding: 11px 14px 13px; }797.ka-prevcard-price {798 display: flex;799 align-items: baseline;800 gap: 8px;801 font: 700 18px/1.2 var(--ka-font);802 color: var(--ka-ink);803}804.ka-prevcard-price small { font: 400 12px/1 var(--ka-font); opacity: 0.65; }805.ka-prevcard-addr {806 margin-top: 2px;807 font: 500 12.5px/1.35 var(--ka-font);808 color: color-mix(in srgb, var(--ka-ink) 76%, transparent);809 white-space: nowrap;810 overflow: hidden;811 text-overflow: ellipsis;812}813.ka-prevcard-meta {814 margin-top: 6px;815 font: 500 11.5px/1.4 var(--ka-font);816 color: color-mix(in srgb, var(--ka-ink) 60%, transparent);817}818.ka-prevcard-actions {819 display: flex;820 align-items: center;821 gap: 8px;822 margin-top: 11px;823}824.ka-prevcard-cta {825 flex: 1;826 display: inline-flex;827 align-items: center;828 justify-content: center;829 gap: 6px;830 padding: 10px 12px;831 border: 0;832 border-radius: 10px;833 background: var(--ka-accent);834 color: var(--ka-on-accent);835 font: 700 13px/1 var(--ka-font);836 text-decoration: none;837 cursor: pointer;838}839.ka-prevcard-cta:hover { filter: brightness(0.94); }840.ka-prevcard-fav {841 flex: 0 0 auto;842 width: 38px;843 height: 38px;844 border-radius: 10px;845 border: 1px solid color-mix(in srgb, var(--ka-ink) 18%, transparent);846 background: var(--ka-surface);847 color: var(--ka-ink);848 display: grid;849 place-items: center;850 cursor: pointer;851}852.ka-prevcard-fav.on { color: var(--ka-accent); border-color: var(--ka-accent); }853.ka-prevcard-badge {854 display: inline-block;855 padding: 2.5px 8px;856 border-radius: 999px;857 background: var(--ka-accent);858 color: var(--ka-on-accent);859 font: 700 9.5px/1.4 var(--ka-font);860 text-transform: uppercase;861 letter-spacing: 0.05em;862}863864/* ---- chrome v1 adouci à l'intérieur du shell ---- */865.ka-shell .ka-search-area { top: 12px; }866.ka-shell .ka-search-area-btn {867 border: 0;868 box-shadow: 0 4px 16px rgba(12, 14, 18, 0.2);869 font: 600 12.5px/1 var(--ka-font);870 padding: 9px 15px;871 min-height: 36px;872}873.ka-shell .ka-search-area-auto {874 border: 1px solid color-mix(in srgb, var(--ka-ink) 14%, transparent);875 background: color-mix(in srgb, var(--ka-surface) 88%, transparent);876 backdrop-filter: blur(8px);877 -webkit-backdrop-filter: blur(8px);878}879.ka-shell .ka-loading {880 border: 1px solid color-mix(in srgb, var(--ka-ink) 12%, transparent);881 box-shadow: 0 3px 14px rgba(12, 14, 18, 0.13);882 background: color-mix(in srgb, var(--ka-surface) 90%, transparent);883 backdrop-filter: blur(8px);884 -webkit-backdrop-filter: blur(8px);885}886.ka-shell .ka-brand {887 border: 0;888 background: transparent;889 box-shadow: none;890 padding: 2px 4px;891 opacity: 0.75;892}893.ka-shell .ka-empty {894 border: 1px solid color-mix(in srgb, var(--ka-ink) 12%, transparent);895 box-shadow: 0 6px 24px rgba(12, 14, 18, 0.14);896}897/* le zoom natif est remplacé par la toolbar dans le shell */898.ka-shell .mapboxgl-ctrl-top-right { display: none; }899/* attribution : fine, sous la toolbar */900.ka-shell .mapboxgl-ctrl-bottom-right { bottom: 2px; }901.ka-shell .ka-map .mapboxgl-ctrl-attrib { background: color-mix(in srgb, var(--ka-surface) 70%, transparent); }902903/* mobile : loading remonté au-dessus du sheet mini, marque masquée */904.ka-shell-mobile .ka-loading { bottom: auto; top: 60px; }905.ka-shell-mobile .ka-brand { display: none; }906.ka-shell-mobile .ka-drawzone { bottom: calc(112px + env(safe-area-inset-bottom)); }907.ka-shell-mobile .ka-toolbar { top: 10px; right: 10px; }908.ka-shell-mobile .ka-tb-btn { width: 44px; height: 44px; }909