@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

       /* ─────────────────────────────────────────────────────────────────────────────
   UNIVEA POSTER — Customizer Widget CSS
   Design épuré, premium, ultra-réactif et adapté à l'intégration Shopify
   ───────────────────────────────────────────────────────────────────────────── */

       :root {
         --uvp-primary: #E31C25;
         --uvp-primary-hover: #c4151d;
         --uvp-bg: #f8fafc;
         --uvp-card-bg: #ffffff;
         --uvp-text-main: #0f172a;
         --uvp-text-muted: #64748b;
         --uvp-text-light: #94a3b8;
         --uvp-border: #e2e8f0;
         --uvp-border-focus: #0f172a;
         --uvp-radius-sm: 8px;
         --uvp-radius-md: 12px;
         --uvp-radius-lg: 16px;
         --uvp-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
         --uvp-shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
         --uvp-green: #22c55e;
       }

       #customizer-root {
         box-sizing: border-box;
         font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         color: var(--uvp-text-main);
         background: #ffffff;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
       }

       #customizer-root * {
         box-sizing: border-box;
       }

       /* ── Container split-screen ─────────────────────────────────────────────── */
       .uvp-container {
         display: flex;
         flex: 1;
         min-height: 580px;
         max-height: 800px;
         overflow: hidden;
       }

       @media (max-width: 860px) {
         .uvp-container {
           flex-direction: column;
           height: 100dvh;
           max-height: 100dvh;
           overflow: hidden;
         }
       }

       /* ── Preview Canvas Section (Gauche) ─────────────────────────────────────── */
       .uvp-preview-section {
         flex: 1;
         background: #e2e8f0;
         background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
         background-size: 16px 16px;
         padding: 30px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         position: relative;
         user-select: none;
       }

       .uvp-canvas-wrapper {
         position: relative;
         width: 100%;
         max-width: 380px;
         aspect-ratio: 50 / 70;
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
         border-radius: 4px;
         overflow: hidden;
         background: #18181b;
         cursor: grab;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         touch-action: none;
       }

       .uvp-canvas-wrapper.is-dragging {
         cursor: grabbing;
       }

       .uvp-canvas-wrapper:hover {
         box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2);
       }

       .uvp-canvas-wrapper canvas {
         width: 100%;
         height: 100%;
         display: block;
       }

       .uvp-reframe-badge {
         position: absolute;
         top: 12px;
         left: 50%;
         transform: translateX(-50%);
         background: rgba(15, 23, 42, 0.85);
         backdrop-filter: blur(8px);
         color: #fff;
         font-size: 11px;
         font-weight: 500;
         padding: 5px 12px;
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.15);
         pointer-events: none;
         display: flex;
         align-items: center;
         gap: 6px;
         opacity: 0.85;
         transition: opacity 0.2s;
       }

       .uvp-preview-info {
         margin-top: 14px;
         font-size: 12px;
         color: #94a3b8;
         display: flex;
         align-items: center;
         gap: 8px;
       }

       .uvp-preview-info span {
         display: inline-block;
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: var(--uvp-green);
       }

       /* ── Barre de sélection des modes d'aperçu (2D, 3D, Mockups Murs) ───────── */
       .uvp-view-selector {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 6px;
         margin-top: 16px;
         background: rgba(15, 23, 42, 0.85);
         backdrop-filter: blur(12px);
         padding: 5px 6px;
         border-radius: 30px;
         border: 1px solid rgba(255, 255, 255, 0.12);
         box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
         max-width: 100%;
         overflow-x: auto;
         scrollbar-width: none;
         z-index: 5;
       }

       .uvp-view-selector::-webkit-scrollbar {
         display: none;
       }

       @media (max-width: 860px) {
         .uvp-view-selector {
           justify-content: flex-start;
           padding: 8px;
           gap: 8px;
           width: 90%;
           scroll-snap-type: x mandatory;
           margin-bottom: 15px;
           border-radius: 40px;
         }
         .uvp-view-btn {
           font-size: 13px;
           padding: 10px 16px;
           scroll-snap-align: center;
           flex-shrink: 0;
         }
       }

       .uvp-view-btn {
         display: flex;
         align-items: center;
         gap: 5px;
         background: transparent;
         border: none;
         color: #94a3b8;
         font-family: inherit;
         font-size: 11px;
         font-weight: 600;
         padding: 6px 12px;
         border-radius: 20px;
         cursor: pointer;
         transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
         white-space: nowrap;
       }

       .uvp-view-btn:hover {
         color: #ffffff;
         background: rgba(255, 255, 255, 0.08);
       }

       .uvp-view-btn.active {
         color: #ffffff;
         background: #E31C25;
         box-shadow: 0 4px 14px rgba(227, 28, 37, 0.4);
       }

       .uvp-view-icon {
         font-size: 13px;
         line-height: 1;
       }

       /* ── Vue 3D Tilt ────────────────────────────────────────────────────────── */
       .uvp-canvas-wrapper.is-3d-active {
         cursor: grab;
         transform-style: preserve-3d;
         transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
       }

       .uvp-3d-glare {
         position: absolute;
         inset: 0;
         pointer-events: none;
         opacity: 0;
         transition: opacity 0.15s ease-out;
         border-radius: 4px;
         z-index: 2;
       }

       .uvp-3d-hint {
         position: absolute;
         bottom: 12px;
         left: 50%;
         transform: translateX(-50%);
         background: rgba(15, 23, 42, 0.85);
         backdrop-filter: blur(8px);
         color: #fff;
         font-size: 11px;
         font-weight: 500;
         padding: 5px 12px;
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.15);
         pointer-events: none;
         display: none;
         align-items: center;
         gap: 6px;
         opacity: 0.9;
         z-index: 3;
       }

       /* ── Scène Murale Mockup In-Situ ────────────────────────────────────────── */
       .uvp-room-stage {
         position: relative;
         width: 100%;
         max-width: 480px;
         aspect-ratio: 4 / 3;
         border-radius: 12px;
         overflow: hidden;
         background: #e2e8f0;
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
         animation: uvpFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
       }

       @keyframes uvpFadeIn {
         from {
           opacity: 0;
           transform: scale(0.98);
         }

         to {
           opacity: 1;
           transform: scale(1);
         }
       }

       .uvp-room-bg {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
       }

       .uvp-room-poster-frame {
         position: absolute;
         border-radius: 2px;
         overflow: hidden;
         line-height: 0;
         box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.25);
         transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
         transform-origin: center center;
       }

       .uvp-room-poster-img {
         width: 100%;
         height: auto;
         display: block;
       }

       .uvp-room-glass-glare {
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0) 65%);
         pointer-events: none;
       }

       /* ── Finitions des Cadres Physiques ─────────────────────────────────────── */
       .frame-none {
         border: 1px solid rgba(0, 0, 0, 0.08);
         box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
       }

       .frame-oak {
         border: 6px solid #b88f5e;
         border-image: linear-gradient(135deg, #d4ad7f, #9e7445, #c89e6c) 1;
         box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
       }

       .frame-black-alu {
         border: 5px solid #141414;
         box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
       }

       .frame-black-wood {
         border: 4px solid #1c1917;
         box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.52), 0 4px 12px rgba(0, 0, 0, 0.28);
       }

       .frame-white {
         border: 4px solid #f8fafc;
         box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.18);
       }

       /* ── Right Panel (Contrôles & Étapes) ────────────────────────────────────── */
       .uvp-panel-section {
         flex: 1.1;
         display: flex;
         flex-direction: column;
         background: #ffffff;
         border-left: 1px solid var(--uvp-border);
         overflow: hidden;
       }

       @media (max-width: 860px) {
         .uvp-preview-section {
           padding-bottom: 90px;
         }

         .uvp-panel-section {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           height: 75vh;
           border-radius: 24px 24px 0 0;
           box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
           transform: translateY(calc(100% - 90px));
           transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
           z-index: 999;
           border-top: none;
           border-left: none;
         }
         
         .uvp-panel-section.is-open {
           transform: translateY(0);
         }
       }

       .uvp-mobile-drawer-header {
         display: none;
       }

       @media (max-width: 860px) {
         .uvp-mobile-drawer-header {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           height: 44px;
           cursor: pointer;
           background: #ffffff;
           border-radius: 24px 24px 0 0;
           position: relative;
           border-bottom: 1px solid #f1f5f9;
           flex-shrink: 0;
         }
         
         .uvp-drawer-pill {
           width: 36px;
           height: 4px;
           background: #cbd5e1;
           border-radius: 4px;
           margin-bottom: 6px;
           margin-top: 4px;
         }
         
         .uvp-mobile-drawer-header span {
           font-size: 11px !important;
           color: #64748b !important;
           text-transform: uppercase;
           letter-spacing: 0.5px;
         }

         .uvp-panel-footer {
           padding: 12px 16px;
           gap: 8px;
         }

         .uvp-footer-actions {
           flex-direction: column;
           gap: 6px;
           align-items: flex-end;
         }

         .uvp-price-amount {
           font-size: 17px;
           white-space: nowrap;
         }

         .uvp-btn {
           padding: 8px 12px;
           font-size: 13px;
           white-space: nowrap;
           width: 100%;
           min-width: 140px;
         }

         .uvp-btn svg {
           display: none;
         }
       }

       .uvp-panel-content {
         flex: 1;
         padding: 28px 32px;
         overflow-y: auto;
       }

       /* ── Panel Footer (Navigation entre étapes) ──────────────────────────────── */
       .uvp-panel-footer {
         padding: 18px 32px;
         border-top: 1px solid var(--uvp-border);
         background: #ffffff;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 16px;
       }

       .uvp-footer-actions {
         display: flex;
         gap: 10px;
       }

       .uvp-price-tag {
         display: flex;
         flex-direction: column;
       }

       .uvp-price-label {
         font-size: 11px;
         color: var(--uvp-text-muted);
         text-transform: uppercase;
         font-weight: 600;
         letter-spacing: 0.5px;
       }

       .uvp-price-amount {
         font-size: 22px;
         font-weight: 800;
         color: var(--uvp-text-main);
         letter-spacing: -0.5px;
       }

       .uvp-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         padding: 12px 24px;
         border-radius: var(--uvp-radius-md);
         font-size: 14px;
         font-weight: 600;
         border: none;
         cursor: pointer;
         transition: all 0.15s ease;
         text-decoration: none;
       }

       .uvp-btn-primary {
         background: var(--uvp-text-main) !important;
         color: #ffffff !important;
       }

       .uvp-btn-primary:hover {
         background: #27272a !important;
         transform: translateY(-1px);
       }

       .uvp-btn-accent {
         background: var(--uvp-primary);
         color: #ffffff;
       }

       .uvp-btn-accent:hover {
         background: var(--uvp-primary-hover);
         transform: translateY(-1px);
         box-shadow: 0 4px 14px rgba(227, 28, 37, 0.3);
       }

       .uvp-btn-outline {
         background: transparent;
         color: var(--uvp-text-main);
         border: 1px solid var(--uvp-border);
       }

       .uvp-btn-outline:hover {
         background: var(--uvp-bg);
         border-color: #cbd5e1;
       }

       /* ── Formulaire & Champs ─────────────────────────────────────────────────── */
       .uvp-section-title {
         font-size: 18px;
         font-weight: 700;
         color: var(--uvp-text-main);
         margin: 0 0 6px 0;
         letter-spacing: -0.3px;
       }

       .uvp-section-desc {
         font-size: 13px;
         color: var(--uvp-text-muted);
         margin: 0 0 20px 0;
         line-height: 1.5;
       }

       .uvp-form-group {
         margin-bottom: 18px;
       }

       .uvp-label {
         display: flex;
         align-items: center;
         justify-content: space-between;
         font-size: 13px;
         font-weight: 600;
         color: var(--uvp-text-main);
         margin-bottom: 7px;
       }

       .uvp-label-badge {
         font-size: 11px;
         font-weight: 500;
         color: var(--uvp-text-light);
       }

       .uvp-input,
       .uvp-textarea {
         width: 100%;
         padding: 10px 14px;
         border-radius: var(--uvp-radius-sm);
         border: 1.5px solid var(--uvp-border);
         background: #ffffff;
         font-size: 14px;
         color: var(--uvp-text-main);
         font-family: inherit;
         transition: border-color 0.15s, box-shadow 0.15s;
       }

       .uvp-input:focus,
       .uvp-textarea:focus {
         outline: none;
         border-color: var(--uvp-border-focus);
         box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
       }

       .uvp-textarea {
         resize: vertical;
         min-height: 70px;
         line-height: 1.4;
       }

       .uvp-row {
         display: flex;
         gap: 12px;
       }

       .uvp-row>.uvp-form-group {
         flex: 1;
       }

       /* ── File Uploader ───────────────────────────────────────────────────────── */
       .uvp-uploader {
         border: 2px dashed var(--uvp-border);
         border-radius: var(--uvp-radius-md);
         padding: 22px 18px;
         text-align: center;
         background: #fafafa;
         cursor: pointer;
         transition: all 0.2s ease;
         position: relative;
       }

       .uvp-uploader:hover,
       .uvp-uploader.dragover {
         border-color: var(--uvp-primary);
         background: #fff5f5;
       }

       .uvp-uploader-icon {
         width: 38px;
         height: 38px;
         border-radius: 50%;
         background: #ffffff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
         margin-bottom: 10px;
         color: var(--uvp-primary);
       }

       .uvp-uploader-text {
         font-size: 13px;
         font-weight: 600;
         color: var(--uvp-text-main);
       }

       .uvp-uploader-hint {
         font-size: 11px;
         color: var(--uvp-text-light);
         margin-top: 4px;
       }

       .uvp-uploader-loaded {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 10px 14px;
         background: #ffffff;
         border: 1px solid var(--uvp-border);
         border-radius: var(--uvp-radius-sm);
       }

       .uvp-file-info {
         display: flex;
         align-items: center;
         gap: 10px;
       }

       .uvp-file-thumb {
         width: 36px;
         height: 36px;
         border-radius: 4px;
         object-fit: cover;
       }

       .uvp-file-name {
         font-size: 13px;
         font-weight: 600;
         color: var(--uvp-text-main);
         max-width: 170px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }

       /* ── Range Slider ────────────────────────────────────────────────────────── */
       .uvp-slider-container {
         display: flex;
         align-items: center;
         gap: 12px;
       }

       .uvp-slider {
         flex: 1;
         -webkit-appearance: none;
         height: 6px;
         border-radius: 3px;
         background: #e2e8f0;
         outline: none;
       }

       .uvp-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         width: 18px;
         height: 18px;
         border-radius: 50%;
         background: var(--uvp-text-main);
         cursor: pointer;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
         transition: transform 0.1s;
       }

       .uvp-slider::-webkit-slider-thumb:hover {
         transform: scale(1.15);
       }

       .uvp-slider-val {
         font-size: 13px;
         font-weight: 700;
         min-width: 36px;
         text-align: right;
         color: var(--uvp-text-main);
       }

       /* ── Format & Option Cards (Step 2) ──────────────────────────────────────── */
       .uvp-cards-grid {
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin-bottom: 24px;
       }

       .uvp-card-option {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 14px 18px;
         border: 1.5px solid var(--uvp-border);
         border-radius: var(--uvp-radius-md);
         cursor: pointer;
         transition: all 0.15s ease;
         position: relative;
       }

       .uvp-card-option:hover {
         border-color: #cbd5e1;
         background: var(--uvp-bg);
       }

       .uvp-card-option.is-selected {
         border-color: var(--uvp-text-main) !important;
         background: #fdfdfd !important;
         box-shadow: 0 0 0 1px var(--uvp-text-main) !important;
       }

       .uvp-card-left {
         display: flex;
         align-items: center;
         gap: 14px;
       }

       .uvp-radio-circle {
         width: 18px;
         height: 18px;
         border-radius: 50%;
         border: 2px solid #cbd5e1;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.15s;
       }

       .uvp-card-option.is-selected .uvp-radio-circle {
         border-color: var(--uvp-text-main) !important;
       }

       .uvp-radio-circle::after {
         content: '';
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background: var(--uvp-text-main);
         opacity: 0;
         transform: scale(0.5);
         transition: all 0.15s;
       }

       .uvp-card-option.is-selected .uvp-radio-circle::after {
         opacity: 1;
         transform: scale(1);
       }

       .uvp-card-meta {
         display: flex;
         flex-direction: column;
       }

       .uvp-card-title {
         font-size: 14px;
         font-weight: 700;
         color: var(--uvp-text-main);
         display: flex;
         align-items: center;
         gap: 8px;
       }

       .uvp-card-popular {
         font-size: 10px;
         font-weight: 700;
         text-transform: uppercase;
         background: #fef08a;
         color: #854d0e;
         padding: 2px 7px;
         border-radius: 10px;
       }

       .uvp-card-desc {
         font-size: 12px;
         color: var(--uvp-text-muted);
         margin-top: 2px;
       }

       .uvp-card-price {
         font-size: 15px;
         font-weight: 700;
         color: var(--uvp-text-main);
       }

       /* ── Récapitulatif Step 3 ────────────────────────────────────────────────── */
       .uvp-summary-box {
         background: var(--uvp-bg);
         border-radius: var(--uvp-radius-md);
         padding: 20px;
         border: 1px solid var(--uvp-border);
         margin-bottom: 24px;
       }

       .uvp-summary-item {
         display: flex;
         justify-content: space-between;
         font-size: 13px;
         padding: 8px 0;
         border-bottom: 1px solid #edf2f7;
       }

       .uvp-summary-item:last-child {
         border-bottom: none;
       }

       .uvp-summary-label {
         color: var(--uvp-text-muted);
       }

       .uvp-summary-val {
         font-weight: 600;
         color: var(--uvp-text-main);
       }

       .uvp-alert {
         padding: 12px 16px;
         border-radius: var(--uvp-radius-sm);
         background: #ecfdf5;
         border: 1px solid #a7f3d0;
         color: #065f46;
         font-size: 13px;
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 18px;
       }