/* Cartes du site (assets/js/carte.js) : fond aquarelle, repères et commandes assortis à la charte */
.carte-aquarelle {
    background: var(--papier, #f6efe3);
    font-family: var(--police-texte, system-ui, sans-serif);
}

/* Fond vectoriel MapLibre (glissé dans le calque des tuiles de Leaflet) */
.fond-aquarelle {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    pointer-events: none;
}
/* Grain du papier et léger voile sur les bords, comme une feuille d'aquarelle
   (dans le calque du fond : les tracés et les repères restent nets au-dessus) */
.fond-aquarelle::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 60%, rgb(201 178 150 / 0.25) 100%),
        url("../images/aquarelle/papier-PGVHOgc.svg");
    mix-blend-mode: multiply;
    opacity: 0.8;
}
/* Repli sans WebGL : tuiles OpenStreetMap adoucies vers les pastels */
.fond-repli {
    filter: sepia(0.35) saturate(0.55) hue-rotate(-12deg) brightness(1.06) contrast(0.88);
}

/* Commandes Leaflet : boutons de papier, encre douce */
.carte-aquarelle .leaflet-bar {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgb(79 72 88 / 0.16);
}
.carte-aquarelle .leaflet-bar a {
    background: var(--papier-clair, #fffaf2);
    color: var(--encre, #4f4858);
    border-bottom-color: var(--trait, #e6dccb);
    font-weight: 400;
}
.carte-aquarelle .leaflet-bar a:hover { background: var(--papier, #f6efe3); }
.carte-aquarelle .leaflet-control-attribution {
    background: rgb(255 250 242 / 0.75);
    color: var(--encre-douce, #8a8189);
    font-size: 10px;
    border-top-left-radius: 8px;
}
.carte-aquarelle .leaflet-control-attribution a { color: inherit; }
.carte-aquarelle .leaflet-popup-content-wrapper,
.carte-aquarelle .leaflet-popup-tip {
    background: var(--papier-clair, #fffaf2);
    color: var(--encre, #4f4858);
    box-shadow: 0 6px 24px rgb(79 72 88 / 0.18);
}
.carte-aquarelle .leaflet-popup-content-wrapper { border-radius: 16px; }
.carte-aquarelle .leaflet-popup-content { margin: 14px 18px; font-size: 0.95rem; line-height: 1.45; }
.carte-aquarelle .leaflet-container a.leaflet-popup-close-button { color: var(--encre-douce, #8a8189); }

/* Balise numérotée : tache d'aquarelle, numéro à l'encre */
.pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: url("../images/aquarelle/tache-attente-klwvBVh.svg") center / contain no-repeat;
    font: 700 14px/1 var(--police-texte, system-ui, sans-serif);
    color: var(--encre, #4f4858);
    filter: drop-shadow(0 1px 1.5px rgb(79 72 88 / 0.25));
}
.pastille-actif { background-image: url("../images/aquarelle/tache-actif-BwiWQOS.svg"); transform: scale(1.18); }
.pastille-passee { background-image: url("../images/aquarelle/tache-passee-x6AarEn.svg"); }
.balise-item .pastille { width: 30px; height: 30px; font-size: 13px; transform: none; flex-shrink: 0; }

/* « Vous êtes ici » : goutte d'encre bleue qui respire */
.point-joueur {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #8fb0cf, #5b7fa6 70%);
    border: 3px solid var(--papier-clair, #fffaf2);
    box-shadow: 0 0 0 0 rgb(91 127 166 / 0.5), 0 1px 4px rgb(79 72 88 / 0.35);
    animation: pulsation 2.4s ease-out infinite;
}
.etiquette-joueur {
    position: absolute;
    left: 26px;
    top: 0;
    white-space: nowrap;
    background: var(--papier-clair, #fffaf2);
    color: var(--encre, #4f4858);
    border-radius: 999px;
    padding: 1px 9px;
    font: 600 12px/1.6 var(--police-texte, system-ui, sans-serif);
    box-shadow: 0 1px 4px rgb(79 72 88 / 0.25);
}
@keyframes pulsation {
    70% { box-shadow: 0 0 0 16px rgb(91 127 166 / 0), 0 1px 4px rgb(79 72 88 / 0.35); }
    100% { box-shadow: 0 0 0 0 rgb(91 127 166 / 0), 0 1px 4px rgb(79 72 88 / 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .point-joueur { animation: none; }
}