/* interface/palette-couleurs.css — composant « couleur » commun (audit I3), à l'ordinateur
   Replié : « Aucune » et les 16 teintes principales (rang 3 du spectre, data-color « …-3 ») sur une rangée de
   17 pastilles carrées qui occupent la largeur du champ ; la couleur choisie reste visible même hors de ce rang.
   « Plus de nuances » (.ouverte) rend la grille complète de 16 × 8, telle qu'elle était.
   :is(.swatch-row,#cardColorRow) donne la force d'un identifiant : la règle l'emporte sur celles de pastilles.css
   (#cardColorRow, #labelColorRow…) sans dépendre de l'ordre. Au téléphone, rien ici : telephone.css et
   fenetres-telephone.js gardent leur palette courte et leur propre bouton. Chargé avant telephone.css. */
html:not(.mode-telephone) .palette-couleurs:not(.ouverte) > :is(.swatch-row,#cardColorRow){
 grid-template-columns:repeat(17,minmax(0,1fr));width:100%;max-width:calc(360px * var(--ui-scale-factor));gap:calc(3px * var(--ui-scale-factor));box-sizing:border-box;}
html:not(.mode-telephone) .palette-couleurs:not(.ouverte) > :is(.swatch-row,#cardColorRow) .swatch{width:auto;height:auto;aspect-ratio:1;}
html:not(.mode-telephone) .palette-couleurs:not(.ouverte) > .swatch-row .swatch:not(.none):not(.selected):not([data-color$="-3"]):not([data-label-color$="-3"]){display:none;}
.palette-couleurs .plus-nuances{display:inline-flex;align-items:center;margin-top:calc(4px * var(--ui-scale-factor));padding:0;border:0;background:none;
 color:var(--accent);font:inherit;font-size:calc(10px * var(--ui-scale-factor));font-weight:600;cursor:pointer;}
.palette-couleurs .plus-nuances:hover{text-decoration:underline;}
.palette-couleurs .plus-nuances:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
html.mode-telephone .palette-couleurs .plus-nuances{display:none !important;}