/* Copyright (c) 2025-2026 kwargs SRL, Bruxelles. Tous droits réservés. */

/* Contexte de positionnement pour l'overlay d'aide (absolute inset:0) :
   le zone-plein-écran englobe canvas + sidebar + overlay, en mode normal
   comme en plein écran (c'est la cible de requestFullscreen). */
#cadastre-fullscreen-zone { position: relative; }

.treemap-section { padding: 1rem 0 2rem; }
/* Pleine largeur (container-fluid) : le canvas a vocation a etre
   immersif (vue drone / ciel d'aptitudes / cockpit embarque). On laisse
   la mer et le ciel s'etaler bord a bord, comme une carte ouverte. */
.treemap-frame {
    position: relative;
    max-width: none;
    margin: 0;
}
/* Canvas occupe tout l'espace disponible sous la navbar. ~170 px
   réservés au chrome (navbar + padding de section).
   Fond aligné sur la page hôte (suit data-bs-theme). */
.treemap-canvas {
    width: 100%;
    height: calc(100vh - 170px);
    min-height: 480px;
    background: var(--bs-body-bg);
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: none;
}
/* IMPORTANT mobile : touch-action n'est PAS herite en CSS. Le canvas
   WebGL que Three.js insere dans .treemap-canvas resterait a 'auto'
   sans cette regle -> le navigateur mobile intercepte le touch pour
   scroller la page au lieu de le passer a OrbitControls. */
.treemap-canvas canvas {
    touch-action: none;
}
.treemap-canvas:active { cursor: grabbing; }
.treemap-canvas svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Raccourcis clavier vers les continents ISCO. La nav et ses boutons
   sont visuellement cachés en temps normal mais focusables par Tab.
   Au focus, le bouton revient en bandeau centré en haut du canvas
   avec un ring brand-accent : on voit où on est dans le cycle. */
.cadastre-continents-nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 25;
}
.cadastre-continents-nav ul { list-style: none; margin: 0; padding: 0; }
.cadastre-continent-jump {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    background: transparent;
}
.cadastre-continent-jump:focus {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    overflow: visible;
    padding: .55rem 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 2px solid var(--ks-brand-accent);
    border-radius: 10px;
    font-weight: 600;
    pointer-events: auto;
    z-index: 50;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .35);
    outline: none;
}

/* Loader plein-canvas affiché au chargement initial. Le logo FORSA
   (SVG des 10 continents ISCO compactés) tourne sur 8s linéaire.
   Fade-out 300ms quand init() termine (cf. hideLoader() côté JS). */
.cadastre-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    transition: opacity .3s ease;
}
/* Légende du loader : nomme la métaphore pendant le temps de chargement. */
.cadastre-loader-caption {
    margin: 0;
    max-width: 32rem;
    text-align: center;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
}
.cadastre-loader.hidden {
    opacity: 0;
    pointer-events: none;
}
.cadastre-loader-spin {
    width: 360px;
    height: 360px;
    animation: cadastre-loader-spin 8s linear infinite;
}
.cadastre-loader-logo {
    width: 100%;
    height: 100%;
}
@keyframes cadastre-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Continents en couche plate, fallback 2D SVG. */
.treemap-canvas .continent {
    fill-opacity: 1;
    stroke: rgba(0, 0, 0, .2);
    stroke-width: 1;
}

/* Districts en couche au-dessus des continents. */
.treemap-canvas .district {
    fill-opacity: .35;
    stroke: rgba(255, 255, 255, .25);
    stroke-width: .8;
    transition: fill-opacity .12s ease;
}
.treemap-canvas .district.hover { fill-opacity: .55; }

/* Parcelles plates (fallback 2D, occupations sans optionnelles). */
.treemap-canvas .occupation > rect:not(.building-top),
.treemap-canvas rect.occupation {
    fill-opacity: .95;
    stroke: rgba(0, 0, 0, .35);
    stroke-width: .4;
}

/* Bâtiments 2.5D du fallback 2D : toit + faces latérales avec
   shading par opacité contre fond sombre. */
.treemap-canvas .building-top {
    fill-opacity: .95;
    stroke: rgba(0, 0, 0, .45);
    stroke-width: .4;
}
.treemap-canvas .building-right {
    fill-opacity: .45;
    stroke: rgba(0, 0, 0, .3);
    stroke-width: .3;
}
.treemap-canvas .building-front {
    fill-opacity: .65;
    stroke: rgba(0, 0, 0, .35);
    stroke-width: .3;
}

