/* ==========================================================================
   BOT LBC — Design tokens & base
   DA : Leboncoin (blanc / orange) revisitée façon SaaS premium
   ========================================================================== */

:root {
  /* Brand — orange Leboncoin, modernisé */
  --orange-50:  #FFF3EC;
  --orange-100: #FFE2CF;
  --orange-200: #FFC59E;
  --orange-300: #FFA268;
  --orange-400: #FF8638;
  --orange-500: #FF6E14;   /* primaire */
  --orange-600: #F4530A;
  --orange-700: #C93F07;
  --orange-800: #9E330B;
  --orange-900: #7E2C0E;

  /* Encres & neutres */
  --ink:        #14161F;
  --ink-soft:   #2A2E3C;
  --slate-700:  #3C4254;
  --slate-600:  #525a6e;
  --slate-500:  #6b7488;
  --slate-400:  #99a0b3;
  --slate-300:  #c7ccd9;
  --slate-200:  #e3e6ee;
  --slate-100:  #eef0f6;
  --slate-50:   #f6f7fb;
  --paper:      #ffffff;
  --canvas:     #fbfbfd;

  /* Sémantique */
  --green-500:  #12b66b;
  --green-50:   #e6f8ef;
  --red-500:    #f0453a;
  --red-50:     #fdecea;
  --amber-500:  #f6a609;
  --amber-50:   #fdf3df;
  --blue-500:   #2f6bff;
  --blue-50:    #eaf0ff;
  --violet-500: #7a5cff;
  --violet-50:  #efeaff;

  /* Surfaces & bordures */
  --bg:         var(--canvas);
  --surface:    var(--paper);
  --surface-2:  var(--slate-50);
  --border:     #e9ebf2;
  --border-2:   #e0e3ec;

  /* Typo */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font-body);

  /* Rayons */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Ombres — douces, premium */
  --sh-xs: 0 1px 2px rgba(20,22,31,.06);
  --sh-sm: 0 2px 8px rgba(20,22,31,.06), 0 1px 2px rgba(20,22,31,.04);
  --sh-md: 0 8px 26px -8px rgba(20,22,31,.12), 0 3px 8px -4px rgba(20,22,31,.08);
  --sh-lg: 0 22px 50px -16px rgba(20,22,31,.20), 0 8px 18px -10px rgba(20,22,31,.12);
  --sh-orange: 0 14px 34px -12px rgba(255,110,20,.55);
  --sh-glow: 0 0 0 4px rgba(255,110,20,.14);

  --ring: 0 0 0 4px rgba(255,110,20,.18);
  --maxw: 1200px;
  --header-h: 70px;
  --sidebar-w: 256px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::selection { background: var(--orange-200); color: var(--ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------ Typo ------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p { color: var(--slate-600); }
strong { font-weight: 700; color: var(--ink); }
small { font-size: .82rem; }

/* ------------------------------ Layout utils ---------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container-wide { max-width: 1320px; }
.section { padding-block: clamp(64px, 9vw, 130px); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.muted { color: var(--slate-500); }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.full { width: 100%; }

/* Couleurs sémantiques rapides */
.c-orange { color: var(--orange-600); }
.c-green  { color: var(--green-500); }
.c-red    { color: var(--red-500); }
.c-amber  { color: var(--amber-500); }
.c-blue   { color: var(--blue-500); }
.c-ink    { color: var(--ink); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-600);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange-500); border-radius: 2px; }

/* Gradients texte */
.grad-text {
  background: linear-gradient(100deg, var(--orange-500), var(--orange-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Reveal au scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Animations clés */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,110,20,.35); } 70% { box-shadow: 0 0 0 12px rgba(255,110,20,0); } 100% { box-shadow: 0 0 0 0 rgba(255,110,20,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }

.spin { animation: spin 1s linear infinite; }