/* ============================================================================
 * KissBooK — Rubrique Spéciale "🇨🇭 Webcams Suisses en Direct"
 * Styles pour :
 * 1. La page intégrée dans le Livre KissBooK Rencontres (Page 16) & Mobile Reader
 * 2. Le Grand Explorateur des Webcams Suisses (Modale Premier Plan z-index: 10000050)
 * 3. La Visionneuse Live 360° & Plein Écran + Fiche d'Informations Publiques (z-index: 10000090)
 * ============================================================================ */

:root {
    --kbsw-bg-primary: var(--bg-primary, #090d18);
    --kbsw-bg-secondary: var(--bg-secondary, #121829);
    --kbsw-accent: var(--accent-primary, #e11d48);
    --kbsw-swiss-red: #d52b1e;
    --kbsw-border: var(--border-active, rgba(225, 29, 72, 0.45));
    --kbsw-text: #f8fafc;
    --kbsw-muted: #94a3b8;
}

/* ─── 1. CONTENEUR DANS LA PAGE DU LIVRE (Page 16 KissBooK Rencontres) ─── */
.kbsw-book-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    color: #1e293b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    box-sizing: border-box;
}

.kbsw-book-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #991b1b 100%);
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.28);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.kbsw-book-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kbsw-swiss-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #d52b1e;
    border: 2px solid #ffffff;
    border-radius: 6px;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.kbsw-book-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff !important;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbsw-book-subtitle {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kbsw-book-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.kbsw-btn-expand,
.kbsw-btn-refresh {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.kbsw-btn-expand:hover,
.kbsw-btn-refresh:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* ─── Barre de filtres du Livre ─── */
.kbsw-filters-box {
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 9px;
    padding: 7px 8px;
    margin-bottom: 7px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kbsw-search-row {
    display: flex;
    gap: 5px;
    align-items: center;
}

.kbsw-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.kbsw-search-input {
    width: 100%;
    padding: 5px 24px 5px 24px;
    font-size: 0.72rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
}

.kbsw-search-input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.kbsw-search-icon {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    pointer-events: none;
}

.kbsw-search-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.75rem;
    cursor: pointer !important;
    pointer-events: auto !important;
    padding: 0 3px;
    display: none;
}

.kbsw-country-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.kbsw-selects-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.kbsw-select {
    width: 100%;
    padding: 4px 5px;
    font-size: 0.67rem;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    color: #1e293b;
    font-weight: 600;
    cursor: pointer !important;
    pointer-events: auto !important;
    outline: none;
}

.kbsw-select:focus {
    border-color: #dc2626;
}

/* ─── Pastilles rapides des Cantons ─── */
.kbsw-canton-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.kbsw-canton-pills::-webkit-scrollbar {
    height: 3px;
}

.kbsw-canton-pills::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.kbsw-canton-pill {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    cursor: pointer !important;
    pointer-events: auto !important;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.kbsw-canton-pill:hover {
    border-color: #f87171;
    color: #b91c1c;
}

.kbsw-canton-pill.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* ─── Barre d'état & compteur ─── */
.kbsw-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.66rem;
    color: #475569;
    margin-bottom: 5px;
    padding: 0 2px;
    flex-shrink: 0;
}

.kbsw-status-count strong {
    color: #b91c1c;
}

.kbsw-geo-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.63rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.kbsw-geo-btn:hover {
    background: #e2e8f0;
}

/* ─── Grille des cartes Webcams dans le Livre ─── */
.kbsw-book-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
}

.kbsw-book-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.kbsw-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.kbsw-card:hover {
    transform: translateY(-2px);
    border-color: #ef4444;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.15);
}

.kbsw-card-thumb-wrap {
    position: relative;
    width: 100%;
    height: 82px;
    background: #0f172a;
    overflow: hidden;
}

.kbsw-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.kbsw-card:hover .kbsw-card-thumb {
    transform: scale(1.06);
}

.kbsw-card-badges-top {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.kbsw-badge-live {
    background: rgba(15, 23, 42, 0.82);
    color: #4ade80;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(4px);
}

.kbsw-badge-live.is-periodic {
    color: #facc15;
}

.kbsw-badge-canton {
    background: #d52b1e;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.kbsw-card-badges-bottom {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.kbsw-badge-alt,
.kbsw-badge-dist {
    background: rgba(15, 23, 42, 0.82);
    color: #f8fafc;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.kbsw-badge-dist {
    color: #38bdf8;
}

.kbsw-card-body {
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.kbsw-card-title {
    font-size: 0.7rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kbsw-card-loc {
    font-size: 0.62rem;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbsw-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.58rem;
    color: #64748b;
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px dashed #e2e8f0;
}

.kbsw-card-open-btn {
    color: #dc2626;
    font-weight: 800;
}

.kbsw-load-more-wrap {
    text-align: center;
    padding: 8px 0 4px;
}

.kbsw-load-more-btn {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* ============================================================================
 * 2. MODALES AU PREMIER PLAN ABSOLU (RÈGLE CRITIQUE AGENTS.MD)
 * - Centrage parfait (display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; width: 100vw; height: 100vh;)
 * - Superposition maximale (z-index: 10000050 et 10000090)
 * - Arrière-plan avec flou immersif (backdrop-filter: blur(14px); background: rgba(4, 6, 14, 0.85);)
 * - Boutons TOUJOURS devant les popups (z-index supérieur, pointer-events: auto !important; cursor: pointer !important;)
 * ============================================================================ */

.kbsw-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(4, 6, 14, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 10000050 !important;
    padding: 16px;
    box-sizing: border-box;
}

.kbsw-modal-overlay.is-open {
    display: flex !important;
}

/* La visionneuse individuelle de webcam s'ouvre toujours PAR-DESSUS l'explorateur */
#kb-swiss-webcam-viewer-modal.kbsw-modal-overlay {
    z-index: 10000090 !important;
}

.kbsw-modal-dialog {
    position: relative;
    z-index: 10000055 !important;
    width: min(1360px, 96vw);
    height: min(880px, 92vh);
    background: var(--kbsw-bg-primary, #090d18);
    border: 1px solid var(--kbsw-border, rgba(225, 29, 72, 0.45));
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(213, 43, 30, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--kbsw-text, #f8fafc);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#kb-swiss-webcam-viewer-modal .kbsw-modal-dialog {
    z-index: 10000092 !important;
    width: min(1420px, 96vw);
    height: min(900px, 94vh);
}

/* Tous les boutons dans les modales sont garantis au premier plan cliquable */
.kbsw-modal-overlay button,
.kbsw-modal-overlay select,
.kbsw-modal-overlay input,
.kbsw-modal-overlay a.kbsw-action-link {
    position: relative;
    z-index: 10000098 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.kbsw-modal-overlay input[type="text"],
.kbsw-modal-overlay input[type="search"] {
    cursor: text !important;
}

/* En-tête de modale */
.kbsw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.38) 0%, rgba(18, 24, 41, 0.96) 60%, rgba(9, 13, 24, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.kbsw-modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.kbsw-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbsw-modal-subtitle {
    font-size: 0.78rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.kbsw-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kbsw-modal-btn {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc !important;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.kbsw-modal-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.kbsw-modal-btn.is-active,
.kbsw-modal-btn.is-primary {
    background: linear-gradient(135deg, #e11d48, #be123c);
    border-color: #fb7185;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}

.kbsw-modal-btn.is-fullscreen-btn {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-color: #38bdf8;
}

.kbsw-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(220, 38, 38, 0.25);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.kbsw-modal-close:hover {
    background: #dc2626;
    transform: scale(1.06);
}

/* ─── Corps de l'Explorateur Grand Format ─── */
.kbsw-explorer-toolbar {
    padding: 12px 20px;
    background: var(--kbsw-bg-secondary, #121829);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.kbsw-explorer-filters {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.3fr 1.1fr auto;
    gap: 8px;
    align-items: center;
}

.kbsw-explorer-input,
.kbsw-explorer-select {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #f8fafc;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 0.82rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.kbsw-explorer-input:focus,
.kbsw-explorer-select:focus {
    border-color: #f43f5e;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.2);
}

.kbsw-explorer-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
}

.kbsw-explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.kbsw-explorer-grid .kbsw-card {
    background: rgba(18, 24, 41, 0.95);
    border-color: rgba(148, 163, 184, 0.2);
}

.kbsw-explorer-grid .kbsw-card:hover {
    border-color: #f43f5e;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(244, 63, 94, 0.25);
}

.kbsw-explorer-grid .kbsw-card-thumb-wrap {
    height: 150px;
}

.kbsw-explorer-grid .kbsw-card-title {
    color: #f8fafc;
    font-size: 0.88rem;
}

.kbsw-explorer-grid .kbsw-card-loc {
    color: #cbd5e1;
    font-size: 0.76rem;
}

.kbsw-explorer-grid .kbsw-card-meta {
    color: #94a3b8;
    border-top-color: rgba(148, 163, 184, 0.16);
    font-size: 0.72rem;
}

.kbsw-explorer-grid .kbsw-card-open-btn {
    color: #fb7185;
}

/* ─── 3. VISIONNEUSE LIVE + PANNEAU D'INFORMATIONS PUBLIQUES ─── */
.kbsw-viewer-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 360px;
    overflow: hidden;
}

.kbsw-viewer-stage {
    position: relative;
    background: #020617;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.kbsw-viewer-stage:fullscreen,
.kbsw-viewer-stage:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    background: #000000 !important;
}

.kbsw-modal-dialog.is-css-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
}

.kbsw-modal-dialog.is-css-fullscreen .kbsw-viewer-body {
    grid-template-columns: 1fr;
}

.kbsw-modal-dialog.is-css-fullscreen .kbsw-viewer-info-sidebar {
    display: none;
}

.kbsw-player-frame-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kbsw-player-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #020617;
}

.kbsw-player-hd-img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #020617;
}

.kbsw-stage-floating-bar {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(9, 13, 24, 0.84);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    z-index: 10000096 !important;
    pointer-events: auto !important;
}

/* Panneau latéral d'informations publiques non privées */
.kbsw-viewer-info-sidebar {
    background: var(--kbsw-bg-secondary, #121829);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kbsw-info-section-title {
    margin: 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fb7185;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kbsw-info-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kbsw-info-item {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kbsw-info-label {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
}

.kbsw-info-value {
    font-size: 0.82rem;
    color: #f8fafc;
    font-weight: 700;
    word-break: break-word;
}

.kbsw-info-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.kbsw-info-links a {
    text-align: center;
    justify-content: center;
    font-size: 0.73rem;
    padding: 7px 8px;
}

/* ============================================================================
 * 4. ONGLETS DE NAVIGATION (GRILLE WEBCAMS / CARTE SUISSE 26 CANTONS / MÉTÉO)
 * ============================================================================ */
.kbsw-tabs-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.06);
    padding: 4px;
    border-radius: 9px;
    border: 1px solid rgba(203, 213, 225, 0.8);
}

.kbsw-tab-btn {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    cursor: pointer !important;
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.kbsw-tab-btn:hover {
    background: rgba(255, 255, 255, 0.75);
    color: #b91c1c;
}

.kbsw-tab-btn.is-active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff !important;
    border-color: #991b1b;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
}

/* Onglets dans le Grand Explorateur (Thème sombre Promptus) */
.kbsw-explorer-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(9, 13, 24, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.kbsw-explorer-tabs-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kbsw-exp-tab-btn {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(18, 24, 41, 0.85);
    color: #cbd5e1 !important;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.kbsw-exp-tab-btn:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: #f87171;
    color: #ffffff !important;
}

.kbsw-exp-tab-btn.is-active {
    background: linear-gradient(135deg, #d52b1e 0%, #be123c 100%);
    border-color: #fda4af;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(213, 43, 30, 0.4);
}

/* ============================================================================
 * 5. BANDEAU MÉTÉO EN DIRECT EN BAS DE CHAQUE WEBCAM (.kbsw-card-weather-banner)
 * ============================================================================ */
.kbsw-card-weather-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 7px;
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
    border-top: 1px solid rgba(56, 189, 248, 0.28);
    color: #f8fafc;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.2;
    flex-shrink: 0;
}

.kbsw-explorer-grid .kbsw-card-weather-banner {
    padding: 6px 9px;
    font-size: 0.7rem;
    background: linear-gradient(90deg, rgba(8, 14, 28, 0.98) 0%, rgba(15, 29, 54, 0.95) 55%, rgba(8, 14, 28, 0.98) 100%);
    border-top: 1px solid rgba(56, 189, 248, 0.35);
}

.kbsw-wx-banner-left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.kbsw-wx-banner-icon {
    font-size: 0.82rem;
    line-height: 1;
    flex-shrink: 0;
}

.kbsw-explorer-grid .kbsw-wx-banner-icon {
    font-size: 0.96rem;
}

.kbsw-wx-banner-temp {
    color: #38bdf8;
    font-weight: 800;
    white-space: nowrap;
}

.kbsw-wx-banner-temp.is-warm {
    color: #fbbf24;
}

.kbsw-wx-banner-temp.is-cold {
    color: #7dd3fc;
}

.kbsw-wx-banner-cond {
    color: #e2e8f0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbsw-wx-banner-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.56rem;
}

.kbsw-explorer-grid .kbsw-wx-banner-right {
    font-size: 0.65rem;
}

.kbsw-wx-banner-tom {
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
}

/* Bandeau météo en direct en bas de la scène vidéo de la visionneuse */
.kbsw-stage-weather-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(14, 116, 144, 0.28);
    border: 1px solid rgba(56, 189, 248, 0.45);
    padding: 4px 10px;
    border-radius: 7px;
    color: #f0f9ff;
    font-size: 0.76rem;
    font-weight: 700;
}

/* Carte météo 6 jours dans la barre latérale de la visionneuse */
.kbsw-viewer-weather-box {
    background: linear-gradient(145deg, rgba(12, 23, 46, 0.95) 0%, rgba(15, 35, 66, 0.9) 100%);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18);
}

.kbsw-viewer-wx-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kbsw-viewer-wx-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kbsw-viewer-wx-bigicon {
    font-size: 1.8rem;
    line-height: 1;
}

.kbsw-viewer-wx-bigtemp {
    font-size: 1.3rem;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
}

.kbsw-viewer-wx-cond {
    font-size: 0.74rem;
    color: #e2e8f0;
    font-weight: 700;
}

.kbsw-viewer-wx-metrics {
    font-size: 0.66rem;
    color: #94a3b8;
    text-align: right;
    line-height: 1.35;
}

.kbsw-viewer-wx-forecast-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.kbsw-viewer-wx-day {
    background: rgba(9, 13, 24, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.kbsw-viewer-wx-day-name {
    font-size: 0.58rem;
    font-weight: 800;
    color: #cbd5e1;
    text-transform: uppercase;
}

.kbsw-viewer-wx-day-icon {
    font-size: 0.88rem;
    line-height: 1.1;
}

.kbsw-viewer-wx-day-temps {
    font-size: 0.58rem;
    font-weight: 800;
    color: #38bdf8;
}

.kbsw-viewer-wx-day-temps small {
    color: #64748b;
    font-weight: 600;
}

/* ============================================================================
 * 6. CARTE INTERACTIVE DE LA SUISSE (26 CANTONS : JU, NE, VD, VS, GE, BE, etc.)
 * ============================================================================ */
.kbsw-map-view-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.kbsw-map-stage {
    position: relative;
    flex: 1;
    min-height: 220px;
    background: radial-gradient(circle at 50% 45%, #132038 0%, #091122 70%, #050914 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.65);
    user-select: none;
}

.kbsw-map-svg {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
    cursor: grab;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbsw-map-svg.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* Polygones des 26 cantons suisses */
.kbsw-canton-path {
    fill: #1e3150;
    stroke: rgba(226, 232, 240, 0.65);
    stroke-width: 1.4px;
    stroke-linejoin: round;
    transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.kbsw-canton-path[data-region="romandie"] {
    fill: #243b61;
}
.kbsw-canton-path[data-region="espace_mittelland"] {
    fill: #1f3658;
}
.kbsw-canton-path[data-region="suisse_centrale"] {
    fill: #1b3152;
}
.kbsw-canton-path[data-region="nord_ouest"] {
    fill: #23385a;
}
.kbsw-canton-path[data-region="zurich_est"] {
    fill: #1d3456;
}
.kbsw-canton-path[data-region="alpes_sud"] {
    fill: #1a2d4c;
}

.kbsw-canton-path:hover {
    fill: #b91c1c !important;
    stroke: #ffffff !important;
    stroke-width: 2.2px !important;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.65));
}

.kbsw-canton-path.is-selected {
    fill: #dc2626 !important;
    stroke: #fde047 !important;
    stroke-width: 2.5px !important;
    filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.8));
}

/* Étiquettes des 26 Cantons (JU, NE, VD, VS, GE, BE, etc.) */
.kbsw-canton-label-group {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.kbsw-canton-label-pill {
    fill: rgba(9, 13, 24, 0.86);
    stroke: rgba(248, 250, 252, 0.55);
    stroke-width: 1px;
    rx: 5px;
    ry: 5px;
    transition: all 0.18s ease;
}

.kbsw-canton-label-group:hover .kbsw-canton-label-pill,
.kbsw-canton-label-group.is-selected .kbsw-canton-label-pill {
    fill: #d52b1e;
    stroke: #fde047;
    stroke-width: 1.6px;
}

.kbsw-canton-code-text {
    fill: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.kbsw-canton-wx-text {
    fill: #38bdf8;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 8.8px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.kbsw-canton-label-group.is-selected .kbsw-canton-wx-text,
.kbsw-canton-label-group:hover .kbsw-canton-wx-text {
    fill: #fef08a;
}

/* Points GPS des 438 webcams suisses sur la carte */
.kbsw-map-cam-pin {
    fill: #4ade80;
    stroke: #052e16;
    stroke-width: 1.2px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: r 0.15s ease, fill 0.15s ease, stroke-width 0.15s ease;
}

.kbsw-map-cam-pin.is-mountain {
    fill: #38bdf8;
    stroke: #082f49;
}

.kbsw-map-cam-pin:hover,
.kbsw-map-cam-pin.is-active {
    fill: #fde047 !important;
    stroke: #dc2626 !important;
    stroke-width: 2.2px !important;
}

/* Contrôles flottants sur la carte (Zoom, Reset, Filtre Canton, Légende) */
.kbsw-map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 15;
}

.kbsw-map-ctrl-btn {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(9, 13, 24, 0.86);
    color: #ffffff !important;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    pointer-events: auto !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.kbsw-map-ctrl-btn:hover {
    background: #dc2626;
    border-color: #ffffff;
}

.kbsw-map-top-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(9, 13, 24, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    color: #f8fafc;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 15;
    pointer-events: auto !important;
}

.kbsw-map-legend {
    position: absolute;
    bottom: 8px;
    left: 10px;
    background: rgba(9, 13, 24, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    color: #cbd5e1;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 15;
    pointer-events: none;
}

/* Infobulle d'aperçu en direct d'une webcam sur la carte */
.kbsw-map-tooltip {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 240px;
    background: rgba(9, 13, 24, 0.95);
    border: 1px solid #f43f5e;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
    z-index: 20;
    display: none;
    pointer-events: auto !important;
}

.kbsw-map-tooltip.is-visible {
    display: block;
}

/* Liste horizontale des webcams du canton sélectionné sous la carte */
.kbsw-map-canton-drawer {
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 7px 10px;
    flex-shrink: 0;
}

.kbsw-map-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.72rem;
    color: #f8fafc;
    font-weight: 800;
}

.kbsw-map-drawer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 7px;
    max-height: 155px;
    overflow-y: auto;
    padding-right: 3px;
}

.kbsw-explorer-map-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 14px;
    padding: 14px 20px;
    overflow: hidden;
}

.kbsw-explorer-map-sidebar {
    background: rgba(18, 24, 41, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kbsw-explorer-map-sidebar-head {
    padding: 12px 14px;
    background: rgba(9, 13, 24, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kbsw-explorer-map-sidebar-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    align-content: start;
}

/* ============================================================================
 * 7. ONGLET MÉTÉO SUISSE EN DIRECT & PRÉVISIONS 6 JOURS
 * ============================================================================ */
.kbsw-weather-view-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px;
}

.kbsw-explorer-weather-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kbsw-wx-hero-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #0f172a 100%);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 12px;
    padding: 12px 14px;
    color: #f8fafc;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
}

.kbsw-wx-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kbsw-wx-city-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kbsw-wx-city-select {
    background: rgba(9, 13, 24, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #ffffff;
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.kbsw-wx-Current-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kbsw-wx-forecast-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.kbsw-wx-fday-card {
    background: rgba(9, 13, 24, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 7px 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.kbsw-wx-cantons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 7px;
}

.kbsw-wx-canton-tile {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    padding: 7px 9px;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.16s ease;
}

.kbsw-wx-canton-tile:hover {
    border-color: #38bdf8;
    transform: translateY(-1px);
    background: rgba(30, 41, 59, 0.98);
}

/* ============================================================================
 * 8. POSTE DE CONTRÔLE CAMÉRA (PTZ GAUCHE-DROITE / HAUT-BAS, LAMPE, INFRAROUGE,
 *    SON, MICRO, ANTI-BROUILLARD, HUD TÉLÉMÉTRIE & BOUSSOLE 360°)
 * ============================================================================ */

/* Filtres optiques temps réel appliqués au flux caméra (#kbsw-player-wrap) */
.kbsw-player-frame-wrap {
    transition: filter 0.25s ease;
}

.kbsw-player-frame-wrap.is-lamp-active {
    filter: brightness(1.42) contrast(1.14) saturate(1.12);
}

.kbsw-player-frame-wrap.is-ir-night {
    filter: grayscale(100%) brightness(1.38) contrast(1.45) sepia(100%) hue-rotate(72deg) saturate(3.2);
}

.kbsw-player-frame-wrap.is-ir-thermal {
    filter: contrast(1.55) brightness(1.15) invert(100%) hue-rotate(195deg) saturate(3.8);
}

.kbsw-player-frame-wrap.is-ir-mono {
    filter: grayscale(100%) contrast(1.65) brightness(1.18);
}

.kbsw-player-frame-wrap.is-dehaze-active {
    filter: contrast(1.32) saturate(1.25) brightness(1.06);
}

.kbsw-player-frame-wrap.is-lamp-active.is-dehaze-active {
    filter: brightness(1.45) contrast(1.38) saturate(1.25);
}

/* Scène Pan-Tilt-Zoom (PTZ) 360° interactive */
.kbsw-ptz-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #020617;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kbsw-ptz-viewport.is-dragging {
    cursor: grabbing;
}

.kbsw-ptz-canvas-mover {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transition: transform 0.08s linear;
}

.kbsw-ptz-Strip {
    display: flex;
    align-items: center;
    height: 100%;
    will-change: transform;
}

.kbsw-ptz-Strip img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Faisceau projecteur LED / Lampe orientable en surimpression */
.kbsw-lamp-spotlight-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10000093;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: radial-gradient(
        circle 280px at var(--kbsw-spot-x, 50%) var(--kbsw-spot-y, 50%),
        rgba(255, 251, 235, 0.36) 0%,
        rgba(254, 243, 199, 0.14) 42%,
        rgba(2, 6, 23, 0.55) 100%
    );
    mix-blend-mode: screen;
}

.kbsw-lamp-spotlight-overlay.is-active {
    opacity: 1;
}

/* Trame de balayage Infrarouge / Vision Nocturne */
.kbsw-ir-scanlines-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10000093;
    display: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(16, 185, 129, 0.06) 0px,
            rgba(16, 185, 129, 0.06) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 18, 8, 0.65) 100%);
}

.kbsw-ir-scanlines-overlay.is-active {
    display: block;
}

/* Ruban Boussole Azimutale 360° en haut de la scène */
.kbsw-compass-hud-top {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000096 !important;
    background: rgba(9, 13, 24, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 999px;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    pointer-events: auto !important;
}

.kbsw-compass-cardinal-btn {
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(30, 41, 59, 0.85);
    color: #cbd5e1 !important;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.15s ease;
}

.kbsw-compass-cardinal-btn:hover,
.kbsw-compass-cardinal-btn.is-active {
    background: #0284c7;
    border-color: #7dd3fc;
    color: #ffffff !important;
}

/* Réticule HUD Télémétrie (Crosshair + Horizon) */
.kbsw-hud-telemetry-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10000094;
    display: none;
}

.kbsw-hud-telemetry-overlay.is-active {
    display: block;
}

.kbsw-hud-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(56, 189, 248, 0.55);
    border-radius: 50%;
}

.kbsw-hud-crosshair::before,
.kbsw-hud-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(56, 189, 248, 0.7);
}

.kbsw-hud-crosshair::before {
    top: 50%;
    left: -18px;
    right: -18px;
    height: 1px;
}

.kbsw-hud-crosshair::after {
    left: 50%;
    top: -18px;
    bottom: -18px;
    width: 1px;
}

.kbsw-hud-corner-telemetry {
    position: absolute;
    top: 54px;
    left: 14px;
    background: rgba(4, 9, 20, 0.76);
    border-left: 3px solid #38bdf8;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #7dd3fc;
    line-height: 1.45;
}

/* Pavé Directionnel PTZ Flottant sur la Scène (Gauche-Droite / Haut-Bas / Zoom) */
.kbsw-stage-ptz-floating-pad {
    position: absolute;
    bottom: 66px;
    left: 14px;
    z-index: 10000097 !important;
    background: rgba(9, 13, 24, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    pointer-events: auto !important;
}

.kbsw-stage-ptz-floating-pad.is-minimized .kbsw-ptz-pad-body {
    display: none;
}

.kbsw-ptz-pad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    font-size: 0.62rem;
    font-weight: 800;
    color: #bae6fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kbsw-ptz-dpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    grid-template-rows: repeat(3, 32px);
    gap: 4px;
}

.kbsw-ptz-btn {
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(18, 28, 48, 0.95);
    color: #f8fafc !important;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.14s ease;
    padding: 0;
}

.kbsw-ptz-btn:hover {
    background: #0284c7;
    border-color: #7dd3fc;
    transform: scale(1.06);
}

.kbsw-ptz-btn:active {
    background: #0369a1;
    transform: scale(0.96);
}

.kbsw-ptz-btn.is-center-home {
    background: rgba(220, 38, 38, 0.35);
    border-color: rgba(248, 113, 113, 0.6);
    font-size: 0.76rem;
}

.kbsw-ptz-zoom-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.kbsw-ptz-zoom-row .kbsw-ptz-btn {
    flex: 1;
    height: 27px;
    font-size: 0.68rem;
    gap: 3px;
}

/* Barre d'outils rapide des auxiliaires sur la scène (Lampe, IR, Son, Micro, Photo) */
.kbsw-stage-aux-floating-bar {
    position: absolute;
    bottom: 66px;
    right: 14px;
    z-index: 10000097 !important;
    background: rgba(9, 13, 24, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    pointer-events: auto !important;
}

.kbsw-aux-chip-btn {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(18, 28, 48, 0.9);
    color: #e2e8f0 !important;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.16s ease;
}

.kbsw-aux-chip-btn:hover {
    border-color: #38bdf8;
    background: rgba(30, 41, 59, 0.98);
}

.kbsw-aux-chip-btn.is-active {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-color: #7dd3fc;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.kbsw-aux-chip-btn.is-active-warn {
    background: linear-gradient(135deg, #d97706, #b45309);
    border-color: #fde047;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.kbsw-aux-chip-btn.is-active-ir {
    background: linear-gradient(135deg, #059669, #047857);
    border-color: #6ee7b7;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

/* Panneau complet "Poste de Contrôle Caméra" dans la barre latérale */
.kbsw-cam-control-box {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 16, 32, 0.96) 100%);
    border: 1px solid rgba(56, 189, 248, 0.38);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.kbsw-cam-ctrl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.kbsw-cam-ctrl-tile {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.16s ease;
    text-align: left;
}

.kbsw-cam-ctrl-tile:hover {
    border-color: #38bdf8;
    background: rgba(30, 41, 59, 0.95);
}

.kbsw-cam-ctrl-tile.is-active {
    border-color: #4ade80;
    background: rgba(6, 78, 59, 0.45);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

.kbsw-cam-ctrl-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

.kbsw-cam-ctrl-name {
    font-size: 0.72rem;
    font-weight: 800;
    color: #f8fafc;
}

.kbsw-cam-cap-badge {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 999px;
    white-space: nowrap;
}

.kbsw-cam-cap-badge.is-ok {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.kbsw-cam-cap-badge.is-sim {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.kbsw-cam-cap-badge.is-lock {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.kbsw-cam-ctrl-desc {
    font-size: 0.6rem;
    color: #94a3b8;
    line-height: 1.25;
}

.kbsw-voice-status-banner {
    background: rgba(15, 23, 42, 0.9);
    border: 1px dashed rgba(56, 189, 248, 0.45);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 0.64rem;
    color: #bae6fd;
    line-height: 1.35;
}

/* Responsive Mobile & Tablette */
@media (max-width: 960px) {
    .kbsw-selects-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kbsw-explorer-filters {
        grid-template-columns: 1fr 1fr;
    }
    .kbsw-explorer-map-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 55% 45%;
    }
    .kbsw-viewer-body {
        grid-template-columns: 1fr;
        grid-template-rows: 56% 44%;
    }
    .kbsw-viewer-info-sidebar {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .kbsw-wx-forecast-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .kbsw-stage-aux-floating-bar {
        display: none;
    }
}

@media (max-width: 560px) {
    .kbsw-book-grid {
        grid-template-columns: 1fr;
    }
    .kbsw-modal-header {
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
    }
    .kbsw-viewer-wx-forecast-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}