/* Mode démo (administrateurs) : bandeau, panneau, barre de scénarios de la vue GPS */
#bandeau-demo { position: fixed; z-index: 4500; top: calc(var(--sat) + 6px); right: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: rgba(124, 58, 237, .92); color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
#bandeau-demo i { width: 7px; height: 7px; border-radius: 50%; background: #FDE68A; animation: demo-clignote 1.6s ease-in-out infinite; }
@keyframes demo-clignote { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #bandeau-demo i { animation: none; } }

.pastille-demo { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(124, 58, 237, .18); color: #C4B5FD;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em; vertical-align: middle; }
:root[data-theme="soleil"] .pastille-demo { color: #6D28D9; }

.carte-demo .cf-ico { background: rgba(124, 58, 237, .2); color: #C4B5FD; }

.demo-panneau .bloc h3 { display: flex; align-items: center; gap: 8px; }
.demo-panneau .bloc select { width: 100%; margin: 6px 0 4px; }
.demo-panneau .bloc .boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.demo-panneau .bloc .boutons .btn { flex: 1 1 160px; }
.demo-panneau .geant { margin-top: 12px; }
.demo-etat { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 14px; border-radius: var(--rayon); background: var(--surface); border: 2px dashed var(--bord); }
.demo-etat.actif { border: 2px solid #7C3AED; background: rgba(124, 58, 237, .12); }
.demo-etat small { display: block; color: var(--texte2); margin-top: 2px; }
.demo-pastille { width: 44px; height: 44px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(124, 58, 237, .25); color: #C4B5FD; }
.demo-liste .element { display: flex; align-items: center; gap: 8px; }
.demo-liste .element .corps { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; }

/* Vue GPS : barre de scénarios (visible seulement en simulation du mode démo) */
.barre-demo { position: absolute; z-index: 650; left: 8px; right: 64px; top: calc(var(--sat) + 62px); display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 2px; }
.barre-demo::-webkit-scrollbar { display: none; }
.barre-demo button, .barre-demo .acc { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px;
  background: rgba(76, 29, 149, .88); color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.barre-demo button .ico { width: 15px; height: 15px; }
.barre-demo .acc select { min-height: 26px; padding: 0 4px; border-radius: 8px; font-size: .78rem; background: rgba(255, 255, 255, .15); color: #fff; border: 0; }
.demo-panneau .segments.larges { grid-auto-columns: minmax(0, 1fr); }
.demo-panneau .segments.larges button { padding: 0 4px; font-size: .78rem; }
.demo-panneau .entete .muet { white-space: normal; }
.demo-panneau .segments:not(.larges) { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); }
/* Vue GPS : l'état « DÉMO » est affiché dans la barre d'état, le bandeau flottant est masqué */
body[data-ecran="course"] #bandeau-demo { display: none; }
.etat-gps.sim.demo { background: #7C3AED; color: #fff; }