/* ============================================================
   TOUITIGROUP — couleurs.css
   Page nuancier (/fr/couleurs/, /ar/couleurs/) : filtres + grille de teintes.
   Dépend de tokens.css + base.css + service.css (à charger avant).
   Les teintes (background) viennent de l'attribut style="--swatch: #…"
   de chaque carte : moyenne mesurée sur les échantillons officiels Weber.
   ============================================================ */

/* ----- Filtres (pills) -----
   Masqués sans JavaScript : toutes les teintes restent alors visibles. */
.tg-color-filters {
  display: none;
  flex-wrap: wrap;
  gap: var(--tg-space-sm);
  margin-bottom: var(--tg-space-xl);
}
.js .tg-color-filters { display: flex; }

.tg-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-space-sm);
  min-height: 2.5rem;
  padding: var(--tg-space-xs) var(--tg-space-md);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-medium);
  color: var(--tg-color-ink);
  background: var(--tg-color-white);
  border: 1px solid var(--tg-color-card-border);
  border-radius: var(--tg-radius-full);
  transition:
    background-color var(--tg-duration) var(--tg-ease),
    border-color var(--tg-duration) var(--tg-ease),
    color var(--tg-duration) var(--tg-ease);
}
.tg-pill:hover { border-color: var(--tg-color-gold-dark); }
.tg-pill[aria-pressed="true"] {
  background: var(--tg-color-ink);
  border-color: var(--tg-color-ink);
  color: var(--tg-color-white);
}
.tg-pill__count {
  font-size: var(--tg-text-xs);
  opacity: 0.65;
}

/* Annonce du nombre de teintes affichées (lecteurs d'écran) */
.tg-color-status { margin-bottom: var(--tg-space-md); font-size: var(--tg-text-sm); color: var(--tg-color-ink-muted); }

/* ----- Grille de teintes ----- */
.tg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tg-space-md);
  list-style: none;
}
.tg-swatch-grid > li[hidden] { display: none; }

/* Carte = lien WhatsApp (fonctionne sans JavaScript) */
.tg-swatch {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--tg-color-ink);
  text-decoration: none;
  background: var(--tg-color-card-bg);
  border: 1px solid var(--tg-color-card-border);
  border-radius: var(--tg-radius-sm);
  transition:
    translate var(--tg-duration) var(--tg-ease),
    box-shadow var(--tg-duration) var(--tg-ease);
}
.tg-swatch:hover {
  translate: 0 calc(-1 * var(--tg-space-xs));
  box-shadow: var(--tg-shadow-card-soft);
}
.tg-swatch__color {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--swatch);
  /* léger relief pour évoquer la texture d'un enduit (sans image) */
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(0, 0, 0, 0.10), transparent 60%);
  box-shadow: inset 0 -1px 0 rgba(32, 29, 24, 0.08);
}
.tg-swatch__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tg-space-md);
}
.tg-swatch__name {
  font-size: var(--tg-text-base);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-ink);
}
.tg-swatch__code {
  font-size: var(--tg-text-xs);
  color: var(--tg-color-ink-muted);
}
.tg-swatch__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-space-xs);
  margin-top: var(--tg-space-sm);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-gold-text);
}
.tg-swatch__cta svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: translate var(--tg-duration) var(--tg-ease);
}
.tg-swatch:hover .tg-swatch__cta svg { translate: 3px 0; }
[dir="rtl"] .tg-swatch:hover .tg-swatch__cta svg { translate: -3px 0; }

:lang(ar) .tg-swatch__cta,
:lang(ar) .tg-swatch__code { font-size: var(--tg-text-sm); }

@media (min-width: 640px) {
  .tg-swatch-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .tg-swatch-grid { grid-template-columns: repeat(4, 1fr); gap: var(--tg-space-lg); }
}