:root {
  --bg: #c6c6d2;
  --panel: #1c2129;
  --line: #2b323d;
  --text: #e7ebf0;
  --muted: #7d8794;
  --accent: #ff7a1a;
  --accent-dim: #663710;
  --ok: #3ddc84;
  --warn: #ff8a65;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--bg);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  color: var(--text);
  overflow: hidden;
  user-select: none;
}
#scene-container { position: absolute; inset: 0; }
canvas { display: block; }

/* Rectangle de sélection multiple (clic-glissé sur du vide) : overlay HTML
   pur, positionné/dimensionné en pixels écran par main.js/ui.js à chaque
   pointermove — pas un objet Three.js. */
#marquee-box {
  position: absolute;
  display: none;
  border: 1px dashed var(--accent);
  background: rgba(255, 122, 26, 0.12);
  pointer-events: none;
  z-index: 20;
}

#loading-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  transition: opacity 0.4s ease;
}
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}
#loading-title {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#loading-bar-track {
  width: 240px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
#loading-bar-fill {
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: loading-bar-slide 1.1s ease-in-out infinite;
}
@keyframes loading-bar-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
#loading-hint {
  font-size: 11px;
  color: var(--muted);
}
/* Bloc d'échec de démarrage : masqué tant que tout va bien (cf. le chien de
   garde en tête de main.js, qui le révèle si l'init n'aboutit pas). */
#loading-error {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  text-align: center;
}
#loading-error.visible { display: flex; }
#loading-error-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--warn);
}
#loading-screen.failed #loading-bar-fill { animation: none; opacity: 0.25; }

.panel {
  position: absolute;
  background: rgba(20,23,28,0.88);
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(6px);
}

#left-stack {
  position: absolute;
  top: 18px; right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  max-height: calc(100vh - 36px);
}

/* Désactivé (nouvelle UI — panneau latéral gauche + toolbar du bas + zone
   context menu couvrent déjà tout ce qu'il contenait : ajouts, Sauvegarder/
   Charger, assignation de mission). #missions-panel, son voisin dans
   #left-stack, reste affiché tel quel. */
#hud {
  display: none;
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  width: 320px;
  flex: 0 0 auto;
}
#hud h1 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px 0;
  font-weight: 500;
}
.renderer-line {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 14px 0;
}
.renderer-line span { color: var(--accent); }

.section-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.section-title:first-of-type { padding-top: 0; border-top: none; }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.hint { font-size: 10px; color: var(--muted); line-height: 1.5; }

#status {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
#status .step { color: var(--muted); transition: color 0.2s ease; }
#status .step.active { color: var(--ok); }
#status .step.done { color: var(--text); }

#missions-panel {
  position: static;
  border-left: 3px solid var(--ok);
  padding: 14px 18px;
  width: 320px;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#missions-list {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#missions-empty-hint { display: none; }
#missions-empty-hint.visible { display: block; }

