/* V20.37 L148+L149 — Toolbar bottom + boussole LM-like * Composants indépendants ajoutés dans (position: fixed). * Ne modifient pas l'arborescence existante du studio. * - .studio-toolbar-bottom : barre flottante centrée bas (zoom + 2D/3D + outils) * - .studio-compass : boussole Nord (bas-gauche) avec rotation orientation parcelle */ .studio-toolbar-bottom { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(10, 10, 12, 0.08); border-radius: 999px; box-shadow: 0 6px 24px rgba(10, 10, 12, 0.08); font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: #1a1c19; } .studio-toolbar-bottom .studio-tb-segmented { display: flex; background: #f0f0eb; border-radius: 6px; padding: 2px; } .studio-toolbar-bottom .studio-tb-segmented button { border: 0; background: transparent; padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; border-radius: 4px; color: #6b6e69; } .studio-toolbar-bottom .studio-tb-segmented button.is-active { background: #ffffff; color: #2d7a4f; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .studio-toolbar-bottom .studio-tb-zoom { display: flex; align-items: center; gap: 6px; } .studio-toolbar-bottom .studio-tb-zoom button { width: 26px; height: 26px; border: 1px solid #e3e5e1; background: #fff; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #6b6e69; } .studio-toolbar-bottom .studio-tb-zoom button:hover { border-color: #2d7a4f; color: #2d7a4f; } .studio-toolbar-bottom .studio-tb-zoom input[type=range] { width: 100px; height: 4px; -webkit-appearance: none; appearance: none; background: #e3e5e1; border-radius: 999px; outline: none; } .studio-toolbar-bottom .studio-tb-zoom input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #2d7a4f; cursor: pointer; border: 2px solid #fff; } .studio-toolbar-bottom .studio-tb-zoom input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #2d7a4f; cursor: pointer; border: 2px solid #fff; } .studio-toolbar-bottom .studio-tb-divider { width: 1px; height: 22px; background: rgba(0, 0, 0, 0.08); } .studio-toolbar-bottom button.studio-tb-icon { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; border-radius: 4px; color: #6b6e69; display: inline-flex; align-items: center; justify-content: center; } .studio-toolbar-bottom button.studio-tb-icon:hover { background: rgba(45, 122, 79, 0.08); color: #2d7a4f; } .studio-toolbar-bottom .studio-tb-floor { font-weight: 600; padding: 4px 10px; background: #f0f0eb; border-radius: 4px; cursor: pointer; border: 0; color: #1a1c19; } /* V20.37 L148 : menu déroulant étages (ouvert via studio-tb-floor) */ .studio-tb-floor-menu { position: fixed; z-index: 1600; min-width: 160px; background: #ffffff; border: 1px solid rgba(10, 10, 12, 0.08); border-radius: 8px; box-shadow: 0 8px 24px rgba(10, 10, 12, 0.12); padding: 4px 0; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: #1a1c19; } .studio-tb-floor-menu button { display: block; width: 100%; text-align: left; padding: 8px 14px; border: 0; background: transparent; cursor: pointer; color: #1a1c19; font-size: 12px; } .studio-tb-floor-menu button:hover { background: rgba(45, 122, 79, 0.08); color: #2d7a4f; } .studio-tb-floor-menu button.is-active { color: #2d7a4f; font-weight: 600; } /* Boussole Nord (L148) */ .studio-compass { position: fixed; bottom: 20px; left: 20px; z-index: 1500; width: 64px; height: 64px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(10, 10, 12, 0.08); border-radius: 50%; box-shadow: 0 4px 12px rgba(10, 10, 12, 0.08); display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; user-select: none; } .studio-compass-inner { position: relative; width: 100%; height: 100%; transition: transform 300ms ease; } .studio-compass-arrow { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 14px solid #d4380e; /* rouge Nord */ } .studio-compass-arrow.south { top: auto; bottom: 4px; border-bottom: 0; border-top: 14px solid #6b6e69; } .studio-compass-n { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #1a1c19; letter-spacing: 0.04em; } .studio-compass-scale { position: absolute; bottom: -20px; left: 0; right: 0; font-size: 9px; color: #6b6e69; text-align: center; background: rgba(255, 255, 255, 0.95); padding: 2px 6px; border-radius: 4px; } /* V20.37 : compaction mobile pour éviter chevauchement bottom-bar mobile */ @media (max-width: 640px) { .studio-toolbar-bottom { bottom: 72px; /* au-dessus de la bottom-tabs mobile */ gap: 6px; padding: 6px 10px; } .studio-toolbar-bottom .studio-tb-zoom input[type=range] { width: 60px; } .studio-compass { bottom: 80px; width: 52px; height: 52px; } .studio-compass-n { top: 18px; font-size: 10px; } .studio-compass-arrow { border-bottom-width: 12px; } .studio-compass-arrow.south { border-top-width: 12px; } } /* ════════════════════════════════════════════════════════════════════════ * V20.37.2 — Widget rotation parcelle (panel Terrain) * Insertion dans

du panel Terrain. * Sliders + snap N/E/S/W + input numérique synchronisé. * ═══════════════════════════════════════════════════════════════════════ */ .studio-parcel-rotation { display: flex; flex-direction: column; gap: 10px; padding: 10px 4px; } .studio-parcel-rotation-label { font-size: 11px; font-weight: 600; color: #5e6260; text-transform: uppercase; letter-spacing: 0.06em; } .studio-parcel-rotation-row { display: flex; align-items: center; gap: 10px; } .studio-parcel-rotation-range { flex: 1; min-width: 0; height: 24px; accent-color: var(--st-gold, #c8a04d); } .studio-parcel-rotation-val { width: 64px; padding: 4px 6px; font-size: 12px; font-weight: 600; text-align: right; border: 1px solid rgba(10, 10, 12, 0.12); border-radius: 6px; background: #ffffff; color: #1a1c19; -moz-appearance: textfield; appearance: textfield; } .studio-parcel-rotation-val::-webkit-outer-spin-button, .studio-parcel-rotation-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .studio-parcel-rotation-snaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .studio-parcel-rotation-snap { border: 1px solid rgba(10, 10, 12, 0.12); background: #f6f5f1; color: #2d2e2c; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 6px 0; border-radius: 6px; cursor: pointer; transition: background 120ms ease, color 120ms ease, transform 120ms ease; } .studio-parcel-rotation-snap:hover { background: var(--st-gold, #c8a04d); color: #ffffff; } .studio-parcel-rotation-snap:active { transform: scale(0.97); } .studio-parcel-rotation-snap.is-active { background: var(--st-green-deep, #2d7a4f); color: #ffffff; border-color: transparent; }