/* ===========================================================
   Charlie — Plateforme IA juridique pré-contentieux
   Palette: #900000 / #ffffff / #000000
   =========================================================== */

/* ============ Webflow/Framer-like FX ============ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,#ff3b3b,#900000);
  z-index:9999;transition:width .12s linear;
  box-shadow:0 0 14px rgba(255,59,59,.6);
}
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:opacity .25s}
.cursor{width:36px;height:36px;border:1.5px solid rgba(144,0,0,.55);border-radius:50%;transition:transform .18s ease,width .25s,height .25s,border-color .25s,background .25s}
.cursor-dot{width:6px;height:6px;background:var(--primary);border-radius:50%}
.cursor.hover{width:64px;height:64px;background:rgba(144,0,0,.08);border-color:rgba(144,0,0,.9)}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* Split text reveal */
.split-text{overflow:visible}
.split-text .word{display:inline-block;overflow:hidden;vertical-align:bottom;margin-right:.18em;line-height:1.05}
.split-text .word > span{display:inline-block;transform:translateY(110%);opacity:0;animation:wordUp .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes wordUp{to{transform:translateY(0);opacity:1}}

/* Marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 38s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-track > div{font-family:'Playfair Display',serif;font-size:22px;color:#1a1a1a;letter-spacing:.5px;white-space:nowrap;opacity:.7;transition:opacity .25s,color .25s}
.marquee-track > div:hover{opacity:1;color:var(--primary)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Tilt cards */
[data-tilt]{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform}
[data-tilt] *{transform-style:preserve-3d}
[data-tilt]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.18),transparent 50%);
  opacity:0;transition:opacity .3s;mix-blend-mode:overlay;
}
[data-tilt]:hover::after{opacity:1}
.feature[data-tilt],.hero-card[data-tilt]{position:relative}

/* Magnetic buttons base — handled via JS transform */
[data-magnetic]{transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform}

/* Smooth fade-in for reveal stagger */
[data-reveal]{will-change:opacity,transform}

:root{
  --primary:#900000;
  --primary-dark:#6e0000;
  --primary-soft:#f7e9e9;
  --black:#000000;
  --white:#ffffff;
  --bg:#ffffff;
  --soft:#f6f3ef;
  --soft-2:#faf7f3;
  --muted:#6b6b6b;
  --muted-2:#9a9a9a;
  --border:#e8e4de;
  --border-strong:#d8d2ca;
  --success:#1f7a4d;
  --warning:#b06b00;
  --radius:14px;
  --radius-sm:10px;
  --shadow-soft:0 10px 30px -15px rgba(0,0,0,.15);
  --shadow-md:0 30px 60px -30px rgba(0,0,0,.25);
  --transition:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--black);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.serif{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-.5px}

/* ===== Boutons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:500;
  border:1px solid transparent;cursor:pointer;
  transition:all .25s var(--transition);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:var(--black);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--black)}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{background:#222}
.btn-white{background:var(--white);color:var(--primary)}
.btn-white:hover{background:#f1e3e3}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-block{width:100%;justify-content:center}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;
  transition:padding .35s ease;
  padding:18px 0;
}
.nav .container{transition:max-width .45s cubic-bezier(.4,0,.2,1), padding .35s ease}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  border:1px solid transparent;
  transition:height .35s ease, border-radius .35s ease, padding .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Top state — over dark hero, white text */
