/* ═══════════════════════════════════════════════════════════════════
   Rando Urbaine — CSS complémentaire (s'ajoute à style.css)
   Couleur principale : vert forêt #2a6e2a au lieu du vert sombre
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --rando:        #2a6e2a;
    --rando-dark:   #163d16;
    --rando-pale:   #e6f4e6;
    --rando-mid:    #3d8f3d;
    --rando-gold:   #8b6914;
}

/* col2 : colonne carte plus large (identique miclèwes) */
@media (min-width: 900px) {
    .col2 { width: 120%; }
}

.sidebar--rando { background: var(--rando-dark); }

/* ── Mobile header couleur rando ───────────────────────────────── */
.mobile-header--rando { background: var(--rando-dark); }

/* ── Bottom nav active couleur rando ───────────────────────────── */
.bottom-nav--rando .bnav-item.active { color: var(--rando); }

/* ── nav-item active rando ──────────────────────────────────────── */
.sidebar--rando .nav-item.active { background: rgba(255,255,255,0.15); }
.sidebar--rando .nav-item:hover  { background: rgba(255,255,255,0.08); }

/* ── Hero rando ─────────────────────────────────────────────────── */
.hero--rando {
    background-image: url('rando_banniere.png');
    background-size: cover;
    background-position: center 60%;
    background-color: #c8b87a;
}
.hero--rando .hero-title span { color: #a8e06a; }
.hero--rando .hero-badge-pill {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}

/* ── Card accent rando ──────────────────────────────────────────── */
.card-accent--rando {
    background: var(--rando-pale);
    border-left-color: var(--rando);
}
.card-accent--rando .anecdote-text { color: var(--rando-dark); }

/* ── Stats bar parcours ─────────────────────────────────────────── */
.rando-stats-bar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 899px) {
    .rando-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
.rando-stat-item {
    background: var(--white);
    border-radius: var(--radius);
    padding: 14px 10px;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 4px;
}
.rsi-val { font-size: 20px; font-weight: 700; color: var(--rando); }
.rsi-lbl { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Grille points d'intérêt ────────────────────────────────────── */
.poi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 900px) {
    .poi-grid { grid-template-columns: 1fr 1fr; }
}
.poi-item {
    background: var(--white);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 12px;
}
.poi-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e8321e; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.poi-name { font-size: 14px; font-weight: 500; color: var(--gray-800); }

/* ── Grille arbres ──────────────────────────────────────────────── */
.arbres-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 900px) {
    .arbres-grid { grid-template-columns: repeat(3, 1fr); }
}
.arbre-item {
    background: var(--white);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 10px;
    border-left: 3px solid var(--rando);
}
.arbre-lettre {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--rando); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    font-family: 'Cinzel', serif;
}
.arbre-nom { font-size: 13px; font-weight: 500; color: var(--gray-800); line-height: 1.3; }

/* ── Urgences ───────────────────────────────────────────────────── */
.urgences-card { display: flex; gap: 0; padding: 0; overflow: hidden; }
.urgence-item {
    flex: 1; text-align: center; padding: 16px 8px;
    border-right: 1px solid var(--gray-200);
    display: flex; flex-direction: column; gap: 4px;
}
.urgence-item--last { border-right: none; }
.urgence-num { font-size: 24px; font-weight: 700; color: #c0392b; }
.urgence-lbl { font-size: 10px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Crédit ─────────────────────────────────────────────────────── */
.rando-credit {
    font-size: 13px; color: var(--gray-600); line-height: 1.6;
    background: var(--gray-100); box-shadow: none;
    border: 0.5px solid var(--gray-200);
}

/* ── Couleur active sidebar footer ─────────────────────────────── */
.sidebar--rando .s-val { color: #a8e06a; }

/* ── btn-link-full couleur rando ────────────────────────────────── */
.hero--rando ~ * .btn-link-full,
.rando-urbaine .btn-link-full { color: var(--rando); }