/* Palettes repliables et détachables (voir palettes.js) */
.palette > h2{cursor:pointer;user-select:none;-webkit-user-select:none;justify-content:flex-start;align-items:center;gap:3px;padding:4px 0;margin:-4px 0 6px;border-radius:6px;min-width:0}
.palette > h2 > span,.palette > h2 > .pal-titre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette > h2 > .pal-titre{flex:0 0 auto;font:inherit;color:inherit}
.palette > h2 > span:not(.pal-titre){flex:0 1 auto}
.palette > h2 > button{flex:none}
.palette > h2:hover{color:var(--accent)}
.palette > h2 .chev{margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;margin-right:2px;margin-top:-4px}
.palette.replie > h2 .chev{transform:rotate(-45deg);margin-top:2px}
.palette.replie > :not(h2){display:none!important}
.palette.replie{padding-bottom:8px;margin-bottom:8px}
.palette.replie > h2{margin-bottom:0}
.pal-detacher{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;line-height:1;padding:2px 1px;border-radius:5px;cursor:pointer;display:none;order:9;margin:0;flex:none}
.pal-detacher:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media (min-width:901px){
  .pal-detacher{display:inline-block}
  .palette > h2{touch-action:none}
  .palette.flottante{position:fixed;z-index:60;width:320px;max-height:72vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:10px 14px 14px;margin:0}
  .palette.flottante > h2{cursor:grab;position:sticky;top:0;background:var(--panel);z-index:1;margin-top:-10px;padding-top:10px}
  .palette.flottante > h2:active{cursor:grabbing}
}
@media (prefers-reduced-motion:reduce){.palette > h2 .chev{transition:none}}
/* Téléphone : chaque palette est une carte bien séparée, avec un bandeau de titre teinté ;
   les panneaux passent sur la couleur de fond pour que les cartes ressortent. */
@media (max-width:900px){
  .side,.panel{background:var(--bg)!important}
  .palette{background:var(--panel);border:1px solid var(--line)!important;border-radius:12px;padding:0 12px 12px!important;margin:0 0 12px!important;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .palette > h2{margin:0 -12px 10px!important;padding:11px 12px!important;border-radius:11px 11px 0 0;background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-bottom:1px solid var(--line);min-height:44px}
  .palette > h2:hover{color:inherit}
  .palette.replie{padding-bottom:0!important}
  .palette.replie > h2{margin-bottom:0!important;border-radius:11px;border-bottom:0}
  .palette > .pal-aide{margin-top:2px}
  .palette > h2 .chev{width:11px;height:11px;border-color:var(--ink)}
}

/* Bulles d'aide */
.pal-aide-btn{flex:none;order:8;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--field);color:var(--muted);font:700 13px/1 'Atkinson Hyperlegible',sans-serif;padding:0;cursor:pointer;margin-left:2px}
.pal-aide-btn:hover,.pal-aide-btn.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.pal-aide{position:relative;background:color-mix(in srgb,var(--hi) 22%,var(--panel));border:1px solid color-mix(in srgb,var(--hi) 60%,var(--line));border-radius:10px;padding:10px 32px 10px 12px;margin:0 0 12px;font-size:14px;line-height:1.45}
.pal-aide::before{content:"";position:absolute;top:-7px;right:34px;width:12px;height:12px;background:inherit;border-left:1px solid color-mix(in srgb,var(--hi) 60%,var(--line));border-top:1px solid color-mix(in srgb,var(--hi) 60%,var(--line));transform:rotate(45deg)}
.pal-aide p{margin:0}
.pal-aide-fermer{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:5px}
.pal-aide-fermer:hover{color:var(--ink)}

/* boutons logés dans un titre de palette : plus compacts pour tenir sur une ligne */
.palette > h2 .filtrefav{padding:0 5px;font-size:11px;min-height:22px}
.palette > h2 .btn{padding:2px 7px!important;min-height:26px!important}