/* v23 : montées chronométrées, fantôme, cols, carte de chaleur, bilan de l'année */

/* raccourcis (accueil, wall of fame) */
.raccourcis-v23 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.raccourcis-v23 a { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--rayon); background: var(--surface2); color: inherit; text-decoration: none; }
.raccourcis-v23 a span { font-size: 1.6rem; }
.raccourcis-v23 a small { color: var(--texte2); }
.bilan-pret { background: linear-gradient(135deg, rgba(148, 188, 227, .25), rgba(155, 138, 214, .25)); }

/* récap : nouveau col, montées chronométrées, fantôme */
.nouveau-col { display: block; margin: 12px 0; padding: 14px 16px; border-radius: var(--rayon); background: linear-gradient(135deg, #1D2D3D, #9A6B0C); color: #fff; text-decoration: none; }
.nc-ligne { display: flex; align-items: center; gap: 12px; padding: 4px 0; animation: nc-entree .7s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--k) * .25s + .2s); }
.nc-ligne small { display: block; opacity: .8; }
.nc-ico { font-size: 2rem; animation: nc-rebond 1.4s ease-in-out 1s 2; }
@keyframes nc-entree { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes nc-rebond { 50% { transform: translateY(-6px) rotate(-8deg); } }
.cols-franchis a { color: var(--accent); }
.liste-efforts { display: flex; flex-direction: column; gap: 8px; }
.effort { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rayon); background: var(--surface2); color: inherit; text-decoration: none; }
.ef-medaille { font-size: 1.5rem; min-width: 32px; text-align: center; }
.ef-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ef-corps small { color: var(--texte2); }
.ef-rang { color: var(--accent) !important; font-weight: 700; }
.ef-temps { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.15rem; }
.pastille-pr { display: inline-block; padding: 1px 6px; border-radius: var(--rayon); background: var(--accent); color: var(--accent-texte); font-size: .7rem; vertical-align: middle; }
.fantome-resultat.gagne { border-left: 4px solid var(--ok); }
.fantome-resultat.perdu { border-left: 4px solid var(--danger, var(--alerte)); }

/* vue GPS : fantôme */
.fantome-cpt { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 6px 12px; margin: 6px 12px 0; border-radius: var(--rayon); background: rgba(155, 138, 214, .16); }
.fantome-cpt b { font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.fantome-cpt small { color: var(--texte2); }
.fantome-cpt.avance b { color: var(--ok); }
.fantome-cpt.retard b { color: var(--danger, var(--alerte)); }
.fantome-cpt.flash { animation: fa-flash .9s ease-out; }
@keyframes fa-flash { 0% { transform: scale(1.18); box-shadow: 0 0 0 0 rgba(155, 138, 214, .8); } 100% { transform: none; box-shadow: 0 0 0 18px rgba(155, 138, 214, 0); } }
.fantome-marqueur span { display: block; font-size: 28px; line-height: 34px; text-align: center; opacity: .6; filter: drop-shadow(0 0 4px #9B8AD6); }
.course.eco .fantome-cpt { margin-top: 10px; }
.course.eco .fantome-cpt b { font-size: 3rem; }
@media (orientation: landscape) and (max-height: 500px) { .fantome-cpt { margin: 2px 6px 0; padding: 2px 10px; } .fantome-cpt b { font-size: 1.6rem; } }
.rl-legende-fantome { position: absolute; left: 12px; top: 92px; padding: 4px 10px; border-radius: var(--rayon); background: rgba(17, 26, 36, .7); color: #9B8AD6; font-size: .8rem; z-index: 5; }
.choix-fantome { text-align: left; }

/* fiche montée, classements */
.carte-fiche, .carte-cols { height: 240px; border-radius: var(--rayon); overflow: hidden; margin: 12px 0; }
.carte-cols { height: 320px; }
.classement-montee { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.classement-montee li { display: grid; grid-template-columns: 32px auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--rayon); background: var(--surface2); }
.classement-montee li small { grid-column: 3 / 5; color: var(--texte2); }
.classement-montee li.moi { outline: 2px solid var(--accent); }
.cm-rang { font-weight: 800; text-align: center; }
.cm-temps { font-weight: 800; font-variant-numeric: tabular-nums; }
.roi-montagne { color: var(--accent); font-weight: 700; }
.liste-kom { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.fe-cols { display: flex; flex-wrap: wrap; gap: 8px; }

/* mes cols */
.badges-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge-col { position: relative; overflow: hidden; padding: 10px; border-radius: var(--rayon); background: var(--surface2); text-align: center; opacity: .55; }
.badge-col.obtenu { opacity: 1; background: linear-gradient(135deg, rgba(148, 188, 227, .3), rgba(180, 83, 9, .3)); }
.badge-col span { display: block; font-size: 1.6rem; }
.badge-col b { font-size: .8rem; }
.badge-col i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); }
.massifs { display: flex; flex-direction: column; gap: 8px; }
.massif { border-radius: var(--rayon); background: var(--surface2); padding: 10px 12px; }
.massif summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; cursor: pointer; list-style: none; }
.barre-massif { grid-column: 1 / 3; height: 6px; border-radius: 3px; background: rgba(152, 152, 155, .25); overflow: hidden; }
.barre-massif em { display: block; height: 100%; background: var(--accent); }
.massif ul { list-style: none; padding: 8px 0 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.massif li { display: flex; justify-content: space-between; gap: 8px; color: var(--texte2); }
.massif li.fait { color: var(--texte); font-weight: 600; }
.attribution-osm { margin-top: 16px; }

/* ma carte */
.carte-chaleur { height: 420px; border-radius: var(--rayon); overflow: hidden; margin: 10px 0; }
/* v25 : carte de chaleur sur tuiles sombres recolorées (js/carte.js, TuilesSombres) : plus aucun filtre CSS sur les tuiles */
.couche-chaleur { position: absolute; pointer-events: none; }
.filtres-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* bilan de l'année */
.bilan-annee { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 50; }
.bilan-annee canvas { height: 100%; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.bilan-fermer { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; /* à gauche : le badge « Mode démo » occupe le coin droit */ }
.bilan-actions { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.bilan-aide { position: absolute; bottom: 80px; width: 100%; text-align: center; color: rgba(255, 255, 255, .6); font-size: .8rem; pointer-events: none; }

/* relecture 3D : commune traversée (cartouche au-dessus des chiffres, fondu et léger glissement) */
.rl-ville { position: absolute; left: 50%; bottom: calc(100% - 22px); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 8px 16px 8px 12px; border-radius: var(--rayon); background: rgba(17, 26, 36, .78); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); color: #fff; pointer-events: none; opacity: 0; transform: translate(-50%, 10px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.rl-ville.visible { opacity: 1; transform: translate(-50%, 0); }
.rl-ville .ico { width: 26px; height: 26px; flex: none; color: var(--accent, var(--accent)); }
.rl-ville span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.rl-ville small { color: #B7B7BA; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rl-ville b { font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-ville.marque { border: 2px solid var(--accent, var(--accent)); }
.rl-ville.marque small { color: var(--accent, var(--accent)); }
@media (orientation: landscape) and (max-height: 500px) {
  .rl-ville { left: auto; right: calc(100% + 12px); bottom: 16px; transform: translateY(10px); }
  .rl-ville.visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rl-ville { transition: opacity .2s; transform: translate(-50%, 0); } }