/**
 * Styles pour la carte OSM/Leaflet des pages "randonnee"
 * À placer dans : wp-content/themes/votre-theme-enfant/css/carte-randonnee.css
 */

/* Container de la carte : léger arrondi + ombre pour l'intégrer proprement au design */
#carte-randonnee {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* --- Marqueur custom (pin SVG) --- */
/* Leaflet applique un fond blanc et une bordure par défaut aux divIcon : on les retire */
.rml-marker-hebergement {
    background: transparent !important;
    border: none !important;
}

.rml-marker-hebergement svg {
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* --- Survol du tracé GPX : curseur + info-bulle kilométrique --- */
.rml-gpx-track {
    cursor: crosshair;
}

.rml-gpx-tooltip {
    background-color: #006D84;
    color: #ffffff;
    border: none;
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.rml-gpx-tooltip::before {
    border-top-color: #006D84;
}

/* --- Popup d'une boucle (clic sur un tracé, carte globale) --- */
.rml-popup-boucle {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.05em;
    color: #006D84;
    padding: 18px;
    min-width: 220px;
}

.rml-popup-boucle strong {
    display: block;
    font-size: 1.3em;
    margin-bottom: 6px;
}

.rml-popup-boucle-infos {
    margin: 0 0 12px;
    font-size: 0.85em;
    color: #636363;
}

.rml-popup-boucle .rml-popup-lien {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1em;
    color: #ffffff;
    background-color: #006D84;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
}

.rml-popup-boucle .rml-popup-lien:hover {
    background-color: #C1841E;
    text-decoration: none;
}

/* =========================================================================
 * Carte SVG minimaliste des 9 boucles (page d'accueil)
 * ========================================================================= */

.rml-carte-svg-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.rml-carte-svg {
    display: block;
    width: 100%;
    height: auto;
}

.rml-svg-fond {
    fill: #FEF6E8;
}

.rml-svg-boucle-lien {
    cursor: pointer;
}

/* Zone de clic invisible, plus large que le trait visible pour rester
   facile à cliquer sur un tracé fin */
.rml-svg-boucle-zone-clic {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: stroke;
}

.rml-svg-boucle-trace {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none; /* le clic est géré par la zone-clic en dessous */
    transition: stroke-width 0.2s ease, opacity 0.2s ease;
    opacity: 0.85;
}

.rml-svg-boucle-lien:hover .rml-svg-boucle-trace {
    stroke-width: 6;
    opacity: 1;
}

/* --- Popup des hébergements --- */

/* On retire le padding par défaut de Leaflet et on applique le fond crème de la charte */
.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #FEF6E8;
}

.leaflet-popup-tip {
    background-color: #FEF6E8;
}

.leaflet-popup-content {
    margin: 0;
    width: auto !important;
}

.rml-popup-hebergement {
    font-family: 'League Spartan', sans-serif;
    width: 260px;
}

.rml-popup-photo {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.rml-popup-body {
    padding: 12px 14px;
}

.rml-popup-nom {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 1em;
    color: #006D84;
    line-height: 1.25;
}

.rml-popup-adresse {
    margin: 0 0 3px;
    font-size: 0.78em;
    color: #636363;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rml-popup-prix {
    margin: 0 0 6px;
    font-size: 0.85em;
    font-weight: 700;
    color: #C1841E;
}

.rml-popup-lien {
    font-size: 0.8em;
    font-weight: 700;
    text-decoration: none;
    color: #006D84;
}

.rml-popup-lien:hover {
    text-decoration: underline;
}

/* Popup un peu plus large pour laisser respirer la photo */
.leaflet-popup {
    margin-bottom: 20px;
}