/* ArtiZiOM · Divine · Dimension (téléphone) : la photo de la table et les tailles dessinées, emboîtées au même endroit.
   Le réglage de la photo est dans dimension-table.js ; ici, seulement le rapport largeur / hauteur de la photo (1296 / 912). */
@property --tzx { syntax: '<percentage>'; inherits: true; initial-value: 61% }
@property --tzy { syntax: '<percentage>'; inherits: true; initial-value: 70% }
@property --tzrx { syntax: '<percentage>'; inherits: true; initial-value: 30% }
@property --tzry { syntax: '<percentage>'; inherits: true; initial-value: 45% }
.tz-cadre { position: relative; width: 100%; aspect-ratio: 1296 / 912; margin: 0 0 12px; border-radius: 4px; overflow: hidden; background: #6b4423; }
.tz-cadre:not(.tz-pret) { display: none; }
.tz-cadre { transition: opacity .28s ease, height .45s cubic-bezier(.4,0,.2,1); }   /* changement de pose : fondu et hauteur qui glisse */
.tz-cadre.tz-bascule { opacity: 0; }
.tz-cadre img, .tz-cadre svg, .tz-nuit { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tz-cadre img { object-fit: cover; }
.tz-nuit { pointer-events: none; background: radial-gradient(ellipse var(--tzrx) var(--tzry) at var(--tzx) var(--tzy), rgba(14,9,4,0) 0%, rgba(14,9,4,0) 55%, rgba(14,9,4,.34) 100%);
  transition: --tzx .9s cubic-bezier(.6,0,.2,1), --tzy .9s cubic-bezier(.6,0,.2,1), --tzrx .9s cubic-bezier(.6,0,.2,1), --tzry .9s cubic-bezier(.6,0,.2,1); }
.tz-cadre path, .tz-cadre polygon { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tz-contour { stroke: rgba(255,248,232,.72); stroke-width: var(--tzo); stroke-dasharray: var(--tzd); transition: opacity .6s; }
.tz-g.tz-on .tz-contour { opacity: 0; }
.tz-vus path { stroke: #1a1a1a; stroke-width: var(--tzv); opacity: 0; }
.tz-caches path { stroke: rgba(60,45,30,.55); stroke-width: var(--tzc); opacity: 0; }
.tz-g.tz-on.tz-trace .tz-vus path { opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tzTrace .7s cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d); }
.tz-g.tz-on.tz-trace .tz-caches path { animation: tzApparait .8s ease forwards; animation-delay: calc(var(--d) + .35s); }
.tz-g.tz-on.tz-fixe .tz-vus path, .tz-g.tz-on.tz-fixe .tz-caches path { opacity: 1; }
@keyframes tzTrace { to { stroke-dashoffset: 0; } }
@keyframes tzApparait { to { opacity: 1; } }
.tz-cote line { stroke: #1a1a1a; stroke-width: var(--tzl); }
.tz-cote text { font-family: 'Jost', sans-serif; font-weight: 400; font-size: var(--tzf); letter-spacing: 1px; fill: #1a1a1a; text-anchor: middle; }
/* suspendu : un seul groupe de dessins visible (posé ou suspendu), le fil depuis le haut de la photo */
.tz-place.tz-cache { display: none; }
.tz-fil { stroke: #1f1710; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.tz-fil circle { fill: none; }
.tz-cadre.tz-susp .tz-fil { opacity: .92; }