.mission-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
}
.mission-row.running { border-color: var(--ok); }
.mission-row-index {
  font-size: 10px;
  color: var(--muted);
  min-width: 14px;
}
.mission-row-label {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-row-actions { display: flex; gap: 2px; }
.mission-row-actions button {
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1;
}

#controls {
  position: absolute;
  bottom: 18px; left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Barre de contrôle du bas, toujours présente : actions sur la sélection
   (déplacer/tourner/échelle/dupliquer/centrer) + assigner/lancer/annuler les
   missions (#bottom-bar, UI/Exports/5 - tool bar), et à sa droite une barre
   séparée pour la vitesse de simulation (#time-bar, UI/Exports/6 - time).
   Pilules blanches dessinées en CSS (même traitement que #side-nav-rail),
   pas d'étirement des fonds Fond_tool_bar.png/Fond_time.png fournis en
   référence : robuste à n'importe quel nombre/largeur de boutons. */
#bottom-toolbar-group {
  position: absolute;
  bottom: calc(18px + 10vh); left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 4;
}
#bottom-bar, #time-bar {
  position: static;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 27px;
  padding: 8px 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
/* .select-bar (barres flottantes au-dessus d'un élément sélectionné,
   UI/Exports/5 - tool bar + 7 - Select bar) : même habillage pilule blanche
   que la toolbar globale du bas ci-dessus, SANS toucher à position/display/
   transform — ceux-là viennent déjà de .floating-toolbar (cf. HTML,
   class="select-bar floating-toolbar"), plus loin dans ce fichier. */
.select-bar {
  gap: 4px;
  background: #fff;
  border-radius: 27px;
  padding: 8px 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  margin-bottom: 14px; /* petit espace entre la pilule et l'élément visé */
}
/* Boutons "gardés" sans icône dédiée (étages du rack, sens du convoyeur,
   mission du chariot) : même gabarit que .tb-icon mais glyphe texte/emoji
   coloré #0a4c7f plutôt qu'une image, cf. échange avec Yann. */
.sb-text-icon {
  width: 46px; height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #0a4c7f;
}
.sb-text-icon:hover:not(:disabled) { background: rgba(10,76,127,0.08); }
.sb-text-icon:disabled { opacity: 0.3; cursor: not-allowed; }
.sb-levels-value {
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #0a4c7f;
  font-variant-numeric: tabular-nums;
}
.sb-sep { width: 1px; height: 26px; background: #dde1e6; margin: 0 4px; }

/* Boutons "+" de duplication rapide en rangée (rack, dans le sens de la
   longueur uniquement) : ronds blancs autonomes, pas dans une pilule,
   positionnés directement à chaque bout du rack sélectionné. */
.rack-dupe-btn {
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #0a4c7f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  z-index: 5;
  pointer-events: auto;
}
.rack-dupe-btn.visible { display: flex; align-items: center; justify-content: center; }
.rack-dupe-btn:hover:not(:disabled) { background: rgba(255,255,255,0.85); }
.rack-dupe-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tb-icon, .time-btn {
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tb-icon { width: 46px; height: 46px; padding: 10px; }
.time-btn { width: 40px; height: 40px; padding: 8px; }
.tb-icon img, .time-btn img { width: 100%; height: 100%; object-fit: contain; }
.tb-icon:hover:not(:disabled), .time-btn:hover:not(:disabled) { background: rgba(20,60,110,0.08); }
.tb-icon:disabled, .time-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.time-btn.active { background: rgba(255,122,26,0.12); }
.time-sep { width: 1px; height: 26px; background: #dde1e6; margin: 0 6px; }

/* Pilule Assign/Start/Cancel missions : image déjà pré-stylée (fond + texte
   baked), cf. main.js updateBottomBarButtons — un seul <img> dont le src
   change selon l'état (assign mission.png / Sart mission.png /
   Cancel mission.png). */
.tb-pill {
  height: 46px;
  padding: 0;
  margin-left: 6px;
  border: none;
  border-radius: 23px;
  background: transparent;
  overflow: hidden;
}
.tb-pill img { height: 100%; width: auto; display: block; }
.tb-pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* z-index 111/112, au-dessus de #save-modal et #save-as-modal (109/110) : la
   confirmation Oui/Non peut s'ouvrir PAR-DESSUS l'une ou l'autre (écraser,
   charger, supprimer une sauvegarde) et doit rester cliquable — à égalité de
   z-index, l'ordre du DOM aurait fait gagner la modale déjà ouverte. Les
   trois modales sont aussi toutes au-dessus de #startup-screen (99) : la
   modale "Charger" peut s'ouvrir depuis l'écran de démarrage lui-même, avant
   qu'il ne se masque. */
#confirm-modal-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 111;
}
#confirm-modal-backdrop.visible { display: block; }
#confirm-modal {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  padding: 20px;
  z-index: 112;
  border-left: 3px solid var(--warn);
}
#confirm-modal.visible { display: block; }
#confirm-modal-message {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 16px 0;
}

/* Modale de gestion des sauvegardes : copie de #confirm-modal/-backdrop,
   élargie, avec une liste scrollable au lieu d'un simple message. */
#save-modal-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 109;
}
#save-modal-backdrop.visible { display: block; }
#save-modal {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  max-width: calc(100vw - 40px);
  padding: 20px;
  z-index: 110;
  border-left: 3px solid var(--accent);
}
#save-modal.visible { display: block; }
#save-modal-list {
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
#save-modal-empty-hint { margin-bottom: 12px; }

/* Modale "Sauvegarder" : même gabarit que #save-modal mais plus étroite (pas
   de liste), avec un champ nom repris du style de #save-modal-name-input. */
#save-as-modal-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 109;
}
#save-as-modal-backdrop.visible { display: block; }
#save-as-modal {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  max-width: calc(100vw - 40px);
  padding: 20px;
  z-index: 110;
  border-left: 3px solid var(--accent);
}
#save-as-modal.visible { display: block; }
#save-as-overwrite-btn { flex: 1; }
#save-as-name-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px;
  font-size: 13px;
  border-radius: 6px;
}

