/* =================================================================
   PANNEAU DE LA LÉGENDE PLEIN ÉCRAN FLUIDE
   ================================================================= */
#legend-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 41, 59, 0.85); /* Même transparence bleu ardoise */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-main);
    padding: 140px 24px 40px 24px; /* Plus d'espace en haut pour laisser respirer les deux boutons */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 3000;
    
    /* Transition fluide en fondu */
    transition: background-color 0.25s ease, color 0.25s ease, backdrop-filter 0.25s ease;
    pointer-events: auto;
}

/* ÉTAT REPLIÉ (Masqué par défaut) */
#legend-panel.collapsed {
    background-color: transparent;
    color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
}

/* Masquage des éléments internes quand replié */
#legend-panel.collapsed h3,
#legend-panel.collapsed hr,
#legend-panel.collapsed .legend-container {
    display: none;
}

/* Titre de la légende */
#legend-panel h3 {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    font-weight: 600;
}

#legend-panel hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 16px 0;
}

/* =================================================================
   BOUTON FLOTTANT LÉGENDE (Placé en dessous du premier)
   ================================================================= */
#legend-toggle {
    position: fixed;
    top: 68px;        /* 16px (top du 1er) + 44px (hauteur) + 8px (espace) = 68px */
    right: 16px;
    width: 44px;
    height: 44px;
    background-color: #1e293b;
    color: var(--text-main);
    border: 1px solid #64748b;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3002;     /* Un cran au-dessus pour rester toujours cliquable */
    pointer-events: auto;
    transition: all 0.2s ease;
}

#legend-toggle:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Style du bouton quand la légende est ouverte */
#legend-panel:not(.collapsed) #legend-toggle {
    border-color: var(--border-color);
    background-color: var(--bg-sidebar);
}

/* =================================================================
   CONTENU DE LA LÉGENDE (ACCORDÉONS)
   ================================================================= */
.legend-container {
    max-width: 500px;
    width: 100%;
}

.legend-section {
    background-color: #273549;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.legend-section summary {
    padding: 14px 20px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    outline: none;
}

.legend-section summary:hover {
    background-color: #2d3d54;
    color: var(--accent-color);
}

.legend-content {
    padding: 16px 20px;
    background-color: #1e293b;
    border-top: 1px solid var(--border-color);
}

/* Pentes */
.pente-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.pente-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #cbd5e1;
}
.pente-color {
    width: 24px;
    height: 12px;
    border-radius: 3px;
    margin-right: 10px;
    display: inline-block;
}

/* Routes */
.road-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #cbd5e1;
}
.road-line {
    width: 30px;
    height: 3px;
    margin-right: 12px;
    display: inline-block;
}
.road-express   { background: #ef4444; height: 5px; }
.road-main      { background: #f97316; }
.road-secondary { background: #eab308; }
.road-gravel    { background: #94a3b8; border-style: dashed; height: 2px; }
.road-cycle     { background: #22c55e; }

/* POI */
.poi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    font-size: 0.9rem;
    color: #cbd5e1;
}

/* Style pour les images d'icônes dans la légende */
.poi-item {
    display: flex;
    align-items: center; /* Aligne verticalement l'icône et le texte */
    gap: 10px;           /* Espace régulier entre l'image et le texte */
    font-size: 0.9rem;
    color: #cbd5e1;
}

.poi-icon {
    width: auto;
    height: 22px;        /* Fixe la hauteur pour que toutes les icônes soient homogènes */
    object-fit: contain; /* Évite de déformer le ratio de vos images */
    display: inline-block;
}