/* polish.css — animations Apple-grade, skeletons, empty states, loader voiture, confetti */

/* ─── Skeleton loaders ──────────────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg, var(--bg-subtle) 0%, var(--border) 50%, var(--bg-subtle) 100%); background-size:200% 100%; animation:skel-pulse 1.4s ease-in-out infinite; border-radius:6px; display:block; }
.skeleton-line { height:14px; margin-bottom:8px; }
.skeleton-line.lg { height:20px; }
.skeleton-line.sm { height:10px; }
.skeleton-circle { width:40px; height:40px; border-radius:50%; }
.skeleton-rect { height:120px; border-radius:12px; }
@keyframes skel-pulse { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ─── Empty state ───────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:64px 24px; max-width:520px; margin:0 auto; }
.empty-state svg, .empty-state img { max-width:180px; max-height:180px; margin:0 auto 24px; opacity:.9; }
.empty-state h3 { font-size:20px; margin-bottom:8px; color:var(--text); }
.empty-state p { color:var(--text-muted); margin-bottom:24px; }
.empty-state .empty-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ─── Tooltips contextuels (?) ──────────────────────────────────────────────── */
.tip { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--bg-subtle); border:1px solid var(--border); color:var(--text-muted); font-size:11px; font-weight:600; cursor:help; margin-left:6px; position:relative; vertical-align:middle; }
.tip:hover, .tip:focus { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); outline:none; }
.tip-content { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:8px 12px; border-radius:6px; font-size:12px; font-weight:400; white-space:normal; width:240px; line-height:1.5; box-shadow:var(--shadow-md); z-index:50; }
.tip-content::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--text); }
.tip:hover .tip-content, .tip:focus .tip-content { display:block; }

/* ─── Loader global voiture qui roule ──────────────────────────────────────── */
.car-loader { position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.car-loader-track { position:relative; width:240px; height:80px; overflow:hidden; }
.car-loader-road { position:absolute; bottom:14px; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, var(--text-muted) 0 12px, transparent 12px 24px); animation:road-move 600ms linear infinite; }
.car-loader-car { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:64px; height:32px; }
.car-loader-car svg { width:100%; height:100%; animation:car-bounce 800ms ease-in-out infinite; }
.car-loader-label { margin-top:18px; font-size:13px; color:var(--text-muted); }
@keyframes road-move { from { background-position:0 0; } to { background-position:-24px 0; } }
@keyframes car-bounce { 0%, 100% { transform:translate(-50%, 0); } 50% { transform:translate(-50%, -2px); } }

/* ─── Reveal on scroll ─────────────────────────────────────────────────────── */
.reveal-on-scroll { opacity:0; transform:translateY(24px); transition:opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); }
.reveal-on-scroll.visible { opacity:1; transform:translateY(0); }

/* ─── Magnetic button (suit la souris) ─────────────────────────────────────── */
.btn-magnetic { transition:transform 200ms cubic-bezier(.16,1,.3,1); }

/* ─── Confetti après signature ────────────────────────────────────────────── */
.confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:9998; }

/* ─── Onboarding wizard ────────────────────────────────────────────────────── */
.onb-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; animation:fadeIn 300ms; }
.onb-modal { background:var(--bg-elevated); border-radius:20px; max-width:680px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); position:relative; }
.onb-stepper { display:flex; padding:24px 32px 0; gap:4px; }
.onb-step-dot { flex:1; height:4px; border-radius:2px; background:var(--border); transition:background 300ms; }
.onb-step-dot.is-done, .onb-step-dot.is-current { background:var(--gradient-1); }
.onb-content { padding:32px; }
.onb-illustration { width:200px; height:160px; margin:0 auto 24px; display:block; }
.onb-title { font-size:28px; font-weight:600; text-align:center; margin-bottom:12px; }
.onb-subtitle { font-size:15px; color:var(--text-muted); text-align:center; margin-bottom:32px; }
.onb-footer { display:flex; justify-content:space-between; align-items:center; padding:20px 32px; border-top:1px solid var(--border); }
.onb-skip { color:var(--text-muted); font-size:13px; text-decoration:underline; cursor:pointer; background:none; border:none; }
.onb-choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.onb-choice-card { padding:20px; border:2px solid var(--border); border-radius:12px; cursor:pointer; transition:all 200ms; text-align:center; }
.onb-choice-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.onb-choice-card.is-selected { border-color:var(--accent); background:var(--accent-soft); }
.onb-choice-card-emoji { font-size:40px; margin-bottom:8px; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }