/* interface/pastilles.css — palettes de couleurs
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* ==================== PALETTES DE COULEURS ==================== */
 .swatch-row{ flex-wrap:wrap;display:grid;grid-template-columns:repeat(16,var(--swatch-size));gap:var(--swatch-gap);width:max-content;max-width:100%;padding:calc(1.5px * var(--ui-scale-factor));justify-content:start;align-content:start;overflow:visible;}
 .swatch.none{background:var(--surface-3); border:calc(1px * var(--ui-scale-factor)) dashed var(--text-faint);}
 /* Même coche que dans Paramètres > Apparence pour la couleur sélectionnée d’une carte. */
 #cardColorRow .swatch.selected,#labelColorRow .swatch.selected,#newListColorRow .swatch.selected{
 position:relative;
 }
 #cardColorRow .swatch.selected::after,#labelColorRow .swatch.selected::after,#newListColorRow .swatch.selected::after{
 content:'✓';
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
 font-size:calc(11px * var(--ui-scale-factor));
 font-weight:900;
 text-shadow:0 calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor)) rgba(0,0,0,.9);
 pointer-events:none;
 }
 /* Palette commune : 127 couleurs + « Aucune », soit 128 cases au total.
    La largeur est explicite afin qu'aucune case ne sorte du cadre. */
 #cardColorRow,#labelColorRow,#newListColorRow{
  display:grid;
  grid-template-columns:repeat(16,calc(15px * var(--ui-scale-factor)));
  gap:calc(3px * var(--ui-scale-factor));
  width:calc(288px * var(--ui-scale-factor));
  max-width:100%;
  padding:calc(1.5px * var(--ui-scale-factor));
  overflow:visible;
  align-content:start;
  justify-content:start;
 }
 #cardColorRow .swatch,#labelColorRow .swatch,#newListColorRow .swatch{width:calc(15px * var(--ui-scale-factor));height:calc(15px * var(--ui-scale-factor));border-radius:calc(3.75px * var(--ui-scale-factor));}
 /* #cardColorRow : spécificité renforcée, pour l’emporter sur les styles génériques sans dépendre de l’ordre. */
 #cardColorRow .swatch.swatch.selected, #labelColorRow .swatch.swatch.selected, #newListColorRow .swatch.swatch.selected{border-color:#fff;box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) rgba(255,255,255,.18);}
 /* Coche blanche autour des couleurs sélectionnées dans les menus de liste. */
 #listColorRow .swatch.selected,
 #listTitleTextColorRow .swatch.selected{
  position:relative;
  border-color:#fff;
  box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) rgba(255,255,255,.18);
 }
 #listColorRow .swatch.selected::after,
 #listTitleTextColorRow .swatch.selected::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:calc(11px * var(--ui-scale-factor));
  font-weight:900;
  text-shadow:0 calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor)) rgba(0,0,0,.9);
 }
 .swatch.selected::after,.theme-swatch.selected::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:calc(11px * var(--ui-scale-factor));
  font-weight:900;
  text-shadow:0 calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor)) rgba(0,0,0,.9);
  pointer-events:none;
 }
 /* Interaction commune à toutes les palettes : fond, thème, flèches,
  listes, titres, cartes (ajout rapide et agenda) et étiquettes.
  Le transform agrandit la pastille sans déplacer ses voisines. */
 .swatch,.theme-swatch,.background-palette-swatch{
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease;
  box-sizing:border-box;
  aspect-ratio:auto;
  position:relative;
  flex:none;
  width:var(--swatch-size);
  height:var(--swatch-size);
  padding:0;
  border-radius:var(--swatch-radius);
  border:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.18);
 }
 .swatch:hover,.theme-swatch:hover,.background-palette-swatch:hover,.swatch:focus-visible,.theme-swatch:focus-visible,.background-palette-swatch:focus-visible{
  transform:scale(1.10);
  border-color:rgba(255,255,255,.75);
 }
/* ==== Palettes — suite (rapatriée de interface/surcharges.css à l’étape 8 : sans effet sur la cascade) ==== */
@media (max-width:430px){
 .swatch-row{grid-template-columns:repeat(12,var(--swatch-size));}
}
/* Paramètres > Fond : 128 couleurs en bandeau ; sur écran étroit, deux fois plus de lignes. */
@media (max-width:1060px){
 #settingsMenu .background-palette-swatches{grid-template-columns:repeat(16,calc(15px * var(--ui-scale-factor)));grid-template-rows:repeat(8,calc(15px * var(--ui-scale-factor)));}
}