:root{--primary:#2563eb;--primary-dark:#1d4ed8;--sidebar:#0f172a;--soft:#e8f0fe;--bg:#f4f6fa;--card:#fff;
--text:#0f172a;--muted:#64748b;--border:#e6eaf0;--radius:16px;
--shadow-sm:0 1px 2px rgba(16,24,40,.05);--shadow-md:0 1px 3px rgba(16,24,40,.06),0 12px 32px -16px rgba(16,24,40,.14);}
.theme-boutique{--primary:#2563eb;--primary-dark:#1e40af;--sidebar:#10254d;--soft:#e8f0fe;}
.theme-restaurant{--primary:#ea580c;--primary-dark:#c2410c;--sidebar:#431407;--soft:#ffefe6;}
.theme-quincaillerie{--primary:#d97706;--primary-dark:#b45309;--sidebar:#3b2f10;--soft:#fdf3d8;}
.theme-pharmacie{--primary:#059669;--primary-dark:#047857;--sidebar:#06342a;--soft:#e6f7f1;}
.theme-clinique{--primary:#0284c7;--primary-dark:#0369a1;--sidebar:#082f49;--soft:#e6f4fb;}
.theme-immobilier{--primary:#1e3a8a;--primary-dark:#172554;--sidebar:#101f47;--soft:#e8ecf9;}
.theme-couture{--primary:#9333ea;--primary-dark:#7e22ce;--sidebar:#3b0764;--soft:#f5ebfd;}
.theme-coiffure{--primary:#db2777;--primary-dark:#be185d;--sidebar:#4a0d2b;--soft:#fdeaf3;}
.theme-admin{--primary:#6366f1;--primary-dark:#4f46e5;--sidebar:#0b1220;--soft:#eceefe;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%;}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--text);
font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;overflow-x:hidden;max-width:100%;}
a{text-decoration:none;color:inherit;}
::selection{background:var(--primary);color:#fff;}
::-webkit-scrollbar{width:9px;height:9px;}::-webkit-scrollbar-thumb{background:#c3ccd9;border-radius:99px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;
border:1px solid transparent;cursor:pointer;font-weight:600;font-size:14px;background:#e9edf3;color:var(--text);transition:.18s;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 14px -6px var(--primary);}
.btn-danger{background:#dc2626;color:#fff;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px;}
.btn-block{width:100%;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);
padding:24px;margin-bottom:20px;min-width:0;max-width:100%;}
.card h2{font-size:17px;margin-bottom:16px;letter-spacing:-.01em;}
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.04em;}
input,select,textarea{width:100%;max-width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;background:#fff;transition:.15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--soft);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 16px;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;}
.table{width:100%;border-collapse:collapse;background:#fefeff;}
.table th{background:#f8fafc;text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 14px;}
.table td{padding:12px 14px;border-top:1px solid #e8ebee;font-size:14px;vertical-align:middle;}
.table tr:hover td{background:#f8fafc;}
.card p,.card td,.card th{overflow-wrap:anywhere;}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;}
.badge-success{background:#dcfce7;color:#166534;}.badge-warning{background:#fef9c3;color:#854d0e;}
.badge-danger{background:#fee2e2;color:#991b1b;}.badge-info{background:#dbeafe;color:#1e40af;}.badge-neutral{background:#e2e8f0;color:#334155;}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;border:1px solid transparent;}
.alert-success{background:#f0fdf4;color:#166534;border-color:#bbf7d0;}
.alert-danger{background:#fef2f2;color:#991b1b;border-color:#fecaca;}
.alert-warning{background:#fefce8;color:#854d0e;border-color:#fde68a;}
.alert-info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe;}
.landing-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 6%;
background:rgba(255,255,255,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);}
.landing-nav .logo{font-size:19px;font-weight:800;color:var(--primary);}
.hero{background:radial-gradient(900px 400px at 80% -10%,rgba(255,255,255,.25),transparent),linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;text-align:center;padding:96px 6% 88px;}
.hero h1{font-size:clamp(28px,5vw,44px);max-width:820px;margin:0 auto 16px;line-height:1.15;}
.hero p{opacity:.92;max-width:640px;margin:0 auto 30px;font-size:16.5px;}
.section{padding:64px 6%;}
.section h2{text-align:center;font-size:26px;margin-bottom:8px;}
.section .sub{text-align:center;color:var(--muted);margin-bottom:36px;}
.grid{display:grid;gap:20px;}.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.domain-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:.2s;}
.domain-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.domain-card .ic{font-size:30px;width:64px;height:64px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:16px;}
.domain-card h3{margin:4px 0 6px;font-size:16px;}.domain-card p{font-size:13px;color:var(--muted);}
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;text-align:center;box-shadow:var(--shadow-sm);position:relative;}
.price-card.featured{border-color:var(--primary);box-shadow:var(--shadow-md);}
.price-card.featured::before{content:'POPULAIRE';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:var(--primary);color:#fff;font-size:11px;font-weight:800;padding:4px 14px;border-radius:999px;}
.price-card .price{font-size:32px;font-weight:800;color:var(--primary);margin:12px 0;}
.price-card ul{list-style:none;text-align:left;margin:18px 0;font-size:14px;color:var(--muted);}
.price-card li{padding:6px 0;}.price-card li::before{content:'✅ ';}
.landing-footer{background:#fbfcfd;color:#94a3b8;text-align:center;padding:30px;font-size:14px;}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
background:radial-gradient(700px 300px at 20% 0%,rgba(255,255,255,.18),transparent),linear-gradient(135deg,var(--primary),var(--primary-dark));padding:30px;}
.auth-card{background:#fff;border-radius:20px;padding:36px;width:100%;max-width:640px;box-shadow:0 24px 60px -20px rgba(0,0,0,.4);border-top:6px solid var(--primary);}
.auth-card h1{font-size:22px;margin-bottom:6px;}.auth-card .hint{color:var(--muted);font-size:14px;margin-bottom:10px;}
.domain-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;}
.domain-pick label{margin:0;cursor:pointer;}.domain-pick input{display:none;}
.dc-box{display:block;text-align:center;border:2px solid #e2e8f0;border-radius:12px;padding:12px 6px;font-size:13px;transition:.15s;}
.dc-box .ic{font-size:24px;display:block;margin-bottom:4px;}
.domain-pick input:checked + .dc-box{border-color:var(--primary);background:var(--soft);font-weight:700;}
.plan-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.plan-pick label{margin:0;cursor:pointer;}.plan-pick input{display:none;}
.pl-box{display:block;border:2px solid #e2e8f0;border-radius:12px;padding:14px;font-size:13px;}
.pl-box b{display:block;font-size:15px;}
.plan-pick input:checked + .pl-box{border-color:var(--primary);background:var(--soft);}
.app-shell{display:flex;min-height:100vh;position:relative;max-width:100%;}
.sidebar{width:260px;flex-shrink:0;background:linear-gradient(180deg,var(--sidebar),#0a1122 130%);color:#cbd5e1;
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30;}
.sidebar .brand{font-weight:800;font-size:16.5px;color:#fff;padding:22px 20px 10px;}
.sidebar .company{padding:0 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar .company strong{display:block;color:#fff;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar .company small{font-size:12px;color:#94a3b8;}
.sidebar nav{padding:12px 0;flex:1;}
.sidebar nav a{display:flex;align-items:center;gap:8px;padding:11px 20px;font-size:14px;transition:.15s;}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar nav a.active{background:linear-gradient(90deg,var(--primary),var(--primary-dark));color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #fff;}
.nav-sep{border-top:1px solid rgba(255,255,255,.08);margin:10px 0;}
.soon-tag{font-size:10px;background:rgba(255,255,255,.15);border-radius:999px;padding:2px 7px;margin-left:auto;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);
padding:12px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;}
.topbar h1{font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;}
.userbox{display:flex;align-items:center;gap:10px;font-size:14px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.userbox .btn-outline{border-color:#cbd5e1;color:var(--text);}
.content{padding:24px;max-width:1500px;width:100%;margin:0 auto;min-width:0;}
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);
background:#fff;border-radius:10px;font-size:18px;cursor:pointer;flex-shrink:0;}
.backdrop{display:none;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:22px;}
.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-sm);min-width:0;}
.kpi .ic{font-size:24px;width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--soft);}
.kpi .val{font-size:19px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kpi .lbl{font-size:12px;color:var(--muted);}
.pos-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start;}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.product-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;transition:.15s;}
.product-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);}
.product-card .p-name{font-weight:700;font-size:14px;}
.product-card .p-price{color:var(--primary);font-weight:800;margin:6px 0;}
.product-card .p-stock{font-size:12px;color:var(--muted);margin-bottom:8px;}
.qty-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.qty-ctrl form{display:inline;}
.receipt{max-width:360px;margin:0 auto;background:#fff;border:1px dashed #94a3b8;border-radius:8px;padding:22px;font-family:'Courier New',monospace;font-size:14px;}
.receipt h2{text-align:center;font-size:18px;}
.receipt .line{border-top:1px dashed #94a3b8;margin:10px 0;}
.receipt table{width:100%;font-size:13px;}
.doc-print{max-width:760px;margin:0 auto;background:#fff;padding:40px;border-radius:12px;box-shadow:var(--shadow-md);}
.doc-print .doc-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:3px solid var(--primary);padding-bottom:14px;margin-bottom:18px;}
.doc-print table{width:100%;border-collapse:collapse;margin:16px 0;}
.doc-print th{background:#f1f5f9;text-align:left;padding:10px;font-size:13px;}
.doc-print td{padding:10px;border-bottom:1px solid #eef2f7;font-size:14px;}
.order-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;}
.order-tab{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:8px 14px;font-size:13px;flex-shrink:0;}
.order-tab.active{border-color:var(--primary);background:var(--soft);}
.kitchen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.kitchen-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);border-top:6px solid var(--primary);box-shadow:var(--shadow-sm);padding:16px;}
.kitchen-card.st-open{border-top-color:#0284c7;}.kitchen-card.st-in_kitchen{border-top-color:#d97706;}.kitchen-card.st-ready{border-top-color:#16a34a;}
.kitchen-card .time{font-size:12px;color:var(--muted);margin-top:4px;}
@media(max-width:960px){.pos-grid{grid-template-columns:minmax(0,1fr);}}
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100%;width:270px;transform:translateX(-105%);transition:transform .25s ease;box-shadow:0 0 60px rgba(0,0,0,.35);}
  .app-shell.nav-open .sidebar{transform:none;}
  .app-shell.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:25;}
  .menu-toggle{display:inline-flex;}
  .content{padding:14px;}
  .auth-card{padding:24px 18px;} 
  .price-card.featured{transform:none;}
}
@media(max-width:600px){.doc-print{padding:20px;}}
@media print{
  .sidebar,.topbar,.no-print,.menu-toggle,.backdrop{display:none !important;}
  .content{padding:0;max-width:none;}
  .table-scroll{overflow:visible;}
  html,body{overflow:visible !important;}
  body{background:#fff;}
  .receipt,.doc-print{border:none;box-shadow:none;}
}
/* ===== ICÔNES SVG PRO ===== */
.svgi{vertical-align:-0.14em;flex-shrink:0;}
.m-ic{width:27px;height:27px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.09);border-radius:8px;transition:.2s;color:#c7cdea;}
.sidebar nav a{display:flex;align-items:center;gap:10px;}
.sidebar nav a:hover .m-ic{background:rgba(255,255,255,.16);color:#fff;}
.sidebar nav a.active .m-ic{background:rgba(255,255,255,.24);color:#fff;}
.brand{display:flex;align-items:center;gap:9px;}
.brand .svgi{color:var(--primary);}
.theme-admin .brand .svgi, .sidebar .brand .svgi{color:#7c8cf8;}
.company small{display:flex;align-items:center;gap:6px;}
.domain-card .ic{color:var(--primary);}
.domain-card .ic .svgi{width:30px;height:30px;}
.kpi .ic .svgi{width:24px;height:24px;color:var(--primary-dark);}
.landing-nav .logo{display:flex;align-items:center;gap:8px;}
.btn .svgi{width:16px;height:16px;}
/* ============================================================
   CORRECTIF DÉBORDEMENT KPI (montants coupés)
   ============================================================ */
.kpi{min-width:0;gap:12px;padding:16px;}
.kpi .ic{width:46px;height:46px;flex-shrink:0;}
.kpi .ic .svgi{width:21px;height:21px;}
.kpi > div:not(.ic){min-width:0;flex:1;}
.kpi .val{
  font-size:17px;
  line-height:1.25;
  white-space:normal;        /* autorise le retour à la ligne */
  overflow-wrap:anywhere;    /* coupe proprement si nécessaire */
  overflow:visible;
  text-overflow:clip;
}
.kpi .lbl{font-size:11.5px;}

/* Cartes stats de l'admin : même correctif */
.stat-card{min-width:0;}
.stat-card .stat-val{white-space:normal;overflow-wrap:anywhere;font-size:21px;}

/* Grille un peu plus large sur petits écrans */
@media(max-width:480px){
  .kpi .val{font-size:15px;}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}
/* ============================================================
   SUPER TERANGA — RESPONSIVE UNIVERSEL (mobile & tablette)
   ============================================================ */

/* --- Garde-fous anti-débordement globaux --- */
html, body { max-width: 100%; overflow-x: clip; }
body { overflow-x: hidden; }
.app-shell, .main, .content, .card, .topbar { max-width: 100%; min-width: 0; }
img, svg { max-width: 100%; }
.table td, .table th { overflow-wrap: anywhere; white-space: normal; }
.table td form { max-width: 100%; }

/* ================= TABLETTE (≤ 1024px) ================= */
@media (max-width: 1024px) {
  .sidebar { width: 230px; }
  .admin-sidebar { width: 240px; }
  .content { padding: 20px; }
  .pos-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .sidebar nav a { padding: 10px 14px; font-size: 13.5px; }
}

/* --- Grilles en style inline (rapports, facturation…) : 1 colonne --- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .pos-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================= MOBILE (≤ 860px) ================= */
@media (max-width: 860px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar h1 { font-size: 16px; }
  .userbox { font-size: 13px; gap: 8px; }
  .userbox .btn { padding: 6px 10px; font-size: 12.5px; }
  .content { padding: 14px; }
  .card { padding: 18px 14px; border-radius: 14px; margin-bottom: 14px; }
  .card h2 { font-size: 15.5px; }

  .kpi { padding: 14px; gap: 10px; }
  .kpi .ic { width: 42px; height: 42px; }
  .kpi .val { font-size: 16px; }
  .kpi .lbl { font-size: 11px; }

  .form-grid { grid-template-columns: 1fr 1fr; }
  .chip-row { gap: 6px; }
  .chip-row .search-box { margin-left: 0; width: 100%; max-width: 100%; }
  .chip-row form { width: 100%; flex-wrap: wrap; }
  .chip-row form input { flex: 1; min-width: 120px; }

  .order-tabs { gap: 6px; }
  .doc-print { padding: 24px 16px; }
  .doc-print .doc-head { flex-direction: column; align-items: flex-start; }
  .receipt { padding: 16px; }

  .landing-nav { padding: 12px 4%; }
  .hero { padding: 120px 5% 70px; }
  .lp-section { padding: 60px 5%; }
  .lp-cta-band { margin: 0 4% 60px; padding: 44px 22px; }
  .lp-footer { padding: 44px 5% 24px; }
  .lp-fgrid { grid-template-columns: 1fr 1fr; }

  .rg-left, .lg-left { padding: 36px 22px; }
  .rg-card, .lg-card { padding: 26px 18px; }
  .rg-grid { grid-template-columns: 1fr; }
}

/* ================= PETIT MOBILE (≤ 560px) ================= */
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .product-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .product-card { padding: 10px; }
  .qty-ctrl { gap: 4px; }
background
  .btn { padding: 9px 14px; font-size: 13.5px; } 
  .btn-sm { padding: 6px 10px; font-size: 12.5px; }
  .table th, .table td { padding: 10px 8px; font-size: 13px; }
  .table td form { display: inline-flex; flex-wrap: wrap; gap: 4px; }

  /* Empêche le zoom automatique iOS à la saisie */
  input, select, textarea { font-size: 16px; }

  .rg-domains { grid-template-columns: repeat(2, 1fr); }
  .rg-plans { grid-template-columns: 1fr; }
  .domain-pick { grid-template-columns: repeat(2, 1fr); }
  .plan-pick { grid-template-columns: 1fr; }
  .auth-card { padding: 24px 16px; }

  .lp-stats { gap: 0; }
  .lp-stat { padding: 8px 14px; }
  .lg-demo .chips { gap: 6px; }
}

/* ================= TRÈS PETIT (≤ 380px) ================= */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 15px; }
  .hero h1 { font-size: 26px; }
}
/* ============================================================
   CORRECTIF : valeurs KPI toujours lisibles (même dans les
   bannières colorées qui imposent color:#fff)
   ============================================================ */
.kpi { color: var(--text); }
.kpi .val { color: var(--text); }
.kpi .lbl { color: var(--muted); }
/* ============================================================
   SECTION ÉTAPES - DESIGN MODERNE
   ============================================================ */

.steps-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.steps-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0e7ff, transparent);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.badge-pill {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.section-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.2;
}

.section-header p {
  font-size: 16px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  position: relative;
}

.step-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  position: relative;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  overflow: hidden;
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.step-card:hover {
  transform: translateY(-8px);
  border-color: #6366f1;
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
}

.step-card:hover::before {
  transform: scaleX(1);
}

.step-card.featured {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
  transform: scale(1.05);
}

.step-card.featured h3,
.step-card.featured p {
  color: #fff;
}

.step-card.featured .step-number {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.step-card.featured .step-icon {
  background: rgba(255, 255, 255, 0.2);
}

.step-card.featured .step-features span {
  color: rgba(255, 255, 255, 0.9);
}

.step-number {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 48px;
  font-weight: 900;
  color: #e0e7ff;
  line-height: 1;
}

.step-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #fff;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

.step-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
}

.step-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.step-features span {
  font-size: 14px;
  color: #475569;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .steps-section {
    padding: 60px 0;
  }
  
  .steps-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .step-card.featured {
    transform: scale(1);
    order: -1;
  }
}

/* Animation au scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-card {
  animation: fadeInUp 0.6s ease both;
}

.step-card:nth-child(1) { animation-delay: 0.1s; }
.step-card:nth-child(2) { animation-delay: 0.2s; }
.step-card:nth-child(3) { animation-delay: 0.3s; }