/* ============================================================
   TOUITIGROUP — simulator.css
   Simulateur de couleurs de façade (modèle villa) : /fr/couleurs/simulateur/, /ar/couleurs/simulateur/
   Dépend de tokens.css + base.css + service.css. Couleurs via tokens ; RTL par propriétés logiques.
   Mobile : aperçu puis réglages empilés · ≥ 1024 px : aperçu et réglages côte à côte.
   ============================================================ */

.tg-sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tg-space-xl);
  align-items: start;
}

/* ----- Aperçu ----- */
.tg-sim__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--tg-color-card-bg);
  border: 1px solid var(--tg-color-card-border);
  border-radius: var(--tg-radius-sm);
}
.tg-sim__img,
.tg-sim__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.tg-sim__canvas { visibility: hidden; }
.tg-sim.is-ready .tg-sim__canvas { visibility: visible; }
.tg-sim.is-ready .tg-sim__img { visibility: hidden; }
.tg-sim__loading {
  position: absolute;
  inset-block-end: var(--tg-space-sm);
  inset-inline-start: var(--tg-space-sm);
  padding: var(--tg-space-xs) var(--tg-space-sm);
  font-size: var(--tg-text-sm);
  color: var(--tg-color-white);
  background: rgba(10, 10, 10, 0.72);
  border-radius: var(--tg-radius-sm);
}
.tg-sim__status {
  margin-top: var(--tg-space-sm);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-ink);
}
.tg-sim__caption {
  margin-top: var(--tg-space-xs);
  font-size: var(--tg-text-xs);
  line-height: 1.6;
  color: var(--tg-color-ink-muted);
}
:lang(ar) .tg-sim__caption { font-size: var(--tg-text-sm); }
.tg-sim__error {
  margin-top: var(--tg-space-md);
  padding: var(--tg-space-md);
  font-size: var(--tg-text-sm);
  color: var(--tg-color-ink);
  background: var(--tg-color-white);
  border: 1px solid var(--tg-color-gold-dark);
  border-radius: var(--tg-radius-sm);
}
.tg-sim__error[hidden],
.tg-sim__loading[hidden] { display: none; }
.tg-sim__error a,
.tg-sim__noscript a { color: var(--tg-color-gold-text); }
.tg-sim__noscript { margin-top: var(--tg-space-md); font-size: var(--tg-text-sm); color: var(--tg-color-ink); }

/* ----- Réglages (inutiles sans JavaScript : masqués) ----- */
html:not(.js) .tg-sim__panel { display: none; }
.tg-sim__panel { display: grid; gap: var(--tg-space-lg); }
.tg-sim__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.tg-sim__legend {
  margin-bottom: var(--tg-space-sm);
  padding: 0;
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-color-gold-text);
}
:lang(ar) .tg-sim__legend { letter-spacing: 0; text-transform: none; font-size: var(--tg-text-base); }

/* Zones : deux options, chacune avec la teinte choisie */
.tg-sim__zones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tg-space-sm); }
.tg-sim__zone { position: relative; display: block; cursor: pointer; }
.tg-sim__zone input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tg-sim__zone-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tg-space-xs) var(--tg-space-sm);
  align-items: center;
  height: 100%;
  min-height: var(--tg-control-h);
  padding: var(--tg-space-sm);
  background: var(--tg-color-white);
  border: 1px solid var(--tg-color-card-border);
  border-radius: var(--tg-radius-sm);
  transition: border-color var(--tg-duration) var(--tg-ease), box-shadow var(--tg-duration) var(--tg-ease);
}
.tg-sim__zone input:checked + .tg-sim__zone-box { border-color: var(--tg-color-gold-dark); box-shadow: inset 0 0 0 1px var(--tg-color-gold-dark); }
.tg-sim__zone input:focus-visible + .tg-sim__zone-box { outline: var(--tg-focus-ring); outline-offset: 2px; }
.tg-sim__zone-chip {
  grid-row: span 2;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--swatch);
  border: 1px solid rgba(32, 29, 24, 0.15);
  border-radius: var(--tg-radius-sm);
}
.tg-sim__zone-title { font-weight: var(--tg-weight-semibold); color: var(--tg-color-ink); }
.tg-sim__zone-name { font-size: var(--tg-text-xs); color: var(--tg-color-ink-muted); }
:lang(ar) .tg-sim__zone-name { font-size: var(--tg-text-sm); }
.tg-sim__zone-hint { margin-top: var(--tg-space-xs); font-size: var(--tg-text-xs); color: var(--tg-color-ink-muted); }
:lang(ar) .tg-sim__zone-hint { font-size: var(--tg-text-sm); }

