/* =========================================================================
   preview.css — habillage du moteur d'aperçu (partagé site + back-office).
   Les dimensions viennent du modèle : ici, uniquement la mise en place.
   ========================================================================= */

.pv{position:relative;width:160px;max-width:100%;flex:0 0 auto;
  filter:drop-shadow(0 6px 14px rgba(23,21,15,.18));transition:filter .18s ease}
.pv-cur{filter:drop-shadow(0 0 0 3px rgba(79,107,58,.28)) drop-shadow(0 8px 18px rgba(23,21,15,.22))}

/* le support : forme vectorielle et/ou photo du produit */
.pv-shape{position:absolute;inset:0;width:100%;height:100%;display:block}
.pv-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pv-mask{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
/* trou d'attache : cercle parfait, jamais déformé par la proportion du support */
.pv-hole{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:#3a2a19;opacity:.88;box-shadow:inset 0 1px 2px rgba(0,0,0,.55);pointer-events:none}

/* la zone gravable : tout le contenu du client y est confiné */
.pv-zone{position:absolute;display:flex;align-items:center;justify-content:center;
  overflow:hidden;transform-origin:center center}
/* calque du contenu : pivoté pour les gravures verticales (dimensions échangées par LP.fit) */
.pv-rot{position:absolute;top:50%;left:50%;transform-origin:center center;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pv-fit{width:100%;max-height:100%;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.pv-img{display:block;margin:0 auto;filter:sepia(.5) saturate(.7) brightness(.94) contrast(1.08);
  mix-blend-mode:multiply}
/* l'image occupe une fraction de la zone, indépendante de sa taille de fichier */
.pv-fit-img{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  max-width:100%;max-height:100%}
.pv-fit-img .pv-img{width:100%;height:100%}
.pv-empty{color:#b3a084;font-style:italic;font-size:.8rem;text-align:center;white-space:nowrap}

.pv-motif{font-style:italic;text-align:center}
/* découpe : la matière est retirée — vide sombre et légère épaisseur de chant */
.pv-cut{text-shadow:0 1px 0 rgba(255,255,255,.42),0 -1px 1px rgba(0,0,0,.28)}
.pv-img-cut{filter:brightness(0) saturate(0) opacity(.88)
  drop-shadow(0 1px 0 rgba(255,255,255,.42));mix-blend-mode:normal}
/* le contenu ne rentre pas, même à la taille minimale */
.pv-over{outline:1px dashed #c0392b;outline-offset:1px}

/* rangée de faces + intitulé */
.pv-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.pv-face{display:flex;flex-direction:column;align-items:center;gap:6px}
.pv-label{font-size:.72rem;font-weight:600;color:#8a8474}

/* ---------- repères d'édition (back-office) ---------- */
.pv-frame{position:absolute;border:1.5px dashed #4f6b3a;background:rgba(79,107,58,.07);
  cursor:move;transform-origin:center center;opacity:.55;transition:opacity .15s ease}
.pv-frame-img{border-color:#b8762a;background:rgba(184,118,42,.08)}
.pv-frame-img .pv-handle{border-color:#b8762a}
.pv-frame-img .pv-tip{color:#b8762a}
/* le cadre en cours de réglage passe au premier plan */
.pv-frame-on{opacity:1;z-index:4;border-width:2px}
.pv-frame:hover{opacity:1}
.pv-handle{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;
  border:2px solid #4f6b3a;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pv-handle[data-pv-h="nw"]{left:-7px;top:-7px;cursor:nwse-resize}
.pv-handle[data-pv-h="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.pv-handle[data-pv-h="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}
.pv-handle[data-pv-h="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.pv-tip{position:absolute;left:0;top:-19px;font-size:.62rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#4f6b3a;white-space:nowrap;pointer-events:none}
.pv-blocked{position:absolute;pointer-events:none;border:1px solid rgba(192,57,43,.55);
  background:repeating-linear-gradient(45deg,rgba(192,57,43,.16) 0 5px,transparent 5px 10px)}

@media(max-width:520px){ .pv-row{gap:12px} }