/* Testeur de couleurs : bouton + panneau (couleurs fixes, indépendantes de la palette testée) */
.cx-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-panel a:focus-visible, .cx-panel button:focus-visible, .cx-panel input:focus-visible { outline: 3px solid #4d8dff; outline-offset: 2px; }
.cx-panel { position: fixed; z-index: 8950; left: 16px; bottom: 72px; width: min(360px, calc(100vw - 32px)); max-height: calc(100svh - 96px); overflow: auto; padding: 18px 18px 16px; border-radius: 20px; background: #fff; color: #3b3b40; font: 400 .9rem/1.45 'Be Vietnam Pro', 'Archivo', system-ui, sans-serif; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .35); }
.cx-panel[hidden] { display: none; }
.cx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cx-head b { color: #121214; font-size: 1.1rem; }
.cx-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0f0f2; color: #121214; cursor: pointer; }
.cx-lead { margin: 0 0 14px; color: #5a5a60; }
.cx-label { margin: 12px 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #85858c; }
.cx-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border: 1.5px solid #dcdce0; border-radius: 999px; background: #fff; color: #121214; font: 700 .82rem/1 inherit; cursor: pointer; }
.cx-chip i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--amber) 50%, var(--jungle) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cx-chip[aria-pressed="true"] { border-color: #121214; box-shadow: 0 0 0 1px #121214; }
.cx-fields { display: grid; gap: 8px; }
.cx-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px 92px; gap: 10px; align-items: center; }
.cx-name b { display: block; color: #121214; font-size: .92rem; }
.cx-name small { display: block; color: #85858c; font-size: .74rem; line-height: 1.25; }
.cx-color { width: 48px; height: 44px; padding: 2px; border: 1.5px solid #dcdce0; border-radius: 12px; background: #fff; cursor: pointer; }
.cx-hex { width: 100%; height: 44px; padding: 0 10px; border: 1.5px solid #dcdce0; border-radius: 12px; font: 600 .9rem/1 ui-monospace, 'SF Mono', Menlo, monospace; text-transform: uppercase; color: #121214; background: #fff; }
.cx-hex.is-bad { border-color: #d33; }
.cx-note { margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff4d6; color: #5a4300; font-size: .8rem; }
.cx-codes { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; font: 600 .8rem/1 ui-monospace, 'SF Mono', Menlo, monospace; color: #3b3b40; }
.cx-codes span { display: inline-flex; align-items: center; gap: 6px; }
.cx-codes i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.cx-actions { display: flex; gap: 8px; margin-top: 14px; }
.cx-b { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; padding: 0 16px; border: 1.5px solid #121214; border-radius: 999px; background: #fff; color: #121214; font: 700 .9rem/1 inherit; cursor: pointer; }
.cx-actions .cx-b { flex: 1; }
.cx-b--main { background: #121214; color: #fff; }
.cx-propose { display: flex; width: 100%; margin-top: 14px; }
.cx-propose[hidden] { display: none; }
.cx-foot { margin: 10px 0 0; font-size: .76rem; color: #85858c; }
.sheet-open .cx-panel, .chat-open .cx-panel, .sheet-open .vv-demo, .chat-open .vv-demo { display: none; }
@media (max-width: 760px) {
  html .vv-demo { bottom: calc(92px + env(safe-area-inset-bottom)); } /* au-dessus de la barre d'action */
  .cx-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 82svh; border-radius: 22px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9100; }
}

.cx-plus i { position: relative; background: #fff; box-shadow: inset 0 0 0 1.5px #b9b9c0; border-radius: 50%; }
.cx-plus i::before, .cx-plus i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #3b3b40; }
.cx-plus i::after { transform: rotate(90deg); }
.cx-plus.is-set i { background: linear-gradient(135deg, var(--amber) 50%, var(--jungle) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cx-plus.is-set i::before, .cx-plus.is-set i::after { background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.cx-custom { margin-top: 4px; }
.cx-custom[hidden] { display: none; }