/* Page de suivi Conteur (refonte émotionnelle 2026-07-12). Chargée UNIQUEMENT par conteur/suivi.php.
   Charte = tokens globaux d'app.css (--ink, --muted, --line, --accent) + l'or "étincelle" ci-dessous.
   Tout est scopé sous .suivi pour ne rien toucher ailleurs. */

/* .wrap{position:relative} et .ody-avatar sont passés dans app.css : l'avatar sert aussi au
   tableau de bord, et c'est la SEULE porte vers le profil et la déconnexion. */

.suivi { --spark: #c2853a; --spark-glow: rgba(194, 133, 58, .30); --serif: Georgia, "Times New Roman", serif; }

.suivi .hero { position: relative; text-align: center; padding: 14px 4px 2px; }
.suivi .glow {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 200px; pointer-events: none;
  background: radial-gradient(closest-side, var(--spark-glow), transparent 72%);
}
.suivi .eyebrow { position: relative; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--spark); margin: 0 0 14px; }
.suivi .message { position: relative; font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--ink); margin: 0 auto; max-width: 19em; }
.suivi .hero-photo { position: relative; margin: 16px auto 0; max-width: 280px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.suivi .hero-photo img { display: block; width: 100%; height: auto; }
.suivi .mission { position: relative; font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--green); margin: 14px 0 0; }

.suivi .beat { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; margin: 22px 0 6px; box-shadow: 0 0 0 4px rgba(194, 133, 58, .06); }
.suivi .beat-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--spark); margin-top: 5px; box-shadow: 0 0 0 5px var(--spark-glow); }
.suivi .beat-when { font-size: 12px; color: var(--spark); margin: 0 0 3px; font-weight: 600; }
.suivi .beat-what { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.suivi .waiting { margin: 22px 0 6px; }

.suivi .map-card { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin: 18px 0; }

.suivi .stats-line { display: flex; justify-content: space-around; text-align: center; padding: 6px 0 2px; margin: 2px 0; }
.suivi .stat { position: relative; flex: 1; }
.suivi .stat + .stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 8px; width: 1px; background: var(--line); }
.suivi .num { display: block; font-family: var(--serif); font-size: 27px; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.suivi .lab { display: block; font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.3; }

.suivi .trail-title { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 4px; }
.suivi .trail { position: relative; padding-left: 6px; }
.suivi .stop { position: relative; display: flex; gap: 16px; padding: 13px 0 13px 22px; border-bottom: 1px solid var(--line); }
.suivi .stop:last-child { border-bottom: 0; }
.suivi .stop::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: -13px; width: 1.5px; background: var(--line); }
.suivi .stop:last-child::before { display: none; }
.suivi .dot { position: absolute; left: 0; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--green); }
.suivi .stop.last .dot { background: var(--spark); border-color: var(--spark); box-shadow: 0 0 0 5px var(--spark-glow); }
.suivi .place { font-size: 15.5px; color: var(--ink); margin: 0; }
.suivi .meta { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.suivi .stop.last .meta { color: var(--spark); font-weight: 600; }
.suivi .stop-main { flex: 1; min-width: 0; }
.suivi .stop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.suivi .stop-txt { flex: 1; min-width: 0; }
.suivi .chev { flex: none; width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .25s ease; margin-right: 3px; }
.suivi .stop.open .chev { transform: rotate(-135deg); }
.suivi .stop-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .25s ease; }
.suivi .stop.open .stop-detail { max-height: 600px; opacity: 1; margin-top: 10px; }
.suivi .detail-photo { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); max-width: 200px; margin: 0 0 10px; }
.suivi .detail-photo img { display: block; width: 100%; height: auto; }
.suivi .stop-detail .by { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--green); line-height: 1.5; margin: 0; }

.suivi .closer { text-align: center; font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 26px 10px 4px; }