.treemap-canvas .occupation.hover .building-top,
.treemap-canvas rect.occupation.hover {
    fill-opacity: 1;
    stroke: var(--ks-brand-accent);
    stroke-width: 1.4;
}
.treemap-canvas .occupation.hover .building-right { fill-opacity: .65; }
.treemap-canvas .occupation.hover .building-front { fill-opacity: .85; }

.treemap-tooltip {
    position: absolute;
    z-index: 10;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: .4rem .65rem;
    font-size: .82rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
    pointer-events: none;
    max-width: 260px;
    line-height: 1.3;
}
.treemap-tooltip[hidden] { display: none; }
.treemap-tooltip .tt-label { font-weight: 600; }
.treemap-tooltip .tt-meta {
    color: var(--bs-secondary-color);
    font-size: .72rem;
    margin-top: .15rem;
}
/* Ligne offres publiées : pleine couleur brand-accent, plus dense que
   les meta pour signaler l'opportunité actionnable. Affichée seulement
   si le compte > 0 (cf. showOccupationTooltip). */
.treemap-tooltip .tt-jobs {
    color: var(--ks-brand-accent);
    font-size: .75rem;
    font-weight: 600;
    margin-top: .3rem;
}

/* Variante continent : cartouche coloré avec la couleur ISCO du
   major, texte en capitales pour évoquer un cartouche d'atlas. Fond
   fixé via inline style depuis le JS (couleur du continent). */
.treemap-tooltip.tt-continent {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    border: 0;
    padding: .55rem .85rem;
}
.treemap-tooltip.tt-continent .tt-label {
    color: #fff;
    font-weight: 700;
}
.treemap-tooltip.tt-continent .tt-meta {
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
    letter-spacing: .08em;
    font-size: .68rem;
    margin-top: .25rem;
}

/* Panneau légende flottant en bas-droite du canvas. Collapsible
   (<details>), avec 3 sections elles aussi collapsibles. Inspiré
   de la légende de /explorateur/2d/ : checkbox + swatch + label + count
   par item, actions "tout cocher / décocher" en bas. */
.cad-legend {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 11;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    max-width: 300px;
    max-height: calc(100% - 10rem);  /* laisse de la place aux 3 boutons à droite */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.cad-legend > summary {
    list-style: none;
    cursor: pointer;
    padding: .5rem .75rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .85;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    position: sticky;
    top: 0;
    background: var(--bs-body-bg);
    z-index: 1;
}
.cad-legend > summary::-webkit-details-marker { display: none; }
.cad-legend > summary::after {
    content: '+';
    font-size: 1rem;
    font-weight: 400;
    opacity: .6;
    line-height: 1;
}
.cad-legend[open] > summary::after { content: '−'; }

.cad-legend > summary:hover { background: var(--bs-tertiary-bg); }

.cad-legend .filter-list {
    list-style: none;
    padding: .15rem .35rem;
    margin: 0;
}
.cad-legend .filter-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .4rem;
    border-radius: .25rem;
    cursor: pointer;
    user-select: none;
    font-size: .8rem;
}
.cad-legend .filter-item:hover { background: var(--bs-tertiary-bg); }
.cad-legend .filter-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--ks-brand-accent);
}
.cad-legend .filter-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.cad-legend .filter-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.cad-legend .filter-count {
    font-size: .7rem;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}
.cad-legend .filter-actions {
    padding: .35rem .6rem .5rem;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0;
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
    z-index: 1;
    display: flex;
    gap: .4rem;
    font-size: .75rem;
}
.cad-legend .filter-actions button {
    background: transparent;
    border: 0;
    color: inherit;
    opacity: .7;
    cursor: pointer;
    padding: .15rem .3rem;
    border-radius: .2rem;
}
.cad-legend .filter-actions button:hover {
    opacity: 1;
    background: var(--bs-tertiary-bg);
}

