/* ─────────────────────────────────────────────────────────────────────────────
 * P4 — Le clic sur un accessoire DE LA SCÈNE ouvre son propre panneau.
 *
 * Ce que fait le code aujourd'hui (PropsLayer.tsx:21-25, `selectAndOpen`) :
 *   setSelectedPropId(id) + setRightPanelTab('props') + setMobilePanelOpen('right')
 * → toucher un accessoire ouvre le PANNEAU ENTIER (catalogue + liste complète),
 *   puis il faut retrouver sa rangée et la déplier pour atteindre les curseurs.
 *   Sur mobile la feuille masque la scène : on règle une taille sans voir l'objet.
 *
 * Ici : un panneau CONTEXTUEL, court, ancré sous l'accessoire touché, qui ne
 * contient QUE ce qui concerne cet objet — échelle, rotation, portée. La scène
 * reste visible pendant le réglage, c'est tout l'intérêt.
 * ────────────────────────────────────────────────────────────────────────── */

/* Le panneau contextuel : ancré, court, la scène reste visible au-dessus. */
.pop {
  position: absolute; left: 12px; right: 12px; z-index: 12;
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 18px 44px -14px rgba(17, 19, 24, 0.4), 0 0 0 1px var(--bordure-douce);
  overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity 0.16s, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.pop.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Le panneau ne prend JAMAIS plus de la moitie de la scene : au-dela il
   defile. Sans cette borne il couvrait 64 % (mesure du banc) et la promesse
   « la scene reste visible » tombait. */
.pop { max-height: 46%; overflow-y: auto; }
/* Panneau ouvert : la pilule des vues s'efface (elle reprend sa place a la
   fermeture). Mesure : sans ca, `pop_x_vues` = chevauchement. */
.scene-wrap.reglage .vues { opacity: 0; pointer-events: none; transition: opacity 0.15s; }

/* Le bec pointe l'accessoire : c'est ce qui dit « ce panneau parle de CET objet ». */
/* ⚠️ Le bec est un FRERE du panneau, pas un enfant : `overflow-y:auto`
   (necessaire pour borner la hauteur) rogne un enfant en `top:-7px`, et un
   enfant en `top:0` passe sous le contenu. Dans les deux cas il disparait —
   vu sur la capture, aucune mesure ne le signalait. */
.bec-pop {
  position: absolute; z-index: 13; width: 18px; height: 9px;
  background: var(--surface);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity 0.16s; pointer-events: none;
}
.bec-pop.on { opacity: 1; }
.bec-pop.bas { clip-path: polygon(50% 100%, 100% 0, 0 0); }

/* Titre : nom + dimension réelle, et la croix. */
.pop .tt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 8px 14px;
  position: relative;
}
.pop .tt .tx { flex: 1; min-width: 0; }
.pop .tt b { display: block; font-size: 15px; line-height: 19px; font-weight: 700; }
.pop .tt span { display: block; font-size: 11px; line-height: 14px; color: var(--texte-doux); }
/* Le rond de couleur a été retiré du panneau (demande du 07/09) : celui-ci ne
   porte QUE l'échelle et la rotation. La couleur de l'accessoire se voit sur
   la scène juste au-dessus — la redire ici était du bruit. */

/* Les 2 réglages, côte à côte : ils tiennent sur une rangée de 366 px. */
.pop .rgl { padding: 0 14px 2px; }
.pop .rw { margin-bottom: 8px; }
/* Rotation : curseur et crans partagent une rangee (gain ~34 px de hauteur,
   soit 8 points de scene rendus visibles — mesure du banc). */
.pop .rw.rot { display: flex; align-items: center; gap: 10px; }
.pop .rw.rot .g { flex: 1; min-width: 0; }
/* La valeur de rotation se colle a son LIBELLE (pas au bord du groupe, que les
   crans raccourcissent) : elle se lit alors comme "ROTATION 90°", une donnee,
   et non comme une colonne mal alignee face au "220 %" de l'echelle. */
.pop .rw.rot .g .lb { justify-content: flex-start; gap: 8px; }
.pop .rw.rot .g .lb b { margin-left: 0; }
.pop .rw.rot .crans { margin-top: 0; flex: 0 0 auto; }
.pop .rw.rot .crans button { padding: 7px 8px; }
.pop .rw .lb { display: flex; align-items: baseline; margin-bottom: 5px; }
.pop .rw .lb span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-doux);
}
.pop .rw .lb b {
  margin-left: auto; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pop input[type=range] {
  -webkit-appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--surface-2); outline: 0;
}
.pop input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--surface); border: 2.5px solid var(--marque); cursor: pointer;
  box-shadow: 0 2px 6px rgba(17,19,24,0.18);
}
/* Cible tactile 26 px : WCAG 2.2 AA (2.5.8) demande 24 minimum, et un pouce
   sur un curseur en vaut plus qu'un clic souris. */

