/* Styles extraits automatiquement des templates inline */

.inline-style-1 { display:inline-block;width:16px;height:16px;border-radius:50%;
                           border:1px solid rgba(0,0,0,.25);background-color: {{ n.color_hex or }
.inline-style-2 { background: {{ it.hex or }
.inline-style-3 { width:48px; height:28px; background: {{ r.target_hex or }
.inline-style-4 { width:22px; height:14px; background: {{ it.hex or }
/* === Zone principale d’affichage du projet === */
/* Zone image */
#viewport {
  position: relative;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}
#viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  touch-action: none;
  cursor: crosshair;
}

/* Conteneur pastille */
.note-color.pv-dot{
  display:inline-block;
  width:16px; height:16px;
  border:0 !important;
  background:transparent !important;
  line-height:0;
}
.note-color.pv-dot .pv-dot-svg{ display:block; width:16px; height:16px; }

.note-color.pv-dot .pv-dot-fill{
  stroke: rgba(0,0,0,.25);
  stroke-width: 1;
  fill: #eee !important;   /* défaut */
}

/* 🎯 Palette appliquée directement sur le CIRCLE */
.pv-dot-fill.note-c0 { fill:#ff0066 !important; }
.pv-dot-fill.note-c1 { fill:#0d6efd !important; }
.pv-dot-fill.note-c2 { fill:#fd7e14 !important; }
.pv-dot-fill.note-c3 { fill:#20c997 !important; }
.pv-dot-fill.note-c4 { fill:#6f42c1 !important; }
.pv-dot-fill.note-c5 { fill:#dc3545 !important; }
.pv-dot-fill.note-c6 { fill:#198754 !important; }



/* Swatch suggestions : box pour le SVG */
.swatch {
  width: 24px;
  height: 24px;
  display: inline-block;
}
.swatch svg {
  display: block;
}