.cad-legend details.legend-section {
    border-top: 1px solid var(--bs-border-color);
}
.cad-legend details.legend-section:first-of-type { border-top: 0; }
.cad-legend details.legend-section > summary {
    list-style: none;
    cursor: pointer;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
    padding: .45rem .6rem;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cad-legend details.legend-section > summary::-webkit-details-marker { display: none; }
.cad-legend details.legend-section > summary::after {
    content: '+';
    font-size: 1rem;
    font-weight: 400;
    opacity: .8;
    line-height: 1;
}
.cad-legend details.legend-section[open] > summary::after { content: '−'; }
.cad-legend details.legend-section > summary:hover { opacity: 1; }

@media (max-width: 640px) {
    .cad-legend { max-width: 220px; bottom: .5rem; right: .5rem; }
}

/* Barre de recherche flottante, centrée en haut du canvas.
   Cherche dans tout l'ESCO (occupations + aptitudes) côté client via
   l'index labels du payload. Design repris de /composer/occupations/
   (border 2px arrondi, focus brand accent, icône à droite). */
.cadastre-search {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    width: min(520px, calc(100% - 12rem));
}
.cadastre-search-wrap { position: relative; }
.cadastre-search-input {
    width: 100%;
    padding: .7rem 3rem .7rem 1.15rem;
    font-size: 1rem;
    border: 2px solid var(--bs-border-color);
    border-radius: .8rem;
    background: var(--bs-body-bg);
    color: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
.cadastre-search-input:focus {
    outline: none;
    border-color: var(--ks-brand-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--ks-primary-rgb), .15),
                0 2px 10px rgba(0, 0, 0, .1);
}
.cadastre-search-icon {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .5;
}
.cadastre-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    z-index: 16;
}
.cadastre-search-results[hidden] { display: none; }
.cadastre-search-results .result-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.cadastre-search-results .result-item:last-child { border-bottom: 0; }
.cadastre-search-results .result-item:hover {
    background: var(--bs-tertiary-bg);
}
.cadastre-search-results .result-label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cadastre-search-results .result-kind {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}
.cadastre-search-results .result-kind.occ {
    background: var(--ks-brand-accent);
}
.cadastre-search-results .result-kind.skill {
    background: var(--bs-secondary-color);
}
.cadastre-search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

/* Bouton retour en vue rue, posé sur le canvas en haut à gauche. */
.cadastre-street-exit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    background: rgba(20, 24, 32, .72);
    color: #fff;
    border: 0;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-size: .85rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background .12s ease;
}
.cadastre-street-exit:hover { background: rgba(20, 24, 32, .9); }
.cadastre-street-exit[hidden] { display: none; }

/* Boutons ronds de contrôle dans le canvas (recentrer, plein écran,
   2D, recherche). Diamètre fixe en rem pour rester homogènes quelle
   que soit la taille de leur glyphe interne. */
.cadastre-recenter,
.cadastre-fullscreen,
.cadastre-2d,
.cadastre-search-toggle,
.cadastre-help-toggle {
    position: absolute;
    right: 1rem;
    z-index: 20;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: rgba(20, 24, 32, .72);
    color: #fff;
    border: 0;
    cursor: pointer;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease;
    text-decoration: none;
}
.cadastre-recenter:hover,
.cadastre-fullscreen:hover,
.cadastre-2d:hover,
.cadastre-search-toggle:hover,
.cadastre-help-toggle:hover {
    background: rgba(20, 24, 32, .9);
    color: #fff;
}

.cadastre-search-toggle { top: 4rem;  font-size: 1.05rem; }
.cadastre-recenter      { top: 7rem;  font-size: 1.1rem; }
.cadastre-fullscreen    { top: 10rem; font-size: 1.1rem; }
.cadastre-2d {
    top: 13rem;
    font-size: .85rem;
    font-weight: 700;
}
.cadastre-help-toggle   { top: 16rem; font-size: 1.1rem; }

/* En plein écran, on étale vraiment le canvas à 100vh et 100vw :
   - section : plus de padding (pas de header/navbar à compenser)
   - frame : plus de max-width 1400px
   - canvas : 100vh sans réserver les ~170px du chrome
   - légende : masquée (le ciel + la ville parlent d'eux-mêmes en
     immersion)
   - sidebar : top:0 puisque la navbar n'est plus visible. */
:fullscreen .treemap-section { padding: 0; }
:fullscreen .treemap-frame { max-width: none; margin: 0; }
:fullscreen .treemap-canvas {
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
}
:fullscreen .cad-sidebar { top: 0; }

/* Sidebar détail : structure et règles dupliquées de /explorateur/2d/
   (cf. esco/templates/esco/map.html lignes 50-444). À mutualiser
   en partiel + fichier CSS partagé quand les deux pages convergent.
   position: fixed pour se caler sur le bord gauche du viewport,
   pas du canvas (qui est dans un frame max-width centré). top: 56px
   pour passer sous la navbar Bootstrap. */
.cad-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    box-shadow: 4px 0 16px rgba(0, 0, 0, .08);
    z-index: 1020;
    transition: transform .25s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cad-sidebar.closed { transform: translateX(-100%); }
.cad-sidebar:not(.closed) { transform: translateX(0); }

