/* ==========================================================================
   Synapx Panel — bibliotheque de controles d'interface « console analogique »
   Phase 1 : boutons, interrupteurs on/off, curseurs, faders, knobs, LED,
             onglets, modules. CSS pur, zero dependance. Prefixe : .sxp-*
   Licence : libre (SynapxLab). https://synapx.fr/sdk/Panel/
   ========================================================================== */

/* --- 1. Jetons de theme -------------------------------------------------- */
.sxp{
  --sxp-bg:#0a0e12;
  --sxp-panel:#11161c;
  --sxp-panel2:#161d25;
  --sxp-line:#1f2a35;
  --sxp-green:#33ff66;
  --sxp-amber:#ffb000;
  --sxp-cyan:#2ee6ff;
  --sxp-red:#ff3355;
  --sxp-text:#c8d6e5;
  --sxp-dim:#5a6b7c;
  --sxp-accent:var(--sxp-green);
  --sxp-mono:"Cascadia Code",ui-monospace,"Fira Code",Consolas,monospace;
  --sxp-radius:6px;
  --sxp-speed:.22s;
  color:var(--sxp-text);
  font-family:var(--sxp-mono);
  font-size:13px;
}
/* Surface porteuse optionnelle : fond sombre + fines rayures de scan. */
.sxp-surface{
  background:var(--sxp-bg);
  background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.012) 2px 4px);
  color:var(--sxp-text);
  border-radius:var(--sxp-radius);
}
.sxp *{box-sizing:border-box}

/* Variantes d'accent : posez .sxp-accent--amber / --cyan / --red sur un
   conteneur pour recolorer d'un coup les LED, halos et etats actifs. */
.sxp-accent--amber{--sxp-accent:var(--sxp-amber)}
.sxp-accent--cyan {--sxp-accent:var(--sxp-cyan)}
.sxp-accent--red  {--sxp-accent:var(--sxp-red)}

