/* ============================================================ DTM CUSTOMIZER — universal live color tweaker Each demo opts in via data-customizable JSON on . The customizer button floats bottom-left, opens a side panel with color pickers + reset + "Appliquer à mon projet". ============================================================ */ /* ─── Floating button ─────────────────────────────── */ .dtm-cust-btn { position: fixed; left: 22px; bottom: 22px; z-index: 65; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: #fff; color: #1A1614; border: 0; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; font-weight: 600; } .dtm-cust-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.24); } .dtm-cust-btn__icon { width: 22px; height: 22px; background: linear-gradient(135deg, #D63A2E 0%, #FFC93C 33%, #6B8B6F 66%, #2C7B7E 100%); border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); } @media (max-width: 720px) { .dtm-cust-btn { left: 14px; bottom: 90px; padding: 10px 14px; font-size: 0.72rem; } } /* ─── Backdrop (mobile only) ──────────────────────── */ .dtm-cust-backdrop { position: fixed; inset: 0; z-index: 998; /* above demo-banner z:90 */ background: rgba(0, 0, 0, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.22s; } .dtm-cust-backdrop.is-open { opacity: 1; pointer-events: auto; } @media (min-width: 721px) { /* Pas de backdrop en desktop : le panel est petit, à côté */ .dtm-cust-backdrop { display: none; } } /* ─── Panel ─────────────────────────────────────── */ .dtm-cust-panel { position: fixed; left: 22px; bottom: 80px; z-index: 999; /* above demo-banner z:90 + backdrop z:998 */ width: 320px; max-width: calc(100vw - 44px); max-height: calc(100vh - 110px); overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.22); padding: 22px; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #1A1614; opacity: 0; transform: translateY(20px) scale(0.96); pointer-events: none; transition: opacity 0.22s, transform 0.22s; -webkit-overflow-scrolling: touch; } .dtm-cust-panel.is-open { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 720px) { .dtm-cust-panel { /* Bottom-sheet plein écran (laisse 60px en haut pour status bar) */ left: 0 !important; right: 0 !important; bottom: 0 !important; top: 60px !important; width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 60px) !important; border-radius: 18px 18px 0 0 !important; padding: 0 !important; transform: translateY(100%) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } .dtm-cust-panel.is-open { transform: translateY(0) !important; } } /* Header — sticky tout en haut du panel (visible même quand on scrolle dedans) */ .dtm-cust-panel__head { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 12px; border-bottom: 1px solid #ECE6DC; margin-bottom: 16px; } @media (max-width: 720px) { .dtm-cust-panel__head { padding: 18px 22px 14px; margin: 0; border-radius: 18px 18px 0 0; /* drag handle visuel iOS-style */ box-shadow: 0 1px 0 #ECE6DC; } .dtm-cust-panel__head::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; background: #DDD5C7; } } .dtm-cust-panel__title { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #4D453F; } .dtm-cust-panel__close { width: 36px; height: 36px; border-radius: 50%; background: #F5F1E8; border: 0; cursor: pointer; font-size: 1.1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; } .dtm-cust-panel__close:hover { background: #E8DFD3; } .dtm-cust-panel__close:active { transform: scale(0.92); } @media (max-width: 720px) { .dtm-cust-panel__close { width: 44px; height: 44px; font-size: 1.2rem; } } /* Body wrapper for padding on mobile */ @media (max-width: 720px) { .dtm-cust-panel__body { padding: 0 22px 22px; } } .dtm-cust-panel__intro { font-size: 0.82rem; color: #6B5848; margin-bottom: 16px; line-height: 1.45; } .dtm-cust-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #F5F1E8; } .dtm-cust-row:last-of-type { border-bottom: 0; } .dtm-cust-row__label { font-size: 0.86rem; color: #1A1614; font-weight: 500; } .dtm-cust-row__hex { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: #6B5848; background: #F5F1E8; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; } .dtm-cust-row__swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); cursor: pointer; position: relative; overflow: hidden; } .dtm-cust-row__swatch input[type="color"] { position: absolute; inset: -4px; border: 0; padding: 0; cursor: pointer; background: transparent; } /* Preset palettes */ .dtm-cust-presets { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ECE6DC; } .dtm-cust-presets__label { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8A7F75; margin-bottom: 8px; } .dtm-cust-presets__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .dtm-cust-preset { height: 38px; border-radius: 6px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); transition: transform 0.15s; } .dtm-cust-preset:hover { transform: scale(1.05); } /* Footer with CTA */ .dtm-cust-panel__foot { margin-top: 18px; display: flex; gap: 8px; } .dtm-cust-reset { flex: 1; padding: 10px; background: transparent; border: 1px solid #E5DCCD; border-radius: 6px; color: #6B5848; font-family: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; } .dtm-cust-reset:hover { background: #F5F1E8; } .dtm-cust-apply { flex: 1.4; padding: 10px; background: #1A1614; color: #fff; border: 0; border-radius: 6px; font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; } .dtm-cust-apply:hover { background: #2E4F3E; } /* Saved indicator */ .dtm-cust-saved { position: absolute; top: 14px; right: 50px; font-family: "JetBrains Mono", monospace; font-size: 0.66rem; color: #2F9E44; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.2s; } .dtm-cust-saved.show { opacity: 1; }