.cad-sidebar .sb-header {
    flex-shrink: 0;
    padding: 1rem 1.1rem .6rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
}
.cad-sidebar .sb-header h1 {
    font-size: 1.15rem;
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
}
.cad-sidebar .sb-subtitle {
    font-size: .75rem;
    opacity: .65;
    margin-top: .15rem;
}
.cad-sidebar .sb-close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .25rem;
    cursor: pointer;
}
.cad-sidebar .sb-close:hover { background: var(--bs-tertiary-bg); }

.cad-sidebar .sb-body {
    flex: 1;
    overflow-y: auto;
    padding: .9rem 1.1rem;
}
.cad-sidebar .sb-section { margin-bottom: 1.3rem; }

/* Bascule occupation / aptitude dans la vue detail. .skill-mode est
   ajoutée à #cad-sidebar quand on clique sur une étoile, retirée sur
   clic d'un bâtiment ou exit. */
.cad-sidebar .detail-mode-skill { display: none; }
.cad-sidebar.skill-mode .detail-mode-occupation { display: none; }
.cad-sidebar.skill-mode .detail-mode-skill { display: block; }

.cad-sidebar details.sb-section {
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: .6rem;
}
.cad-sidebar details.sb-section:last-of-type { border-bottom: 0; }
.cad-sidebar details.sb-section > summary {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .75;
    font-weight: 600;
    cursor: pointer;
    padding: .4rem 0;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cad-sidebar details.sb-section > summary::-webkit-details-marker { display: none; }
.cad-sidebar details.sb-section > summary:hover { opacity: 1; }
.cad-sidebar details.sb-section > summary::after {
    content: '+';
    font-size: 1.1rem;
    opacity: .6;
    font-weight: 400;
    width: 1rem;
    text-align: center;
}
.cad-sidebar details.sb-section[open] > summary::after { content: '−'; }
.cad-sidebar details.sb-section > *:not(summary) { margin-top: .3rem; }
.cad-sidebar .sb-section > summary > span:first-child { flex: 1; }
.cad-sidebar .sb-count {
    font-variant-numeric: tabular-nums;
    opacity: .6;
    font-weight: 400;
    margin-left: .4rem;
}

.cad-sidebar .sb-desc {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--bs-body-color);
}
.cad-sidebar .sb-empty {
    font-size: .82rem;
    opacity: .6;
    font-style: italic;
}

.cad-sidebar .detail-title-wrap {
    border-left: 4px solid var(--bs-border-color);
    padding-left: .7rem;
    margin-bottom: 1rem;
}
.cad-sidebar .detail-title {
    font-size: 1.05rem;
    margin: 0 0 .2rem 0;
    line-height: 1.3;
}
.cad-sidebar .detail-meta { font-size: .74rem; opacity: .7; }

/* Empreinte céleste : SVG injecté par renderConstellation() côté JS.
   Cartouche carré centré dans la sidebar, fond bleu nuit (indépendant
   du thème pour rester lisible et fidèle au ciel 3D). Le cercle de
   référence trace la limite du dôme. Les étoiles essentielles sont
   orange et plus grosses, les optionnelles bleu froid et plus petites
   (mêmes teintes que les faisceaux 3D). Arêtes en MST. */
.sb-constellation {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 1rem auto;
    background: #0d1424;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .45);
}
.sb-constellation[hidden] { display: none; }
.sb-constellation .constellation-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.constellation-dome {
    fill: none;
    stroke: rgba(255, 255, 255, .15);
    stroke-width: 16;
}
.constellation-bg-star {
    fill: rgba(255, 255, 255, .14);
}
.constellation-edge {
    /* Gold FORSA (cf. HIGHLIGHT_EMISSIVE = 0xffd166 dans cadastre_3d.js),
       le même or qui marque le bâtiment sélectionné. */
    stroke: rgba(255, 209, 102, .55);
    stroke-width: 1.4;
}
.constellation-star {
    cursor: pointer;
    transition: filter .12s ease, transform .12s ease;
    transform-origin: center;
    transform-box: fill-box;
}
.constellation-star:hover {
    filter: drop-shadow(0 0 6px currentColor);
    transform: scale(1.25);
}
.constellation-star-essential {
    fill: #FF7043;
    color: #FF7043;
}
.constellation-star-optional {
    fill: #42A5F5;
    color: #42A5F5;
}

.cad-sidebar .offre-list { list-style: none; padding: 0; margin: 0; }
.cad-sidebar .offre-list li {
    padding: 0;
    border-bottom: 1px dashed var(--bs-border-color);
}
.cad-sidebar .offre-list li:last-child { border-bottom: 0; }
.cad-sidebar .offre-list a {
    display: block;
    padding: .4rem .3rem;
    text-decoration: none;
    color: inherit;
    line-height: 1.3;
}
.cad-sidebar .offre-list a:hover,
.cad-sidebar .offre-list a:focus { background: var(--bs-tertiary-bg); }
.cad-sidebar .offre-list .offre-title {
    font-size: .88rem;
    font-weight: 600;
    display: block;
}
.cad-sidebar .offre-list .offre-meta {
    font-size: .75rem;
    opacity: .7;
    display: block;
    margin-top: .1rem;
}

