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

:root {
  --blue: #EC4899;
  --blue-dark: #db2777;
  --blue-light: #fdf2f8;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--gray-900); background: #fff; line-height: 1.5; }

a { color: inherit; text-decoration: none; }

/* ─── NAV ─── */
.nav { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--gray-200); max-width: 1100px; margin: 0 auto; width: 100%; }
.nav-brand { font-size: 1.25rem; font-weight: 700; color: var(--blue); }
.nav-links { display:flex; gap:1.25rem; }
.nav-links a { font-size:.875rem; color:var(--gray-500); transition:color .15s; }
.nav-links a:hover { color:var(--gray-900); }
nav { border-bottom: 1px solid var(--gray-200); }

/* ─── BUTTONS ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.5rem; border-radius:var(--radius); font-weight:600; font-size:.875rem; cursor:pointer; border:none; transition:all .15s; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-outline { background:#fff; color:var(--gray-700); border:1px solid var(--gray-200); }
.btn-outline:hover { background:var(--gray-50); }
.btn-lg { padding:1rem 2rem; font-size:1rem; border-radius:var(--radius-lg); }
.btn-block { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-danger { background:#fff; color:var(--red); border:1px solid var(--gray-200); }

/* ─── CARD ─── */
.card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.5rem; }

/* ─── FORM ─── */
.form-group { display:flex; flex-direction:column; gap:.375rem; }
label { font-size:.875rem; font-weight:500; color:var(--gray-700); }
input[type="email"], input[type="text"], textarea {
  padding:.75rem 1rem; border:1.5px solid var(--gray-200); border-radius:var(--radius);
  font-size:.9375rem; color:var(--gray-900); background:#fff; outline:none; transition:border-color .15s;
  font-family:inherit; width:100%;
}
input:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }

/* ─── ALERT ─── */
.alert { padding:.875rem 1rem; border-radius:var(--radius); font-size:.875rem; }
.alert-error { background:var(--red-bg); color:var(--red); }
.alert-success { background:var(--green-bg); color:var(--green); }
.alert-info { background:var(--blue-light); color:var(--blue-dark); }