.nav:not(.scrolled) .logo{color:#fff}
.nav:not(.scrolled) .logo span{color:#fff}
.nav:not(.scrolled) .logo .dot{background:#fff}
.nav:not(.scrolled) .nav-desktop a{color:rgba(255,255,255,.85)}
.nav:not(.scrolled) .nav-desktop a:hover{color:#fff}
.nav:not(.scrolled) .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.nav:not(.scrolled) .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Scrolled state — floating pill on white */
.nav.scrolled{padding:12px 0}
.nav.scrolled .container{max-width:1080px;padding-left:16px;padding-right:16px}
.nav.scrolled .nav-inner{
  height:60px;
  padding:0 22px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.06);
}

.logo{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--primary);letter-spacing:-.5px;display:inline-flex;align-items:center;gap:8px;transition:color .35s ease}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);display:inline-block;transition:background .35s ease}
.logo span{color:var(--black);transition:color .35s ease}
/* Desktop inline nav (inside header) */
.nav-desktop{display:flex;gap:28px;align-items:center}
.nav-desktop a{font-size:14px;color:#333;transition:color .2s}
.nav-desktop a:hover{color:var(--primary)}
.nav:not(.scrolled) .nav-desktop a{color:rgba(255,255,255,.85)}
.nav:not(.scrolled) .nav-desktop a:hover{color:#fff}
/* Mobile drawer (outside header, hidden on desktop) */
.nav-links{display:none}
.nav-cta{display:flex;gap:10px;align-items:center}

/* Burger menus */
.nav-burger,.side-burger{
  display:none;width:38px;height:38px;border:none;background:transparent;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;padding:0;border-radius:8px;
}
.nav-backdrop,.side-backdrop{display:none}
.nav-close,.nav-mobile-cta,.nav-drawer-head{display:none}
.nav-burger span,.side-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,background .3s}
.side-burger span{background:#333}
.nav.scrolled .nav-burger span{background:#222}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Body offset so hero isn't hidden under fixed nav */
body:not(.dash):not(.auth-page) .hero{padding-top:120px}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:720px;
  display:flex;align-items:center;
  color:var(--white);overflow:hidden;
  border-bottom-left-radius:24px;border-bottom-right-radius:24px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 40%,rgba(144,0,0,.55) 100%),
    url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1800&q=80') center/cover;
  transform:scale(1.05);
  animation:heroZoom 18s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 360px at 78% 30%,rgba(144,0,0,.45),transparent 70%);
  animation:pulse 8s ease-in-out infinite;
}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.15)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;
  padding:120px 0 110px;width:100%;
}
.hero-copy>*{opacity:0;transform:translateY(24px);animation:fadeUp .9s var(--transition) forwards}
.hero-copy .eyebrow{animation-delay:.05s;color:#ff9a9a}
.hero-copy h1{
  font-family:'Playfair Display',serif;
  font-size:64px;line-height:1.05;font-weight:600;
  margin-bottom:22px;animation-delay:.2s;
}
.hero-copy h1 em,
.hero-copy h1 em .word,
.hero-copy h1 em .word > span{
  font-style:normal;color:#ff9a9a;
  background:linear-gradient(90deg,#ff9a9a,#fff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-copy p{font-size:18px;color:#e9e3df;margin-bottom:30px;max-width:560px;animation-delay:.35s}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation-delay:.5s}
.hero-stats{
  display:flex;gap:48px;margin-top:48px;flex-wrap:wrap;
  animation-delay:.65s;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-stats div strong{font-family:'Playfair Display',serif;font-size:30px;display:block;color:#fff}
.hero-stats div span{font-size:13px;color:#cfc8c4}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes streamLine{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}

/* Hero card - now positioned in grid */
.hero-card{
  position:relative;width:100%;max-width:380px;justify-self:end;
  background:rgba(255,255,255,.97);color:#1a1a1a;border-radius:var(--radius);
  padding:22px;box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  animation:floatY 6s ease-in-out infinite,fadeUp .9s var(--transition) .8s both;
}
.hero-card .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hero-card h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.hero-card .badge-ai{
  display:inline-flex;gap:6px;align-items:center;
  background:var(--primary);color:#fff;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;
}
.hero-card .badge-ai::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.hero-card .line{display:flex;justify-content:space-between;font-size:13px;padding:9px 0;border-bottom:1px dashed var(--border)}
.hero-card .line:last-child{border-bottom:none}
.hero-card .tag{background:var(--primary);color:#fff;padding:2px 8px;border-radius:999px;font-size:11px}
.hero-card .tag.ok{background:var(--success)}
.hero-card .footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.hero-card .footer strong{color:var(--black);font-size:13px}

/* ===== Sections ===== */

.eyebrow{
  display:inline-block;font-size:12px;text-transform:uppercase;
  letter-spacing:1.8px;color:var(--primary);font-weight:600;margin-bottom:14px;
}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:44px;line-height:1.1;font-weight:600;
  max-width:720px;margin-bottom:14px;
}
.section-sub{color:var(--muted);max-width:640px;font-size:16px}
.center{text-align:center}
.center .section-title,.center .section-sub{margin-left:auto;margin-right:auto}

/* ===== Trust ===== */
.trust{padding:56px 0;text-align:center;background:var(--white);border-bottom:1px solid var(--border)}
.trust-label{font-size:13px;color:var(--muted);margin-bottom:24px;letter-spacing:.5px}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:54px;align-items:center;opacity:.85}
.trust-logos div{font-family:'Playfair Display',serif;font-size:20px;color:#1a1a1a;letter-spacing:.5px;transition:color .2s}
.trust-logos div:hover{color:var(--primary)}

/* ===== Feature cards ===== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.feature{
  background:var(--soft);border-radius:var(--radius);padding:24px;
  border:1px solid var(--border);display:flex;flex-direction:column;
  transition:transform .35s var(--transition),box-shadow .35s var(--transition),border-color .35s;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--primary)}
.feature-mock{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:14px;min-height:180px;font-size:12px;color:#444;margin-bottom:18px;
}
.feature-mock .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border);align-items:center}
.feature-mock .row:last-child{border-bottom:none}
.feature-mock .tag{background:var(--primary);color:#fff;font-size:10px;padding:3px 8px;border-radius:999px}
.feature-mock .tag.ok{background:var(--success)}
.feature-mock .tag.warn{background:var(--warning)}
.feature h3{font-family:'Playfair Display',serif;font-size:22px;margin-bottom:8px}
.feature p{font-size:14px;color:var(--muted)}

/* ===== Process ===== */
.process{background:var(--soft)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.step{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;position:relative;
  transition:transform .3s var(--transition);
}
.step:hover{transform:translateY(-4px)}
.step .num{
  width:36px;height:36px;border-radius:10px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-weight:700;margin-bottom:14px;
}
.step h4{font-family:'Playfair Display',serif;font-size:18px;margin-bottom:6px}
.step p{font-size:13px;color:var(--muted)}

/* ===== Manage section ===== */
.manage-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;margin-top:50px}
.manage-mock{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-md);
}
.checklist{margin-top:8px}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border);list-style:none}
.checklist li:last-child{border-bottom:none}
.checklist .dot{flex:none;width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}
.checklist h5{font-size:15px;margin-bottom:2px}
.checklist span{font-size:13px;color:var(--muted)}

/* ===== AI assistant demo (landing) ===== */
.ai-demo{background:var(--black);color:#fff;border-radius:24px;margin:0 24px;padding:80px 24px;position:relative;overflow:hidden}
.ai-demo::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 300px at 20% 0%,rgba(144,0,0,.35),transparent 60%);
  pointer-events:none;
}
.ai-demo .eyebrow{color:#ff9a9a}
.ai-demo .section-title{color:#fff}
.ai-demo .section-sub{color:#bdbdbd}
.ai-window{
  margin-top:40px;max-width:880px;margin-left:auto;margin-right:auto;
  background:#0e0e0e;border:1px solid #1f1f1f;border-radius:var(--radius);
  overflow:hidden;box-shadow:0 50px 100px -40px rgba(144,0,0,.3);
}
.ai-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid #1f1f1f}
.ai-bar i{width:10px;height:10px;border-radius:50%;background:#333;display:inline-block}
.ai-bar i:first-child{background:#900000}
.ai-bar i:nth-child(2){background:#444}
.ai-bar i:nth-child(3){background:#444}
.ai-bar span{margin-left:14px;font-size:12px;color:#666}
.ai-body{padding:24px 28px;font-size:14px;min-height:280px}
.ai-msg{margin-bottom:18px;max-width:80%}
.ai-msg.user{margin-left:auto;background:#900000;color:#fff;padding:10px 14px;border-radius:14px 14px 4px 14px}
.ai-msg.bot{background:#1a1a1a;color:#e7e7e7;padding:12px 14px;border-radius:14px 14px 14px 4px;border:1px solid #222;white-space:pre-line}
.ai-typing{display:inline-block;color:#999}
.ai-typing::after{content:"▍";animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;text-align:left}
.price{border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:var(--white);display:flex;flex-direction:column;transition:transform .3s var(--transition),box-shadow .3s}
.price:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.price.featured{background:var(--black);color:var(--white);border-color:var(--black);transform:scale(1.02)}
.price.featured:hover{transform:scale(1.02) translateY(-4px)}
.price.featured .price-sub,.price.featured ul li{color:#cfcfcf}
.price h3{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;color:var(--primary)}
.price.featured h3{color:#ff9a9a}
.price .amount{font-family:'Playfair Display',serif;font-size:48px;font-weight:600;line-height:1}
.price .amount small{font-size:14px;color:var(--muted);font-weight:400;font-family:'Inter',sans-serif}
.price.featured .amount small{color:#cfcfcf}
.price-sub{font-size:13px;color:var(--muted);margin:10px 0 14px}
.price-yearly{font-size:12px;color:var(--muted);margin:0 0 18px;padding:8px 10px;border:1px dashed var(--border);border-radius:8px;display:inline-block}
.price-yearly strong{color:var(--primary);font-weight:600}
.price-yearly span{color:#888}
.price.featured .price-yearly{border-color:#3a1010;background:rgba(255,255,255,.04);color:#cfcfcf}
.price.featured .price-yearly strong{color:#ff9a9a}
.price.featured .price-yearly span{color:#999}
.price ul{list-style:none;margin-bottom:26px;flex:1}
.price ul li{font-size:14px;padding:10px 0;border-bottom:1px dashed var(--border);color:#333;display:flex;gap:8px;align-items:center}
.price ul li::before{content:"✓";color:var(--primary);font-weight:700}
.price.featured ul li{border-color:#222}
.price.featured ul li::before{color:#ff9a9a}

/* ===== Testimonial ===== */
.testimonial{background:var(--soft)}
.testimonial-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.testimonial blockquote{font-family:'Playfair Display',serif;font-size:34px;line-height:1.25;font-weight:500;color:var(--black)}
.testimonial blockquote em{font-style:normal;color:var(--primary)}
.who{display:flex;align-items:center;gap:14px;margin-top:24px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#000);color:#fff;display:grid;place-items:center;font-weight:600}
.who small{display:block;color:var(--muted);font-size:13px}

.quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.quote-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:transform .3s,border-color .3s}
.quote-card:hover{transform:translateY(-3px);border-color:var(--primary)}
.quote-card p{font-size:14px;color:#333;margin-bottom:18px}
.quote-card .who{margin-top:0}

/* ===== FAQ ===== */
.faq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;margin-top:30px}
details{border-bottom:1px solid var(--border);padding:18px 0;cursor:pointer}
details summary{font-size:16px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--primary);font-size:22px;transition:transform .2s}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted);font-size:14px}

/* ===== CTA strip ===== */
.cta-strip{background:var(--primary);color:var(--white);text-align:center;padding:90px 24px;border-radius:24px;margin:40px 24px;position:relative;overflow:hidden}
.cta-strip::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 0%,rgba(255,255,255,.15),transparent 70%);
  pointer-events:none;
}
.cta-strip h2{font-family:'Playfair Display',serif;font-size:46px;margin-bottom:18px;line-height:1.1}
.cta-strip p{color:#f1d6d6;margin-bottom:28px}

/* ===== Footer ===== */
footer{background:var(--black);color:#bdbdbd;padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
footer h5{color:#fff;font-size:14px;margin-bottom:14px}
footer ul{list-style:none}
footer li{font-size:14px;padding:6px 0}
footer li a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid #1f1f1f;margin-top:40px;padding-top:20px;font-size:13px;color:#888;flex-wrap:wrap;gap:10px}

/* =====================================================
   AUTH PAGE
   ===================================================== */
.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--white)}
.auth-visual{
  position:relative;color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,rgba(0,0,0,.85),rgba(144,0,0,.7)),url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1400&q=80') center/cover;
}
.auth-visual h2{font-family:'Playfair Display',serif;font-size:42px;line-height:1.1;margin-bottom:18px}
.auth-visual p{color:#e9d8d8;max-width:420px}
.auth-visual .quote{font-family:'Playfair Display',serif;font-size:18px;color:#fff;border-left:2px solid #ff9a9a;padding-left:14px;line-height:1.5}
.auth-visual .quote small{display:block;color:#e9d8d8;margin-top:8px;font-size:12px;font-family:'Inter',sans-serif;font-style:normal}

.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:60px 30px}
.auth-form{width:100%;max-width:420px}
.auth-form .logo{margin-bottom:30px;font-size:24px}
.auth-form h1{font-family:'Playfair Display',serif;font-size:32px;margin-bottom:8px}
.auth-form .lead{color:var(--muted);margin-bottom:28px;font-size:14px}

.role-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:24px;gap:4px}
.role-tabs button{
  padding:10px 8px;border-radius:8px;font-size:13px;color:#333;
  transition:all .25s var(--transition);
}
.role-tabs button.active{background:var(--primary);color:#fff;box-shadow:0 6px 16px -8px var(--primary)}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#333;margin-bottom:6px;font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border-strong);
  border-radius:10px;font-size:14px;font-family:inherit;
  background:#fff;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.checkbox-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#333;margin:8px 0 18px}
.checkbox-row a{color:var(--primary);font-weight:500}
.auth-sep{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--muted);font-size:12px}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-foot{text-align:center;margin-top:24px;font-size:14px;color:var(--muted)}
.auth-foot a{color:var(--primary);font-weight:500}

/* =====================================================
   DASHBOARD
   ===================================================== */
body.dash{background:var(--soft-2);color:var(--black)}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* Sidebar */
.sidebar{
  background:#fbf8f4;border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 14px;
  position:sticky;top:0;height:100vh;
}
.sidebar .brand{
  display:flex;align-items:center;gap:10px;padding:8px 8px 14px;border-bottom:1px solid var(--border);margin-bottom:14px;
}
.sidebar .brand .badge{width:34px;height:34px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-family:'Playfair Display',serif;font-weight:700}
.sidebar .brand strong{font-size:14px;display:block}
.sidebar .brand span{font-size:12px;color:var(--muted)}

.side-section{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted-2);padding:14px 10px 6px}
.side-link{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:14px;color:#222;cursor:pointer;transition:background .2s,color .2s;
}
.side-link:hover{background:#f1ebe2}
.side-link.active{background:var(--primary);color:#fff}
.side-link .ico{width:18px;height:18px;display:inline-grid;place-items:center;flex:none}
.side-link.active .ico svg{stroke:#fff}
.side-link .count{margin-left:auto;font-size:11px;background:#eee2d2;color:#222;padding:2px 8px;border-radius:999px}
.side-link.active .count{background:rgba(255,255,255,.2);color:#fff}

.side-user{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;padding:14px 8px 4px;
}
.side-user .avatar{width:36px;height:36px;font-size:13px}
.side-user small{display:block;color:var(--muted);font-size:11px}

/* Main */
.main{padding:0;display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:16px;padding:16px 32px;
  background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;
}
.topbar .crumbs{font-size:14px;color:var(--muted)}
.topbar .crumbs strong{color:var(--black)}
.search{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--soft);border:1px solid var(--border);border-radius:10px;
  padding:8px 12px;width:280px;
}
.search input{border:none;background:none;outline:none;font-size:13px;width:100%;font-family:inherit}
.icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:#fff;display:inline-grid;place-items:center;transition:background .2s;
}
.icon-btn:hover{background:var(--soft)}

.content{padding:14px 32px 40px;max-width:1400px;width:100%;margin:0 auto;flex:1}
.view{animation:fadeViewIn .3s var(--transition)}
@keyframes fadeViewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:14px;padding-top:4px}
.page-head h1{line-height:1.1;margin:0}
.page-head .lead{margin-top:6px}
.page-head h1{font-family:'Playfair Display',serif;font-size:32px;line-height:1.1}
.page-head .lead{color:var(--muted);font-size:14px;margin-top:4px}

/* KPI cards */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.kpi h6{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-weight:500}
.kpi .val{font-family:'Playfair Display',serif;font-size:28px;font-weight:600}
.kpi .delta{font-size:12px;color:var(--success);margin-top:4px}
.kpi .delta.down{color:var(--primary)}

/* Workflow vertical timeline */
.workflow{position:relative;padding:6px 0 6px 4px}
.workflow::before{content:"";position:absolute;top:16px;bottom:16px;left:19px;width:2px;background:linear-gradient(to bottom,var(--border) 0,var(--border) 100%);border-radius:2px}
.wf-step{position:relative;display:grid;grid-template-columns:42px 1fr;gap:14px;padding:12px 0 18px;align-items:flex-start}
.wf-marker{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--border);
  color:#999;font-weight:700;font-size:14px;
  position:relative;z-index:1;
  transition:all .3s;
}
.wf-step.done .wf-marker{background:var(--success);border-color:var(--success);color:#fff}
.wf-step.active .wf-marker{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 5px rgba(144,0,0,.15);animation:wfPulse 2s ease-in-out infinite}
.wf-step.escalate .wf-marker{background:#fff;border-color:var(--primary);color:var(--primary)}
@keyframes wfPulse{0%,100%{box-shadow:0 0 0 5px rgba(144,0,0,.15)}50%{box-shadow:0 0 0 10px rgba(144,0,0,.05)}}

.wf-content{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;position:relative;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.wf-step.active .wf-content{border-color:var(--primary);box-shadow:0 6px 18px -8px rgba(144,0,0,.25)}
.wf-step.done .wf-content{background:#fafaf8;opacity:.92}
.wf-step.escalate .wf-content{border-style:dashed;background:var(--primary-soft)}
.wf-content:hover{transform:translateX(2px)}
.wf-title{font-weight:600;font-size:14px;color:var(--black);display:flex;align-items:center;gap:6px}
.wf-meta{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.wf-meta strong{color:var(--black)}
.wf-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wf-date{font-size:11px;color:#aaa;margin-top:8px;font-style:italic}

/* Table */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.card-head h3{font-family:'Playfair Display',serif;font-size:20px}
.card-body{padding:6px 6px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border)}
.table th{font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#fff}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--soft-2)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;font-weight:500}
.pill.warn{background:#fdf3e2;color:#b06b00}
.pill.danger{background:var(--primary-soft);color:var(--primary)}
.pill.ok{background:#e3f1ea;color:var(--success)}
.pill.info{background:#eeeee8;color:#333}
.doc-icon{
  width:26px;height:30px;background:var(--primary);color:#fff;display:inline-grid;place-items:center;
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.5px;vertical-align:middle;margin-right:10px;
}

/* Two col layout */
.split-2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}

/* AI panel */
.ai-panel{background:#0e0e0e;color:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:520px}
.ai-panel-head{padding:16px 18px;border-bottom:1px solid #1f1f1f;display:flex;align-items:center;gap:10px}
.ai-panel-head .badge{width:30px;height:30px;border-radius:8px;background:var(--primary);display:grid;place-items:center;font-weight:700;font-family:'Playfair Display',serif}
.ai-panel-head strong{font-size:14px;display:block}
.ai-panel-head small{font-size:11px;color:#999}
.ai-panel .ai-body{flex:1;overflow-y:auto;padding:18px}
.ai-panel .ai-msg.user{background:var(--primary)}
.ai-panel .ai-msg.bot{background:#1a1a1a;border-color:#222}
.ai-input{
  display:flex;gap:8px;padding:12px;border-top:1px solid #1f1f1f;background:#0a0a0a;
}
.ai-input input{
  flex:1;background:#1a1a1a;border:1px solid #222;color:#fff;
  padding:10px 12px;border-radius:8px;font-size:13px;font-family:inherit;outline:none;
}
.ai-input input::placeholder{color:#777}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px}
.ai-suggestions button{
  background:#1a1a1a;border:1px solid #222;color:#cfcfcf;padding:6px 10px;
  font-size:12px;border-radius:999px;cursor:pointer;transition:background .2s;
}
.ai-suggestions button:hover{background:#222;color:#fff}

/* Modal */
.modal-back{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:100;padding:24px;
  animation:fadeIn .2s ease;
}
.modal-back.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:var(--radius);max-width:780px;width:100%;
  max-height:90vh;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 50px 100px -20px rgba(0,0,0,.4);
  animation:popIn .25s var(--transition);
}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-family:'Playfair Display',serif;font-size:22px}
.modal-body{padding:22px;overflow-y:auto}
.modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Letter preview */
.letter{
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:36px;
  font-family:'Inter',serif;font-size:14px;line-height:1.7;color:#1a1a1a;
  max-height:520px;overflow:auto;
}
.letter h3{font-family:'Playfair Display',serif;font-size:18px;text-align:center;text-transform:uppercase;letter-spacing:1.5px;margin:14px 0}
.letter .right{text-align:right}
.letter p{margin:10px 0}

/* ============ Contract analyzer ============ */
.contract-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:flex-start}
.contract-doc{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:38px 44px;min-height:640px;font-size:14px;line-height:1.7;color:#1a1a1a}
.contract-doc h2{font-family:'Playfair Display',serif;font-size:28px;margin-bottom:24px}
.contract-doc h4{font-size:15px;font-weight:600;margin:22px 0 8px}
.contract-doc p{margin-bottom:10px;color:#2a2a2a}
.contract-doc .flag{color:var(--primary);font-weight:500}
.contract-doc .flag::before{content:"⚠ ";font-weight:700}
.contract-doc mark{background:#fff2cc;padding:0 2px;border-radius:3px}
.review-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;position:sticky;top:84px}
.review-panel h3{font-family:'Playfair Display',serif;font-size:22px;margin-bottom:6px}
.review-panel .lead{color:var(--muted);font-size:13px;margin-bottom:14px}
.review-count{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--success);margin-bottom:14px}
.review-count::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e3f1ea;color:var(--success);font-size:11px;font-weight:700}
.review-card{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.review-card[open]{border-color:var(--primary)}
.review-card summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;cursor:pointer;list-style:none;font-size:14px;font-weight:500}
.review-card summary::-webkit-details-marker{display:none}
.review-card summary::after{content:"▾";color:var(--muted);transition:transform .2s}
.review-card[open] summary::after{transform:rotate(180deg)}
.sev{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:999px;margin-left:auto}
.sev.high{background:var(--primary-soft);color:var(--primary)}
.sev.med{background:#fdf3e2;color:#b06b00}
.sev.low{background:#e3f1ea;color:var(--success)}
.review-body{padding:0 16px 16px;font-size:13px;color:#333}
.review-quote{background:var(--soft);border-radius:8px;padding:12px 14px;font-style:italic;color:#444;margin-bottom:10px;font-size:13px}
.review-warn{display:flex;gap:8px;align-items:flex-start;color:#b06b00;font-size:13px;margin-bottom:12px}
.review-warn::before{content:"⚠";flex:none}

/* Responsive */
/* =====================================================
   RESPONSIVE
   ===================================================== */

/* ≤ 1200px : densifier */
@media (max-width: 1200px){
  .container{padding:0 24px}
  .hero-copy h1{font-size:54px}
  .section-title{font-size:36px}
  .nav.scrolled .container{max-width:960px}
}

/* ≤ 1024px : tablette paysage */
@media (max-width: 1024px){
  .app{grid-template-columns:1fr}
  .sidebar{
    display:flex;position:fixed;top:0;left:0;bottom:0;width:280px;
    z-index:60;transform:translateX(-100%);transition:transform .3s ease;
    box-shadow:0 10px 40px rgba(0,0,0,.18);
    overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0)}
  .side-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .3s;z-index:59;
    display:block;
  }
  .side-backdrop.show{opacity:1;pointer-events:auto}
  .side-burger{display:flex}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .split-2,.contract-layout{grid-template-columns:1fr}
  .review-panel{position:static}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding:60px 0 80px}
  .hero-card{justify-self:center;max-width:460px;width:100%}
  .hero-copy h1{font-size:48px}
  .features-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .quotes-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .manage-grid{grid-template-columns:1fr}
  .testimonial-inner{grid-template-columns:1fr;gap:30px}
  .testimonial-inner img{height:280px !important}
  .faq-grid{grid-template-columns:1fr}
  .ai-status-grid{grid-template-columns:repeat(2,1fr)}
  .opt-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:220px 1fr}
}

/* ≤ 900px : tablette portrait */
@media (max-width: 900px){
  .nav-burger{display:flex}
  .nav-desktop{display:none}
  .nav-links{
    display:flex;position:fixed;top:0;right:0;bottom:0;
    width:100%;max-width:100%;
    flex-direction:column;align-items:flex-start;gap:0;padding:0 0 30px;
    background:#fff;box-shadow:none;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
    z-index:200;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .3s;z-index:199;
  }
  .nav-backdrop.show{opacity:1;pointer-events:auto}
  .nav-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:20px 24px 18px;
    border-bottom:1px solid var(--border);margin-bottom:8px;
    flex-shrink:0;
  }
  .nav-close{
    width:36px;height:36px;border:none;
    background:rgba(0,0,0,.06);border-radius:50%;cursor:pointer;font-size:18px;
    display:flex;align-items:center;justify-content:center;color:#333;line-height:1;
    flex-shrink:0;
  }
  .nav-close:hover{background:rgba(0,0,0,.12)}
  .nav-mobile-cta{
    display:flex;flex-direction:column;gap:10px;width:100%;margin-top:auto;
    padding:18px 24px 0;border-top:1px solid var(--border);
  }
  .nav-mobile-cta .btn{width:100%;justify-content:center;text-align:center}
  .nav-links a{padding:14px 24px;font-size:16px;border-bottom:1px solid var(--border);width:100%;color:#222 !important;box-sizing:border-box}
  .nav-cta{display:none}
  .nav:not(.scrolled) .nav-burger span{background:#fff}

  .hero-copy h1{font-size:40px}
  .hero-actions{flex-wrap:wrap}
  .hero-stats{gap:20px;flex-wrap:wrap}
  .hero-stats > div strong{font-size:28px}

  .section-title{font-size:30px}
  .features-grid,.pricing-grid,.quotes-grid,.process-grid{grid-template-columns:1fr}
  .testimonial blockquote{font-size:22px}
  .cta-strip h2{font-size:28px}
  .foot-grid{grid-template-columns:1fr}
  .price.featured{transform:none}

  .auth-page{grid-template-columns:1fr}
  .auth-visual{display:none}

  /* Onboarding */
  .onboarding{grid-template-columns:1fr}
  .onboarding-aside{
    position:static;padding:24px 20px;border-radius:0;
    display:flex;flex-direction:column;gap:14px;
  }
  .ob-steps{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px}
  .ob-step{flex:0 0 auto;font-size:11px;padding:8px 10px}
  .ob-step small{display:none}
  .ob-pane{padding:24px 20px}

  /* Wizard modal */
  .modal.wizard-modal{max-width:100vw;width:100vw;height:100vh;border-radius:0;margin:0}
  .wizard{grid-template-columns:1fr}
  .wizard-steps{
    flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);
    padding:14px;gap:6px;
  }
  .wizard-step{flex:0 0 auto;font-size:12px;padding:8px 10px}
  .wizard-step small{display:none}
  .wizard-pane{padding:20px}

  /* Dashboard */
  .kpi-row{grid-template-columns:1fr 1fr}
  .topbar{padding:10px 14px;gap:8px;flex-wrap:wrap}
  .topbar .search{flex:1 1 100%;order:5}
  .crumbs{font-size:12px}
  .grid-2{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .settings-tabs{flex-direction:row;overflow-x:auto;position:static}
  .settings-tabs button{flex:0 0 auto;white-space:nowrap}
  .ai-status-grid{grid-template-columns:1fr}
  .calc-table th,.calc-table td{font-size:12px;padding:6px 8px}

  /* Workflow */
  .wf-content{padding:10px 12px}
  .wf-actions{gap:4px}
  .wf-actions .btn{font-size:11px;padding:6px 8px}

  /* Letter preview */
  .letter{padding:20px 18px;font-size:13px}
  .letter h3{font-size:18px}
}

/* ≤ 640px : mobile large */
@media (max-width: 640px){
  .container{padding:0 18px}
  .hero-copy h1{font-size:34px;line-height:1.1}
  .hero-copy p{font-size:15px}
  .section-title{font-size:26px}
  .section-sub{font-size:14px}
  .btn{padding:10px 18px;font-size:13px}
  .btn-sm{padding:7px 12px;font-size:12px}
  .feature{padding:22px}
  .feature h3{font-size:18px}
  .hero-card{padding:18px}
  .hero-card .head h4{font-size:14px}
  .price{padding:24px}
  .price .amount{font-size:38px}
  .marquee-track{gap:42px}
  .marquee-track > div{font-size:18px}
  .trust{padding:36px 0}

  /* Modal */
  .modal{width:100vw;max-width:100vw;height:100vh;border-radius:0;margin:0}
  .modal-head,.modal-body,.modal-foot{padding-left:16px;padding-right:16px}
  .wizard-foot{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .wizard-foot .wizard-progress{order:3;flex:1 1 100%}

  /* Dashboard kpi single col */
  .kpi-row{grid-template-columns:1fr}
  .table th,.table td{padding:8px 6px;font-size:12px}
  .doc-icon{display:none}

  /* Toast */
  .toast{left:16px;right:16px;bottom:16px;width:auto}

  /* Hide cursor on mobile (safety) */
  .cursor,.cursor-dot{display:none}
}

/* ≤ 420px : très petits écrans */
@media (max-width: 420px){
  .logo{font-size:18px}
  .hero-copy h1{font-size:28px}
  .hero-stats{gap:14px}
  .hero-stats > div strong{font-size:22px}
  .hero-stats > div span{font-size:11px}
  .section-title{font-size:22px}
  .nav.scrolled .nav-inner{padding:0 14px;height:54px}
  .ai-window{max-width:100%}
  .ai-body{padding:14px;font-size:13px}
  .reco-card{flex-direction:column}
}

/* =====================================================
   WIZARD MISE EN DEMEURE — version avancée
   ===================================================== */
.modal.wizard-modal{max-width:1080px;height:88vh}
.modal.wizard-modal .modal-body{padding:0}
.wizard{display:grid;grid-template-columns:260px 1fr;height:100%;min-height:0}
.wizard-steps{
  background:var(--soft-2);border-right:1px solid var(--border);
  padding:24px 18px;display:flex;flex-direction:column;gap:6px;
}
.wizard-step{
  display:flex;align-items:flex-start;gap:12px;padding:12px 12px;border-radius:10px;
  font-size:13px;color:#444;cursor:default;position:relative;
  transition:background .2s,color .2s;
}
.wizard-step .num{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:#eee;color:#666;display:grid;place-items:center;font-weight:600;font-size:12px;
  transition:all .25s var(--transition);
}
.wizard-step strong{display:block;font-size:13px;color:inherit;margin-bottom:2px}
.wizard-step small{font-size:11px;color:var(--muted)}
.wizard-step.done .num{background:var(--success);color:#fff}
.wizard-step.done .num::after{content:"✓"}
.wizard-step.done .num span{display:none}
.wizard-step.active{background:#fff;box-shadow:var(--shadow-soft)}
.wizard-step.active .num{background:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-soft)}
.wizard-step.active strong{color:var(--black)}
.wizard-pane{padding:26px 32px;overflow-y:auto;min-height:0}
.wizard-pane h3{font-family:'Playfair Display',serif;font-size:22px;margin-bottom:6px}
.wizard-pane .lead{color:var(--muted);font-size:13px;margin-bottom:18px}

/* AI analysis streaming */
.ai-stream{background:#0e0e0e;color:#e7e7e7;border-radius:12px;padding:20px;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:13px;min-height:280px;position:relative;overflow:hidden}
.ai-stream::before{
  content:"";position:absolute;top:0;left:0;right:0;height:36px;
  background:#1a1a1a;border-bottom:1px solid #222;
}
.ai-stream .topdots{position:relative;display:flex;gap:5px;margin-bottom:14px;z-index:1}
.ai-stream .topdots i{width:9px;height:9px;border-radius:50%;background:#333}
.ai-stream .topdots i:first-child{background:#900000}
.ai-stream .topdots span{margin-left:10px;color:#666;font-size:11px;font-family:'Inter',sans-serif}
.ai-stream .lines{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.ai-stream .lines div{animation:streamLine .35s var(--transition) both}
.ai-stream .ok{color:#4ade80}
.ai-stream .info{color:#7dd3fc}
.ai-stream .warn{color:#fbbf24}
.ai-stream .ref{color:#c084fc}
.ai-stream .working{color:#999}
.ai-stream .working::after{content:" ▸";animation:blink 1s steps(2) infinite}

.ai-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.ai-status{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:13px;background:#fff}
.ai-status .spin{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
.ai-status.done .spin{border:none;color:var(--success);width:auto;height:auto;animation:none}
.ai-status.done .spin::before{content:"✓";font-weight:700}

/* Strategy / recommendation card */
.reco-card{background:linear-gradient(135deg,#fff,var(--primary-soft));border:1px solid var(--primary);border-radius:12px;padding:18px;margin-bottom:18px;display:flex;gap:16px;align-items:flex-start}
.reco-card .ico{flex:none;width:42px;height:42px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}
.reco-card h4{font-size:15px;margin-bottom:4px}
.reco-card p{font-size:13px;color:#333;margin:0}
.reco-card .reco-meta{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--muted)}
.reco-card .reco-meta b{color:var(--black)}

/* Breakdown calc table */
.calc-table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}
.calc-table th{text-align:left;font-weight:500;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:8px 10px;border-bottom:1px solid var(--border)}
.calc-table td{padding:10px;border-bottom:1px solid var(--border)}
.calc-table tr.total td{font-weight:700;font-size:15px;background:var(--soft);border-bottom:none}
.calc-table .formula{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;color:var(--muted);font-size:11px;display:block;margin-top:3px}

/* Jurisprudence chips */
.law-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.law-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--border-strong);font-size:12px;color:#222}
.law-chip::before{content:"§";color:var(--primary);font-weight:700}

/* Tone selector / radio cards */
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.opt-card{border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:all .2s;background:#fff}
.opt-card:hover{border-color:var(--primary)}
.opt-card.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(144,0,0,.08)}
.opt-card strong{font-size:13px;display:block;margin-bottom:3px}
.opt-card small{font-size:12px;color:var(--muted)}

/* Wizard foot bar */
.wizard-foot{padding:14px 22px;border-top:1px solid var(--border);background:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px}
.wizard-progress{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:0 16px}
.wizard-progress span{display:block;height:100%;background:var(--primary);width:16%;transition:width .35s var(--transition)}

/* =====================================================
   ONBOARDING
   ===================================================== */
.onboarding{min-height:100vh;display:grid;grid-template-columns:340px 1fr;background:var(--white)}
.onboarding-aside{
  background:linear-gradient(160deg,#000,var(--primary));color:#fff;padding:40px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.onboarding-aside .logo{color:#fff;font-size:22px}
.onboarding-aside .logo span{color:#ff9a9a}
.ob-steps{margin-top:50px;display:flex;flex-direction:column;gap:18px}
.ob-step{display:flex;gap:14px;align-items:flex-start;opacity:.55;transition:opacity .3s}
.ob-step.active,.ob-step.done{opacity:1}
.ob-step .num{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:12px;font-weight:600;transition:all .3s}
.ob-step.active .num{background:#fff;color:var(--primary);border-color:#fff}
.ob-step.done .num{background:#ff9a9a;border-color:#ff9a9a;color:#000}
.ob-step.done .num::after{content:"✓"}
.ob-step.done .num span{display:none}
.ob-step strong{font-size:14px;display:block}
.ob-step small{font-size:12px;color:#e9d8d8}

.onboarding-main{padding:60px 80px;overflow-y:auto;max-height:100vh}
.ob-pane{max-width:640px;animation:fadeViewIn .35s var(--transition)}
.ob-pane h1{font-family:'Playfair Display',serif;font-size:34px;margin-bottom:8px}
.ob-pane .lead{color:var(--muted);margin-bottom:28px}
.ob-pane .foot{display:flex;justify-content:space-between;margin-top:30px;align-items:center;font-size:13px;color:var(--muted)}

.ob-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.ob-cards label{cursor:pointer}
.ob-cards input{display:none}
.ob-cards .card-opt{border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;transition:all .2s;background:#fff}
.ob-cards input:checked + .card-opt{border-color:var(--primary);background:var(--primary-soft)}
.ob-cards .card-opt .ico{width:34px;height:34px;border-radius:8px;background:var(--soft);display:grid;place-items:center;flex:none}
.ob-cards input:checked + .card-opt .ico{background:var(--primary);color:#fff}
.ob-cards strong{font-size:13px;display:block}
.ob-cards small{font-size:12px;color:var(--muted)}

/* =====================================================
   NOTIFICATIONS
   ===================================================== */
.notif-wrap{position:relative}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 2px #fff}
.notif-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:380px;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.2);overflow:hidden;
  display:none;z-index:60;
}
.notif-panel.open{display:block;animation:fadeViewIn .2s var(--transition)}
.notif-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.notif-head strong{font-size:14px}
.notif-head a{font-size:12px;color:var(--primary)}
.notif-list{max-height:380px;overflow-y:auto}
.notif-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--soft-2)}
.notif-item.unread{background:#fff7f7}
.notif-item .ico{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
.notif-item .ico.danger{background:var(--primary)}
.notif-item .ico.ok{background:var(--success)}
.notif-item .ico.info{background:#333}
.notif-item p{font-size:13px;margin:0;color:#222}
.notif-item small{color:var(--muted);font-size:11px;display:block;margin-top:2px}
.notif-foot{padding:10px;text-align:center;border-top:1px solid var(--border)}
.notif-foot a{font-size:13px;color:var(--primary);font-weight:500}

/* =====================================================
   PROFIL / RÉGLAGES
   ===================================================== */
.settings-grid{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:flex-start}
.settings-tabs{display:flex;flex-direction:column;gap:4px;position:sticky;top:80px}
.settings-tabs button{
  text-align:left;padding:10px 14px;border-radius:8px;font-size:14px;color:#333;
  transition:background .2s,color .2s;
}
.settings-tabs button:hover{background:var(--soft)}
.settings-tabs button.active{background:var(--primary);color:#fff}
.settings-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:18px}
.settings-section h3{font-family:'Playfair Display',serif;font-size:18px;margin-bottom:4px}
.settings-section .lead{color:var(--muted);font-size:13px;margin-bottom:18px}
.avatar-big{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#000);color:#fff;display:grid;place-items:center;font-weight:600;font-size:22px;font-family:'Playfair Display',serif}

/* Toast */
.toast{
  position:fixed;bottom:24px;right:24px;background:#0e0e0e;color:#fff;
  padding:14px 18px;border-radius:10px;box-shadow:var(--shadow-md);font-size:13px;
  display:flex;gap:10px;align-items:center;z-index:200;
  transform:translateY(80px);opacity:0;transition:all .35s var(--transition);
}
.toast.show{transform:translateY(0);opacity:1}
.toast .ico{color:var(--success);font-weight:700}

section{
    padding: 20px 0px;
}