/* Générateur « Liquid Glass » — complément au CSS partagé des outils (gen-svg3d.css) */
.lg-field { aspect-ratio: 4 / 3; min-height: 260px; max-width: 720px; position: relative; cursor: crosshair; touch-action: none; background: #0c0a1f }
.lg-field canvas { position: absolute; inset: 0 }
.lg-text { font: inherit; padding: .5rem .65rem }
.lg-swatch { display: inline-flex; align-items: center; gap: .45rem }
.lg-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); flex: none }
.s3-chip.lg-on { border-color: #7c5cff; color: #fff; background: #1c1930 }
.lg-hint-after { margin: .45rem 0 0 }
.lg-under { margin-top: .5rem }
/* une ligne de contrôle masquée doit le rester, même en flex */
.s3-inline[hidden], .s3-chips[hidden] { display: none }
/* la galerie des looks, sous l'aperçu */
.lg-looks-wrap { margin-top: 1rem; max-width: 720px; margin-left: auto; margin-right: auto }
.lg-looks-title { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #8b90a0; margin: 0 0 .55rem; font-weight: 600 }
.lg-looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem }
.lg-look { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 1px solid rgba(128,128,160,.28); border-radius: 10px; overflow: hidden; background: #0c0a1f; cursor: pointer; transition: border-color .15s }
.lg-look:hover, .lg-look:focus-visible { border-color: #7c5cff; outline: none }
.lg-look.lg-on { border-color: #7c5cff; box-shadow: 0 0 0 2px rgba(124,92,255,.45) }
.lg-look-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.lg-look-img:not([src]) { visibility: hidden }
.lg-look-name { position: absolute; left: .5rem; bottom: .35rem; font-size: .72rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); pointer-events: none }
/* l'instance cachée qui photographie les looks : hors écran, mais dimensionnée */
.lg-thumb-root { position: fixed; left: -10000px; top: 0; width: 320px; height: 240px; pointer-events: none }
@media (max-width: 760px) { .lg-looks { grid-template-columns: repeat(2, 1fr) } }
@media (hover: hover) { .lg-field.lg-nocursor { cursor: none } }