/* Palette : 24 teintes en boutons radio, par famille */
.tg-sim__family + .tg-sim__family { margin-top: var(--tg-space-sm); }
.tg-sim__family-name { margin-bottom: var(--tg-space-xs); font-size: var(--tg-text-xs); color: var(--tg-color-ink-muted); }
:lang(ar) .tg-sim__family-name { font-size: var(--tg-text-sm); }
.tg-sim__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr)); /* référence « TG-0XX » centrée sous sa pastille, sans collision */
  gap: var(--tg-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-sim__swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; } /* 6 px : l’anneau de sélection ne touche pas la référence */
.tg-sim__swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tg-sim__swatch-chip {
  width: 100%;
  min-width: 2.75rem;
  aspect-ratio: 1;
  background: var(--swatch);
  border: 1px solid rgba(32, 29, 24, 0.15);
  border-radius: var(--tg-radius-sm);
  transition: box-shadow var(--tg-duration) var(--tg-ease);
}
.tg-sim__swatch input:checked + .tg-sim__swatch-chip { box-shadow: 0 0 0 2px var(--tg-color-white), 0 0 0 4px var(--tg-color-gold-dark); }
.tg-sim__swatch input:focus-visible + .tg-sim__swatch-chip { outline: var(--tg-focus-ring); outline-offset: 4px; }
.tg-sim__swatch-ref { font-size: 0.6875rem; line-height: 1.3; text-align: center; white-space: nowrap; color: var(--tg-color-ink-muted); font-variant-numeric: tabular-nums; }

/* Barre de zone compacte (mobile, dans l'aperçu collé) */
.tg-sim__zonebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tg-space-xs); margin-top: var(--tg-space-xs); }
.tg-sim__zbtn { position: relative; display: block; cursor: pointer; }
.tg-sim__zbtn input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tg-sim__zbtn-box {
  display: flex;
  align-items: center;
  gap: var(--tg-space-xs);
  min-height: 2.75rem;
  padding-inline: var(--tg-space-sm);
  font-size: var(--tg-text-sm);
  color: var(--tg-color-ink);
  background: var(--tg-color-white);
  border: 1px solid var(--tg-color-card-border);
  border-radius: var(--tg-radius-sm);
}
.tg-sim__zbtn input:checked + .tg-sim__zbtn-box {
  color: var(--tg-color-white);
  background: var(--tg-color-ink);
  border-color: var(--tg-color-ink);
}
.tg-sim__zbtn input:focus-visible + .tg-sim__zbtn-box { outline: var(--tg-focus-ring); outline-offset: 2px; }
.tg-sim__zbtn-chip { flex: none; width: 1.25rem; height: 1.25rem; background: var(--swatch); border: 1px solid rgba(32, 29, 24, 0.2); border-radius: 3px; }
.tg-sim__zbtn-title { font-weight: var(--tg-weight-semibold); }
.tg-sim__zbtn-ref { margin-inline-start: auto; font-size: var(--tg-text-xs); opacity: 0.8; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Le bouton de demande intégré suffit : bouton WhatsApp flottant masqué sur les pages du simulateur
   (simulator.css n'est chargé que par ces pages) */
.tg-wa-float { display: none; }

/* Actions */
.tg-sim__actions { display: flex; flex-wrap: wrap; gap: var(--tg-space-sm); }
.tg-sim__actions .tg-btn { flex: 1 1 12rem; white-space: normal; }
.tg-sim__back { font-size: var(--tg-text-sm); }
.tg-sim__back a { color: var(--tg-color-gold-text); }

.tg-sim__ref { white-space: nowrap; }

/* Mobile / tablette : l'aperçu reste visible en haut de l'écran pendant le choix des teintes.
   .tg-sim__left s'efface (display: contents) pour que l'aperçu colle sur toute la hauteur du simulateur ;
   la mention de simulation (.tg-sim__notes) suit, non collée. */
@media (max-width: 1023.98px) {
  .tg-sim { gap: var(--tg-space-lg); }
  .tg-sim__left { display: contents; }
  .tg-sim__view {
    position: sticky;
    top: var(--tg-nav-h, 4.5rem);
    z-index: 2;
    padding-block: var(--tg-space-xs);
    background: var(--tg-color-ivory);
  }
  /* hauteur de l'aperçu limitée (≈ 32 % de l'écran) pour laisser la place à la palette */
  .tg-sim__frame { width: min(100%, 48vh); width: min(100%, 48svh); margin-inline: auto; }
  /* la barre compacte affiche déjà les deux teintes : ligne d'état réservée aux lecteurs d'écran */
  .tg-sim__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tg-sim__group--zones { display: none; }
}
@media (min-width: 1024px) {
  .tg-sim__zonebar { display: none; }
  .tg-sim { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .tg-sim__left { position: sticky; top: calc(var(--tg-nav-h, 5rem) + var(--tg-space-md)); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-sim__zone-box, .tg-sim__swatch-chip { transition: none; }
}