/* ===== Spot DMX — WAIT BOX (simple & robuste) ===== */

/* Overlay plein écran */
#spotWaitOverlay{
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,.55);
  z-index: 9998;
  display: none;
}

/* Boîte centrée par CSS (pas de JS de centrage) */
#spotWaitBox{
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%); /* iOS */
  transform: translate(-50%, -50%);
  margin: 0;

  width: 360px;
  max-width: calc(100svw - 24px);          /* évite débordements iOS */
  max-height: calc(100svh - 24px);
  overflow: auto;

  background: #0B0F10;
  color: #E5E5E5;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  padding: 14px 16px 16px;
  z-index: 9999;
  display: none;
  font-family: Arial, sans-serif;
}

/* En-tête : Titre | Badge sur la même ligne (aucun positionnement absolu) */
#spotWaitHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}
#spotWaitTitle{
  font-size: 14px;
  color: #FFC93C;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#spotWaitBadge{
  font-size: 11px;
  color: #fff;
  opacity: .85;
  white-space: nowrap;
}

/* Message + Progress */
#spotWaitMsg{ font-size: 13px; margin: 0 0 10px; }
#spotWaitProg{
  height: 10px;
  background: #12161A;
  border: 1px solid #1c222a;
  border-radius: 6px;
  overflow: hidden;
}
#spotWaitBar{
  height: 100%;
  width: 0%;
  background: #FFC93C;
  transition: width .2s linear;
}

/* Optionnel : très petit écran, on laisse la boîte s’ajuster en largeur */
@media (max-width: 480px){
  #spotWaitBox{ width: auto; }
}

