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 { position: relative; min-width: 0; }517.ka-split-map .ka-map { position: absolute; inset: 0; }518519.ka-split-list {520 min-width: 0;521 min-height: 0;522 display: flex;523 flex-direction: column;524 background: var(--ka-surface);525}526.ka-split.ka-mode-map { grid-template-columns: 0 14px 1fr; }527.ka-split.ka-mode-map .ka-split-list { display: none; }528529.ka-pane-head {530 flex: 0 0 auto;531 padding: 10px 16px 8px;532 border-bottom: 1px solid color-mix(in srgb, var(--ka-ink) 10%, transparent);533}534.ka-pane-body {535 flex: 1 1 auto;536 min-height: 0;537 overflow-y: auto;538 padding: 12px 16px 22px;539 scrollbar-width: thin;540}541542.ka-split-handle {543 position: relative;544 cursor: col-resize;545 z-index: 20;546}547.ka-split-handle::before {548 content: "";549 position: absolute;550 top: 0;551 bottom: 0;552 left: 50%;553 width: 1px;554 background: color-mix(in srgb, var(--ka-ink) 14%, transparent);555}556.ka-split-handle:hover::before,557.ka-split.dragging .ka-split-handle::before {558 width: 3px;559 margin-left: -1px;560 background: var(--ka-accent);561}562.ka-split-toggle {563 position: absolute;564 top: 50%;565 left: 50%;566 transform: translate(-50%, -50%);567 width: 26px;568 height: 44px;569 border-radius: 8px;570 border: 1px solid color-mix(in srgb, var(--ka-ink) 16%, transparent);571 background: var(--ka-surface);572 color: var(--ka-ink);573 cursor: pointer;574 display: grid;575 place-items: center;576 box-shadow: 0 2px 10px rgba(12, 14, 18, 0.12);577}578.ka-split-toggle:hover { border-color: var(--ka-accent); color: var(--ka-accent); }579580/* ---- toolbar : LA grappe de contrôles ---- */581.ka-toolbar {582 position: absolute;583 top: 12px;584 right: 12px;585 z-index: 20;586 display: flex;587 flex-direction: column;588 gap: 8px;589}590.ka-tb-group {591 display: flex;592 flex-direction: column;593 border-radius: 12px;594 overflow: hidden;595 border: 1px solid color-mix(in srgb, var(--ka-ink) 14%, transparent);596 background: color-mix(in srgb, var(--ka-surface) 88%, transparent);597 backdrop-filter: blur(10px);598 -webkit-backdrop-filter: blur(10px);599 box-shadow: 0 3px 14px rgba(12, 14, 18, 0.13);600}601.ka-tb-btn {602 position: relative;603 width: 42px;604 height: 42px;605 border: 0;606 background: transparent;607 color: var(--ka-ink);608 display: grid;609 place-items: center;610 cursor: pointer;611}612.ka-tb-btn + .ka-tb-btn {613 border-top: 1px solid color-mix(in srgb, var(--ka-ink) 9%, transparent);614}615.ka-tb-btn:hover { background: color-mix(in srgb, var(--ka-ink) 6%, transparent); }616.ka-tb-btn.on { background: var(--ka-accent); color: var(--ka-on-accent); }617.ka-tb-btn:disabled { opacity: 0.5; cursor: default; }618.ka-tb-txt { font: 800 11px/1 var(--ka-font); letter-spacing: 0.02em; }619.ka-tb-badge {620 position: absolute;621 top: 5px;622 right: 5px;623 min-width: 15px;624 height: 15px;625 padding: 0 4px;626 border-radius: 999px;627 background: var(--ka-accent);628 color: var(--ka-on-accent);629 font: 700 9.5px/15px var(--ka-font);630 text-align: center;631}632.ka-tb-btn.on .ka-tb-badge { background: var(--ka-on-accent); color: var(--ka-accent); }633634/* ---- mode dessin (temporaire) ---- */635.ka-drawmode {636 position: absolute;637 top: 12px;638 left: 50%;639 transform: translateX(-50%);640 z-index: 25;641 display: inline-flex;642 align-items: center;643 gap: 10px;644 max-width: calc(100% - 24px);645 background: color-mix(in srgb, var(--ka-ink) 88%, transparent);646 color: #fff;647 border-radius: 999px;648 padding: 8px 8px 8px 16px;649 font: 500 12px/1.3 var(--ka-font);650 backdrop-filter: blur(8px);651 -webkit-backdrop-filter: blur(8px);652 box-shadow: 0 4px 18px rgba(12, 14, 18, 0.25);653}654.ka-drawmode-cancel {655 border: 0;656 border-radius: 999px;657 background: rgba(255, 255, 255, 0.16);658 color: #fff;659 font: 600 12px/1 var(--ka-font);660 padding: 7px 12px;661 cursor: pointer;662}663.ka-drawmode-cancel:hover { background: rgba(255, 255, 255, 0.28); }664665.ka-drawzone {666 position: absolute;667 bottom: 18px;668 left: 50%;669 transform: translateX(-50%);670 z-index: 25;671 display: inline-flex;672 align-items: stretch;673 border-radius: 999px;674 overflow: hidden;675 box-shadow: 0 5px 20px rgba(12, 14, 18, 0.22);676}677.ka-drawzone-see {678 border: 0;679 background: var(--ka-accent);680 color: var(--ka-on-accent);681 font: 700 13px/1 var(--ka-font);682 padding: 12px 18px;683 cursor: pointer;684 white-space: nowrap;685}686.ka-drawzone-see:hover { filter: brightness(0.94); }687.ka-drawzone-clear {688 border: 0;689 border-left: 1px solid color-mix(in srgb, var(--ka-on-accent) 30%, transparent);690 background: var(--ka-accent);691 color: var(--ka-on-accent);692 font: 600 13px/1 var(--ka-font);693 padding: 0 14px;694 cursor: pointer;695}696.ka-drawzone-clear:hover { filter: brightness(0.88); }697698/* ---- fiche contextuelle v2 ---- */699.ka-prev {700 position: absolute;701 z-index: 50;702}703.ka-prev-desktop {704 left: 14px;705 bottom: 14px;706 width: 332px;707 max-width: calc(100% - 28px);708}709.ka-prev-mobile {710 left: 10px;711 right: 10px;712 bottom: calc(104px + env(safe-area-inset-bottom));713}714715.ka-prev-card {716 background: var(--ka-surface);717 border: 1px solid color-mix(in srgb, var(--ka-ink) 12%, transparent);718 border-radius: 16px;719 overflow: hidden;720 box-shadow: 0 10px 34px rgba(12, 14, 18, 0.22);721}722.ka-slide-left { animation: ka-slide-left 0.22s cubic-bezier(0.3, 0.8, 0.3, 1); }723.ka-slide-right { animation: ka-slide-right 0.22s cubic-bezier(0.3, 0.8, 0.3, 1); }724@keyframes ka-slide-left {725 from { transform: translateX(34px); opacity: 0.4; }726 to { transform: translateX(0); opacity: 1; }727}728@keyframes ka-slide-right {729 from { transform: translateX(-34px); opacity: 0.4; }730 to { transform: translateX(0); opacity: 1; }731}732@media (prefers-reduced-motion: reduce) {733 .ka-slide-left, .ka-slide-right { animation: none; }734}735736.ka-prev-close {737 position: absolute;738 top: 8px;739 right: 8px;740 z-index: 3;741 width: 28px;742 height: 28px;743 border-radius: 50%;744 border: 0;745 background: rgba(16, 18, 22, 0.55);746 color: #fff;747 display: grid;748 place-items: center;749 cursor: pointer;750 backdrop-filter: blur(4px);751 -webkit-backdrop-filter: blur(4px);752}753.ka-prev-close:hover { background: rgba(16, 18, 22, 0.75); }754755.ka-prev-nav {756 position: absolute;757 top: 64px;758 z-index: 3;759 width: 30px;760 height: 30px;761 border-radius: 50%;762 border: 0;763 background: rgba(16, 18, 22, 0.5);764 color: #fff;765 display: grid;766 place-items: center;767 cursor: pointer;768 backdrop-filter: blur(4px);769 -webkit-backdrop-filter: blur(4px);770}771.ka-prev-nav:hover { background: rgba(16, 18, 22, 0.75); }772.ka-prev-prev { left: 8px; }773.ka-prev-next { right: 8px; }774775.ka-prev-pos {776 position: absolute;777 top: 10px;778 left: 10px;779 z-index: 3;780 background: rgba(16, 18, 22, 0.55);781 color: #fff;782 border-radius: 999px;783 padding: 3px 9px;784 font: 600 10.5px/1.3 var(--ka-font);785 pointer-events: none;786 backdrop-filter: blur(4px);787 -webkit-backdrop-filter: blur(4px);788}789790/* structure de contenu de fiche partagée (les apps remplissent) */791.ka-prevcard-media { position: relative; height: 148px; background: color-mix(in srgb, var(--ka-ink) 8%, transparent); }792.ka-prevcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }793.ka-prevcard-noimg { display: grid; place-items: center; height: 100%; font-size: 30px; color: color-mix(in srgb, var(--ka-ink) 40%, transparent); }794.ka-prevcard-body { padding: 11px 14px 13px; }795.ka-prevcard-price {796 display: flex;797 align-items: baseline;798 gap: 8px;799 font: 700 18px/1.2 var(--ka-font);800 color: var(--ka-ink);801}802.ka-prevcard-price small { font: 400 12px/1 var(--ka-font); opacity: 0.65; }803.ka-prevcard-addr {804 margin-top: 2px;805 font: 500 12.5px/1.35 var(--ka-font);806 color: color-mix(in srgb, var(--ka-ink) 76%, transparent);807 white-space: nowrap;808 overflow: hidden;809 text-overflow: ellipsis;810}811.ka-prevcard-meta {812 margin-top: 6px;813 font: 500 11.5px/1.4 var(--ka-font);814 color: color-mix(in srgb, var(--ka-ink) 60%, transparent);815}816.ka-prevcard-actions {817 display: flex;818 align-items: center;819 gap: 8px;820 margin-top: 11px;821}822.ka-prevcard-cta {823 flex: 1;824 display: inline-flex;825 align-items: center;826 justify-content: center;827 gap: 6px;828 padding: 10px 12px;829 border: 0;830 border-radius: 10px;831 background: var(--ka-accent);832 color: var(--ka-on-accent);833 font: 700 13px/1 var(--ka-font);834 text-decoration: none;835 cursor: pointer;836}837.ka-prevcard-cta:hover { filter: brightness(0.94); }838.ka-prevcard-fav {839 flex: 0 0 auto;840 width: 38px;841 height: 38px;842 border-radius: 10px;843 border: 1px solid color-mix(in srgb, var(--ka-ink) 18%, transparent);844 background: var(--ka-surface);845 color: var(--ka-ink);846 display: grid;847 place-items: center;848 cursor: pointer;849}850.ka-prevcard-fav.on { color: var(--ka-accent); border-color: var(--ka-accent); }851.ka-prevcard-badge {852 display: inline-block;853 padding: 2.5px 8px;854 border-radius: 999px;855 background: var(--ka-accent);856 color: var(--ka-on-accent);857 font: 700 9.5px/1.4 var(--ka-font);858 text-transform: uppercase;859 letter-spacing: 0.05em;860}861862/* ---- chrome v1 adouci à l'intérieur du shell ---- */863.ka-shell .ka-search-area { top: 12px; }864.ka-shell .ka-search-area-btn {865 border: 0;866 box-shadow: 0 4px 16px rgba(12, 14, 18, 0.2);867 font: 600 12.5px/1 var(--ka-font);868 padding: 9px 15px;869 min-height: 36px;870}871.ka-shell .ka-search-area-auto {872 border: 1px solid color-mix(in srgb, var(--ka-ink) 14%, transparent);873 background: color-mix(in srgb, var(--ka-surface) 88%, transparent);874 backdrop-filter: blur(8px);875 -webkit-backdrop-filter: blur(8px);876}877.ka-shell .ka-loading {878 border: 1px solid color-mix(in srgb, var(--ka-ink) 12%, transparent);879 box-shadow: 0 3px 14px rgba(12, 14, 18, 0.13);880 background: color-mix(in srgb, var(--ka-surface) 90%, transparent);881 backdrop-filter: blur(8px);882 -webkit-backdrop-filter: blur(8px);883}884.ka-shell .ka-brand {885 border: 0;886 background: transparent;887 box-shadow: none;888 padding: 2px 4px;889 opacity: 0.75;890}891.ka-shell .ka-empty {892 border: 1px solid color-mix(in srgb, var(--ka-ink) 12%, transparent);893 box-shadow: 0 6px 24px rgba(12, 14, 18, 0.14);894}895/* le zoom natif est remplacé par la toolbar dans le shell */896.ka-shell .mapboxgl-ctrl-top-right { display: none; }897/* attribution : fine, sous la toolbar */898.ka-shell .mapboxgl-ctrl-bottom-right { bottom: 2px; }899.ka-shell .ka-map .mapboxgl-ctrl-attrib { background: color-mix(in srgb, var(--ka-surface) 70%, transparent); }900901/* mobile : loading remonté au-dessus du sheet mini, marque masquée */902.ka-shell-mobile .ka-loading { bottom: auto; top: 60px; }903.ka-shell-mobile .ka-brand { display: none; }904.ka-shell-mobile .ka-drawzone { bottom: calc(112px + env(safe-area-inset-bottom)); }905.ka-shell-mobile .ka-toolbar { top: 10px; right: 10px; }906.ka-shell-mobile .ka-tb-btn { width: 44px; height: 44px; }907