/*!
 * mac-color-picker.css — style de base partagé du "nuancier de teintes"
 * (mission "Clôture UX — mutualisation nuancier", 2026-09-14).
 *
 * Définition CANONIQUE de la tuile couleur (grande surface rectangulaire +
 * bandeau nom en dessous, référence visuelle = PDP historique `.mac-tm__*`)
 * — utilisée comme SEULE source pour le Calculateur (macprojectcalc) et la
 * page Nuanciers publique (color_explorer), et de façon ADDITIVE par la PDP
 * (maccoloriste), qui conserve ses classes `.mac-tm__*` pour ses propres
 * raffinements (hover-zoom 1.18, checkmark de sélection, etc. — voir
 * mac_coloriste_selector.tpl) sans jamais les dupliquer ici.
 *
 * Variables personnalisables par contexte (surchargées localement si besoin,
 * jamais redéfinies dans ce fichier lui-même pour un seul contexte) :
 *   --mcp-tile-min   largeur mini d'une tuile avant retour à la ligne
 *   --mcp-gap        espacement de la grille
 *   --mcp-radius     arrondi de la tuile
 */
:root {
  --mcp-tile-min: 110px;
  --mcp-gap: 12px;
  --mcp-radius: 6px;
}

.mac-color-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--mcp-tile-min), 1fr));
  gap: var(--mcp-gap);
}

.mac-color-picker__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  border: 1px solid rgba(32, 33, 30, .12);
  border-radius: var(--mcp-radius);
  background: #fff;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .12s ease;
}
.mac-color-picker__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(32, 33, 30, .12);
}
.mac-color-picker__item--hidden { display: none !important; }
.mac-color-picker__item--selected {
  border-color: #3A3835;
  box-shadow: 0 0 0 2px #3A3835;
}

.mac-color-picker__swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  cursor: pointer;
}

.mac-color-picker__name {
  padding: 5px 6px 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  color: #3A3835;
  background: #F8F6F3;
  border-top: 1px solid rgba(32, 33, 30, .08);
  word-break: break-word;
}

.mac-color-picker__no-results {
  grid-column: 1 / -1;
  text-align: center;
  color: #9B9589;
  font-size: 13px;
  padding: 32px 16px;
}

/* ── Chips famille ─────────────────────────────────────────────────── */
.mac-color-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.mac-color-picker__chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(32, 33, 30, .16);
  background: #fff;
  font-size: 11.5px;
  color: rgba(32, 33, 30, .7);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.mac-color-picker__chip--active,
.mac-color-picker__chip[aria-pressed="true"],
.mac-color-picker__chip[aria-selected="true"] {
  background: #3A3835;
  border-color: #3A3835;
  color: #fff;
}

@media (max-width: 767px) {
  :root { --mcp-tile-min: 88px; --mcp-gap: 10px; }
}