.zmb-pal__barre{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.zmb-pal__commandes{display:flex;align-items:center;gap:var(--space-1)}
.zmb-pal__commandes .zmb-btn{margin-right:var(--space-2)}
.zmb-pal__commandes .zmb-icone-btn{width:44px;height:44px}
.zmb-pal__commandes .zmb-icone-btn:disabled{color:var(--trait-fort);background:none;cursor:not-allowed}
.zmb-pal__astuce{display:none;margin-left:var(--space-2);font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-pal__choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);flex:1 1 280px;max-width:420px}
.zmb-pal .zmb-champ select{padding-block:var(--space-2);font-family:var(--font-sans)}

.zmb-pal__bandes{display:flex;flex-direction:column;border-radius:var(--radius-md);overflow:hidden;box-shadow:inset 0 0 0 1px var(--trait)}
.zmb-pal__bande{--sur:#000;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:80px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);color:var(--sur)}
.zmb-pal__bande{position:relative}
.zmb-pal__bande--ecartee{transition:transform .18s ease}
.zmb-pal__bande--glissee{z-index:3;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.zmb-pal__bande--posee{transition:transform .18s ease}
.zmb-pal__texte{display:flex;flex-direction:column;min-width:0}
.zmb-pal__nom{font:500 13px/18px var(--font-sans);opacity:.8}
.zmb-pal__hex{width:9ch;padding:0;background:none;border:0;border-radius:4px;color:inherit;font:400 17px/28px var(--font-mono);text-transform:uppercase}
.zmb-pal__hex[aria-invalid]{text-decoration:underline wavy}
.zmb-pal__actions{display:flex;align-items:center;flex:none}
.zmb-pal__action{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:var(--radius-rond);color:inherit;cursor:pointer}
.zmb-pal__action svg{width:20px;height:20px}
.zmb-pal__action:hover{background:color-mix(in srgb,var(--sur) 14%,transparent)}
.zmb-pal__action[aria-pressed="true"]{background:color-mix(in srgb,var(--sur) 18%,transparent)}
.zmb-pal__action[aria-pressed="true"] svg{stroke-width:2.25}
.zmb-pal__poignee{cursor:grab;touch-action:none}
.zmb-pal__poignee:active{cursor:grabbing}
.zmb-pal__pipette input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.zmb-pal__action:focus-visible,.zmb-pal__pipette:focus-within,.zmb-pal__hex:focus-visible{outline:2px solid var(--sur);outline-offset:-2px}
.zmb-pal__accord{margin-top:var(--space-3);font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-pal__message{margin-top:var(--space-2);color:var(--erreur);font:400 13px/18px var(--font-sans)}

@media (max-width:767px){
  .zmb-pal{display:flex;flex-direction:column}
  .zmb-pal__barre{display:contents}
  .zmb-pal__commandes{order:1;margin-bottom:var(--space-3)}
  .zmb-pal__bandes{order:2}
  .zmb-pal__accord{order:3}
  .zmb-pal__message{order:4}
  .zmb-pal__choix{order:5;flex:none;max-width:none;margin-top:var(--space-4)}
  .zmb-pal__bande{min-height:56px;padding-block:var(--space-1)}
}
@media (hover:hover) and (min-width:768px){.zmb-pal__astuce{display:inline}}
@media (min-width:768px){
  .zmb-pal__bandes{flex-direction:row;height:min(56vh,440px);min-height:340px}
  .zmb-pal__bande{flex:1 1 0;min-width:0;flex-direction:column;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-1) var(--space-6)}
  .zmb-pal__actions{flex-direction:column}
  .zmb-pal__texte{align-items:center;text-align:center}
  .zmb-pal__hex{width:100%;max-width:9ch;font-size:15px;text-align:center}
}