/* ─── BADGE ─── */
.badge { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .75rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-blue { background:var(--blue-light); color:var(--blue); }
.badge-green { background:var(--green-bg); color:var(--green); }
.badge-gray { background:var(--gray-100); color:var(--gray-600,#4b5563); }
.dot { width:.5rem; height:.5rem; border-radius:50%; }
.dot-green { background:var(--green); }
.dot-gray { background:var(--gray-400); }

/* ─── SPINNER ─── */
.spinner { width:1.5rem; height:1.5rem; border:3px solid var(--gray-200); border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite; }
.spinner-lg { width:3rem; height:3rem; border-width:4px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── TYPING DOTS ─── */
.typing-dot { width:.5rem; height:.5rem; background:var(--gray-400); border-radius:50%; animation:bounce .9s infinite; }
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* ─── LAYOUT HELPERS ─── */
.page { max-width: 1100px; margin:0 auto; padding: 2.5rem 1.5rem; }
.page-narrow { max-width: 480px; margin:0 auto; padding: 3rem 1.5rem; }
.page-medium { max-width: 720px; margin:0 auto; padding: 2.5rem 1.5rem; }
.section-title { font-size:1.125rem; font-weight:600; color:var(--gray-900); margin-bottom:1rem; }
.text-muted { color:var(--gray-500); font-size:.875rem; }
.mt-1 { margin-top:.25rem; } .mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.75rem; }
.mt-4 { margin-top:1rem; } .mt-6 { margin-top:1.5rem; } .mt-8 { margin-top:2rem; }
.mb-1 { margin-bottom:.25rem; } .mb-2 { margin-bottom:.5rem; } .mb-4 { margin-bottom:1rem; }
.mb-6 { margin-bottom:1.5rem; } .mb-8 { margin-bottom:2rem; }
.flex { display:flex; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-2 { gap:.5rem; } .gap-3 { gap:.75rem; } .gap-4 { gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.text-center { text-align:center; }
.hidden { display:none !important; }

/* ─── LANDING ─── */
.hero { text-align:center; padding:5rem 1.5rem 4rem; }

/* Hero pleine largeur */
.hero-full { position:relative; width:100%; overflow:hidden; background:#f0f0ee; display:flex; align-items:stretch; min-height:600px; }
.hero-bg-img { display:block; width:55%; max-width:680px; object-fit:contain; object-position:left bottom; flex-shrink:0; }
/* Dégradé vers la droite uniquement */
.hero-full::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to right, transparent 35%, rgba(240,240,238,.5) 48%, rgba(240,240,238,.92) 62%, #f0f0ee 75%);
  pointer-events:none;
}
.hero-overlay-text {
  position:absolute; top:50%; right:6%; transform:translateY(-50%);
  max-width:420px; text-align:left; z-index:1;
}
.hero-overlay-text h1 { font-size:3.25rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--gray-900); margin-bottom:1.25rem; }
.hero-overlay-text h1 span { color:var(--blue); }
.hero-overlay-text p { font-size:1.0625rem; color:var(--gray-500); margin-bottom:2rem; line-height:1.65; }

@media(max-width:860px) {
  .hero-full { flex-direction:column; min-height:auto; background:#fff; }
  .hero-full::after { display:none; }
  .hero-bg-img { width:100%; max-width:100%; max-height:420px; object-fit:contain; object-position:center top; }
  .hero-overlay-text { position:static; transform:none; max-width:100%; text-align:center; padding:2rem 1.5rem; background:#fff; }
  .hero-overlay-text h1 { font-size:2rem; }
  .hero-overlay-text p { margin:0 auto 1.5rem; }
}
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:var(--blue-light); color:var(--blue); font-size:.8125rem; font-weight:600; padding:.375rem 1rem; border-radius:999px; margin-bottom:2rem; }
.hero h1 { font-size:3rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--gray-900); margin-bottom:1.25rem; }
.hero h1 span { color:var(--blue); }
.hero p { font-size:1.1875rem; color:var(--gray-500); max-width:560px; margin:0 auto 2.5rem; line-height:1.65; }
.hero-sub { font-size:.875rem; color:var(--gray-400); margin-top:.75rem; }
.features { background:var(--gray-50); padding:5rem 1.5rem; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.5rem; max-width:960px; margin:0 auto; }
.feature-card { background:#fff; border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow); }
.step-num { width:2.5rem; height:2.5rem; background:var(--blue-light); color:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; margin-bottom:1rem; }
.pricing-section { background:var(--blue); padding:5rem 1.5rem; color:#fff; text-align:center; }
.pricing-card { background:rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:2.5rem; max-width:420px; margin:0 auto; backdrop-filter:blur(8px); }
.price-big { font-size:3.5rem; font-weight:800; }
.price-period { color:rgba(255,255,255,.7); font-size:1rem; }
.pricing-features { list-style:none; text-align:left; margin:1.5rem 0 2rem; display:flex; flex-direction:column; gap:.75rem; }
.pricing-features li { display:flex; align-items:center; gap:.625rem; font-size:.9375rem; color:rgba(255,255,255,.85); }
.pricing-features li::before { content:"✓"; color:rgba(255,255,255,.6); font-weight:700; }
.btn-white { background:#fff; color:var(--blue); font-weight:700; }
.btn-white:hover { background:var(--blue-light); }

/* ─── CHAT ─── */
.chat-layout { display:flex; gap:1.5rem; height:calc(100vh - 73px); padding:1.5rem; max-width:1100px; margin:0 auto; }
.chat-pane { flex:1; display:flex; flex-direction:column; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.preview-pane { width:420px; flex-shrink:0; display:flex; flex-direction:column; gap:1rem; }
.chat-messages { flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:.875rem; scroll-behavior:smooth; }
.msg { display:flex; gap:.625rem; align-items:flex-start; }
.msg-user { flex-direction:row-reverse; }
.avatar { width:2rem; height:2rem; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.avatar-kevin { background:transparent; overflow:hidden; }
.avatar-kevin img { width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:50%; }
.avatar-user { background:var(--gray-900); color:#fff; }
.bubble { max-width:75%; padding:.75rem 1rem; border-radius:var(--radius-lg); font-size:.9rem; line-height:1.55; }
.bubble-laurin { background:var(--gray-50); color:var(--gray-900); border-top-left-radius:4px; }
.bubble-user { background:var(--blue); color:#fff; border-top-right-radius:4px; }
.typing-bubble { display:flex; gap:.3rem; align-items:center; padding:.75rem 1rem; }
.chat-input-bar { display:flex; gap:.75rem; padding:1rem; border-top:1px solid var(--gray-200); }
.chat-input-bar input { flex:1; }

/* ─── LINKEDIN PREVIEW ─── */
.li-card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.li-header { padding:1rem 1.25rem; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; gap:.75rem; }
.li-avatar { width:3rem; height:3rem; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.25rem; font-weight:700; flex-shrink:0; }
.li-name { font-weight:600; font-size:.9rem; color:var(--gray-900); }
.li-date { font-size:.75rem; color:var(--gray-400); margin-top:.125rem; }
.li-content { padding:1rem 1.25rem; font-size:.9rem; color:#000; line-height:1.7; white-space:pre-line; }
.li-actions { padding:.875rem 1.25rem; display:flex; gap:.75rem; }

/* ─── DASHBOARD ─── */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
.stat-card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; box-shadow:var(--shadow); }
.stat-num { font-size:2rem; font-weight:700; color:var(--gray-900); }
.stat-label { font-size:.8125rem; color:var(--gray-400); margin-top:.25rem; }
.post-list { display:flex; flex-direction:column; gap:.75rem; }
.post-item { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1.25rem; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; transition:box-shadow .15s; }
.post-item:hover { box-shadow:var(--shadow-md); }
.post-preview-text { font-size:.875rem; color:var(--gray-700); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-date { font-size:.75rem; color:var(--gray-400); white-space:nowrap; flex-shrink:0; }

/* ─── TOAST ─── */
#toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--gray-900); color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius); font-size:.875rem; font-weight:500; z-index:9999; transform:translateY(4px); opacity:0; transition:all .25s; pointer-events:none; }
#toast.show { transform:translateY(0); opacity:1; }

/* ─── RESPONSIVE ─── */
@media(max-width:768px) {
  .hero h1 { font-size:2rem; }
  .grid-3, .stats-grid { grid-template-columns:1fr 1fr; }
  .chat-layout { flex-direction:column; height:auto; }
  .preview-pane { width:100%; }
  .nav-links a:not(:last-child) { display:none; }
}
@media(max-width:480px) {
  .grid-3, .stats-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:1.75rem; }
}