/* Variables namespacées pour le parcours vente (vert) */
/* Les variables globales (--color-*, --font-*, --spacing-*) sont définies dans global.css */
:root{
  --vente-accent: #FF6E14;
  --vente-accent-dark: #0b2b18;
  --vente-accent-light: rgba(30, 86, 49, 0.1);
  --vente-gradient: linear-gradient(90deg, #FF6E14, #0b2b18);
  /* Aliases pour rétrocompatibilité interne */
  --accent: var(--vente-accent);
  --accent-dark: var(--vente-accent-dark);
  --muted: var(--color-text-secondary, #6b6b6b);
  --bg: var(--color-bg-white, #ffffff);
  --surface: #fbfbfb;
  --radius-lg: var(--border-radius-lg, 18px);
  --container-max: 1100px;
  --shadow-soft: 0 8px 30px rgba(6,22,14,0.06);
  --shadow-sm: 0 6px 18px rgba(6,22,14,0.03);
  --transition-fast: 160ms;
  --transition-medium: 180ms;
}

/* Global box-sizing and accessible focus outline */
*,*::before,*::after{box-sizing:border-box}
:focus{outline-offset:4px}
:focus-visible{outline:3px solid rgba(30,86,49,0.14);outline-offset:4px}

/* Page title */
.page-title{
  text-align:center;
  font-size:clamp(26px,3.6vw,38px);
  font-weight:800;
  color:var(--accent);
  margin:40px auto 20px;
  letter-spacing:-0.5px;
  max-width:90ch;
}

/* Intro section and container */
.intro-vente{
  display:flex;
  justify-content:center;
  padding:40px 20px;
  background:linear-gradient(180deg,var(--surface),#fff);
}
.intro-box{
  width:100%;
  max-width:820px;
  background:var(--bg);
  padding:clamp(28px,3.2vw,48px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(6,22,14,0.03);
  animation:fadeIn .6s ease-out;
}

/* Titles & copy */
.intro-title{font-size:clamp(20px,2.6vw,28px);font-weight:800;color:var(--accent);margin:0 0 12px;line-height:1.05;max-width:60ch}
.steps-title{margin-top:28px;font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--accent)}
.intro-paragraph{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:18px;max-width:68ch;font-weight:300}


/* Steps list (vertical fallback) */
/*.steps-list{
  list-style:none;
  padding:0;
  margin:18px 0 28px;
  display:grid;
  gap:10px;
}
.steps-list li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(180deg,#f7fbf7,#f4f9f4);
  color:var(--accent);
  font-size:15.5px;
  border:1px solid rgba(30,86,49,0.06);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-medium) ease,box-shadow var(--transition-medium) ease,background var(--transition-medium) ease;
}
.steps-list li::before{
  content:"";
  width:12px;height:12px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  flex:0 0 12px;
  box-shadow:0 4px 10px rgba(11,18,32,0.06);
}
.steps-list li:hover,
.steps-list li:focus-within{
  transform:translateX(6px);
  box-shadow:0 10px 30px rgba(6,22,14,0.06);
  background:linear-gradient(180deg,#f0fbf0,#eef9ee);
}
.steps-list li.is-active{
  background:linear-gradient(90deg,#eaf6ef,#f6fbf9);
  border-left:4px solid var(--accent);
  transform:none;
}*/




/* CTA */
.btn-start{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  color:#fff;
  padding:12px 22px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(11,18,32,0.10);
  transition:transform var(--transition-fast) ease,box-shadow var(--transition-fast) ease,filter var(--transition-fast) ease;
}
.btn-start:hover,.btn-start:focus{transform:translateY(-3px);filter:saturate(1.05);box-shadow:0 20px 50px rgba(11,18,32,0.12)}
.btn-start:focus-visible{outline:3px solid rgba(30,86,49,0.14);outline-offset:4px}

/* Small utility text */
.small-muted{font-size:13px;color:rgba(6,22,14,0.55)}

/* Keyframes */
@keyframes fadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Steps frise (horizontal scroller) */
.steps-frise{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 6px;
  margin:18px 0 22px;
  scroll-snap-type:x mandatory;
}
.steps-frise::after{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(6,22,14,0.04),transparent);
  margin-top:12px;
}

/* Horizontal step cards */
/*.steps-list.horizontal{display:flex;gap:12px;align-items:stretch;padding:6px;margin:0}
.step{flex:0 0 auto;min-width:220px;max-width:320px;scroll-snap-align:center}
.step-btn{
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(6,22,14,0.06);
  background:linear-gradient(180deg,#fff,#fbfffb);
  color:#0b1a14;
  text-align:left;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:transform var(--transition-fast) ease,box-shadow var(--transition-fast) ease,background var(--transition-fast) ease;
  box-shadow:var(--shadow-sm);
}
.step-marker{
  width:40px;height:40px;min-width:40px;display:inline-grid;place-items:center;border-radius:10px;font-weight:700;color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  box-shadow:0 8px 20px rgba(11,18,32,0.08);flex-shrink:0;font-size:14px;
}
.step-label{display:block;color:rgba(6,22,14,0.9);font-weight:700;line-height:1.15}
.step .step-sub{display:block;font-size:13px;color:rgba(6,22,14,0.6);font-weight:400;margin-top:4px}*/

/* States */
.step.step-completed .step-btn{background:linear-gradient(90deg,#f0fbf0,#eef9ee);border-left:4px solid var(--accent)}
.step.step-completed .step-marker{background:linear-gradient(90deg,var(--accent),var(--accent-dark))}
.step.step-active .step-btn{background:linear-gradient(90deg,#eaf6ef,#f6fbf9);border:1px solid rgba(30,86,49,0.12);transform:translateY(-2px)}
.step.step-active .step-marker{box-shadow:0 18px 40px rgba(11,18,32,0.12)}
.step:not(.step-completed):not(.step-active) .step-btn{background:linear-gradient(180deg,#fff,#fcfffc);border:1px solid rgba(6,22,14,0.04);color:rgba(6,22,14,0.8)}
.step:not(.step-completed):not(.step-active) .step-marker{background:linear-gradient(180deg,#f1f6f1,#eef7ee);color:rgba(6,22,14,0.7)}

/* CTA alignment inside intro box */
.intro-box .btn-start{margin-top:18px;display:inline-flex;align-items:center;gap:10px}

/* Responsive adjustments */
@media (max-width:980px){
  .intro-box{padding:24px;border-radius:14px}
  .page-title{font-size:28px}
  .intro-vente{padding:28px 16px}
  .steps-list{gap:8px}
  .btn-start{width:100%;justify-content:center;padding:12px;border-radius:10px}
  .steps-list.horizontal{flex-wrap:nowrap}
}
@media (max-width:720px){
  .step{min-width:180px;max-width:260px}
  .step-marker{width:36px;height:36px;min-width:36px;font-size:13px;border-radius:8px}
  .step-btn{padding:10px 12px;font-size:14px;border-radius:10px}
  .steps-list.horizontal{gap:10px}
}
@media (max-width:520px){
  .intro-vente{padding:20px 12px}
  .page-title{font-size:22px}
  .intro-box{padding:20px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .intro-box{animation:none}
  .steps-list li,.step-btn,.btn-start{transition:none!important;transform:none!important}
}

/* Dark mode variant (kept minimal) */
@media (prefers-color-scheme:dark){
  :root{--bg:#071212;--surface:#071212;--vente-accent:#7fd6a6;--accent:#7fd6a6;--vente-accent-dark:#4aa36b;--accent-dark:#4aa36b;--muted:#cbd5cf}
  .intro-box{background:var(--bg);box-shadow:0 8px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.03)}
  .page-title,.intro-title,.steps-title{color:var(--accent)}
  .intro-paragraph,.steps-list li{color:var(--muted)}
  .steps-list li{background:linear-gradient(180deg,#071815,#0b1a14);border:1px solid rgba(255,255,255,0.03)}
  .btn-start{box-shadow:0 12px 30px rgba(0,0,0,0.6)}
}

/* Layout principal pour sidebar + contenu */
.vente-container {
    display: flex;
    min-height: 100vh;
    background: #f8f9fa;
}

.step-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}