/* Fiche d'un objet personnalisable : aperçu 3D et choix du client */

.perso-apercu { position: relative; height: min(52vh, 380px); min-height: 280px; margin-bottom: 14px; border-radius: var(--radius); overflow: hidden; background: radial-gradient(ellipse at 50% 35%, var(--stage-light) 0%, var(--stage) 80%); border: 1px solid var(--line); }
.perso-apercu canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.perso-apercu .busy { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; background: color-mix(in srgb, var(--panel) 60%, transparent); font-weight: 600; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility 0s .15s; }
.perso-apercu .busy.on { opacity: 1; visibility: visible; transition: opacity .2s .3s, visibility 0s .3s; }
.perso-apercu .busy-ring { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Caractéristiques calculées en direct (dimensions et poids théorique) */
.perso-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -4px 0 14px; }
.perso-spec { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.perso-spec-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.perso-spec-value { font-size: 15px; font-weight: 700; color: var(--ink); }
@media (max-width: 480px) {
    .perso-specs { grid-template-columns: 1fr; }
}

.perso { display: grid; gap: 14px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.perso-texte { display: grid; gap: 6px; font-weight: 600; }
.perso-texte input { font: inherit; font-size: 18px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.perso-texte small { font-weight: 400; }
.perso fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.perso legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.police-choix input { position: absolute; opacity: 0; }
.police-choix span { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 18px; cursor: pointer; }
.police-choix input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.police-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.perso-note { margin: 0; }

/* Aperçu de la personnalisation dans le panier et la commande */
.panier-photo img.perso-miniature, img.perso-miniature { object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.perso-resume { color: var(--ink); }