/* App Spot DMX v1 — styles complémentaires (legacy OK) */
.container{padding:18px 0}
.panel{background:#12161A;border:1px solid #1e242b;border-radius:6px;padding:14px;margin:12px 0}
.hidden{display:none}
.subtle{background:#0F1317}
.mono{font-size:14px; font-family:Menlo,Consolas,monospace}
.small{font-size:12px}
.tiny{font-size:10px}
.micro{font-size:8px}

.finder label{margin-right:6px}
.finder input{margin-right:10px}
.result{min-height:40px}

.table{width:100%;border-collapse:collapse;margin-top:6px}
.table th,.table td{border:1px solid #2a2f36;padding:6px;text-align:left}

.actions{margin-bottom:8px}
.warn{color:#FFC93C;margin-left:10px;}
#alerts {
  display: inline-block;      /* ou inline-block */
  margin-top: 6px;
  font-size: 13px;
}

.next{margin-top:12px}

.simview{display:block;margin-top:8px}
.fixture{position:relative;height:120px;background:#0B0F10;border:1px solid #1e242b;border-radius:6px;overflow:hidden}
.beam{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg, rgba(255,201,60,.85), rgba(255,201,60,.05))}
/* Grille 512 canaux */
.u512{display:block;border:1px solid #2a2f36;border-radius:4px;background:#0B0F10;padding:6px;overflow:hidden}
.u512 .bar{position:relative;height:14px;background:#12161A;border:1px solid #1e242b;border-radius:3px;margin:6px 0}
.u512 .seg{position:absolute;top:0;bottom:0;background:#2A9D8F;opacity:.85}
.u512 .seg.warn{background:#C0392B}
.u512 .labels{font:12px/1.2 Menlo,Consolas,monospace;color:#A8B0B7}
/* Liste matos OFL */
.ofl-grid{display:flex;flex-wrap:wrap;gap:8px}
.ofl-card{width:180px;background:#222;border-radius:8px;padding:8px;cursor:pointer}
.ofl-card:hover{outline:1px solid #555}
.ofl-thumb{width:100%;height:110px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111;border-radius:6px;margin-bottom:6px}
.ofl-thumb img{max-width:100%;max-height:100%;display:block}
.ofl-title{font-size:14px;line-height:1.3;color:#eee;text-transform:capitalize}
/* Effet discret pour VRAIE photo produit */
.ofl-thumb.real {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 6px 18px rgba(0,0,0,.35);
    border-radius: 6px;
  }
  .ofl-thumb.real img {
    outline: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
  }
/* le bloc du logo */
#mfrLogoWrap {
  margin: 0 0 8px;
  padding: 8px 0 10px;
  border-bottom: 1px solid #2a2f3b; 
  overflow: hidden;      /* ← CLIPPE l’image */
}

/* l'image (optionnel) */
#mfrLogoImg {
  border-radius: 10px;
  margin-bottom:8px;
  overflow: hidden; /* nécessaire pour certains SVG/Chromium */
  display: block;
}
.modePreview-box{
  border:1px solid #2a2f3b; background:#0b0f17; border-radius:8px; padding:10px;
}
.modePreview-title{ font-weight:700; margin-bottom:6px; }
.modePreview-list{ margin:6px 0 8px 18px; padding:0; }
.modePreview-list li{ margin:2px 0; }
.modePreview-tip{ font-size:12px; color:#9aa; }
.modePreview-warn{ font-size:12px; color:#ff9b9b; margin-top:6px; }
.modePreview-list i.modePreview-simplif{ color:#cbd5e1; }
/* groupement visuel par pixel */
.modePreview-row.pxGroup { margin-bottom: 2px; }
.modePreview-row.pxGroup.px1,
.modePreview-row.pxGroup.px3,
.modePreview-row.pxGroup.px5,
.modePreview-row.pxGroup.px7 {
  background: rgba(255,255,255,0.03);
}
.modePreview-row.pxGroup.px2,
.modePreview-row.pxGroup.px4,
.modePreview-row.pxGroup.px6,
.modePreview-row.pxGroup.px8 {
  background: rgba(255,255,255,0.06);
}
.modePreview-row.pxGroup li { padding: 2px 4px; border-radius: 4px; }
/* Sous-titres de pixels (matrices RGB) */
.pxTitle {
  margin-top: 6px;
  padding: 2px 6px;
  font-weight: bold;
  color: #FFC93C;
  background: #21262F;
  border-left: 2px solid #FFC93C;
  border-radius: 3px;
  font-size: 12px;
}
/* Badge "Groupe n" dans l’aperçu des matrices */
.pxbadge{
  display:inline-block;
  padding:2px 8px;
  margin:1px 0 1px 2px;
  font-size:11px;
  line-height:1.2;
  font-family: Menlo, Consolas, monospace;
  color:#FFC93C;
  background:#0f1116;
  border:1px solid #2a2f3b;
  border-radius:10px;
  letter-spacing:.2px;
  white-space:nowrap;
  vertical-align:baseline;
}
/* optionnel : état au survol */
.pxbadge:hover{ background:#141922; border-color:#364152; }

.modePreview-row.pxGroup {
  padding-left: 10px;
  margin-bottom: 2px;
}
/* Icônes in-line */
.ch-ico {
  width: 24px; height: 24px;
  vertical-align: -5px;        /* parfait alignement avec le texte */
  margin: 0 4px 0 2px;         /* un peu d’air */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Accent visuel spécifique pour le laser */
.ico-laser {
  filter: drop-shadow(0 0 1px rgba(255, 201, 60, .9)) brightness(1.08);
}

/* ===============================
   Spot DMX — Lexique DMX (global)
   =============================== */
   .hidden { display: none !important; }

   .lexique-link {
     cursor: pointer; text-decoration: underline;
   }
   
   .lexique-panel {
     position: fixed; inset: 6% 6% auto 6%;  /* fenêtré */
     max-height: 88vh; overflow: auto;
     background: #0b0b0b; border: 1px solid #333; border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 9999;
     padding: 10px 12px 16px;
   }
   
   /* barre titre */
   .lexique-toolbar {
     display: flex; align-items: center; justify-content: space-between;
     position: sticky; top: 0; background: #0b0b0b;
     padding: 6px 0 10px; z-index: 1;
     border-bottom: 1px solid #222;
   }
   .lexique-close {
     background: #222; border: 1px solid #444; color: #eee;
     border-radius: 4px; padding: 4px 8px; cursor: pointer;
   }
   .lexique-close:hover { background: #303030; }
/* Conteneur principal (ex: #lexiqueBox) */
.lexique { 
  --lx-border:#1e2330;
  --lx-soft:#2a2f3b;
  --lx-text:#e6e6e6;
  --lx-accent:#FFC93C;
  --lx-muted:#9aa3ad;
  --lx-bg:#0f1116;
  color:var(--lx-text);
}
/* État "chargement" */
.lexique .loading { color: var(--lx-muted); }
/* Note TODO déjà couverte, mais on securise */
.lx-right .todo { opacity:.6; font-style:italic; }
/* Barre de navigation A–Z */
/* État sélectionné de la lettre (jaune Spot DMX) */
.lexique-az{
  display:flex; flex-wrap:wrap; gap:6px;
}

/* taille unique (modifiable) */
.lexique-az{ display:flex; flex-wrap:wrap; gap:6px; margin:.5rem 0 1rem; }
.lex-nav{
  --az-size: 24px;
  width:var(--az-size); height:var(--az-size);
  display:inline-grid; place-items:center;
  box-sizing:border-box;
  border:1px solid var(--lx-soft);
  border-radius:4px;
  font-weight:700; font-size:13px; letter-spacing:.03em;
  background:#11161a; color:#FFC93C; cursor:pointer;
  transition:transform .08s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.lex-nav:hover{ background:#151b22; border-color:var(--lx-border); }
.lex-nav.active{ background:#FFC93C; color:#111; border-color:#FFC93C; }

/* --- Colonnes fixes + entête --- */
.lx-row{ display:flex; gap:.6rem; align-items:flex-start; padding:.38rem .25rem; border-bottom:1px solid var(--lx-border); }
.lx-row.head{
  background:rgba(255,255,255,.04);
  border:1px solid var(--lx-border);
  border-radius:4px;
  margin:.25rem 0 .35rem;
  font-weight:700;
}
.lx-left{ flex:0 0 280px; min-width:0; font-weight:700; line-height:1.25; }
.lx-right{ flex:1 1 auto; min-width:0; opacity:.96; font-size:.94rem; line-height:1.25; }

/* --- Zébrage : 1 ligne sur 2 uniquement pour les items (pas l'entête) --- */
.lx-col .lx-row.item:nth-child(odd){ background:rgba(255,255,255,.02); }
.lx-col .lx-row.item:nth-child(even){ background:rgba(255,255,255,.045); }

/* Responsive : rétrécit la colonne "Canal" si écran plus étroit */
@media (max-width: 860px){
  .lx-left{ flex-basis:220px; }
}
@media (max-width: 640px){
  .lx-row{ display:block; }
  .lx-left{ margin-bottom:.25rem; flex-basis:auto; }
}

/* hover (non actif) */
.lexique-az .lex-nav:hover:not(.active):not(:disabled){
  background:#151b22;
  border-color:var(--lx-border);
}

/* état actif = noir sur jaune */
.lexique-az .lex-nav.active{
  background:#FFC93C;
  color:#111;                       /* texte noir */
  border-color:#FFC93C;
}

/* lettres absentes (# off) */
.lexique-az .lex-nav.off,
.lexique-az .lex-nav:disabled{
  opacity:.45;
  border-style:dashed;
  cursor:not-allowed;
}

/* accessibilité focus clavier */
.lexique-az .lex-nav:focus-visible{
  outline:2px solid #FFC93C;
  outline-offset:2px;
}


/* Ancrage & scroll fluide */
html { scroll-behavior:smooth; }
.lexique h4[id] { scroll-margin-top: 86px; } /* pour ne pas passer sous le header */

/* Titre de section A, B, C… */
.lexique h4, .lex-head{
  margin:1.1rem 0 .5rem;
  font-size:1.05rem;
  letter-spacing:.02em;
  color:var(--lx-accent);
  font-weight:700;
}

/* Colonne/liste */
.lexique .lx-col{ margin:0 0 .6rem 0; }

/* Ligne d’entrée du lexique */
.lx-row{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.38rem 0;
  border-bottom:1px solid var(--lx-border);
}

/* Terme (libellé brut) */
.lx-left, .lex-term{
  font-weight:700;
  line-height:1.25;
  min-width: 220px;            /* garde une colonne lisible */
  word-break:break-word;
}

/* Définition (simplif) */
.lx-right, .lex-mean{
  flex:1 1 auto;
  opacity:.96;
  font-size:.94rem;
  line-height:1.25;
  color:var(--lx-text);
}
.lx-right em, .lex-mean em{ color:var(--lx-accent); font-style:normal; }

/* Note TODO quand pas de simplif */
.lx-right .todo, .lex-mean .todo{
  opacity:.6; font-style:italic;
}

/* Bloc “vide” / message */
.lexique .empty{
  padding:.6rem .4rem;
  color:var(--lx-muted);
  font-style:italic;
}

/* Carte/conteneur optionnel pour encadrer le lexique */
.lexique-card{
  background:var(--lx-bg);
  border:1px solid var(--lx-soft);
  border-radius:8px;
  padding:12px 14px;
}

/* Variante nav sticky (si tu enveloppes la nav A–Z dans .lexique-sticky) */
.lexique-sticky{
  position:sticky; top:64px; z-index:5;
  background:linear-gradient(var(--lx-bg), var(--lx-bg));
  padding:6px 0 8px;
  border-bottom:1px solid var(--lx-soft);
}

/* Petits badges (si besoin) */
.lex-badge{
  display:inline-block;
  font-size:.72rem;
  border:1px solid var(--lx-soft);
  border-radius:4px;
  padding:.05rem .3rem;
  margin-left:.35rem;
  color:var(--lx-muted);
}
/* Responsive */
@media (max-width: 860px){
  .lx-left, .lex-term{ min-width:160px; }
}
@media (max-width: 640px){
  .lx-row{ display:block; }
  .lx-left, .lex-term{ margin-bottom: .25rem; }
}

/* Impression (rende lisible en N&B) */
@media print{
  .lexique-az, .lexique-nav{ display:none !important; }
  .lexique h4{ color:#000; }
  .lx-row{ border-color:#aaa; }
}

/* ===============================
   Spot DMX — Étape 2 – Tableau Adressage
   =============================== */

   #addrTable input {
    width: 60px;
    padding: 2px 4px;
    font-size: 11px;
    background: #0B0F10;
    color: #EDEFF1;
    border: 1px solid #333;
    border-radius: 3px;
  }
  
  #addrTable tr.overlap td {
    background: #4c0000;
    color: #fff;
  }
  
  .lane-title {
    opacity: .85;
  }
  /* Toolbar vues graphes */
  .addr-graph-toolbar {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
  }
  
  /* ===== Conteneur général Étape 2 ===== */

  #step2,
  #step2 .panel {
    overflow-x: visible;
  }
  
  /* Tableau + graphes : même cadre horizontal */
  #addrTable,
  #addrGraph {
    width: 100%;
    max-width: 900px;      /* mets ici la même valeur que ton layout principal */
     /*margin: 0 auto;         /* centrés pareil */
    box-sizing: border-box;
  }
  
  /* ===== Graphes (0–512) ===== */
  
  .graph-linear,
  .graph-stacked {
    position: relative;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
  }
  
  /* Axe 0–512 */
  #addrGraph .axis {
    position: relative;
    margin: 4px 0 0;
    height: 18px;
    border-bottom: 1px solid #3a3a3a;
    box-sizing: border-box;
  }
  
  /* Traits de graduation */
  #addrGraph .axis .tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 5px;
    background: #3a3a3a;
  }
  
  /* Chiffres au-dessus de la ligne */
  #addrGraph .axis .tick-label {
    position: absolute;
    bottom: 8px;
    transform: translateX(-50%);
    font-size: 9px;
    color: #7a7a7a;
    pointer-events: none;
  }
  
  /* Piste commune */
  #addrGraph .track {
    position: relative;
    height: 16px;
    border: 1px solid #333;
    background: #12161A;
    margin: 6px 0 8px 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Vue par modèle */
  #addrGraph .lane {
    margin: 4px 0 8px 0;
  }
  
  #addrGraph .lane-title {
    font-size: 13px;
    color: #EDEFF1;
    margin-bottom: 2px;
  }
  
  /* Segments d’occupation DMX */
  .seg {
    position: absolute;
    top: 0;
    height: 100%;
    background: #2A9D8F;              /* écrasé en JS par colorForModel */
    border-left: 1px solid #0B0F10;
    border-right: 1px solid #0B0F10;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    font-size: 0;
  }
  
  .seg.overlap {
    background: #7a1a1a;
    border-color: #3b0b0b;
  }
  
  .seg:hover {
    outline: 1px dashed #64D4C7;
    cursor: pointer;
  }
  /* Bouton adressage auto */
  #btn-auto-addr.addr-ok {
    background: #164d2b;
    border-color:#bdf9ce;
    color: #bdf9ce;
    cursor: grab;
  }
  
  #btn-auto-addr.addr-pending {
    background: #4c1111;
    border-color:#ffc9c9;
    color: #ffc9c9;
    cursor: grab;
  }
  #btn-auto-addr.addr-manual {
    background: #12324a;
    border-color:#3498db;
    color: #3498db;
    cursor: grab;
  }
 /* Status  auto/manu */
 .addr-status {
  display:inline-block;
  padding:10px 16px;
  border-radius:4px;
  font-weight:600;
  font-size: 13px;
  text-decoration:none;
  border:1px solid transparent;
  background:#171D22;
  color:#FFC93C;
  border-color:#2A2F36;
  margin-left:26px;
}
  /* ===== Responsive – petits écrans ===== */
  
  @media (max-width: 900px) {
    /* Sur mobile : un scroll horizontal pour l’ensemble (table + graphes),
       qui restent solidaires en largeur. */
    #step2,
    #step2 .panel {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    #addrTable,
    #addrGraph {
      min-width: 740px;     /* largeur de travail commune */
    }
  
    #addrTable {
      font-size: 11px;
    }
  
    #addrTable th,
    #addrTable td {
      padding: 4px 6px;
    }
  
    .addr-graph-toolbar {
      flex-wrap: wrap;
      gap: 4px;
    }
    #addrGraph .lane-title {
      font-size: 9px;
    }
  }
  
  /* Badge total canaux — look "logo SPOT DMX" + halo */
.patchFootprint.pf-highlight{
  display:inline-block;                 /* s’ajuste au texte */
  position:relative;
  padding:6px 12px;
  margin:6px 0 14px;
  border-radius:9999px;                 /* pastille/pill */
  background:#111519;                   /* même fond que .logo-wrap */
  border:1px solid #2a2f3b;
  color:#EDEFF1;
  font-weight:700;
  letter-spacing:.2px;

  /* halo par défaut (neutre) */
  box-shadow:
    0 0 12px rgba(255,255,255,.70),
    0 0 28px rgba(255,255,255,.35);

  opacity:1 !important;                 /* ressortir même si styles existants */
}

/* Petite pastille lumineuse à gauche */
.patchFootprint.pf-highlight:before{
  content:'';
  position:absolute;
  left:8px; top:50%;
  width:8px; height:8px; margin-top:-4px;
  border-radius:50%;
  background:#FFC93C;                   /* valeur par défaut: jaune */
  box-shadow:0 0 12px rgba(255,201,60,.9), 0 0 22px rgba(255,201,60,.6);
}
/* décale le texte pour ne pas chevaucher la pastille */
.patchFootprint.pf-highlight{ padding-left:24px; }

/* ===== ÉTATS (jamais de dépassement >512) ===== */
/* 0 canal → gris doux */
/* États simples basés sur pf-zero / pf-ok / pf-warn */
.pf-highlight.pf-zero{
  box-shadow: 0 0 10px rgba(255,255,255,.70), 0 0 24px rgba(255,255,255,.35);
}
.pf-highlight.pf-zero:before{
  background:#9aa3ad; box-shadow:0 0 8px rgba(154,163,173,.7);
}

.pf-highlight.pf-ok{
  /* vert doux = “ça passe” */
  box-shadow: 0 0 10px rgba(120,220,160,.75), 0 0 26px rgba(120,220,160,.40);
}
.pf-highlight.pf-ok:before{
  background:#66d18f; box-shadow:0 0 10px rgba(102,209,143,.95);
}

.pf-highlight.pf-warn{
  /* orange/ambre = “presque plein” */
  box-shadow: 0 0 12px rgba(255,200,60,.80), 0 0 30px rgba(255,200,60,.50);
  border-color:#FFC93C;
}
.pf-highlight.pf-warn:before{
  background:#FFC93C; box-shadow:0 0 12px rgba(255,201,60,.95);
}
/* Pulse doux optionnel (tu peux l’appliquer à .pf-warn si tu veux) */
@keyframes pfPulse {
  0%,100% { transform: translateZ(0) scale(1); }
  50%     { transform: translateZ(0) scale(1.02); }
}
.patchFootprint.pf-highlight.pf-pulse{
  animation: pfPulse 2.8s ease-in-out infinite;
}
/* === Pulse fallback (legacy) + accessibilité ===================== */
/* Le JS toggle .pf-alt quand @keyframes indisponible → simule un "pulse" doux */
.patchFootprint.pf-highlight.pf-pulse.pf-alt{
  transform: scale(1.02);
  box-shadow:
    0 0 14px rgba(255,255,255,.78),
    0 0 32px rgba(255,255,255,.42);
}

/* Variante états (facultatif) : petit boost visuel pendant le faux-pulse */
.pf-highlight.pf-ok.pf-pulse.pf-alt{
  box-shadow: 0 0 12px rgba(120,220,160,.82), 0 0 30px rgba(120,220,160,.46);
}
.pf-highlight.pf-warn.pf-pulse.pf-alt{
  box-shadow: 0 0 14px rgba(255,200,60,.88), 0 0 34px rgba(255,200,60,.54);
}

/* Respecte les préférences "réduire les animations" */
@media (prefers-reduced-motion: reduce){
  .patchFootprint.pf-highlight.pf-pulse{
    animation: none !important;
    transform: none !important;
  }
}
/* Responsive: un peu plus généreux en mobile */
@media (max-width:480px){
  .patchFootprint.pf-highlight{
    padding:8px 14px 8px 26px;
    font-size:14px;
  }
}
/* ===============================
   Spot DMX — Étape 3 – CSS Concepteur de scène
   =============================== */
/* Ligne canal scène */
.ui-row{
  display:flex;
  align-items:flex-start;
  margin:2px 0;
  margin-bottom:13px;
}

.ui-row-main{
  display:flex;
  align-items:flex-start;
  flex:1 1 auto;
}

.ui-row-main .ui-chAddr{
  width:38px;
  display:inline-block;
  color:#9AA3AE;
  margin:0 6px 0 6px;
}

.ui-row-main .ui-chLabel{
  flex:1 1 auto;
  display:inline-block;
}

/* Bloc slider */
.ui-sliderCell{
  margin-left:8px;
  display:flex;
  flex-direction:column;     /* select AU-DESSUS du slider */
  align-items:flex-start;
}

/* ligne slider + champ numérique */
.ui-sliderWrap{
  display:flex;
  align-items:center;
  width:230px;               /* largeur commune */
  max-width:100%;
}

.ui-sliderCell .ui-slider{
  width:160px;
  margin-right:6px;
  flex:1 1 auto;
}

.ui-sliderCell .ui-sliderVal{
  width:52px;
}

/* select (plage) : même largeur que slider+valeur */
.ui-sliderCell .ui-cap{
  width:230px;
  max-width:100%;
  margin-bottom:3px;
}

/* Zébrage une ligne canal sur deux */
.ui-row-alt{
  background-color:#161a21;  /* un chouïa plus clair que le panel */
}

/* Survol d’une ligne canal */
.ui-row:hover{
  background-color:#202632;   /* un peu plus clair que le zébrage */
}

/* ===== toolbar switches ===== */
.scene-toolbar{
  margin-bottom:26px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.scene-toggle{
  margin-top:10px;
  align-items:center;
  gap:8px;
}

.scene-toggle-label{
  margin-left:10px;
  color:#EDEFF1;
}

/* Switch générique Spot DMX */
.sdx-switch{
  position:relative;
  display:inline-block;
  width:34px;
  height:18px;
}

.sdx-switch input{
  opacity:0;
  width:0;
  height:0;
}

/* rail */
.sdx-switch-slider{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  border-radius:999px;
  background:#151a21;
  border:1px solid #2a2f3b;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* bouton */
.sdx-switch-slider:before{
  content:'';
  position:absolute;
  left:1px; top:1px;
  width:14px; height:14px;
  border-radius:50%;
  background:#9aa3ad;
  box-shadow:0 0 4px rgba(0,0,0,.6);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}

/* état ON */
.sdx-switch input:checked + .sdx-switch-slider{
  background:#FFC93C;
  border-color:#FFC93C;
  box-shadow:0 0 8px rgba(255,201,60,.85);
}

.sdx-switch input:checked + .sdx-switch-slider:before{
  transform:translateX(14px);
  background:#111;
  box-shadow:0 0 6px rgba(255,201,60,.7);
}

/* petit feedback au survol */
.sdx-switch:hover .sdx-switch-slider{
  box-shadow:0 0 6px rgba(255,255,255,.10);
}

/*  boutons créer step 3*/
/* Style OK (vert) */
.btn.addr-ok {
  background: #164d2b;
  border-color:#bdf9ce;
  color: #bdf9ce;
  cursor: grab;
}

/* Style KO (rouge) */
.btn.addr-bad {
  background: #471a1a;
  border-color:#ffb4b4;
  color: #ffb4b4;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Style logos fabricants */
.fixture-logo {
  width:60px;                    /* largeur fixe */
  display:inline-flex;           /* alignement propre */
  align-items:center;
  justify-content:center;
  padding:2px;                   /* contour blanc tout autour */
  box-sizing:border-box;         /* padding inclus dans les 50px */
  background:#ffffff;            /* fond = cadre blanc */
  border-radius:4px;             /* même arrondi qu'avant si tu veux */
  margin-right:6px;
  overflow:hidden;               /* au cas où */
}

/* On neutralise le style inline max-width / max-height */
.fixture-logo img {
  display:block;
  width:100% !important;         /* l’image remplit la largeur interne */
  height:auto !important;        /* hauteur proportionnelle */
  max-width:none !important;
  max-height:none !important;
}

/* --- header fixture (logo + appareil + photo) --- */

.sdx-fixtureHead{
  margin:4px 0 8px;
  cursor:pointer;          /* optionnel : feedback visuel sur le bloc clicable */
}

/* nouveau : c'est LUI le conteneur flex des deux cellules */
.sdx-fixtureHeadInner{
  display:flex;
  align-items:flex-start;
}

/* Cellule logo fabricant (≈100px) */
.sdx-fixtureLogoCell{
  width:100px;
  min-width:100px;
  max-width:100px;
  margin-right:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* On réutilise .fixture-logo à l’intérieur */
.sdx-fixtureLogoCell .fixture-logo{
  width:90px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Cellule appareil (titre + photo + mode/DMX) */
.sdx-fixtureMainCell{
  flex:1;
}

/* Titre appareil */
.sdx-fixtureTitle{
  margin:0 0 4px;
}

/* Photo produit 200×140 px standardisée */
.sdx-fixturePhotoWrap{
  width:200px;
  height:140px;
  max-width:100%;
  margin:4px 0;
  overflow:hidden;
  background:#111;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ligne mode / DMX sous la photo */
.sdx-fixtureModeLine{
  margin-top:4px;
  color:#9AA3AE;
}
/* Pastille couleur Preset */
.sdx-capColor{
  display:inline-block;
  width:12px;
  height:12px;
  margin:0 4px 0 6px;       
  border-radius:50%;        
  border:1px solid #444;
  vertical-align:middle;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}

/* Responsive : en-dessous d’une certaine largeur, on empile logo puis appareil */
@media screen and (max-width: 640px){
  .sdx-fixtureHeadInner{
    flex-direction:column;
    align-items:flex-start;
  }
  .sdx-fixtureLogoCell{
    width:auto;
    min-width:0;
    max-width:none;
    margin-right:0;
    margin-bottom:6px;
  }
}

/* 📱 Responsive : slider sous le libellé */
@media (max-width: 768px){
  .ui-row{
    flex-direction:column;
    align-items:stretch;
  }
  .ui-row-main{
    width:100%;
  }
  .ui-sliderCell{
    width:100%;
    margin-left:0;
    margin-top:4px;
  }
  .ui-sliderWrap{
    width:100%;              /* pleine largeur en mobile */
  }
  .ui-sliderCell .ui-cap{
    width:100%;              /* pleine largeur en mobile */
  }
  .ui-sliderCell .ui-slider{
    width:100%;
    max-width:100%;
  }
}
/* ===============================
   Spot DMX — Étape 5 – CSS images rubrique d'aide
   =============================== */
/* Image d'aide : desktop par défaut */
.help-img {
  display: block;
  border:0;
  border-radius:6px; 
  margin-top:13px;
  margin-bottom:26px;
  width: 400px;      /* taille cible sur desktop */
  max-width: 100%;   /* sécurité : ne jamais dépasser le bloc */
  height: auto;
}

/* Vue mobile / responsive */
@media (max-width: 768px) {
  .help-img {
    width: 95%;
    max-width: 95%;  /* prend ~95% de la largeur du bloc */
  }
}