/* ============================================================================
   Design system — SaaS Contrats Auto
   Inspiration : Linear · Vercel · Polar · Stripe
   ============================================================================ */

/* ─── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
}

/* ─── Tokens (light + dark via prefers-color-scheme) ───────────────────────── */
:root {
    --bg: #ffffff;
    --bg-subtle: #fafafa;
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.85);
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.16);
    --text: #09090b;
    --text-muted: #71717a;
    --text-subtle: #a1a1aa;
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
    --accent-soft: rgba(29, 78, 216, 0.1);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --suisse: #dc2626;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --gradient-1: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
    --gradient-2: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.18), transparent 50%),
                  radial-gradient(circle at 80% 60%, rgba(29, 78, 216, 0.15), transparent 50%);
    --gradient-text: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --gradient-border: linear-gradient(135deg, rgba(29,78,216,0.4), rgba(59,130,246,0.4));
    --noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}

[data-theme="dark"], .dark {
    --bg: #09090b;
    --bg-subtle: #0c0c0e;
    --bg-elevated: #111114;
    --bg-overlay: rgba(9, 9, 11, 0.7);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --text-subtle: #71717a;
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft: rgba(96, 165, 250, 0.15);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Le dark mode n'est activé QUE via [data-theme="dark"] (toggle utilisateur).
   Pas d'auto-switch sur prefers-color-scheme : le défaut est light, plus lisible. */

/* ─── Typo ─────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
}
h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); letter-spacing: -0.04em; font-weight: 600; }
h2 { font-size: clamp(1.875rem, 3vw + 0.5rem, 2.75rem); letter-spacing: -0.03em; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
code, .mono {
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-feature-settings: 'ss01', 'ss06';
}

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }

/* ─── Layout ───────────────────────────────────────────────────────────────── */
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
}
.container-sm { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
@media (max-width: 768px) {
    .section { padding: 64px 0; }
    .container { padding: 0 16px; }
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    position: relative;
    isolation: isolate;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-xl { padding: 18px 36px; font-size: 17px; border-radius: var(--radius); }

.btn-primary {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.btn-primary:hover { background: var(--text); opacity: 0.9; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-accent {
    background: var(--gradient-1);
    color: white;
    border: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 24px rgba(29, 78, 216, 0.35);
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 12px 32px rgba(29, 78, 216, 0.5); }
.btn-accent::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--gradient-1);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 200ms;
}
.btn-accent:hover::before { opacity: 0.6; }

.btn-outline {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
}
.btn-outline:hover { border-color: var(--text); background: var(--bg-subtle); }

.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--bg-subtle); }

/* ─── Inputs ───────────────────────────────────────────────────────────────── */
.input, .select, .textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    transition: all 160ms;
    outline: none;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input-lg { padding: 16px 20px; font-size: 17px; }
.input-xl { padding: 20px 24px; font-size: 20px; font-weight: 500; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text); }
.field-hint { font-size: 12px; color: var(--text-muted); }
.field-error { font-size: 13px; color: var(--danger); margin-top: 4px; }

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-elevated);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 200ms, transform 200ms, border-color 200ms;
}
.card-hover:hover {
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.05);
    transform: translateY(-2px);
}
.dark-theme .card {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glass {
    background: var(--bg-overlay);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--border);
}

/* ─── Nav (blanche, sticky, blur frosted glass) ───────────────────────── */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 0;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 1px 3px rgba(15,23,42,.03);
    transition: all 200ms;
}
.dark-theme .nav {
    background: rgba(15,23,42,.9);
    border-bottom-color: rgba(255,255,255,.08);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--text);
}
.nav-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gradient-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    color: white;
    font-weight: 700;
    font-size: 14px;
}
.nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;          /* la nav prime sur les actions : pas d'écrasement */
}
.nav-link {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 160ms;
    white-space: nowrap;     /* "Pourquoi nous" et "Comment ça marche" sur 1 ligne */
}
.nav-link:hover { color: var(--text); background: var(--bg-subtle); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 768px) {
    .nav-links { display: none; }
}

/* ─── Hero & section visuals ───────────────────────────────────────────────── */
.hero {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--gradient-2);
    pointer-events: none;
    z-index: 0;
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.eyebrow-badge {
    background: var(--gradient-1);
    color: white;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ─── Plaque suisse ────────────────────────────────────────────────────────── */
.plate-ch {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid #18181b;
    border-radius: 6px;
    background: white;
    color: #18181b;
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    user-select: none;
}
.plate-ch-flag {
    background: var(--suisse);
    color: white;
    padding: 6px 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
}
.plate-ch-canton {
    padding: 6px 8px 6px 8px;
    border-right: 1px solid #e5e5e5;
    font-size: 17px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
}
.plate-ch-number {
    padding: 6px 14px;
    font-size: 22px;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
}

/* ─── Tunnel UI ────────────────────────────────────────────────────────────── */
.tunnel-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--bg-subtle);
}
.tunnel-header {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.tunnel-progress {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}
.tunnel-step-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: all 400ms;
}
.tunnel-step-dot.is-done { background: var(--gradient-1); }
.tunnel-step-dot.is-current { background: var(--gradient-1); animation: pulseShine 2s infinite; }