.save-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
}
.save-row-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-row-name input {
  width: 100%;
  font-family: inherit;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 3px;
}
.save-row-date {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.save-row-actions { display: flex; gap: 2px; }
.save-row-actions button {
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1;
}

/* Écran de démarrage : panneau blanc à largeur fixe (logo + boutons) à
   gauche, photo plein cadre à droite qui occupe tout le reste (cover) —
   cf. UI/Exports/1 - Ecran titre/Ref/Ref_ecran_titre.png. Reprend le toggle
   .hidden de #loading-screen. */
#startup-screen {
  position: absolute;
  inset: 0;
  z-index: 99;
  display: flex;
  background: #fff;
  transition: opacity 0.4s ease;
}
#startup-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#startup-left {
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 0 64px;
  background: #fff;
}
#startup-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
}
#startup-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#startup-buttons button {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  width: 100%;
  transition: filter 0.15s ease, transform 0.1s ease;
}
#startup-buttons button img { width: 100%; height: auto; display: block; }
#startup-buttons button:hover:not(:disabled) { filter: brightness(1.08); }
#startup-buttons button:active:not(:disabled) { transform: scale(0.98); }
#startup-left .hint { color: var(--muted); }

#startup-right {
  flex: 1;
  background: url('../UI/Exports/1 - Ecran titre/Image_ecran_titre.jpg') center/cover no-repeat;
}

/* Menu contextuel (clic droit sur un rack, en composition de mission) :
   une seule action, positionnée au point de clic. */
#rack-context-menu {
  display: none;
  position: fixed;
  padding: 4px;
  z-index: 8;
}
#rack-context-menu.visible { display: block; }
#rack-context-menu button {
  padding: 10px 16px;
  font-size: 12px;
  white-space: nowrap;
}

/* Menu contextuel générique à plusieurs actions empilées (clic droit sur une
   zone posée). */
.context-menu {
  display: none;
  position: fixed;
  padding: 4px;
  z-index: 8;
  flex-direction: column;
  gap: 3px;
}
.context-menu.visible { display: flex; }
.context-menu button {
  padding: 9px 16px;
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
}
.context-menu button.danger:hover:not(:disabled) {
  border-color: #ff4d4d;
  color: #ff4d4d;
}
/* Clic droit sur une zone (#zone-context-menu, réduit à "Ajouter des
   palettes") et son slider (#zone-fill-slider) : fond blanc, même habillage
   que les selectbar/toolbar plutôt que le thème sombre par défaut des autres
   menus contextuels (rack, raccourci DROP zone), qui restent inchangés. */
