/* ptq-svg-zones — Partiqle Studio
   Zones interactives (plans, lots, schémas) liées dans les deux sens
   à une légende [data-zone-trigger] et à des fiches [data-zone-panel]. */

[data-ptq-zones] {
  --ptq-zones-speed: 0.3s;
  --ptq-zones-dim: 0.4;            /* opacité des zones non actives quand une zone est active */
  --ptq-zones-trigger-dim: 0.45;   /* idem pour la légende */
  --ptq-zones-lift: 10px;          /* soulèvement des [data-zone-lift] */
  --ptq-zones-idle: 0;             /* remplissage au repos des formes simples */
  --ptq-zones-active: 0.55;        /* remplissage actif des formes simples */
  --ptq-zones-tint: 22%;           /* intensité de la teinte de statut au repos (mode tint) */
}

/* Couleur de zone : par défaut l'accent du thème. Spécificité nulle pour que
   [data-zone-group="dispo"] { --zone-c: … } écrit par l'auteur l'emporte toujours. */
:where([data-ptq-zones]) :where([data-zone], [data-zone-trigger], [data-zone-panel]) {
  --zone-c: var(--ptq-zones-accent, var(--ds-primary, #ff4e2a));
}

[data-ptq-zones] [data-zone-passive] { pointer-events: none; cursor: default; }
[data-ptq-zones] [data-zone]:not([data-zone-passive]) {
  cursor: pointer;
  outline: none;
  transition: opacity var(--ptq-zones-speed) ease;
}
[data-ptq-zones] [data-zone].is-dimmed { opacity: var(--ptq-zones-dim); }

/* Formes SVG simples portant directement data-zone */
[data-ptq-zones] :is(path, polygon, polyline, rect, circle, ellipse)[data-zone] {
  fill: var(--zone-c);
  fill-opacity: var(--ptq-zones-idle);
  transition: fill-opacity var(--ptq-zones-speed) ease, opacity var(--ptq-zones-speed) ease;
}
.ptq-zones--tint :is(path, polygon, polyline, rect, circle, ellipse)[data-zone] { fill-opacity: 0.18; }
[data-ptq-zones] :is(path, polygon, polyline, rect, circle, ellipse)[data-zone].is-active { fill-opacity: var(--ptq-zones-active); }

/* Zones composées (g[data-zone]) : crochets de structure */
[data-ptq-zones] [data-zone-hit] {
  fill: transparent;
  stroke: none;
  pointer-events: all;              /* surface de survol fixe : ne bouge pas quand le lot se soulève */
}
[data-ptq-zones] [data-zone-fill] { transition: fill var(--ptq-zones-speed) ease; }
.ptq-zones--tint [data-zone]:not(.is-active) [data-zone-fill=""] {
  fill: color-mix(in srgb, var(--zone-c) var(--ptq-zones-tint), var(--ptq-zones-paper, #ffffff));
}
[data-ptq-zones] [data-zone].is-active [data-zone-fill=""] { fill: var(--zone-c); }
[data-ptq-zones] [data-zone].is-active [data-zone-fill="shade"] { fill: color-mix(in srgb, var(--zone-c), #000 16%); }
[data-ptq-zones] [data-zone].is-active [data-zone-fill="shade-deep"] { fill: color-mix(in srgb, var(--zone-c), #000 30%); }

[data-ptq-zones] [data-zone-lift] {
  transition: transform calc(var(--ptq-zones-speed) * 1.4) cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-ptq-zones] [data-zone].is-active [data-zone-lift] {
  transform: translateY(calc(var(--ptq-zones-lift) * -1));
}

/* Légende */
[data-ptq-zones] [data-zone-trigger] {
  cursor: pointer;
  transition: opacity var(--ptq-zones-speed) ease;
}
[data-ptq-zones] [data-zone-trigger].is-dimmed { opacity: var(--ptq-zones-trigger-dim); }

/* Fiches : seule la fiche active est affichée (l'auteur garde son display flex/grid) */
[data-ptq-zones] [data-zone-panel]:not(.is-active),
[data-ptq-zones] [data-zone-empty]:not(.is-active) { display: none !important; }
[data-ptq-zones] [data-zone-panel].is-active,
[data-ptq-zones] [data-zone-empty].is-active { animation: ptq-zones-in 0.35s ease-out; }

@keyframes ptq-zones-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Éditeur Elementor : toutes les fiches visibles et éditables */
.ptq-zones--editor [data-zone-panel],
.ptq-zones--editor [data-zone-empty] { display: block !important; outline: 1px dashed currentColor; }

@media (prefers-reduced-motion: reduce) {
  [data-ptq-zones] [data-zone-lift] { transition: none; }
  [data-ptq-zones] [data-zone].is-active [data-zone-lift] { transform: none; }
  [data-ptq-zones] [data-zone-panel].is-active,
  [data-ptq-zones] [data-zone-empty].is-active { animation: none; }
}