@keyframes pulseShine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tunnel-body { padding: 48px 0; }
.tunnel-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
    .tunnel-card { padding: 24px; border-radius: var(--radius); }
}
.tunnel-step-num { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.tunnel-step-title { margin: 8px 0 4px; font-size: 28px; }
.tunnel-step-subtitle { color: var(--text-muted); margin-bottom: 32px; }

.tunnel-footer {
    padding: 18px 0;
    border-top: 1px solid var(--border);
}
.tunnel-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* ─── Pricing ──────────────────────────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 48px;
}
.price-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 200ms;
}
.price-card.is-featured {
    border-color: transparent;
    background-image: linear-gradient(var(--bg-elevated), var(--bg-elevated)), var(--gradient-1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: 0 20px 60px rgba(29, 78, 216, 0.18);
}
.price-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-1);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Bento ───────────────────────────────────────────────────────────────── */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 48px;
}
.bento > * {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    min-height: 240px;
}
.bento .b-1 { grid-column: span 4; }
.bento .b-2 { grid-column: span 2; }
.bento .b-3 { grid-column: span 2; }
.bento .b-4 { grid-column: span 2; }
.bento .b-5 { grid-column: span 2; }
.bento .b-6 { grid-column: span 3; }
.bento .b-7 { grid-column: span 3; }
@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento > * { grid-column: span 2; }
}

/* ─── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 500;
    font-size: 17px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 22px;
    color: var(--text-muted);
    transition: transform 200ms;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 12px; color: var(--text-muted); }

/* ─── Auth screens ─────────────────────────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background: var(--bg-subtle);
    padding: 48px 16px;
    position: relative;
    overflow: hidden;
}
.auth-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-2);
    z-index: 0;
}
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

/* ─── Footer (clair, assorti à la nav) ────────────────────────────────── */
.footer {
    border-top: 1px solid rgba(15,23,42,.06);
    padding: 64px 0 32px;
    background: #fff;
    color: var(--text);
}
.dark-theme .footer {
    background: rgba(15,23,42,.85);
    border-top-color: rgba(255,255,255,.06);
}
.footer a { color: var(--text-muted); transition: color .15s; text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer .footer-title { color: var(--text); }
.footer hr { border-color: var(--border); }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-title { font-size: 13px; font-weight: 600; margin-bottom: 14px; color: var(--text); }
.footer-link {
    display: block;
    padding: 6px 0;
    color: var(--text-muted);
    font-size: 14px;
    transition: color 160ms;
}
.footer-link:hover { color: var(--text); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}
@media (max-width: 640px) {
    .footer-bottom { flex-direction: column; gap: 12px; }
}

/* ─── Animations ───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes auroraShift {
    0%   { transform: translate(0, 0)        scale(1); }
    33%  { transform: translate(40px, -30px) scale(1.05); }
    66%  { transform: translate(-30px, 30px) scale(0.95); }
    100% { transform: translate(0, 0)        scale(1); }
}

.anim-fade-up { animation: fadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }

/* Caret clignotant pour typewriter */
.caret { display:inline-block; width:2px; height:1.1em; background:currentColor; vertical-align:text-bottom; margin-left:2px; animation: blink 1.05s infinite; }

/* Aurora background (hero subtil) */
.aurora { position:absolute; inset:-20%; pointer-events:none; z-index:0; filter:blur(60px); opacity:.55; }
.aurora::before, .aurora::after {
    content:''; position:absolute; width:50%; height:60%; border-radius:50%;
    animation: auroraShift 18s ease-in-out infinite;
}
.aurora::before { top:10%;  left:5%;  background:radial-gradient(circle, rgba(29,78,216,.45), transparent 70%); }
.aurora::after  { top:40%;  right:5%; background:radial-gradient(circle, rgba(59,130,246,.40), transparent 70%); animation-delay:-9s; }

/* Spotlight cards (hover suit le curseur) */
.spotlight {
    position: relative;
    overflow: hidden;
    --mx: 50%;
    --my: 50%;
}
.spotlight::before {
    content:'';
    position: absolute; inset: 0;
    background: radial-gradient(600px circle at var(--mx) var(--my), rgba(29, 78, 216, 0.14), transparent 40%);
    opacity: 0;
    transition: opacity 240ms;
    pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* Sticker rotatif "Made in Sion" */
.sticker-spin {
    position: absolute;
    width: 120px;
    height: 120px;
    animation: spinSlow 22s linear infinite;
    pointer-events: none;
}
.sticker-spin svg text { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .2em; fill: var(--accent); }

/* Marquee logos / concurrents barrés */
.marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: marqueeScroll 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-muted);
    font-size: 15px;
    white-space: nowrap;
}
.marquee-item .ko {
    color: var(--text-subtle);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    text-decoration-thickness: 2px;
}
.marquee-item .ok {
    color: var(--text);
    font-weight: 600;
}

/* Phone mockup pour signature live */
.phone-mockup {
    width: 240px; height: 480px;
    border: 12px solid #18181b;
    border-radius: 36px;
    background: white;
    box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
    animation: floatGentle 6s ease-in-out infinite;
}
.phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:90px; height:22px; background:#18181b; border-radius:0 0 16px 16px; z-index:5; }
.phone-screen { width:100%; height:100%; padding:30px 14px 14px; display:flex; flex-direction:column; }

/* Compteur animé wrapper */
[data-count] { font-variant-numeric: tabular-nums; }

