*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #f4f4f6; --surface: #fff; --surface-2: #fafafa; --border: #e4e4e8;
    --text: #18181b; --text-2: #52525b; --text-3: #a1a1aa;
    --accent: #2563eb; --accent-h: #1d4ed8; --accent-light: #eff6ff;
    --danger: #ef4444;
    --radius: 14px; --radius-sm: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    --transition: 0.15s ease;
}

body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow: hidden; }
.hidden { display: none !important; }
.screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); overflow: auto; }

/* ======================== UPLOAD ======================== */
.upload-card { max-width: 480px; width: 100%; }
.upload-header { text-align: center; margin-bottom: 1.75rem; }
.logo { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.upload-header h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.upload-header p { color: var(--text-2); font-size: 0.88rem; margin-top: 0.2rem; }
/* Background choice */
.bg-choice { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; justify-content: center; }
.bg-label { font-size: 0.82rem; color: var(--text-2); font-weight: 500; }
.bg-options { display: flex; gap: 0.4rem; }
.bg-opt { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 0.78rem; font-weight: 500; cursor: pointer; color: var(--text-2); transition: all var(--transition); }
.bg-opt:hover { border-color: var(--accent); }
.bg-opt.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.bg-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); flex-shrink: 0; }

.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-light); }
.drop-icon { color: var(--text-3); margin-bottom: 0.5rem; }
.dropzone:hover .drop-icon { color: var(--accent); }
.drop-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
.drop-sub { font-size: 0.82rem; color: var(--text-2); }
.drop-link { color: var(--accent); text-decoration: underline; }
.drop-hint { font-size: 0.72rem; color: var(--text-3); margin-top: 0.6rem; }
.upload-steps { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ustep { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-2); }
.ustep-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ======================== PROCESSING ======================== */
.proc-card { max-width: 360px; width: 100%; text-align: center; }
.proc-visual { position: relative; width: 130px; height: 130px; margin: 0 auto 1.75rem; }
.proc-ring { position: absolute; inset: 0; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.proc-thumb { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.proc-thumb.visible { opacity: 1; }
.proc-steps { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; text-align: left; max-width: 260px; margin-left: auto; margin-right: auto; }
.pstep { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-3); transition: all 0.3s; }
.pstep.active { color: var(--accent); font-weight: 500; }
.pstep.done { color: #16a34a; }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: all 0.3s; }
.pstep.active .pdot { background: var(--accent); animation: pulse 1s infinite; }
.pstep.done .pdot { background: #16a34a; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.proc-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 0.6rem; }
.proc-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.4s; }
.proc-text { font-size: 0.78rem; color: var(--text-3); }

/* ======================== EDITOR ======================== */
#stepEditor { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }

.ed-topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)); background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 10; }
.ed-title { font-weight: 600; font-size: 0.9rem; color: var(--text-2); }
.ed-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all var(--transition); border: none; }
.ed-btn.ghost { background: none; color: var(--text-2); border: 1px solid var(--border); }
.ed-btn.ghost:hover { background: var(--surface-2); }
.ed-btn.accent { background: var(--accent); color: #fff; }
.ed-btn.accent:hover { background: var(--accent-h); }
.ed-btn.accent svg { stroke: #fff; }

.ed-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.ed-canvas-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Viewport — zone de zoom/pan */
.ed-viewport {
    flex: 1;
    overflow: hidden;
    background: #dddde0;
    position: relative;
    cursor: crosshair;
    touch-action: none; /* on gère tout manuellement */
}

.ed-canvas-mover {
    position: absolute;
    transform-origin: 0 0;
    /* taille = aspect ratio 413/531, affiché en grand */
    width: 413px;
    height: 531px;
    box-shadow: var(--shadow);
    border-radius: 4px;
    overflow: hidden;
}

.ed-canvas-mover canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

#overlayCanvas { z-index: 2; }

/* ======================== TOOLBAR (ligne 2) ======================== */
.ed-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ed-toolbar::-webkit-scrollbar { display: none; }

.tb-group { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.tb-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }

.tb-icon {
    width: 34px; height: 34px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--surface); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-2); transition: all var(--transition); flex-shrink: 0;
}
.tb-icon:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.tb-icon.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.tb-icon.active svg { stroke: var(--accent); }
.tb-icon:disabled { opacity: 0.3; cursor: default; }

.tb-range { width: 70px; accent-color: var(--accent); flex-shrink: 0; }
.tb-val { font-size: 0.7rem; color: var(--text-3); min-width: 28px; text-align: center; flex-shrink: 0; }

.bg-dot { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border); }

.ed-hint {
    text-align: center; font-size: 0.65rem; color: var(--text-3);
    padding: 0.35rem; padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ======================== ERROR ======================== */
.error-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; backdrop-filter: blur(4px); }
.error-card { background: var(--surface); border-radius: var(--radius); padding: 2rem; text-align: center; max-width: 360px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
.error-icon { margin-bottom: 0.75rem; }
.error-card p { font-size: 0.88rem; margin-bottom: 1.25rem; line-height: 1.4; }

/* ======================== RESPONSIVE ======================== */
@media (max-width: 700px) {
    .ed-topbar { padding: 0.3rem 0.4rem; gap: 0.3rem; }
    .tb-range { width: 50px; }
    .tb-icon { width: 30px; height: 30px; }
    .ed-btn { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
}