/* Rotation : les 4 angles usuels en un appui, plus le curseur pour le reste. */
.pop .crans { display: flex; gap: 6px; margin-top: 7px; }
.pop .crans button {
  flex: 1; border: 0; cursor: pointer; font: inherit;
  background: var(--surface-2); color: var(--texte-doux);
  border-radius: 999px; padding: 7px 0;
  font-size: 11.5px; font-weight: 600; min-height: 30px;
}
.pop .crans button.on { background: var(--marque); color: var(--sur-marque); }
.pop .crans button:hover:not(.on) { background: var(--bordure); }

/* ⚠️ Un SVG dans un bouton flex doit avoir width ET height BORNES.
   `flex: 0 0 auto` ne suffit pas : sans dimension CSS le SVG adopte la taille
   de son conteneur (epingle rendue a 60 px sur un bouton de 60 px, vu sur la
   capture uniquement -- aucune mesure de test ne l'attrapait). */
.pop svg { width: 17px; height: 17px; flex: 0 0 17px; }
.pop .cta svg { width: 13px; height: 13px; flex: 0 0 13px; }
.pop .crans svg { width: 13px; height: 13px; flex: 0 0 13px; }
.pop .tt .ibtn svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* Pied : la portée (ce que la formation voit) + les actions. */
.pop .bas-pop {
  border-top: 1px solid var(--bordure);
  padding: 9px 14px 10px; display: flex; align-items: center; gap: 8px;
}
.pop .bas-pop .prt { flex: 1; min-width: 0; }
.pop .bas-pop .prt b { display: block; font-size: 12px; line-height: 15px; font-weight: 700; }
.pop .bas-pop .prt span { display: block; font-size: 10.5px; line-height: 13px; color: var(--texte-doux); }

/* Poignées de manipulation directe posées sur l'accessoire sélectionné. */
.poignee {
  position: absolute; width: 30px; height: 30px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--marque);
  display: grid; place-items: center; cursor: pointer; z-index: 11;
  box-shadow: 0 3px 10px rgba(17,19,24,0.25);
  color: var(--marque);
}
.poignee.rot { cursor: grab; }
.poignee:active { transform: scale(0.9); }

/* Barre d'actions rapide, quand un accessoire est sélectionné sans panneau. */
.qbar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 10px; z-index: 12;
  background: var(--pilule-sur-scene); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 5px; display: flex; gap: 3px; align-items: center;
  box-shadow: 0 6px 20px -6px rgba(17,19,24,0.3);
}
.qbar button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  border-radius: 999px; min-width: 34px; height: 34px; padding: 0 10px;
  display: flex; align-items: center; gap: 5px; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--texte);
}
.qbar button:hover { background: var(--surface-2); }
.qbar button.dang { color: var(--alerte); }
.qbar .sep { width: 1px; height: 20px; background: var(--bordure); }

/* La liste du menu perd ses curseurs : elle ne fait plus que la PORTÉE. */
.p4row {
  background: var(--surface); border-radius: 16px; padding: 10px 12px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
}
.p4row.sel { box-shadow: 0 0 0 2px var(--marque); }
.p4row .tx { flex: 1; min-width: 0; }
.p4row .tx b { display: block; font-size: 14px; line-height: 18px; font-weight: 700; }
.p4row .tx span { display: block; font-size: 11px; line-height: 14px; color: var(--texte-doux); }
.p4row .dots { display: flex; gap: 4px; flex: 0 0 auto; }
/* Un point par formation, teinté en JS (cf. ci-dessus). */
.p4row .dots i { width: 7px; height: 7px; border-radius: 999px; display: block; }

/* Barre des 6 formations dans la feuille d'actions : la portée, éditable. */
.fbar { display: flex; gap: 6px; }
.fbar .fdot {
  flex: 1; border: 0; cursor: pointer; font: inherit;
  border-radius: 12px; min-height: 44px;
  font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
  transition: transform 0.1s, background 0.14s;
}
.fbar .fdot:active { transform: scale(0.92); }
/* ⚠️ La teinte des .fdot vient du JS (FORMATION_PALETTE — la palette de la
   timeline) : chaque numéro porte la couleur de SA formation. Aucune couleur
   fixe ici, elle serait morte et créerait une 2e source de vérité. */
.fbar .fdot.off { background: var(--surface); }

.vide { text-align: center; padding: 20px 14px; color: var(--texte-doux); font-size: 12.5px; line-height: 18px; }
.vide b { display: block; color: var(--texte); font-size: 14px; margin-bottom: 3px; }

/* Indice au premier chargement : le geste n'est pas devinable tout seul. */
.indice {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 92px; z-index: 9;
  background: var(--texte); color: #fff;
  border-radius: 999px; padding: 8px 15px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 8px 24px -8px rgba(17,19,24,0.5);
  transition: opacity 0.3s;
}
.indice.parti { opacity: 0; pointer-events: none; }