.cad-sidebar .nace-list { list-style: none; padding: 0; margin: 0; }
.cad-sidebar .nace-list li {
    padding: .3rem .3rem;
    font-size: .82rem;
    border-bottom: 1px dashed var(--bs-border-color);
    line-height: 1.35;
}
.cad-sidebar .nace-list li:last-child { border-bottom: 0; }
.cad-sidebar .nace-list .nace-code {
    display: inline-block;
    font-family: monospace;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: .25rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    margin-right: .4rem;
    vertical-align: middle;
}

.cad-sidebar .skill-list { list-style: none; padding: 0; margin: 0; }
.cad-sidebar .skill-list li {
    padding: .3rem .3rem;
    font-size: .82rem;
    border-bottom: 1px dashed var(--bs-border-color);
    border-radius: .25rem;
    cursor: pointer;
}
.cad-sidebar .skill-list li:hover { background: var(--bs-tertiary-bg); }
.cad-sidebar .skill-list li:last-child { border-bottom: 0; }
.cad-sidebar .skill-type {
    display: inline-block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border-radius: .25rem;
    margin-right: .4rem;
    vertical-align: middle;
    color: #fff;
    font-weight: 600;
}
.cad-sidebar .skill-type.knowledge  { background: var(--ks-deep-blue); }
.cad-sidebar .skill-type.competence { background: var(--ks-emerald); }
[data-bs-theme="dark"] .cad-sidebar .skill-type.knowledge {
    background: var(--ks-sky); color: var(--ks-navy);
}

.cad-sidebar .related-list { list-style: none; padding: 0; margin: 0; }
.cad-sidebar .related-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .3rem;
    border-bottom: 1px dashed var(--bs-border-color);
    cursor: pointer;
    border-radius: .25rem;
}
.cad-sidebar .related-list li:last-child { border-bottom: 0; }
.cad-sidebar .related-list li:hover { background: var(--bs-tertiary-bg); }
.cad-sidebar .related-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.cad-sidebar .related-label {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.3;
}
.cad-sidebar .related-shared {
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    opacity: .65;
    padding: .1rem .35rem;
    border-radius: .2rem;
    background: var(--bs-tertiary-bg);
}

/* ------------------------------------------------------------------ *
 * Aide pédagogique : overlay « Comprendre la carte »                  *
 * Carte de premier contact (auto une fois) + rappel permanent via le  *
 * bouton ⓘ. role=dialog/aria-modal gérés en JS (focus piégé, ESC).    *
 * ------------------------------------------------------------------ */
.cadastre-help-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;  /* au-dessus du canvas, des contrôles (20) et du loader (30) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.cadastre-help-overlay[hidden] { display: none; }
.cadastre-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, .55);
    backdrop-filter: blur(3px);
}
.cadastre-help-dialog {
    position: relative;
    width: min(34rem, 100%);
    max-height: 100%;
    overflow-y: auto;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    box-shadow: 0 12px 40px rgba(8, 12, 20, .35);
    padding: 1.6rem 1.6rem 1.4rem;
    animation: cadastre-help-in .25s ease-out;
}
/* Respect de prefers-reduced-motion : pas d'apparition animée. */
@media (prefers-reduced-motion: reduce) {
    .cadastre-help-dialog { animation: none; }
}
@keyframes cadastre-help-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cadastre-help-x {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 1.9rem;
    height: 1.9rem;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    border-radius: .25rem;
    cursor: pointer;
}
.cadastre-help-x:hover { background: var(--bs-tertiary-bg); }
.cadastre-help-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 2rem .6rem 0;
    line-height: 1.25;
}
.cadastre-help-intro {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
    margin: 0 0 1.1rem;
}
.cadastre-help-list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.cadastre-help-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .95rem;
    line-height: 1.45;
}
.cadastre-help-glyph {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--bs-tertiary-bg);
    color: var(--ks-brand-accent, var(--bs-primary));
}
.cadastre-help-note,
.cadastre-help-tip {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
    margin: 0 0 .4rem;
}
.cadastre-help-note { font-style: italic; }
.cadastre-help-tip { margin-bottom: 1.2rem; }
.cadastre-help-cta { width: 100%; }