/* ─── Utils ────────────────────────────────────────────────────────────────── */
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-sm { font-size: 13px; } .text-base { font-size: 15px; } .text-lg { font-size: 17px; } .text-xl { font-size: 20px; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
.w-full { width: 100%; }
.hidden { display: none; }
@media (min-width: 768px) { .md\:flex { display: flex; } .md\:hidden { display: none; } }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text); }

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ─── Signature workflow ───────────────────────────────────────────────────── */
.sig-stepper {
    display: flex; align-items: center; gap: 8px; padding: 18px 16px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius); overflow-x: auto; margin-bottom: 14px;
}
.sig-stepper-empty { color: var(--text-muted); font-size: 13px; padding: 4px 8px; }
.sig-step { display: flex; flex-direction: column; align-items: center; min-width: 110px; gap: 6px; }
.sig-step-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px; transition: all 200ms;
    border: 2px solid transparent;
}
.sig-step.is-done .sig-step-circle { border-color: #166534; }
.sig-step.is-cancel { opacity: .5; }
.sig-step-meta { text-align: center; max-width: 130px; }
.sig-step-name { font-size: 12px; font-weight: 500; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.sig-step-role { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sig-step-link { flex: 1; height: 2px; background: var(--border-strong); min-width: 24px; opacity: .4; }

.sig-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.sig-toolbar-counter { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sig-toolbar-counter #sig-counter-num { color: var(--accent); font-weight: 600; }
.sig-toolbar-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 rgba(16,185,129,.45); transition: box-shadow 600ms;
}
.sig-toolbar-dot.is-pulse { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
.sig-toolbar-mode { display: flex; align-items: center; gap: 10px; }

.sig-toggle { display: inline-flex; border: 1px solid var(--border-strong);
    border-radius: 999px; padding: 3px; background: var(--bg-subtle); }
.sig-toggle-btn {
    padding: 6px 14px; border: 0; background: transparent; cursor: pointer;
    border-radius: 999px; font-size: 13px; color: var(--text-muted);
    transition: all 150ms; font-family: inherit; font-weight: 500;
}
.sig-toggle-btn:hover:not([disabled]) { color: var(--text); }
.sig-toggle-btn.is-active { background: var(--bg-elevated); color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sig-toggle-btn[disabled] { opacity: .5; cursor: not-allowed; }

.sig-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sig-table thead th {
    text-align: left; padding: 10px 14px; background: var(--bg-subtle);
    color: var(--text-muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 500; border-bottom: 1px solid var(--border);
}
.sig-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sig-table tbody tr:last-child td { border-bottom: 0; }
.sig-row.is-draggable .sig-handle { cursor: grab; color: var(--text-muted); user-select: none; }
.sig-row.is-dragging { opacity: .4; }
.sig-row.is-over { background: var(--accent-soft); }
.sig-ix { font-weight: 600; color: var(--accent); }
.sig-badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
}

.sig-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; z-index: 100; backdrop-filter: blur(4px);
}
.sig-modal-backdrop[hidden] { display: none; }
.sig-modal { max-width: 480px; width: 100%; background: var(--bg-elevated); }

/* ──────────────────────────────────────────────────────────────────────────
   Onboarding wizard (modal style Notion/Linear)
   ────────────────────────────────────────────────────────────────────────── */
.onb-backdrop {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(9, 9, 11, 0.55);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: onbFadeIn .2s ease-out;
}
@keyframes onbFadeIn { from { opacity: 0 } to { opacity: 1 } }
.onb-modal {
    position: relative;
    width: 100%; max-width: 540px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    animation: onbSlideUp .25s cubic-bezier(.22,1,.36,1);
}
@keyframes onbSlideUp { from { opacity: 0; transform: translateY(12px) scale(.98) } to { opacity: 1; transform: none } }
.onb-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--text-muted);
}
.onb-close:hover { background: var(--bg-subtle); color: var(--text); }
.onb-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.onb-dot {
    flex: 1; height: 4px; border-radius: 999px;
    background: var(--border); transition: background .2s;
}
.onb-dot.is-done { background: var(--accent); }
.onb-dot.is-current { background: var(--gradient-1); background-size: 200% 100%; }
.onb-num { font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.onb-title { margin: 6px 0 6px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.onb-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }

.onb-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.onb-persona {
    display: block; padding: 16px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.onb-persona:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.onb-persona.is-active { border-color: var(--accent); background: var(--accent-soft); }
.onb-persona input { position: absolute; opacity: 0; pointer-events: none; }
.onb-persona-ico { font-size: 26px; margin-bottom: 8px; }
.onb-persona-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.onb-persona-desc { font-size: 12px; color: var(--text-muted); }

.onb-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }

.onb-2fa {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px; background: var(--bg-subtle);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 22px;
}
.onb-2fa-ico { font-size: 28px; line-height: 1; }

.onb-cta {
    text-align: center; padding: 28px 16px;
    background: var(--bg-subtle); border: 1px dashed var(--border-strong);
    border-radius: var(--radius); margin-bottom: 22px;
}

.onb-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.onb-actions .btn-ghost { margin-right: auto; }

@keyframes onbShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.onb-shake { animation: onbShake .35s ease-in-out; }

@media (max-width: 520px) {
    .onb-modal { padding: 22px; }
    .onb-personas { grid-template-columns: 1fr; }
    .onb-title { font-size: 19px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Tooltips contextuels (.tip + .tip-content) — pas de lib externe
   Usage : <span class="tip" tabindex="0" aria-label="…"> ? <span class="tip-content">texte</span></span>
   ────────────────────────────────────────────────────────────────────────── */
.tip {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    margin-left: 6px; vertical-align: middle;
    border-radius: 50%;
    background: var(--bg-subtle); color: var(--text-muted);
    font-size: 11px; font-weight: 600; line-height: 1; cursor: help;
    border: 1px solid var(--border);
    user-select: none;
}
.tip:hover, .tip:focus-visible { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); outline: none; }
.tip-content {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 200px; max-width: 280px;
    padding: 10px 12px;
    background: var(--text); color: var(--bg);
    font-size: 12px; font-weight: 400; line-height: 1.45;
    text-align: left;
    border-radius: 8px; box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease-out, transform .15s ease-out;
    z-index: 1000;
    white-space: normal;
}
.tip-content::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text);
}
.tip:hover .tip-content,
.tip:focus-visible .tip-content,
.tip:focus-within .tip-content {
    opacity: 1; transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Variante alignée à droite (évite débordement quand le tip est en bord d'écran) */
.tip.tip-right .tip-content { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.tip.tip-right .tip-content::after { left: auto; right: 8px; margin-left: 0; }
.tip.tip-right:hover .tip-content,
.tip.tip-right:focus-visible .tip-content,
.tip.tip-right:focus-within .tip-content { transform: translateX(0) translateY(0); }

/* ============================================================================
   Apple-grade FX — draw-in SVG, reveal scroll, magnetic, hover glow, loader, confetti
   ============================================================================ */

/* ─── SVG hero car : auto-draw stroke-dasharray ───────────────────────────── */
.hero-car-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-car-svg .hc-stroke {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    opacity: 0;
}
.hero-car-svg.is-drawn .hc-stroke {
    animation: heroCarDraw 1800ms cubic-bezier(.65,.05,.36,1) forwards;
}
.hero-car-svg.is-drawn .hc-body            { animation-delay: 0ms; }
.hero-car-svg.is-drawn .hc-sill            { animation-delay: 180ms; }
.hero-car-svg.is-drawn .hc-hood            { animation-delay: 280ms; }
.hero-car-svg.is-drawn .hc-windshield      { animation-delay: 380ms; }
.hero-car-svg.is-drawn .hc-pillar          { animation-delay: 460ms; }
.hero-car-svg.is-drawn .hc-rear-window     { animation-delay: 520ms; }
.hero-car-svg.is-drawn .hc-handle-1,
.hero-car-svg.is-drawn .hc-handle-2,
.hero-car-svg.is-drawn .hc-crease          { animation-delay: 600ms; animation-duration: 900ms; }
.hero-car-svg.is-drawn .hc-headlight-frame { animation-delay: 700ms; }
.hero-car-svg.is-drawn .hc-grille          { animation-delay: 780ms; animation-duration: 700ms; }
.hero-car-svg.is-drawn .hc-bumper          { animation-delay: 820ms; }
.hero-car-svg.is-drawn .hc-plate           { animation-delay: 900ms; animation-duration: 500ms; }
.hero-car-svg.is-drawn .hc-arch-rear       { animation-delay: 320ms; }
.hero-car-svg.is-drawn .hc-arch-front      { animation-delay: 360ms; }
.hero-car-svg.is-drawn .hc-wheel-rear .hc-stroke  { animation-delay: 950ms; animation-duration: 700ms; }
.hero-car-svg.is-drawn .hc-wheel-front .hc-stroke { animation-delay: 1020ms; animation-duration: 700ms; }
.hero-car-svg.is-drawn .hc-plate-text     { animation: heroCarFadeIn 600ms 1450ms forwards; }
.hero-car-svg.is-drawn .hc-headlight-glow { animation: heroCarPulse 2.4s 1600ms infinite ease-in-out; }
.hero-car-svg.is-drawn .hc-halo           { animation: heroCarFadeSoft 1200ms 200ms forwards; }
.hero-car-svg.is-drawn .hc-shadow         { animation: heroCarFadeSoft 1200ms 600ms forwards; }
.hero-car-svg.is-drawn .hc-spark-1        { animation: heroCarSpark 1.6s 1800ms infinite; }
.hero-car-svg.is-drawn .hc-spark-2        { animation: heroCarSpark 1.6s 2000ms infinite; }
.hero-car-svg.is-drawn .hc-spark-3        { animation: heroCarSpark 2.2s 2200ms infinite; }
.hero-car-svg.is-drawn .hc-spark-4        { animation: heroCarSpark 2.2s 2400ms infinite; }

@keyframes heroCarDraw {
    0%   { stroke-dashoffset: 1400; opacity: 0; }
    8%   { opacity: 1; }
    100% { stroke-dashoffset: 0;    opacity: 1; }
}
@keyframes heroCarFadeIn   { to { opacity: 1; } }
@keyframes heroCarFadeSoft { to { opacity: .55; } }
@keyframes heroCarPulse    {
    0%, 100% { opacity: .35; transform-origin: 532px 226px; transform: scale(1); }
    50%      { opacity: .9;  transform: scale(1.18); }
}
@keyframes heroCarSpark {
    0%, 100% { opacity: 0; transform: scale(.7); }
    40%      { opacity: 1; transform: scale(1); }
    70%      { opacity: .5; transform: scale(1.1); }
}

/* ─── Scroll-reveal (IntersectionObserver pose .is-in) ──────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 700ms cubic-bezier(.16,1,.3,1),
        transform 700ms cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
[data-reveal="fade"]       { transform: none; }
[data-reveal="left"]       { transform: translateX(-32px); }
[data-reveal="right"]      { transform: translateX(32px); }
[data-reveal="scale"]      { transform: scale(.94); }
[data-reveal].is-in        { opacity: 1; transform: none; }
[data-reveal-delay="1"].is-in { transition-delay: 80ms; }
[data-reveal-delay="2"].is-in { transition-delay: 160ms; }
[data-reveal-delay="3"].is-in { transition-delay: 240ms; }
[data-reveal-delay="4"].is-in { transition-delay: 320ms; }
[data-reveal-delay="5"].is-in { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-car-svg .hc-stroke { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
}

/* ─── Hover scale + glow sur cards (sans casser .spotlight existant) ──── */
.card-fx {
    transition: transform 320ms cubic-bezier(.16,1,.3,1),
                box-shadow 320ms cubic-bezier(.16,1,.3,1),
                border-color 320ms;
    will-change: transform;
}
.card-fx:hover {
    transform: translateY(-4px) scale(1.012);
    border-color: var(--border-strong);
    box-shadow:
        0 22px 48px rgba(29,78,216,.18),
        0 6px 16px rgba(59,130,246,.10);
}
.card-fx .card-icon {
    transition: transform 400ms cubic-bezier(.16,1,.3,1), filter 400ms;
}
.card-fx:hover .card-icon {
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 6px 14px rgba(29,78,216,.45));
}
.card-fx .card-icon svg { transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.card-fx:hover .card-icon svg { transform: rotate(6deg); }

/* Icônes animées par story (chacune raconte la sienne au hover) */
.icon-anim path,
.icon-anim line,
.icon-anim polyline,
.icon-anim rect,
.icon-anim circle { transform-box: fill-box; transform-origin: center; transition: all 500ms cubic-bezier(.16,1,.3,1); }

.card-fx:hover .icon-plate polyline { animation: iconCheck 700ms ease-out forwards; }
.card-fx:hover .icon-signature path:nth-child(1) { transform: translateX(2px) rotate(2deg); }
.card-fx:hover .icon-langs path { animation: iconFlip 900ms ease-in-out; }
.card-fx:hover .icon-pay rect { transform: translateY(-2px); }
.card-fx:hover .icon-pay line { transform: scaleX(1.12); }
.card-fx:hover .icon-types polyline { transform: translate(2px,-2px); }
.card-fx:hover .icon-lock path:nth-child(2) { transform: translateY(-3px); }

@keyframes iconCheck {
    0%   { stroke-dashoffset: 30; stroke-dasharray: 30; }
    100% { stroke-dashoffset: 0;  stroke-dasharray: 30; }
}
@keyframes iconFlip {
    0%, 100% { transform: rotateY(0); }
    50%      { transform: rotateY(180deg); }
}

/* ─── Magnetic button ────────────────────────────────────────────────────── */
.magnetic { transition: transform 260ms cubic-bezier(.16,1,.3,1); will-change: transform; }
.magnetic-pull { transition: transform 120ms ease-out; }

/* ─── Video hero embed (custom play overlay) ─────────────────────────────── */
.hero-video {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #09090b;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16 / 9;
    cursor: pointer;
    isolation: isolate;
    border: 1px solid var(--border-strong);
}
.hero-video img.hero-video-poster,
.hero-video .hero-video-poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 800ms cubic-bezier(.16,1,.3,1), filter 400ms;
}
.hero-video:hover img.hero-video-poster,
.hero-video:hover .hero-video-poster { transform: scale(1.04); filter: brightness(.88); }
.hero-video::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(29,78,216,.25), rgba(0,0,0,.55));
    z-index: 1;
    transition: opacity 300ms;
}
.hero-video:hover::after { opacity: .85; }
.hero-video .hv-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2; color: white; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero-video .hv-play-btn {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 48px rgba(29,78,216,.4), 0 0 0 12px rgba(255,255,255,.08);
    transition: transform 240ms cubic-bezier(.16,1,.3,1), box-shadow 240ms;
    position: relative;
    border: none;
    cursor: pointer;
}
.hero-video:hover .hv-play-btn {
    transform: scale(1.08);
    box-shadow: 0 22px 56px rgba(59,130,246,.55), 0 0 0 16px rgba(255,255,255,.12);
}
.hero-video .hv-play-btn::before {
    content: '';
    position: absolute; inset: -10px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    animation: heroVideoPulse 2s infinite;
    z-index: -1;
}
@keyframes heroVideoPulse {
    0%   { transform: scale(.8);  opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.hero-video .hv-title {
    position: absolute; left: 24px; bottom: 20px;
    z-index: 3; color: white;
    font-weight: 500; font-size: 15px;
    background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
}
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* ─── Global page loader (custom car driving) ────────────────────────────── */
.app-loader {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 9990;
    transition: opacity 500ms ease-out, visibility 0s 500ms;
}
.app-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.app-loader-road {
    width: 200px; height: 80px;
    position: relative;
    overflow: hidden;
}
.app-loader-road::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--border-strong) 50%, transparent 50%);
    background-size: 18px 100%;
    animation: loaderRoad 600ms linear infinite;
}
@keyframes loaderRoad { from { background-position: 0 0; } to { background-position: -18px 0; } }
.app-loader-car {
    position: absolute;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    width: 96px; height: 50px;
    animation: loaderBob 600ms ease-in-out infinite alternate;
}
@keyframes loaderBob {
    from { transform: translateX(-50%) translateY(0); }
    to   { transform: translateX(-50%) translateY(-3px); }
}
.app-loader-car .wheel { animation: loaderWheel 360ms linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes loaderWheel { to { transform: rotate(360deg); } }
.app-loader-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ─── Confetti DocuSign-grade ───────────────────────────────────────────── */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* ─── Embed snippet modal (/demo) ───────────────────────────────────────── */
.embed-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(9,9,11,.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 200;
    padding: 24px;
    opacity: 0;
    transition: opacity 240ms;
}
.embed-modal-backdrop.is-open { display: flex; opacity: 1; }
.embed-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 560px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    transform: scale(.96);
    transition: transform 240ms cubic-bezier(.16,1,.3,1);
}
.embed-modal-backdrop.is-open .embed-modal { transform: scale(1); }
.embed-snippet {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    font-family: 'Geist Mono', monospace;
    font-size: 12.5px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 16px 0;
}

/* ─── /demo page (fullscreen embed) ─────────────────────────────────────── */
.demo-shell { min-height: 100vh; background: var(--bg); }
.demo-fab {
    position: fixed; right: 20px; bottom: 20px;
    background: var(--gradient-1); color: white;
    border-radius: 999px; padding: 12px 18px;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 12px 28px rgba(29,78,216,.4);
    z-index: 100;
    display: inline-flex; align-items: center; gap: 8px;
    border: none; cursor: pointer;
    transition: transform 200ms;
}
.demo-fab:hover { transform: translateY(-2px); }

/* ───────────────────────────────────────────────────────────────────────
   Contracts list (norme ERP — toolbar + filtres no-reload + bulk + preview)
   ─────────────────────────────────────────────────────────────────────── */

.contracts-header { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:24px; }
.contracts-title  { font-size:28px; margin-top:8px; display:flex; align-items:center; gap:10px; }
.contracts-count  { font-size:14px; color:var(--text-muted); font-weight:500; background:var(--bg-subtle); padding:2px 10px; border-radius:999px; }
.contracts-header-actions { display:flex; gap:8px; align-items:center; }

.contracts-app { display:flex; flex-direction:column; gap:16px; }

/* ─── Toolbar ───────────────────────────────────────────────────────── */
.contracts-toolbar {
    background:var(--bg-elevated, var(--bg, #fff));
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:12px;
}
.toolbar-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toolbar-row-main { justify-content:space-between; }

.toolbar-search { flex:1; min-width:240px; max-width:480px; position:relative; display:flex; align-items:center; gap:8px;
    background:var(--bg-subtle); border:1px solid var(--border); border-radius:8px; padding:0 10px;
}
.toolbar-search svg { color:var(--text-muted); flex-shrink:0; }
.toolbar-search input { flex:1; border:0; background:transparent; padding:9px 0; font-size:14px; color:var(--text); outline:none; font-family:inherit; }
.toolbar-search input::placeholder { color:var(--text-muted); }
.toolbar-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-clear { background:none; border:0; color:var(--text-muted); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; }
.search-clear:hover { color:var(--text); }

.toolbar-sort { display:flex; align-items:center; gap:8px; }
.toolbar-sort select { border:1px solid var(--border-strong); border-radius:8px; padding:7px 10px; background:var(--bg, #fff); color:var(--text); font-size:13px; font-family:inherit; cursor:pointer; }
.toolbar-sort select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.toolbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.view-toggle { display:inline-flex; background:var(--bg-subtle); border:1px solid var(--border); border-radius:8px; padding:2px; }
.view-toggle-btn { background:transparent; border:0; padding:6px 10px; border-radius:6px; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; }
.view-toggle-btn:hover { color:var(--text); }
.view-toggle-btn.is-active { background:var(--bg, #fff); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.06); }

/* ─── Filtres en pills ──────────────────────────────────────────────── */
.toolbar-row-filters { gap:8px; }
.filter-pill { position:relative; }
.filter-pill > summary { list-style:none; cursor:pointer; padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); background:var(--bg, #fff); color:var(--text); font-size:13px; display:inline-flex; gap:6px; align-items:center; user-select:none; }
.filter-pill > summary::-webkit-details-marker { display:none; }
.filter-pill > summary::after { content:'▾'; color:var(--text-muted); font-size:10px; margin-left:2px; }
.filter-pill:hover > summary { border-color:var(--text-muted); }
.filter-pill.is-active > summary { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.filter-pill .pill-count { background:var(--accent); color:#fff; border-radius:999px; padding:0 6px; font-size:11px; min-width:18px; text-align:center; line-height:18px; }

.filter-pill-body { position:absolute; top:calc(100% + 6px); left:0; z-index:30;
    min-width:220px; max-height:300px; overflow:auto;
    background:var(--bg, #fff); border:1px solid var(--border-strong); border-radius:10px;
    padding:8px; box-shadow:var(--shadow-lg, 0 12px 24px rgba(0,0,0,0.12));
    display:flex; flex-direction:column; gap:4px;
}
.check-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:13px; color:var(--text); cursor:pointer; }
.check-row:hover { background:var(--bg-subtle); }
.check-row input[type="checkbox"] { accent-color:var(--accent); }
.date-row { display:flex; align-items:center; gap:8px; padding:4px 4px; font-size:13px; color:var(--text); }
.date-row span { width:24px; color:var(--text-muted); }
.date-row input { flex:1; border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-family:inherit; font-size:13px; color:var(--text); background:var(--bg, #fff); }
.quick-dates { display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-top:1px solid var(--border); margin-top:4px; padding-top:8px; }
.quick-dates button { font-size:11px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:var(--bg, #fff); color:var(--text-muted); cursor:pointer; }
.quick-dates button:hover { color:var(--text); border-color:var(--text-muted); }

.fav-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text); cursor:pointer; padding:6px 12px; border:1px solid var(--border-strong); border-radius:999px; background:var(--bg, #fff); }
.fav-toggle input { accent-color:var(--warning); }
.fav-toggle:has(input:checked) { border-color:var(--warning); background:rgba(245, 158, 11, 0.08); color:var(--warning); }

/* ─── Views menu (saved views) ───────────────────────────────────────── */
.views-menu { position:relative; }
.views-menu > summary { list-style:none; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.views-menu > summary::-webkit-details-marker { display:none; }
.badge-count { background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:0 6px; font-size:11px; line-height:18px; min-width:18px; text-align:center; }
.views-dropdown { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:240px;
    background:var(--bg, #fff); border:1px solid var(--border-strong); border-radius:10px;
    padding:6px; box-shadow:var(--shadow-lg, 0 12px 24px rgba(0,0,0,0.12));
    display:flex; flex-direction:column; gap:2px;
}
.views-dropdown hr { border:0; border-top:1px solid var(--border); margin:4px 0; }
.views-item { background:transparent; border:0; padding:8px 10px; border-radius:6px; font-size:13px; color:var(--text); text-align:left; cursor:pointer; width:100%; }
.views-item:hover { background:var(--bg-subtle); }
.views-save { color:var(--accent); font-weight:500; }
.views-item-row { display:flex; align-items:center; gap:4px; }
.views-item-row .views-item { flex:1; }
.views-delete { background:transparent; border:0; color:var(--text-muted); font-size:16px; padding:4px 8px; cursor:pointer; border-radius:6px; }
.views-delete:hover { color:var(--danger); background:rgba(239, 68, 68, 0.08); }

/* ─── Bulk action bar ──────────────────────────────────────────────── */
.bulk-bar { position:sticky; top:12px; z-index:20;
    display:flex; align-items:center; gap:14px;
    background:var(--text, #1e3a8a); color:#fff;
    padding:10px 16px; border-radius:10px;
    box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.18));
    animation:slideDown 200ms cubic-bezier(.16,1,.3,1);
}
.bulk-bar .bulk-count { font-size:13px; font-weight:500; flex-shrink:0; }
.bulk-bar .bulk-actions { display:flex; gap:6px; flex:1; flex-wrap:wrap; }
.bulk-bar .btn-ghost { color:#fff; }
.bulk-bar .btn-ghost:hover { background:rgba(255,255,255,0.12); color:#fff; }
.bulk-bar .bulk-danger { color:#fca5a5; }
.bulk-bar .bulk-danger:hover { background:rgba(239, 68, 68, 0.18); color:#fff; }
.bulk-close { background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer; padding:0 6px; opacity:0.7; }
.bulk-close:hover { opacity:1; }
@keyframes slideDown { from { transform:translateY(-12px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ─── Layout main + preview ────────────────────────────────────────── */
.contracts-layout { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:1100px) { .contracts-layout:has(#contractsPreview:not([hidden])) { grid-template-columns:1fr 320px; } }

.contracts-main { min-width:0; }

/* ─── Table liste ───────────────────────────────────────────────────── */
.contracts-list-wrap { background:var(--bg-elevated, var(--bg, #fff)); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.contracts-table { width:100%; border-collapse:collapse; font-size:13px; }
.contracts-table thead th { background:var(--bg-subtle); color:var(--text-muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
.contracts-table tbody tr { border-top:1px solid var(--border); transition:background 120ms; }
.contracts-table tbody tr:hover { background:var(--bg-subtle); cursor:default; }
.contracts-table tbody tr:first-child { border-top:0; }
.contracts-table td { padding:10px 12px; vertical-align:middle; color:var(--text); }
.col-check { width:36px; text-align:center; }
.col-check input { accent-color:var(--accent); }
.col-fav { width:36px; text-align:center; }
.col-uuid { width:120px; }
.col-type { width:120px; }
.col-status { width:120px; }
.col-tags { min-width:120px; }
.col-price { width:120px; text-align:right; font-variant-numeric:tabular-nums; }
.col-date { width:100px; color:var(--text-muted); white-space:nowrap; }
.col-actions { width:60px; text-align:right; }
.uuid-mono { font-family:'Geist Mono', ui-monospace, monospace; font-size:12px; color:var(--text); text-decoration:none; }
.uuid-mono:hover { color:var(--accent); }

.fav-star { background:transparent; border:0; color:var(--border-strong); font-size:18px; cursor:pointer; padding:0; transition:color 120ms, transform 120ms; line-height:1; }
.fav-star:hover { transform:scale(1.15); color:var(--warning); }
.fav-star.is-on { color:var(--warning); }

/* ─── Status badges ─────────────────────────────────────────────────── */
.status-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:500; letter-spacing:.02em; }
.status-draft           { background:rgba(113, 113, 122, .12); color:#52525b; }
.status-pending_payment { background:rgba(245, 158, 11, .14); color:#b45309; }
.status-paid            { background:rgba(16, 185, 129, .14); color:#047857; }
.status-signed          { background:rgba(29, 78, 216, .14); color:var(--accent); }
.status-archived        { background:rgba(15, 23, 42, .08); color:#334155; }
.status-cancelled       { background:rgba(239, 68, 68, .14); color:#b91c1c; }

/* ─── Tag chips ─────────────────────────────────────────────────────── */
.tag-chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:500;
    background:color-mix(in srgb, var(--tag-color, var(--accent)) 14%, transparent);
    color:var(--tag-color, var(--accent));
    border:1px solid color-mix(in srgb, var(--tag-color, var(--accent)) 30%, transparent);
    margin:1px 2px;
}

/* ─── Grille (cards) ────────────────────────────────────────────────── */
.contracts-grid-wrap { }
.contracts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.contract-card { position:relative; background:var(--bg-elevated, var(--bg, #fff)); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; transition:border-color 120ms, transform 120ms, box-shadow 120ms; }
.contract-card:hover { border-color:var(--border-strong); transform:translateY(-1px); box-shadow:var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06)); }
.contract-card-head { display:flex; justify-content:space-between; align-items:center; }
.contract-card-body { display:flex; flex-direction:column; gap:4px; color:inherit; text-decoration:none; }
.contract-card-price { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:4px; }
.contract-card-foot { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:8px; padding-top:8px; border-top:1px solid var(--border); }
.contract-card-tags { display:flex; flex-wrap:wrap; gap:2px; }
.card-check { position:absolute; top:8px; left:8px; background:rgba(255,255,255,0.9); border-radius:4px; padding:2px; display:flex; opacity:0; transition:opacity 120ms; }
.contract-card:hover .card-check, .card-check:has(input:checked) { opacity:1; }

/* ─── Skeleton ──────────────────────────────────────────────────────── */
.contracts-skeleton { background:var(--bg-elevated, var(--bg, #fff)); border:1px solid var(--border); border-radius:12px; padding:8px; }
.skel-row { display:flex; align-items:center; gap:14px; padding:12px; border-bottom:1px solid var(--border); }
.skel-row:last-child { border-bottom:0; }
.skel { background:linear-gradient(90deg, var(--border) 0%, var(--bg-subtle) 50%, var(--border) 100%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; border-radius:4px; }
.skel-square { width:18px; height:18px; flex-shrink:0; }
.skel-text { height:14px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ─── Empty state ───────────────────────────────────────────────────── */
.contracts-empty, .contracts-noresults {
    background:var(--bg-elevated, var(--bg, #fff)); border:1px dashed var(--border-strong);
    border-radius:12px; padding:48px 24px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px;
}
.contracts-empty .empty-illu { color:var(--text-muted); margin-bottom:8px; }
.contracts-noresults .empty-illu { font-size:36px; }
.contracts-empty h3, .contracts-noresults h3 { font-size:16px; margin:0; }
.contracts-empty p { color:var(--text-muted); max-width:380px; margin:0; }

/* ─── Pagination ────────────────────────────────────────────────────── */
.contracts-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px; font-size:13px; color:var(--text-muted); }
.page-btn { background:var(--bg, #fff); border:1px solid var(--border-strong); padding:6px 12px; border-radius:8px; font-size:13px; color:var(--text); cursor:pointer; }
.page-btn:hover { border-color:var(--text-muted); }
.page-info { color:var(--text-muted); font-size:12px; }

/* ─── Preview pane ──────────────────────────────────────────────────── */
.contracts-preview { background:var(--bg-elevated, var(--bg, #fff)); border:1px solid var(--border); border-radius:12px; padding:16px; align-self:start; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.preview-empty { text-align:center; padding:20px 8px; font-size:13px; }
.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.preview-type { font-size:14px; margin:6px 0; color:var(--text); font-weight:600; }
.preview-price { font-size:24px; font-weight:600; color:var(--accent); }
.preview-list { display:flex; flex-direction:column; gap:6px; font-size:13px; margin-top:12px; padding:12px 0; border-top:1px solid var(--border); }
.preview-list > div { display:flex; justify-content:space-between; gap:8px; }
.preview-list dt { color:var(--text-muted); }
.preview-list dd { color:var(--text); margin:0; text-align:right; }

/* ─── Modal mini (bulk tag, save view) ──────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(15, 23, 42, 0.45); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn 160ms; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal-card { background:var(--bg, #fff); border-radius:14px; padding:20px; width:100%; max-width:420px; border:1px solid var(--border-strong); box-shadow:var(--shadow-lg, 0 24px 48px rgba(0,0,0,0.22)); }
.modal-card h3 { font-size:16px; margin:0 0 6px; }
.modal-card p { margin:0 0 12px; }
.modal-input { width:100%; padding:9px 12px; border:1px solid var(--border-strong); border-radius:8px; font-size:14px; font-family:inherit; color:var(--text); background:var(--bg, #fff); }
.modal-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width:768px) {
    .contracts-table .col-tags, .contracts-table .col-date { display:none; }
    .contracts-preview { display:none; }
    .toolbar-row-main { flex-direction:column; align-items:stretch; }
    .toolbar-search { max-width:none; }
}