/* --- 2. Boutons ---------------------------------------------------------- */
.sxp-btn{
  font-family:var(--sxp-mono);font-size:12px;letter-spacing:.02em;
  padding:6px 12px;cursor:pointer;color:var(--sxp-text);
  background:linear-gradient(180deg,var(--sxp-panel2),#10161d);
  border:1px solid var(--sxp-line);border-radius:4px;
  transition:border-color var(--sxp-speed),box-shadow var(--sxp-speed),
             background var(--sxp-speed),color var(--sxp-speed),transform .05s;
}
.sxp-btn:hover{border-color:var(--sxp-cyan)}
.sxp-btn:active{transform:translateY(1px)}
.sxp-btn:disabled{opacity:.35;cursor:default;transform:none}
.sxp-btn:focus-visible{outline:1px solid var(--sxp-cyan);outline-offset:2px}
/* Etat actif / enfonce : le bouton « s'allume » a la couleur d'accent. */
.sxp-btn.is-on{
  color:#08110b;background:var(--sxp-accent);border-color:var(--sxp-accent);
  font-weight:700;box-shadow:0 0 10px color-mix(in srgb,var(--sxp-accent) 40%,transparent);
}
.sxp-btn--primary{
  color:#08110b;background:var(--sxp-green);border-color:var(--sxp-green);font-weight:700;
}
.sxp-btn--primary:hover{filter:brightness(1.08);border-color:var(--sxp-green)}
.sxp-btn--danger{color:#fff;background:var(--sxp-red);border-color:var(--sxp-red)}
.sxp-btn--ghost{background:transparent;color:var(--sxp-dim)}
.sxp-btn--ghost:hover{color:var(--sxp-text)}
.sxp-btn--sm{font-size:10px;padding:2px 8px;border-radius:3px}
.sxp-btn--lg{font-size:15px;padding:9px 18px}
/* Groupe de boutons (barre / segments). */
.sxp-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* --- 3. Interrupteurs on/off (plusieurs versions) ------------------------ */
/* 3a. Interrupteur « pastille LED » : bouton plat + voyant discret. */
.sxp-toggle{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;
  user-select:none;color:var(--sxp-dim);font-size:12px;border-radius:4px;
  background:linear-gradient(180deg,#1c2530,#10161d);border:1px solid var(--sxp-line);
  box-shadow:0 2px 3px rgba(0,0,0,.45);
  transition:color var(--sxp-speed),border-color var(--sxp-speed),box-shadow var(--sxp-speed),transform .05s;
}
.sxp-toggle:hover{border-color:#2e4050}
.sxp-toggle:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(0,0,0,.45)}
.sxp-toggle input{position:absolute;opacity:0;width:0;height:0}
.sxp-toggle .sxp-led-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:#232f3a;box-shadow:inset 0 1px 2px #000;
  transition:background var(--sxp-speed),box-shadow var(--sxp-speed);
}
.sxp-toggle:has(input:checked){color:var(--sxp-text);border-color:#33454f}
.sxp-toggle:has(input:checked) .sxp-led-dot{
  background:var(--sxp-accent);
  box-shadow:0 0 8px var(--sxp-accent),0 0 2px #fff inset;
  animation:sxp-power-on .35s ease-out;
}
.sxp-toggle:has(input:focus-visible){outline:1px solid var(--sxp-cyan);outline-offset:2px}

/* 3b. Interrupteur glissant (rail + pastille qui coulisse). */
.sxp-switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  color:var(--sxp-dim);font-size:12px}
.sxp-switch input{position:absolute;opacity:0;width:0;height:0}
.sxp-switch .sxp-switch-rail{
  position:relative;width:44px;height:22px;border-radius:22px;flex:0 0 44px;
  background:linear-gradient(180deg,#0c1116,#141c24);border:1px solid var(--sxp-line);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);transition:border-color var(--sxp-speed),box-shadow var(--sxp-speed);
}
.sxp-switch .sxp-switch-rail::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,#3a4a5a,#141a21);border:1px solid #4a5a6a;
  box-shadow:0 1px 2px rgba(0,0,0,.6);
  transition:transform var(--sxp-speed) cubic-bezier(.5,0,.2,1),background var(--sxp-speed);
}
.sxp-switch:has(input:checked){color:var(--sxp-text)}
.sxp-switch:has(input:checked) .sxp-switch-rail{
  border-color:var(--sxp-accent);box-shadow:inset 0 0 8px color-mix(in srgb,var(--sxp-accent) 45%,transparent);
}
.sxp-switch:has(input:checked) .sxp-switch-rail::after{
  transform:translateX(22px);background:var(--sxp-accent);border-color:var(--sxp-accent);
  box-shadow:0 0 8px var(--sxp-accent);
}
.sxp-switch:has(input:focus-visible) .sxp-switch-rail{outline:1px solid var(--sxp-cyan);outline-offset:2px}

/* 3c. Bascule « rocker » (interrupteur mural a deux positions). */
.sxp-rocker{position:relative;display:inline-block;width:52px;height:28px;cursor:pointer;
  border-radius:5px;background:#0c1116;border:1px solid var(--sxp-line);
  box-shadow:inset 0 0 6px rgba(0,0,0,.7)}
.sxp-rocker input{position:absolute;opacity:0;width:0;height:0}
.sxp-rocker .sxp-rocker-cap{
  position:absolute;inset:3px;border-radius:3px;
  background:linear-gradient(180deg,#2a333d 0 50%,#171e26 50% 100%);
  box-shadow:inset 0 6px 6px rgba(255,255,255,.04),inset 0 -6px 8px rgba(0,0,0,.6);
  transition:background var(--sxp-speed),box-shadow var(--sxp-speed);
}
.sxp-rocker .sxp-rocker-cap::before{
  content:"O";position:absolute;top:2px;left:0;right:0;text-align:center;font-size:8px;color:var(--sxp-dim)}
.sxp-rocker .sxp-rocker-cap::after{
  content:"I";position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;color:var(--sxp-dim)}
.sxp-rocker:has(input:checked) .sxp-rocker-cap{
  background:linear-gradient(180deg,#171e26 0 50%,color-mix(in srgb,var(--sxp-accent) 55%,#101013) 50% 100%);
  box-shadow:inset 0 -6px 10px color-mix(in srgb,var(--sxp-accent) 40%,transparent);
}
.sxp-rocker:has(input:checked) .sxp-rocker-cap::after{color:#08110b;font-weight:700}

/* 3d. Gros bouton-poussoir lumineux (power). */
.sxp-power{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;cursor:pointer;color:var(--sxp-dim);
  background:radial-gradient(circle at 50% 38%,#1b232c,#0c1116);
  border:1px solid var(--sxp-line);box-shadow:0 4px 8px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.05);
  transition:color var(--sxp-speed),border-color var(--sxp-speed),box-shadow var(--sxp-speed)}
.sxp-power input{position:absolute;opacity:0;width:0;height:0}
.sxp-power svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;filter:drop-shadow(0 0 0 transparent);transition:filter var(--sxp-speed)}
.sxp-power:active{box-shadow:0 1px 3px rgba(0,0,0,.6),inset 0 2px 5px rgba(0,0,0,.5)}
.sxp-power:has(input:checked){
  color:var(--sxp-accent);border-color:var(--sxp-accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--sxp-accent) 45%,transparent),
             inset 0 0 12px color-mix(in srgb,var(--sxp-accent) 25%,transparent);
}
.sxp-power:has(input:checked) svg{filter:drop-shadow(0 0 5px var(--sxp-accent));animation:sxp-power-on .4s ease-out}

/* --- 4. Curseurs (sliders) & faders ------------------------------------- */
.sxp-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:linear-gradient(90deg,var(--sxp-line),#2a3a4a);border-radius:2px;outline:none;cursor:pointer;
}
.sxp-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:22px;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#3a4a5a,#141a21);border:1px solid #4a5a6a;
  box-shadow:0 0 6px rgba(46,230,255,.25);transition:box-shadow var(--sxp-speed)}
.sxp-slider::-moz-range-thumb{width:14px;height:22px;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#3a4a5a,#141a21);border:1px solid #4a5a6a}
.sxp-slider:hover::-webkit-slider-thumb{box-shadow:0 0 9px color-mix(in srgb,var(--sxp-accent) 55%,transparent)}
.sxp-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 10px color-mix(in srgb,var(--sxp-accent) 70%,transparent)}

/* Ligne curseur + libelle + valeur (gabarit pret a l'emploi). */
.sxp-row{display:flex;align-items:center;gap:8px;margin:6px 0;min-width:0}
.sxp-row>.sxp-label{flex:0 0 86px;color:var(--sxp-dim);font-size:11px;text-transform:uppercase}
.sxp-row>.sxp-value{flex:0 0 52px;text-align:right;color:var(--sxp-amber)}

/* Fader vertical + banc de faders (type egaliseur). */
.sxp-faders{display:flex;gap:8px;justify-content:space-between;padding:4px 2px 0}
.sxp-fader{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0}
.sxp-fader input[type=range]{
  -webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:16px;height:104px;cursor:pointer;border-radius:2px;
  background:linear-gradient(180deg,#2a3a4a,var(--sxp-line))}
.sxp-fader input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:12px;border-radius:2px;
  background:linear-gradient(180deg,#3a4a5a,#141a21);border:1px solid #4a5a6a;
  box-shadow:0 0 5px rgba(46,230,255,.2)}
.sxp-fader .sxp-fader-name{font-size:9px;color:var(--sxp-dim);white-space:nowrap}
.sxp-fader .sxp-value{font-size:9px;color:var(--sxp-amber);min-height:11px}

/* --- 5. Potentiometres (knobs) ------------------------------------------ */
/* Piloté par panel.js : glisser verticalement pour tourner. Le JS ecrit
   --sxp-knob-deg (rotation) et l'attribut data-val. */
.sxp-knob{width:48px;height:48px;flex:0 0 48px;cursor:ns-resize;touch-action:none;user-select:none;position:relative}
.sxp-knob svg{display:block;width:100%;height:100%}
.sxp-knob .sxp-knob-arc{stroke:var(--sxp-accent);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--sxp-accent) 60%,transparent))}
.sxp-knob .sxp-knob-track{stroke:var(--sxp-line)}
.sxp-knob .sxp-knob-cap{fill:url(#sxpKnobGrad)}
.sxp-knob .sxp-knob-pointer{stroke:var(--sxp-text);stroke-width:2;stroke-linecap:round;
  transform-box:view-box;transform-origin:24px 24px;transition:transform .06s}
.sxp-knob:hover .sxp-knob-arc{stroke:var(--sxp-green)}
.sxp-krow{display:flex;align-items:center;gap:10px}
.sxp-krow .sxp-label{flex:0 0 86px;color:var(--sxp-dim);font-size:11px;text-transform:uppercase}

/* --- 6. Indicateurs LED -------------------------------------------------- */
.sxp-led{display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#333;box-shadow:0 0 6px #000 inset;vertical-align:middle}
.sxp-led--idle{background:#2a3a2a}
.sxp-led--on{background:var(--sxp-green);box-shadow:0 0 10px var(--sxp-green)}
.sxp-led--busy{background:var(--sxp-amber);box-shadow:0 0 10px var(--sxp-amber);animation:sxp-blink .5s infinite alternate}
.sxp-led--err{background:var(--sxp-red);box-shadow:0 0 10px var(--sxp-red)}
.sxp-led--pulse{animation:sxp-pulse 1.4s ease-in-out infinite}
/* Rampe de voyants (VU / niveau) — statique, alimentee par une classe .is-lit. */
.sxp-ledbar{display:inline-flex;gap:3px;align-items:center}
.sxp-ledbar i{width:7px;height:14px;border-radius:1px;background:#1a2530;display:block}
.sxp-ledbar i.is-lit{background:var(--sxp-green);box-shadow:0 0 5px var(--sxp-green)}
.sxp-ledbar i.is-lit.sxp-warn{background:var(--sxp-amber);box-shadow:0 0 5px var(--sxp-amber)}
.sxp-ledbar i.is-lit.sxp-peak{background:var(--sxp-red);box-shadow:0 0 5px var(--sxp-red)}

/* --- 6bis. Egaliseur / analyseur de spectre a LED ----------------------- */
/* 32 colonnes de segments LED. panel.js pilote la hauteur (--eqh ancre le
   degrade a la hauteur du bandeau). */
.sxp-eq{display:flex;align-items:flex-end;gap:2px;height:128px;padding:8px;border-radius:6px;
  background:linear-gradient(180deg,#0b1015,#070a0e);border:1px solid var(--sxp-line);
  box-shadow:inset 0 0 22px rgba(0,0,0,.65)}
.sxp-eq-band{position:relative;flex:1 1 0;min-width:2px;height:100%;border-radius:1px;
  background:repeating-linear-gradient(to top,#141d26 0 6px,transparent 6px 8px)}
.sxp-eq-band>i{position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(to top,var(--sxp-green) 0 52%,var(--sxp-amber) 74%,var(--sxp-red) 100%);
  background-size:100% var(--eqh,104px);background-position:bottom;
  -webkit-mask:repeating-linear-gradient(to top,#000 0 6px,transparent 6px 8px);
          mask:repeating-linear-gradient(to top,#000 0 6px,transparent 6px 8px);
  filter:drop-shadow(0 0 2px rgba(51,255,102,.4))}
.sxp-eq-band>b{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;
  background:#e8f0ff;box-shadow:0 0 4px rgba(232,240,255,.9);opacity:.85}

/* --- 7. Onglets ---------------------------------------------------------- */
.sxp-tabs{display:flex;gap:4px}
.sxp-tabs button{
  font-family:var(--sxp-mono);font-size:11px;letter-spacing:.12em;padding:8px 18px;cursor:pointer;
  color:var(--sxp-dim);background:var(--sxp-panel);border:1px solid var(--sxp-line);border-bottom:none;
  border-radius:6px 6px 0 0;transition:color var(--sxp-speed),background var(--sxp-speed)}
.sxp-tabs button.is-on{color:var(--sxp-green);background:var(--sxp-panel2);box-shadow:inset 0 2px 0 var(--sxp-green)}
.sxp-tabpane{display:none}
.sxp-tabpane.is-on{display:block}

/* --- 8. Modules / racks (bloc repliable + parametres) ------------------- */
.sxp-module{background:var(--sxp-panel);border:1px solid var(--sxp-line);border-radius:var(--sxp-radius);padding:10px 12px}
.sxp-module>h3{margin:0 0 8px;font-size:10px;letter-spacing:.2em;color:var(--sxp-cyan);
  border-bottom:1px dashed var(--sxp-line);padding-bottom:5px;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:6px}
.sxp-module>h3::before{content:"▾";color:var(--sxp-dim);font-size:9px;width:8px;display:inline-block}
.sxp-module.is-collapsed>h3{margin-bottom:0;border-bottom:0;padding-bottom:0}
.sxp-module.is-collapsed>h3::before{content:"▸"}
.sxp-module.is-collapsed>*:not(h3){display:none}
/* Bloc effet : en-tete interrupteur + parametres indentes. */
.sxp-fx{margin:5px 0}
.sxp-fx-params{display:flex;flex-direction:column;gap:4px;margin:6px 0 2px 14px}
.sxp-fx-param{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--sxp-dim)}
.sxp-fx-param input[type=range]{flex:1}

/* --- 9. Selecteur de mode (segmente) — amorce du voltmetre Phase 2 ------ */
.sxp-mode{display:inline-flex;border:1px solid var(--sxp-line);border-radius:5px;overflow:hidden;
  background:#0c1116}
.sxp-mode button{
  font-family:var(--sxp-mono);font-size:11px;padding:6px 14px;cursor:pointer;color:var(--sxp-dim);
  background:transparent;border:none;border-right:1px solid var(--sxp-line);transition:color var(--sxp-speed),background var(--sxp-speed)}
.sxp-mode button:last-child{border-right:none}
.sxp-mode button.is-on{color:#08110b;background:var(--sxp-accent);font-weight:700}

/* --- 9bis. Commutateur rotatif crante (selecteur de mode) --------------- */
/* Molette ronde facon multimetre : positions disposees autour, index qui
   tourne d'un cran a l'autre (rendu par panel.js). */
.sxp-selector{position:relative;display:inline-block;width:120px;height:120px}
.sxp-selector-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;cursor:grab;outline:none;
  background:repeating-conic-gradient(from 0deg,#39434f 0 7deg,#1b222b 7deg 14deg);
  border:1px solid #444f5e;box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.06)}
.sxp-selector-knob:active{cursor:grabbing}
.sxp-selector-knob:focus-visible{box-shadow:0 0 0 2px var(--sxp-cyan),0 3px 8px rgba(0,0,0,.6)}
.sxp-selector-knob::before{content:"";position:absolute;inset:9px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#2b3742,#12181f);border:1px solid #2a333d;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.sxp-selector-ptr{position:absolute;left:50%;top:5px;width:3px;height:13px;margin-left:-1.5px;border-radius:2px;
  background:var(--sxp-accent);box-shadow:0 0 6px var(--sxp-accent);z-index:1;
  transform-origin:50% 24px;transition:transform .2s cubic-bezier(.34,1.5,.5,1)}
.sxp-selector-opt{position:absolute;transform:translate(-50%,-50%);font-family:var(--sxp-mono);font-size:12px;
  color:var(--sxp-dim);cursor:pointer;padding:1px 6px;border-radius:4px;user-select:none;line-height:1.4;
  transition:color var(--sxp-speed),background var(--sxp-speed),box-shadow var(--sxp-speed)}
.sxp-selector-opt:hover{color:var(--sxp-text)}
.sxp-selector-opt.is-on{color:#08110b;background:var(--sxp-accent);font-weight:700;
  box-shadow:0 0 8px color-mix(in srgb,var(--sxp-accent) 45%,transparent)}

/* --- 10. Champs (texte, nombre, select, zone de texte) ------------------ */
.sxp select,.sxp textarea,
.sxp input[type=text],.sxp input[type=number],.sxp input[type=search]{
  font-family:var(--sxp-mono);font-size:12px;color:var(--sxp-text);background:var(--sxp-panel2);
  border:1px solid var(--sxp-line);border-radius:4px;padding:5px 7px}
.sxp textarea{width:100%;min-height:96px;padding:10px;resize:vertical;line-height:1.5}
.sxp ::placeholder{color:var(--sxp-dim)}
/* Focus discret sur les champs saisis — mais PAS sur les curseurs (range). */
.sxp input:not([type=range]):focus,.sxp select:focus,.sxp textarea:focus{outline:1px solid var(--sxp-cyan);outline-offset:-1px}
.sxp input[type=range]:focus,.sxp input[type=range]:focus-visible{outline:none}

/* --- 11. Instruments de mesure (Phase 2) -------------------------------- */
/* Boitier d'appareil : caisson metal + facade, autour d'un cadran canvas. */
.sxp-instr{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:12px 12px 10px;
  border-radius:10px;background:linear-gradient(180deg,#171d25,#0c1015);
  border:1px solid #262e3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 14px rgba(0,0,0,.5)}
.sxp-instr canvas{display:block;width:150px;height:150px}
.sxp-instr--sm canvas{width:110px;height:110px}
.sxp-instr .sxp-instr-name{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sxp-dim)}
.sxp-instr .sxp-instr-ctl{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:2px}
/* Ecran type oscilloscope (bord biseaute + reflet). */
.sxp-scope{position:relative;border-radius:8px;overflow:hidden;border:1px solid #262e3a;
  box-shadow:inset 0 0 24px rgba(0,0,0,.7)}
.sxp-scope canvas{display:block;width:300px;height:180px}
.sxp-scope::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.06),transparent 60%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
/* Rangee d'instruments (cluster facon tableau de bord). */
.sxp-cluster{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}

/* --- 11bis. Poste de vol : manche + gaz --------------------------------- */
.sxp-stick{display:inline-flex;align-items:center;gap:8px;position:relative;
  padding:6px 8px 16px;border-radius:8px;border:1px solid #262e3a;
  background:linear-gradient(180deg,#0c1017,#080b10);box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.sxp-stick-name{position:absolute;left:0;right:0;bottom:3px;text-align:center;
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#ffb877;
  text-shadow:0 0 6px rgba(255,140,40,.45);pointer-events:none}
.sxp-stick-pad{position:relative;width:60px;height:60px;border-radius:50%;
  cursor:grab;touch-action:none;user-select:none;outline:none;
  background:radial-gradient(circle at 35% 30%,#1d242f,#0a0e14 70%);
  border:1px solid #333e4e;box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.sxp-stick-pad:active{cursor:grabbing}
.sxp-stick-pad:focus-visible{box-shadow:0 0 0 2px rgba(255,138,58,.5),inset 0 2px 6px rgba(0,0,0,.7)}
.sxp-stick-cross{position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),#232c38 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(0deg,transparent calc(50% - .5px),#232c38 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.sxp-stick-grip{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#3a4250,#12151c);
  border:1px solid #3d4655;box-shadow:0 2px 5px rgba(0,0,0,.65);transition:transform .04s}
.sxp-stick-grip.is-active{border-color:#ff8a3a;box-shadow:0 0 8px rgba(255,138,58,.5),0 2px 5px rgba(0,0,0,.65)}
.sxp-stick-throttle{position:relative;width:22px;height:60px;border-radius:5px;cursor:ns-resize;
  touch-action:none;user-select:none;outline:none;background:linear-gradient(180deg,#0a0e14,#10151d);
  border:1px solid #333e4e;box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.sxp-stick-throttle:focus-visible{box-shadow:0 0 0 2px rgba(255,138,58,.5),inset 0 2px 6px rgba(0,0,0,.7)}
.sxp-stick-rail{position:absolute;left:50%;top:5px;bottom:5px;width:2px;margin-left:-1px;background:#232c38;border-radius:1px;pointer-events:none}
.sxp-stick-lever{position:absolute;left:2px;right:2px;height:10px;bottom:3px;border-radius:2.5px;pointer-events:none;
  background:linear-gradient(180deg,#3a4453,#161b22);border:1px solid #4a5566}
.sxp-stick-lever.is-active{border-color:#ff8a3a;box-shadow:0 0 7px rgba(255,138,58,.45)}

/* --- 11ter. Cluster d'instruments de vol -------------------------------- */
.sxp-cockpit{display:inline-flex;gap:10px;align-items:flex-start}
.sxp-cockpit-inst{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(180deg,rgba(20,25,34,.9),rgba(12,15,21,.9));
  border:1px solid var(--sxp-line);border-radius:12px;padding:8px 8px 5px;
  box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)}
.sxp-cockpit-inst canvas{display:block}
.sxp-cockpit-inst span{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#9fb0c8}

/* --- 12. Animations ------------------------------------------------------ */
@keyframes sxp-blink{from{opacity:.3}to{opacity:1}}
@keyframes sxp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Rampe d'allumage : eclair bref quand un controle passe a ON. */
@keyframes sxp-power-on{
  0%{filter:brightness(2.4);transform:scale(1.35)}
  60%{filter:brightness(1.2)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes sxp-scan{from{background-position:0 0}to{background-position:0 4px}}
/* Respecte la preference « reduire les animations ». */
@media (prefers-reduced-motion:reduce){
  .sxp *,.sxp *::before,.sxp *::after{animation:none!important;transition:none!important}
}