/* Carte des niveaux du profil : un plan sombre, les niveaux visités allumés, les voisins en « ??? » */
.carte-niveaux {
    --carte-fond: #16130c;
    --carte-trait: #3a3222;
    --carte-allume: #d4b87a;
    --carte-texte: #e8dcb8;
    --carte-pale: #6b5c44;
    --rx: 0deg;
    --rz: 0deg;
    margin-bottom: 22px;
}

.carte-barre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.carte-resume { font-size: 0.8rem; color: var(--text-faded, #5a5a4a); }
.carte-boutons { display: flex; gap: 4px; }
.carte-btn {
    background: transparent;
    border: 1px solid var(--carpet-main, #6b5344);
    color: var(--carpet-dark, #5c4636);
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.carte-btn.actif { background: var(--carpet-main, #6b5344); color: var(--fluorescent, #fffde7); }
.carte-recentrer { display: none; }
.carte-niveaux[data-mode="3d"] .carte-recentrer { display: inline-block; }

.carte-scene {
    background:
        radial-gradient(ellipse at center, rgba(212,184,122,0.06) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(212,184,122,0.04) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(212,184,122,0.04) 39px 40px),
        var(--carte-fond);
    border: 2px solid var(--carpet-dark, #5c4636);
    border-radius: 4px;
    padding: 18px 10px;
    overflow: hidden;
    perspective: 1600px;
    perspective-origin: 50% 30%;
    user-select: none;
    -webkit-user-select: none;
}

.carte-plan {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateZ(var(--rz));
    transition: transform 0.6s ease, margin 0.6s ease;
}
.carte-niveaux.glisse .carte-plan { transition: none; }

.carte-liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.carte-liens line { stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke 0.2s, opacity 0.2s; }
.carte-liens .lien-connu { stroke: var(--carte-allume); opacity: 0.35; }
.carte-liens .lien-devine { stroke: var(--carte-pale); opacity: 0.45; stroke-dasharray: 4 5; }
.carte-liens line.surligne { opacity: 1; stroke: #ffe9a8; stroke-width: 2.5; }
.carte-niveaux.survol .carte-liens line:not(.surligne) { opacity: 0.1; }

.carte-niveau {
    position: absolute;
    width: 128px;
    max-width: 18%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 100%;
    transition: transform 0.6s ease, box-shadow 0.2s, border-color 0.2s;
    padding: 6px 8px 7px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none !important;
    line-height: 1.25;
    font-size: inherit;
    font-family: 'Courier New', Courier, monospace;
}
.carte-niveaux.glisse .carte-niveau { transition: none; }

.niveau-visite {
    background: #241e12;
    border: 1px solid var(--carte-allume);
    color: var(--carte-texte);
    box-shadow: 0 0 12px rgba(212,184,122,0.18);
}
.niveau-ouvrable { cursor: pointer; }
.niveau-visite:hover { border-color: #ffe9a8; box-shadow: 0 0 18px rgba(255,233,168,0.35); }
.niveau-inconnu {
    background: rgba(22,19,12,0.9);
    border: 1px dashed var(--carte-pale);
    color: var(--carte-pale);
    letter-spacing: 0.2em;
}

.carte-court { display: block; font-size: 0.74rem; font-weight: bold; }
.carte-sous-titre {
    display: block;
    font-size: 0.6rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carte-pct { display: block; height: 3px; margin-top: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.carte-pct span { display: block; height: 100%; background: var(--carte-allume); }

.niveau-actuel { border-color: #ffe9a8; animation: carte-pulse 2.4s ease-in-out infinite; }
.carte-ici {
    position: absolute;
    top: -9px;
    right: -6px;
    background: #ffe9a8;
    color: #241e12;
    font-size: 0.55rem;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    letter-spacing: 0.08em;
}
@keyframes carte-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,233,168,0.25); }
    50%      { box-shadow: 0 0 22px rgba(255,233,168,0.6); }
}

/* 3D : le plan s'incline, les niveaux se dressent face à la caméra et projettent une ombre au sol */
.carte-niveaux[data-mode="3d"] .carte-scene { cursor: grab; touch-action: none; }
.carte-niveaux.glisse .carte-scene { cursor: grabbing; }
.carte-niveaux[data-mode="3d"] .carte-niveau {
    transform: translate(-50%, -100%) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translateY(-6px);
}
.carte-niveaux[data-mode="3d"] .niveau-visite { box-shadow: 0 10px 18px rgba(0,0,0,0.55), 0 0 14px rgba(212,184,122,0.25); }

.carte-aide { font-size: 0.72rem; color: var(--text-faded, #5a5a4a); margin: 6px 0 0; }
.carte-aide > span { display: none; }
.carte-niveaux[data-mode="2d"] .aide-2d,
.carte-niveaux[data-mode="3d"] .aide-3d,
.carte-niveaux[data-mode="niveau"] .aide-detail { display: inline; }

/* Plan des nœuds d'un niveau */
.detail-barre { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.detail-titre { font-size: 0.85rem; color: var(--carpet-dark, #5c4636); font-weight: bold; flex: 1; }
.detail-wiki { font-size: 0.75rem; color: var(--carpet-dark, #5c4636); }
.detail-scene {
    background: var(--carte-fond);
    border: 2px solid var(--carpet-dark, #5c4636);
    border-radius: 4px;
    padding: 8px;
    max-height: 70vh;
    overflow: auto;
}
.detail-svg { display: block; max-width: none; margin: 0 auto; }
.detail-svg path { fill: none; stroke-width: 1.2; transition: opacity 0.2s, stroke 0.2s; }
.detail-svg .dl-connu { stroke: var(--carte-allume); opacity: 0.55; }
.detail-svg .dl-devine { stroke: var(--carte-pale); opacity: 0.35; stroke-dasharray: 3 4; }
.detail-svg .dl-trajet { stroke: #ffe9a8; opacity: 0.95; stroke-width: 2.4; }
.detail-svg path.surligne { stroke: #ffe9a8; opacity: 1; stroke-width: 2.2; }
.dn { cursor: pointer; outline: none; }
.dn circle { stroke-width: 1.5; }
.dn-visite circle { fill: var(--carte-allume); stroke: #ffe9a8; }
.dn-inconnu circle { fill: var(--carte-fond); stroke: var(--carte-pale); stroke-dasharray: 2 2; }
.dn .dn-anneau { fill: none !important; stroke: #ffe9a8; stroke-dasharray: none; opacity: 0.8; }
.dn-mort circle { fill: #8a1a10; stroke: #e74c3c; }
.dn-fin circle { fill: #241e12; stroke: #ffe9a8; }
.dn text { text-anchor: middle; pointer-events: none; }
.dn .dn-icone { font-size: 9px; fill: #fffde7; }
.dn .dn-etiquette {
    font-size: 10.5px;
    fill: var(--carte-texte);
    font-family: 'Courier New', Courier, monospace;
    paint-order: stroke;
    stroke: var(--carte-fond);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.dn-choisi .dn-etiquette { fill: #ffe9a8; font-weight: bold; }
.dn-choisi circle:not(.dn-anneau) { stroke: #fff; stroke-width: 3; }
.dn:hover circle:not(.dn-anneau), .dn:focus circle:not(.dn-anneau) { stroke: #fff; stroke-width: 2.5; }
.dn-inconnu { cursor: default; }

/* Contenu du nœud choisi : son texte et ses choix */
.detail-noeud {
    margin-top: 10px;
    background: #fffde7;
    border: 2px solid var(--carpet-dark, #5c4636);
    border-radius: 4px;
    padding: 14px 18px;
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-dark, #2a2a20);
}
.detail-vide { margin: 0; font-size: 0.8rem; color: var(--text-faded, #5a5a4a); }
.dn-titre { font-size: 0.95rem; font-weight: bold; margin: 0 0 8px; color: var(--carpet-dark, #5c4636); font-family: inherit; }
.dn-texte { font-size: 0.82rem; line-height: 1.7; white-space: pre-wrap; max-height: 40vh; overflow: auto; }
.dn-choix { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--carpet-main, #6b5344); }
.dn-choix li { font-size: 0.8rem; line-height: 1.6; padding: 3px 0; color: var(--text-faded, #5a5a4a); }
.dn-choix .choix-pris { color: var(--text-dark, #2a2a20); font-weight: bold; }
.dn-choix .choix-explore { color: var(--text-dark, #2a2a20); }
.choix-marque {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.65rem;
    font-weight: normal;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--carpet-main, #6b5344);
    color: var(--fluorescent, #fffde7);
    vertical-align: middle;
}
.choix-explore .choix-marque { background: transparent; border: 1px solid var(--carpet-main, #6b5344); color: var(--carpet-dark, #5c4636); }

@media (max-width: 600px) {
    .carte-scene { padding: 12px 4px; }
    .carte-niveau { padding: 4px 3px 5px; }
    .carte-court { font-size: 0.6rem; }
    .carte-sous-titre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .carte-plan, .carte-niveau { transition: none; }
    .niveau-actuel { animation: none; }
}