.zone-context-menu-white {
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.zone-context-menu-white button {
  background: transparent;
  border: none;
  color: #0a4c7f;
  border-radius: 10px;
}
.zone-context-menu-white button:hover:not(:disabled) {
  background: rgba(10,76,127,0.08);
  border-color: transparent;
  color: #0a4c7f;
}
.zone-context-menu-white label {
  display: block;
  padding: 6px 10px 2px;
  font-size: 11px;
  color: #0a4c7f;
}
.zone-context-menu-white input[type="range"] {
  display: block;
  width: 180px;
  margin: 4px 10px 8px;
  accent-color: #0a4c7f;
}
button {
  font-family: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 20px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #ffd9b3;
}
button.primary:hover:not(:disabled) { color: #fff; }
#btn-add-rack { width: 100%; }

select {
  font-family: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 13px 12px;
  font-size: 14px;
  border-radius: 6px;
  flex: 1;
  min-width: 0;
}
#btn-add-chariot { white-space: nowrap; }

/* Toujours à la même place (coin haut-droit), que les panneaux soient
   affichés ou non : #right-stack démarre plus bas pour lui laisser la
   place plutôt que de se superposer. */
/* Désactivé dans ce build (pas dans le code source de dev) : ce bouton est
   le seul moyen d'afficher les panneaux de réglage (Ombres/Performance/
   HDRI/Caméra), utiles en dev mais pas destinés aux visiteurs de l'app
   déployée. #right-stack/#camera-tool restent masqués par défaut (cf.
   index.html, classe .hidden) — les cacher ainsi les rend simplement
   inatteignables, sans toucher au JS. */
#btn-toggle-panels {
  display: none;
  position: absolute;
  top: 18px; left: 18px;
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

/* Panneau latéral gauche (nouvelle UI) : colonne d'icônes toujours visible +
   rangée de cartes qui apparaît à sa droite, alignée sur le HAUT de la
   colonne (cf. UI/Exports/2 - panneau latéral gauche/Ref et
   UI/Exports/3 - Chariots/Ref, 4 - warehouse elements/Ref — les cartes
   démarrent toujours à la même hauteur que la 1ère icône, jamais centrées
   sur toute la colonne). align-items:flex-start fait ce travail sans calcul
   JS : peu importe la hauteur de la colonne, la rangée de cartes s'aligne
   sur son bord haut. */
#side-nav {
  position: absolute;
  top: 90px; left: 18px;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#side-nav-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 27px;
  padding: 10px 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.side-nav-icon {
  width: 46px; height: 46px;
  padding: 9px;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.side-nav-icon img { width: 100%; height: 100%; object-fit: contain; }
.side-nav-icon:hover:not(:disabled) { background: rgba(20,60,110,0.08); }
.side-nav-icon.active { background: rgba(20,60,110,0.12); }
.side-nav-icon:disabled { opacity: 0.3; cursor: not-allowed; }

.side-nav-card-row {
  display: flex;
  gap: 12px;
}
.side-nav-card-row.hidden { display: none; }
/* Menu "Réglages" (#side-nav-cards-settings) : fond blanc simple, à la
   place de la rangée de cartes-image des autres onglets — juste
   Sauvegarder/Charger pour l'instant. */
.side-nav-settings-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.side-nav-settings-menu.hidden { display: none; }
.side-nav-settings-menu button {
  background: transparent;
  border: none;
  color: #0a4c7f;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
}
.side-nav-settings-menu button:hover:not(:disabled) {
  background: rgba(10,76,127,0.08);
}
.side-nav-card {
  width: 132px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: transform 0.1s ease, filter 0.15s ease;
}
.side-nav-card img { width: 100%; height: auto; display: block; }
.side-nav-card:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-2px); }
.side-nav-card:active:not(:disabled) { transform: translateY(0); }
.side-nav-card:disabled { cursor: not-allowed; }

#right-stack {
  position: absolute;
  top: 62px; left: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 80px);
}
#right-stack.hidden, #camera-tool.hidden { display: none; }

#counter {
  position: static;
  padding: 10px 16px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  line-height: 1.7;
  width: 190px;
}
#counter b { color: var(--accent); font-weight: 500; }

#camera-tool {
  bottom: 18px; left: 18px;
  padding: 12px 16px;
  width: 190px;
  z-index: 4;
}

#hdri-tool {
  position: static;
  padding: 12px 16px;
  width: 190px;
  z-index: 4;
}
#shadow-tool {
  position: static;
  padding: 12px 16px;
  width: 190px;
  z-index: 4;
}
#shadow-tool input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  margin-bottom: 4px;
}
#perf-tool {
  position: static;
  padding: 12px 16px;
  width: 190px;
  z-index: 4;
}

#hdri-buttons,
.panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hdri-btn {
  width: 100%;
  padding: 10px 12px;
  font-size: 11px;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.hdri-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #ffd9b3;
}
.hdri-btn.loading {
  opacity: 0.55;
  cursor: wait;
}
.hdri-toggle {
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
}
.hdri-toggle.active {
  background: rgba(61, 220, 132, 0.15);
  border-color: var(--ok);
  color: var(--ok);
}
#hdri-buttons.disabled {
  opacity: 0.4;
  pointer-events: none;
}
#hdri-intensity-row {
  margin-bottom: 10px;
}
#hdri-intensity-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  margin-bottom: 4px;
}
#hdri-copy {
  margin-top: 8px;
  text-align: center;
}
/* Grisé en même temps que la liste d'environnements : sans environnement
   actif, l'intensité ne pilote plus rien. */
#hdri-intensity-row.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cam-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.cam-row b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.cam-sep { height: 1px; background: var(--line); margin: 6px 0; }
#camera-tool .row button {
  flex: 1;
  padding: 8px 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.floating-toolbar {
  display: none;
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 8px 9px;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
  pointer-events: auto;
  z-index: 5;
}
.floating-toolbar.visible { display: flex; }
/* .select-bar (rack/chariot/palette/convoyeur) : mêmes boutons ronds que la
   toolbar globale du bas, cf. .tb-icon/.sb-text-icon plus haut — remplace le
   générique ".floating-toolbar button" (padding/font-size en px), qui ne
   correspond plus à aucun bouton texte depuis leur passage en icônes. */
.select-bar .tb-icon, .select-bar .sb-text-icon {
  padding: 0;
  font-size: 20px;
}
.select-bar .tb-icon { padding: 10px; }