/* Corps humain 3D : choix du système, pastilles et objets du cartel (étape 4, systemes.js) */

/* Les étiquettes 3D (z-index posé par three.js) restent sous les panneaux */
.circulation .vue { isolation: isolate; }

/* Barre des systèmes : au centre de la ligne des onglets (au-dessus de la scène, retours de Ninos du 20/10) */
.ligne-vue .systemes {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
}
.ligne-vue .systemes button {
  border: 0; background: none; cursor: pointer; padding: .4em 1em; border-radius: 999px;
  color: var(--texte-doux); font: 600 .88rem var(--police-texte); white-space: nowrap;
}
.ligne-vue .systemes button:hover { color: #fff; }
.ligne-vue .systemes button.actif { background: linear-gradient(135deg, #a3e635, #16a34a); color: #04140b; }
.ligne-vue .systemes button:focus-visible { outline: 2px solid #fbbf24; outline-offset: 1px; }
@media (max-width: 480px) { .ligne-vue .systemes button { font-size: .74rem; padding: .4em .65em; } }
/* autres systèmes : pas d'onglets de vues, le cartel monte en haut de la scène */
.circulation:not([data-systeme="circulation"]) .cartel { top: 12px; }

/* Autre système : on cache ce qui ne concerne que l'hématie */
.circulation:not([data-systeme="circulation"]) :is(.modes, .panneau-droit, .frise, #mesures, .jauge-o2, #temps, #legende-echanges, #aller, .astuce) { display: none !important; }
.circulation:not([data-systeme="circulation"]) .controles > :not(.options) { display: none !important; }
.circulation:not([data-systeme="circulation"]) .liste-options label:not(:first-child) { display: none; }
.circulation:not([data-systeme="circulation"]) .cartel { border-color: rgba(52, 211, 153, .45); max-height: calc(100% - 140px); }
.circulation:not([data-systeme="circulation"]) .cartel-lieu { color: #86efac; }

/* Pastille ouverte en circulation : on cache les mesures de l'hématie */
.circulation[data-pastille] :is(#mesures, .jauge-o2, #temps, #legende-echanges, #aller) { display: none !important; }
.circulation[data-pastille] .cartel-lieu { color: #fcd34d; }

/* Cartel : choix féminin / masculin, objets 3D du catalogue */
.cartel-choix { display: flex; gap: 6px; margin: 6px 0 2px; }
.cartel-choix .bouton { padding: .3em .9em; font-size: .8rem; }
.cartel-objets { display: grid; gap: 8px; }
.circulation .cartel .cartel-objets .note { margin: 0; font-size: .78rem; color: var(--texte-doux); }
.circulation .cartel .cartel-objets .sous-titre { margin: 0; font: .7rem var(--police-code); color: #fcd34d; text-transform: uppercase; letter-spacing: .04em; }
.grille-objets { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.grille-objets a {
  display: grid; gap: 4px; align-content: start; padding: 5px; border-radius: 10px; text-align: center;
  background: rgba(255, 255, 255, .06); border: 1px solid transparent; color: #e8eef9; text-decoration: none; font-size: .7rem; line-height: 1.25;
}
.grille-objets a:hover, .grille-objets a:focus-visible { border-color: var(--accent); box-shadow: var(--halo); outline: none; }
.grille-objets img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: #000; }
.cartel .retour { justify-self: start; padding: .3em .85em; font-size: .78rem; }

/* Étiquettes des systèmes et pastilles cliquables */
.etiquette.systeme { border-color: rgba(134, 239, 172, .5); }
.etiquette.pastille {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; pointer-events: auto; cursor: pointer;
  background: rgba(42, 30, 6, .8); border-color: rgba(251, 191, 36, .75);
}
.etiquette.pastille:hover, .etiquette.pastille.choisie { background: rgba(251, 191, 36, .32); color: #fff; }
.etiquette.pastille i { width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; animation: pastille 1.8s ease-out infinite; }
@keyframes pastille {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .75); }
  70% { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
@media (prefers-reduced-motion: reduce) { .etiquette.pastille i { animation: none; } }

@container (max-width: 600px) {
  .circulation:not([data-systeme="circulation"]) .cartel { top: 12px; max-height: 40%; }
}