body { overflow-x: hidden }

        .layer-btn {
            display: flex; align-items: center; gap: .5rem;
            padding: .5rem 1.25rem; border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.03);
            color: rgba(240,240,240,0.5);
            font-family: 'Outfit'; font-size: .82rem; font-weight: 600;
            cursor: pointer; transition: all .2s; white-space: nowrap
        }
        .layer-btn.active {
            border-color: rgba(212,175,55,0.5);
            background: rgba(212,175,55,0.1);
            color: #d4af37
        }
        .layer-btn:hover:not(.active) {
            border-color: rgba(255,255,255,.2);
            background: rgba(255,255,255,.06);
            color: rgba(240,240,240,.8)
        }
        .detail-card {
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 16px; padding: 1.5rem; transition: all .3s
        }
        .detail-card.hl {
            border-color: rgba(212,175,55,.3);
            background: rgba(212,175,55,.04)
        }
        .rank-row {
            display: flex; align-items: center; gap: .75rem;
            padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
            cursor: pointer; border-radius: 8px; transition: background .15s
        }
        .rank-row:last-child { border-bottom: none }
        .rank-row:hover { background: rgba(255,255,255,.02) }
        .rnum {
            width: 24px; height: 24px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .65rem; font-weight: 800; flex-shrink: 0
        }
        .sr3 { opacity: 0 }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(12px) }
            to   { opacity: 1; transform: none }
        }
        .sr3.visible { animation: fadeUp .4s ease forwards }

        #france-map { width:100%; height:auto; display:block }
        .region-path { stroke:rgba(255,255,255,0.12); stroke-width:0.8; cursor:pointer; transition:filter .2s }
        .region-path:hover { stroke:rgba(255,255,255,0.5); stroke-width:1.5; filter:brightness(1.25) }
        .region-path.active { stroke:#fff; stroke-width:2; filter:brightness(1.35) }
        #map-tooltip {
            position:fixed; background:rgba(10,10,15,0.95); border:1px solid rgba(212,175,55,0.3);
            border-radius:12px; padding:.75rem 1rem; pointer-events:none; z-index:1000;
            max-width:220px; backdrop-filter:blur(12px); display:none
        }
    </style>