/*
Theme Name: KMT Development
Theme URI: https://kmtdevelopment.com
Author: KMT Development
Description: Thème custom KMT Development — dark, bordeaux, Apple-inspired
Version: 1.5
*/

/* === VARIABLES & RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #08080D;
  --surface: #111116;
  --surface2: #1A1A22;
  --border: rgba(255,255,255,0.07);
  --accent: #9B1B30;
  --accent-mid: #C0243C;
  --accent-light: #E8395A;
  --accent-soft: rgba(155,27,48,0.12);
  --accent-glow: rgba(155,27,48,0.35);
  --text: #FFFFFF;
  --text-2: #9494A8;
  --text-3: #4A4A60;
  --radius: 12px;
  --radius-lg: 20px;
  --glass-bg: rgba(12,12,18,0.72);
  --glass-border: rgba(255,255,255,0.09);
}

[data-theme="light"] {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface2: #F0F0F3;
  --border: rgba(0,0,0,0.08);
  --text: #1D1D1F;
  --text-2: #3A3A3C;
  --text-3: #8E8E93;
  --glass-bg: rgba(255,255,255,0.80);
  --glass-border: rgba(0,0,0,0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* === NAV === */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 52px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
}

.nav-logo {
  font-family: 'Syne', sans-serif;
  font-size: 15px; font-weight: 800;
  color: var(--text); text-decoration: none; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.nav-logo span { color: var(--accent-light); }

.nav-links {
  display: flex; gap: 0; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}

.nav-item { position: relative; }

.nav-item > a {
  font-size: 13px; color: var(--text-2);
  text-decoration: none;
  padding: 0 16px; height: 52px;
  display: flex; align-items: center;
  transition: color 0.15s;
  white-space: nowrap;
  position: relative;
}
.nav-item > a:hover { color: var(--text); }

.nav-item > a::after {
  content: ''; position: absolute;
  bottom: -10px; left: 0; right: 0; height: 10px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 20px;
  min-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04);
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown::before {
  content: '';
  display: block; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), transparent);
  border-radius: 2px; margin-bottom: 16px;
}

.nav-dropdown.wide { min-width: 380px; }

.dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.dropdown-grid.single { grid-template-columns: 1fr; }

.dropdown-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text-2);
  transition: all 0.15s; cursor: pointer;
}
.dropdown-item:hover {
  background: rgba(155,27,48,0.14);
  color: var(--text);
}
.dropdown-item:hover .di-icon { color: var(--accent-light); }

.di-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.di-label { font-weight: 500; font-size: 12px; display: block; }
.di-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; display: block; }

.nav-cta {
  padding: 7px 18px;
  background: var(--accent); color: white;
  font-size: 13px; font-weight: 500; border-radius: 8px;
  text-decoration: none; transition: all 0.2s; flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--accent-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

/* === HERO === */
.hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 64px;
  padding: 120px 72px 80px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute;
  top: -100px; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(155,27,48,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero-visual {
  display: flex; justify-content: center; align-items: center;
  position: relative; z-index: 1;
}

.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px; padding: 28px;
  width: 100%; max-width: 420px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.08);
}
.gc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.gc-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; }
.gc-badge {
  font-size: 10px; padding: 3px 8px; border-radius: 100px;
  background: rgba(34,197,94,0.12); color: #22C55E; font-weight: 600; letter-spacing: 0.05em;
}
.gc-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.gc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border);
}
.gc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gc-info { flex: 1; }
.gc-name { font-size: 12px; font-weight: 500; display: block; }
.gc-meta { font-size: 10px; color: var(--text-3); display: block; margin-top: 1px; }
.gc-status { font-size: 10px; padding: 3px 8px; border-radius: 100px; font-weight: 500; }
.gc-status.s-live { background: rgba(34,197,94,0.12); color: #22C55E; }
.gc-status.s-dev { background: var(--accent-soft); color: var(--accent); }
.gc-footer {
  display: flex; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.gc-stat { text-align: center; }
.gc-stat-num { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 900; display: block; }
.gc-stat-label { font-size: 10px; color: var(--text-3); display: block; margin-top: 2px; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; color: var(--accent);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 28px;
}
.hero-tag::before {
  content: ''; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 900; line-height: 0.92;
  letter-spacing: -0.03em; margin-bottom: 32px; max-width: 860px;
}
h1 .accent { color: var(--accent); }
h1 .dim { color: var(--text-3); }

.hero-sub {
  font-size: 17px; color: var(--text-2);
  max-width: 480px; line-height: 1.7;
  margin-bottom: 48px; font-weight: 300;
}

.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.btn-primary {
  padding: 14px 28px; background: var(--accent); color: white;
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
  border-radius: 10px; text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: var(--accent-mid); transform: translateY(-2px); box-shadow: 0 12px 32px var(--accent-glow); }

.btn-ghost {
  padding: 14px 28px; background: transparent; color: var(--text-2);
  font-size: 14px; font-weight: 400; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--border); transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }

.hero-stats {
  display: flex; gap: 48px; margin-top: 72px;
  padding-top: 48px; border-top: 1px solid var(--border);
}
.stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 32px; font-weight: 900; letter-spacing: -0.02em;
}
.stat-label { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* === SECTIONS === */
section { padding: 96px 48px; }

.section-tag {
  font-size: 10px; font-weight: 500; color: var(--accent);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 16px; display: block;
}

h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900; line-height: 1.0;
  letter-spacing: -0.025em; margin-bottom: 16px;
}

.section-sub {
  font-size: 15px; color: var(--text-2);
  max-width: 460px; line-height: 1.75; font-weight: 300;
  margin-bottom: 52px;
}

/* === CARDS === */
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.service-card {
  padding: 36px 32px; background: var(--surface); transition: background 0.2s;
}
.service-card:hover { background: var(--surface2); }
.service-icon {
  width: 42px; height: 42px; background: var(--accent-soft);
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; margin-bottom: 20px;
}
.service-title {
  font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 10px;
}
.service-desc { font-size: 13px; color: var(--text-2); line-height: 1.65; font-weight: 300; }

.spotlight {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.spotlight-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; background: var(--accent-soft);
  border: 1px solid rgba(155,27,48,0.2); border-radius: 100px;
  font-size: 11px; color: var(--accent); font-weight: 500;
  letter-spacing: 0.06em; margin-bottom: 24px;
}
.spotlight h3 {
  font-family: 'Syne', sans-serif;
  font-size: 36px; font-weight: 900;
  letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px;
}
.spotlight-desc {
  font-size: 14px; color: var(--text-2);
  line-height: 1.75; margin-bottom: 32px; font-weight: 300;
}
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: var(--text-2);
}
.feature-list li::before {
  content: ''; width: 5px; height: 5px; background: var(--accent);
  border-radius: 50%; flex-shrink: 0; margin-top: 7px;
}
.spotlight-mobile-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px; margin-bottom: 16px;
}
.spotlight-mobile-badge svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.spotlight-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text-2); border: 1px solid var(--border);
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  padding: 12px 20px; border-radius: 10px; text-decoration: none; transition: all .2s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.spotlight-visual {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  min-height: 300px; display: flex; flex-direction: column; gap: 12px;
}
.mock-header { font-size: 10px; color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.mock-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg); border-radius: 8px;
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mock-dot.g { background: #22C55E; }
.mock-dot.p { background: var(--accent); }
.mock-dot.o { background: #F59E0B; }
.mock-text { font-size: 12px; color: var(--text-2); flex: 1; }
.mock-badge { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 500; }
.mock-badge.g { background: rgba(34,197,94,0.12); color: #22C55E; }
.mock-badge.p { background: var(--accent-soft); color: var(--accent); }
.mock-badge.o { background: rgba(245,158,11,0.12); color: #F59E0B; }
.mock-footer {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3);
}
.mock-footer span { color: var(--accent); cursor: pointer; }

.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eco-card {
  padding: 32px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface); transition: all 0.2s;
}
.eco-card:hover { border-color: rgba(155,27,48,0.3); transform: translateY(-2px); }
.eco-card.featured { border-color: rgba(155,27,48,0.4); background: rgba(155,27,48,0.04); }
.eco-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; display: block; }
.eco-name { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.eco-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; font-weight: 300; }

.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.process-step { padding: 36px 28px; background: var(--surface); }
.step-num {
  font-family: 'Syne', sans-serif; font-size: 44px; font-weight: 900;
  color: var(--surface2); letter-spacing: -0.03em; margin-bottom: 20px; line-height: 1;
}
.step-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.step-desc { font-size: 12px; color: var(--text-3); line-height: 1.65; }

footer {
  padding: 48px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-logo { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; }
.footer-logo span { color: var(--accent); }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 12px; color: var(--text-3); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 11px; color: var(--text-3); }

/* === FORM === */
#projet { background: var(--surface); border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; }
#projet > .section-tag, #projet > h2, #projet > p { align-self: flex-start; }
.form-wrap { max-width: 680px; width: 100%; }

.progress-wrap { margin-bottom: 44px; }
.progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.progress-bar { height: 1px; background: var(--border); }
.progress-fill { height: 100%; background: var(--accent); transition: width 0.5s cubic-bezier(.4,0,.2,1); }

.step-form { display: none; }
.step-form.active { display: block; animation: rise 0.3s cubic-bezier(.4,0,.2,1); }
@keyframes rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.step-form-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; display: block; }
.step-form-title { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.step-form-desc { font-size: 13px; color: var(--text-2); margin-bottom: 32px; line-height: 1.6; font-weight: 300; }

.form-field { margin-bottom: 20px; }
.form-field-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.req { color: var(--accent); }
.hint { color: var(--text-3); font-size: 11px; margin-left: 4px; }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: 12px 16px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; font-family: 'Inter', sans-serif;
  font-size: 14px; color: var(--text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, textarea:focus { border-color: rgba(155,27,48,0.5); box-shadow: 0 0 0 3px rgba(155,27,48,0.08); }
textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.option-grid-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.option-card-f {
  padding: 16px 14px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; background: var(--bg);
  transition: all 0.15s; user-select: none;
}
.option-card-f:hover { border-color: rgba(155,27,48,0.3); }
.option-card-f.active { border-color: var(--accent); background: var(--accent-soft); }
.option-icon-f { font-size: 20px; margin-bottom: 8px; display: block; }
.option-title-f { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.option-card-f.active .option-title-f { color: var(--accent); }
.option-desc-f { font-size: 11px; color: var(--text-3); line-height: 1.4; }

.check-grid-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.check-item-f {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; background: var(--bg); transition: all 0.15s; user-select: none;
}
.check-item-f:hover { border-color: rgba(155,27,48,0.3); }
.check-item-f.active { border-color: var(--accent); background: var(--accent-soft); }
.check-box-f {
  width: 14px; height: 14px; border: 1.5px solid var(--text-3);
  border-radius: 3px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.check-item-f.active .check-box-f { background: var(--accent); border-color: var(--accent); }
.checkmark-f { display: none; color: white; font-size: 9px; font-weight: 700; }
.check-item-f.active .checkmark-f { display: block; }
.check-label-f { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.check-label-f small { display: block; color: var(--text-3); font-size: 10px; margin-top: 2px; }

.radio-row-f { display: flex; flex-wrap: wrap; gap: 7px; }
.radio-item-f {
  padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 100px; cursor: pointer; font-size: 12px;
  color: var(--text-2); background: var(--bg); transition: all 0.15s; user-select: none;
}
.radio-item-f:hover { border-color: rgba(155,27,48,0.3); color: var(--text); }
.radio-item-f.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: 500; }

.scale-row-f { display: flex; gap: 6px; align-items: center; }
.scale-edge-f { font-size: 10px; color: var(--text-3); min-width: 52px; }
.scale-edge-f:last-child { text-align: right; }
.scale-btns-f { display: flex; gap: 6px; flex: 1; }
.scale-btn-f {
  flex: 1; height: 34px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--text-3); background: var(--bg);
  transition: all 0.15s; font-family: 'Syne', sans-serif;
}
.scale-btn-f:hover { border-color: rgba(155,27,48,0.3); color: var(--accent); }
.scale-btn-f.active { background: var(--accent); border-color: var(--accent); color: white; }

.form-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border);
}
.btn-back-f {
  font-size: 12px; color: var(--text-3); background: none;
  border: none; cursor: pointer; font-family: 'Inter', sans-serif;
  padding: 0; transition: color 0.15s;
}
.btn-back-f:hover { color: var(--text); }
.btn-next-f, .btn-submit-f {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: white;
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.btn-next-f:hover, .btn-submit-f:hover { background: var(--accent-mid); transform: translateY(-1px); }
.btn-submit-f:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.step-dots-f { display: flex; gap: 5px; align-items: center; }
.dot-f { width: 5px; height: 5px; border-radius: 50%; background: var(--surface2); transition: all 0.25s; }
.dot-f.active { background: var(--accent); width: 18px; border-radius: 3px; }
.dot-f.done { background: rgba(155,27,48,0.3); }

.success-screen { display: none; padding: 64px 0; }
.success-screen h2 { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 900; margin-bottom: 12px; }
.success-screen p { font-size: 15px; color: var(--text-2); line-height: 1.75; font-weight: 300; }

/* === THEME TOGGLE === */
.theme-toggle {
  width: 36px; height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 8px; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all 0.2s; flex-shrink: 0;
  color: var(--text);
}
.theme-toggle:hover { background: var(--surface2); }

/* === NAV AUTOFLOW GLOW === */
@keyframes afGlowPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.15); }
}
.nav-autoflow-link {
  position: relative;
  background: linear-gradient(135deg, #5B4CF5, #A78BFA);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 600 !important;
}
.nav-autoflow-glow {
  position: absolute; bottom: -4px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #5B4CF5, #A78BFA);
  border-radius: 2px; opacity: .7;
  animation: afGlowPulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(139,92,246,.6);
}
[data-theme="light"] .nav-autoflow-link {
  background: linear-gradient(135deg, #4338CA, #7C3AED);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* === LUCIDE ICONS === */
.di-icon { display: inline-flex; align-items: center; justify-content: center; }
.di-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.contact-icon-lg svg { width: 28px; height: 28px; stroke-width: 1.5; color: var(--accent-light); }
#icon-moon svg, #icon-sun svg { width: 16px; height: 16px; stroke-width: 2; }

/* === FLOW / WAVE ANIMATION === */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  33%       { transform: translate(30px, -40px) scale(1.08); opacity: 0.7; }
  66%       { transform: translate(-20px, 20px) scale(0.94); opacity: 0.45; }
}
@keyframes currentFlow {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%       { transform: scale(1.15); opacity: 0.65; }
}

.flow-hero {
  position: relative; overflow: hidden;
  padding: 120px 72px 80px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  background: var(--bg);
}
.flow-hero .orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
}
.flow-hero .orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(155,27,48,0.35) 0%, transparent 70%);
  top: -120px; right: -80px;
  animation: orbFloat 9s ease-in-out infinite;
}
.flow-hero .orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(192,36,60,0.22) 0%, transparent 70%);
  bottom: -60px; left: 10%;
  animation: orbFloat 12s ease-in-out infinite reverse;
}
.flow-hero .orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(232,57,90,0.18) 0%, transparent 70%);
  top: 40%; left: 45%;
  animation: orbPulse 7s ease-in-out infinite;
}
.flow-hero .current-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  opacity: 0.4;
  animation: currentFlow 4s ease-in-out infinite;
}
.flow-hero .section-tag,
.flow-hero .page-title,
.flow-hero .page-subtitle { position: relative; z-index: 1; }
.flow-hero .page-title {
  font-family: 'Syne', sans-serif; font-size: clamp(40px, 6vw, 72px);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--text);
}
.flow-hero .page-subtitle {
  font-size: 18px; color: var(--text-2); max-width: 540px; font-weight: 300;
}

/* === À PROPOS PAGE === */
.about-section { padding: 80px 72px; }
.about-grid {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 64px; max-width: 1100px; margin: 0 auto;
}
.about-block { margin-bottom: 40px; }
.about-block:last-child { margin-bottom: 0; }
.about-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 12px;
}
.about-block p { color: var(--text-2); font-size: 15px; line-height: 1.75; margin-bottom: 10px; font-weight: 300; }
.about-block p strong { color: var(--text); font-weight: 600; }
.about-vision blockquote {
  font-size: 18px; line-height: 1.6; color: var(--text);
  font-style: italic; border-left: 3px solid var(--accent); padding-left: 20px;
}
.about-side { position: sticky; top: 100px; align-self: start; }
.about-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 24px;
}
.about-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.about-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 900; color: white;
  flex-shrink: 0;
}
.about-name { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
.about-role { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.about-tags span {
  font-size: 11px; padding: 4px 10px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-2);
}
.about-divider { height: 1px; background: var(--border); margin-bottom: 20px; }
.about-stat-row { display: flex; justify-content: space-between; text-align: center; }
.about-stat-row > div { display: flex; flex-direction: column; gap: 2px; }
.about-stat-n { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 900; color: var(--accent-light); }
.about-stat-l { font-size: 10px; color: var(--text-3); letter-spacing: 0.05em; }

/* === CONTACT PAGE === */
.contact-section { padding: 80px 72px; }
.contact-location {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 18px;
  max-width: 1000px; margin: 0 auto 28px; width: fit-content;
  display: flex;
}
.contact-location svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.contact-location strong { color: var(--text); font-weight: 600; }
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 1000px; margin: 0 auto;
}
.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 32px 28px;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: border-color 0.2s, transform 0.2s;
}
.contact-card:hover { border-color: rgba(155,27,48,0.35); transform: translateY(-3px); }
.contact-icon { font-size: 32px; margin-bottom: 16px; }
.contact-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.contact-value {
  font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--accent-light); text-decoration: none; margin-bottom: 12px;
  word-break: break-all;
}
.contact-value:hover { color: var(--text); }
.contact-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; font-weight: 300; }
.contact-card-cta { border-color: rgba(155,27,48,0.2); }

/* === RESPONSIVE === */
@media(max-width: 900px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  section { padding: 64px 24px; }
  .hero { grid-template-columns: 1fr; padding: 100px 24px 64px; }
  .hero-visual { display: none; }
  .spotlight { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .eco-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  footer { flex-direction: column; gap: 16px; text-align: center; padding: 36px 24px; }
  .footer-links { display: none; }
  .hero-stats { gap: 32px; flex-wrap: wrap; }
  .flow-hero { padding: 100px 24px 60px; }
  .about-section { padding: 60px 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-side { position: static; }
  .contact-section { padding: 60px 24px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media(max-width: 600px) {
  .process-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   AUTOFLOW PAGE — bleu/violet accent
   ════════════════════════════════════════ */
.autoflow-page {
  --af-1: #5B4CF5;
  --af-2: #8B5CF6;
  --af-3: #A78BFA;
  --af-glow: rgba(91,76,245,0.35);
  --af-soft: rgba(91,76,245,0.10);
  --af-grad: linear-gradient(135deg, #5B4CF5 0%, #8B5CF6 50%, #A78BFA 100%);
}

/* Sub-nav AutoFlow */
.af-subnav {
  position: sticky; top: 64px; z-index: 90;
  display: flex; align-items: center; gap: 32px;
  padding: 0 72px; height: 52px;
  background: var(--glass-bg); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.af-subnav-logo { font-family:'Syne',sans-serif; font-size:15px; font-weight:900; color:var(--text); text-decoration:none; flex-shrink:0; }
.af-subnav-logo span { background: var(--af-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.af-subnav-links { display:flex; gap:24px; flex:1; }
.af-subnav-links a { font-size:13px; color:var(--text-2); text-decoration:none; transition:color .15s; }
.af-subnav-links a:hover { color:var(--af-3); }
.btn-sm { padding:8px 16px !important; font-size:12px !important; }
.autoflow-page .btn-primary,
.autoflow-page .btn-sm {
  background: var(--af-grad); border:none;
}
.autoflow-page .btn-primary:hover,
.autoflow-page .btn-sm:hover {
  opacity:.88; transform:translateY(-1px);
}

/* Hero AutoFlow */
.af-hero { min-height: 90vh; justify-content: center; padding: 140px 72px 80px; }
.af-hero .orb-1 { background: radial-gradient(circle, rgba(91,76,245,0.35) 0%, transparent 70%); }
.af-hero .orb-2 { background: radial-gradient(circle, rgba(139,92,246,0.22) 0%, transparent 70%); }
.af-hero .orb-3 { background: radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%); }
.af-hero .current-line { background: linear-gradient(90deg, transparent, #8B5CF6, transparent); }
.af-hero-inner { max-width:1100px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:48px; }
.af-hero-title {
  font-family:'Syne',sans-serif; font-size:clamp(44px,6.5vw,80px);
  font-weight:900; line-height:1.04; letter-spacing:-.02em; color:var(--text);
}
.af-hero-title .accent { background: var(--af-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.af-hero-sub { font-size:17px; color:var(--text-2); max-width:580px; line-height:1.7; font-weight:300; }
.af-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
  padding:12px 24px; border-radius:10px; text-decoration:none; transition:all .2s;
}
.btn-secondary:hover { border-color:var(--af-2); color:var(--af-3); }
.af-hero-stats { display:flex; gap:40px; flex-wrap:wrap; }
.af-stat { display:flex; flex-direction:column; gap:4px; }
.af-stat-n { font-family:'Syne',sans-serif; font-size:28px; font-weight:900; background:var(--af-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.af-stat-l { font-size:12px; color:var(--text-3); letter-spacing:.05em; }

/* Sections génériques AutoFlow */
.af-section { padding:100px 72px; }
.af-section-header { text-align:center; max-width:640px; margin:0 auto 64px; }
.af-section-header .section-title { font-size:clamp(32px,4vw,52px); }
.autoflow-page .section-tag { color:var(--af-3); }

/* Features grid */
.af-features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto;
}
.af-feature-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:28px;
  transition:border-color .2s, transform .2s;
}
.af-feature-card:hover { border-color:rgba(91,76,245,.35); transform:translateY(-3px); }
.af-feature-card--alt { background:var(--surface2); }
.af-feature-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--af-soft); margin-bottom:16px;
}
.af-feature-icon svg { width:20px; height:20px; stroke-width:1.75; color:var(--af-3); }
.af-feature-card h3 { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; margin-bottom:10px; color:var(--text); }
.af-feature-card p { font-size:13px; color:var(--text-2); line-height:1.7; font-weight:300; }

/* Conformité */
.af-conformite-section { background:var(--surface); }
.af-timeline {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:1100px; margin:0 auto 80px; border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
}
.af-timeline-item {
  padding:28px 24px; position:relative;
  border-right:1px solid var(--border);
}
.af-timeline-item:last-child { border-right:none; }
.af-timeline-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--af-grad); margin-bottom:12px;
}
.af-timeline-date { font-size:11px; font-weight:700; color:var(--af-3); letter-spacing:.08em; margin-bottom:8px; }
.af-timeline-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; margin-bottom:8px; color:var(--text); }
.af-timeline-item p { font-size:12px; color:var(--text-2); line-height:1.65; font-weight:300; }
.af-conformite-grid { display:grid; grid-template-columns:1fr 400px; gap:64px; max-width:1100px; margin:0 auto; }
.af-conformite-header h3 { font-family:'Syne',sans-serif; font-size:24px; font-weight:900; line-height:1.3; margin:12px 0; }
.af-conformite-header p { font-size:14px; color:var(--text-2); line-height:1.7; font-weight:300; margin-bottom:28px; }
.af-check-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.af-check-list li { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--text-2); line-height:1.6; }
.af-check-list li strong { color:var(--text); }
.af-check {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--af-soft); flex-shrink:0; margin-top:2px;
}
.af-check svg { width:12px; height:12px; stroke-width:2.5; color:var(--af-3); }
.af-conformite-table-wrap {
  background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:24px; align-self:start;
}
.af-conformite-table { width:100%; border-collapse:collapse; }
.af-conformite-table th { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--text-3); text-transform:uppercase; padding:0 0 16px; text-align:left; }
.af-conformite-table td { padding:12px 0; font-size:13px; color:var(--text-2); border-top:1px solid var(--border); }
.af-conformite-table td:last-child { text-align:right; }
.af-badge {
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
  background:var(--af-soft); color:var(--af-3); border:1px solid rgba(91,76,245,.2);
}
.af-conformite-note { font-size:12px; color:var(--text-3); margin-top:16px; line-height:1.6; font-weight:300; }

/* Agent KMT */
.af-agent-section { background:var(--surface2); }
.af-agent-grid { display:grid; grid-template-columns:1fr 420px; gap:64px; max-width:1100px; margin:0 auto; align-items:start; }
.af-agent-features { display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.af-agent-feat { display:flex; gap:16px; align-items:flex-start; }
.af-agent-feat > .af-feature-icon { flex-shrink:0; }
.af-agent-feat strong { display:block; font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; font-family:'Syne',sans-serif; }
.af-agent-feat p { font-size:13px; color:var(--text-2); line-height:1.6; font-weight:300; margin:0; }
/* Chat demo */
.af-chat-demo {
  background:var(--bg); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  position:sticky; top:130px;
}
.af-chat-header {
  display:flex; align-items:center; gap:10px; padding:16px 20px;
  border-bottom:1px solid var(--border); font-size:12px; color:var(--text-3); font-weight:500;
}
.af-chat-header .af-feature-icon { width:28px; height:28px; margin:0; }
.af-chat-header svg { width:14px; height:14px; }
.af-chat-body { padding:20px; display:flex; flex-direction:column; gap:16px; }
.af-chat-msg { display:flex; flex-direction:column; gap:4px; }
.af-chat-client { align-items:flex-end; }
.af-chat-ai { align-items:flex-start; }
.af-chat-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.af-chat-bubble { max-width:80%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5; }
.af-chat-client .af-chat-bubble { background:var(--surface2); color:var(--text); border-radius:14px 14px 4px 14px; }
.af-chat-ai .af-chat-bubble { background:var(--af-soft); color:var(--text); border-radius:14px 14px 14px 4px; border:1px solid rgba(91,76,245,.2); }
.af-chat-actions { padding:16px 20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.af-chat-action {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--af-3); font-weight:500;
}
.af-chat-action svg { width:13px; height:13px; stroke-width:2; }

/* Pricing */
.af-pricing-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1100px; margin:0 auto;
}
.af-pricing-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:28px 24px; display:flex; flex-direction:column; gap:0; position:relative;
}
.af-pricing-card--featured {
  background:var(--bg); border:1.5px solid var(--af-2);
  box-shadow:0 0 40px rgba(91,76,245,.15);
}
.af-pricing-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--af-grad); color:white; font-size:11px; font-weight:700;
  padding:4px 14px; border-radius:20px; white-space:nowrap;
}
.af-pricing-name { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:var(--text); margin-bottom:16px; }
.af-pricing-price { margin-bottom:24px; }
.af-pricing-amount { font-family:'Syne',sans-serif; font-size:32px; font-weight:900; display:block; background:var(--af-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.af-pricing-period { font-size:11px; color:var(--text-3); font-weight:400; }
.af-pricing-features { list-style:none; display:flex; flex-direction:column; gap:10px; flex:1; margin-bottom:28px; }
.af-pricing-features li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.af-pricing-features svg { width:14px; height:14px; stroke-width:2.5; color:var(--af-3); flex-shrink:0; }
.af-pricing-btn {
  display:block; text-align:center; padding:12px;
  background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
  text-decoration:none; transition:all .2s;
}
.af-pricing-btn:hover { border-color:var(--af-2); color:var(--af-3); }
.af-pricing-btn--featured { background:var(--af-grad); color:white; border:none; }
.af-pricing-btn--featured:hover { opacity:.88; color:white; }
.af-pricing-footer { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:24px; }
.af-pricing-setup-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.af-pricing-setup {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-2); background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:10px 18px;
}
.af-pricing-setup svg { width:14px; height:14px; color:var(--af-3); flex-shrink:0; }
.af-pricing-setup strong { color:var(--text); font-weight:700; }
.af-pricing-setup--green { border-color:rgba(34,197,94,.25); }
.af-pricing-setup--green svg { color:#22C55E; }
.af-pricing-note { text-align:center; font-size:12px; color:var(--text-3); max-width:600px; margin:0 auto; }
.af-pricing-addon { color:var(--text-3) !important; border-top:1px solid var(--border); padding-top:10px; margin-top:4px; }
.af-pricing-addon svg { color:var(--af-2) !important; }
.af-addon-price { font-size:11px; font-weight:700; color:var(--af-3); margin-left:4px; }
.af-feature-addon {
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--af-3); background:var(--af-soft); border:1px solid rgba(91,76,245,.2);
  border-radius:4px; padding:2px 7px; margin-left:6px; vertical-align:middle;
  font-family:'Inter',sans-serif;
}

/* Pour qui */
.af-pourqui-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.af-pourqui-grid--5 { grid-template-columns:repeat(3,1fr); }
.af-pourqui-grid--5 .af-pourqui-card:nth-child(4) { grid-column: 1 / 2; }
.af-pourqui-grid--5 .af-pourqui-card:nth-child(5) { grid-column: 2 / 4; }
.af-pourqui-card--multi { border-color:rgba(91,76,245,.25); }
.af-pourqui-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:32px 28px; transition:border-color .2s, transform .2s;
}
.af-pourqui-card:hover { border-color:rgba(91,76,245,.35); transform:translateY(-3px); }
.af-pourqui-avatar {
  width:48px; height:48px; border-radius:12px; margin-bottom:20px;
  background:var(--af-grad); display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:20px; font-weight:900; color:white;
}
.af-pourqui-card h3 { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; margin-bottom:12px; color:var(--text); }
.af-pourqui-card p { font-size:13px; color:var(--text-2); line-height:1.7; font-weight:300; margin-bottom:20px; }
.af-pourqui-tags { display:flex; flex-wrap:wrap; gap:6px; }
.af-pourqui-tags span {
  font-size:11px; padding:4px 10px; border-radius:20px;
  background:var(--af-soft); border:1px solid rgba(91,76,245,.2); color:var(--af-3);
}

/* Sur mesure */
.af-surmerure-section { background:var(--surface); }
.af-surmerure-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; max-width:1100px; margin:0 auto; align-items:start; }
.af-surmerure-content h2 { font-size:clamp(28px,3.5vw,44px); }
.af-surmerure-content p { font-size:15px; color:var(--text-2); line-height:1.75; font-weight:300; }
.af-surmerure-items { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.af-surmerure-item {
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--text-2); padding:12px 16px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  transition:border-color .2s;
}
.af-surmerure-item:hover { border-color:rgba(91,76,245,.35); color:var(--text); }
.af-surmerure-item svg { width:14px; height:14px; color:var(--af-3); flex-shrink:0; }
.af-surmerure-examples { display:flex; flex-direction:column; gap:16px; }
.af-surmerure-ex-title { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.af-surmerure-ex {
  padding:14px 16px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; display:flex; flex-direction:column; gap:4px;
}
.af-surmerure-ex strong { font-size:13px; font-weight:700; color:var(--text); font-family:'Syne',sans-serif; }
.af-surmerure-ex span { font-size:12px; color:var(--text-2); font-weight:300; line-height:1.5; }
.af-surmerure-note { font-size:12px; color:var(--text-3); margin-top:8px; font-weight:300; line-height:1.6; }

/* CTA final */
.af-cta-section {
  text-align:center; display:flex; flex-direction:column;
  align-items:center; justify-content:center; min-height:50vh;
}
.af-cta-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.af-cta-title {
  font-family:'Syne',sans-serif; font-size:clamp(36px,5vw,64px);
  font-weight:900; line-height:1.08; letter-spacing:-.02em; margin-bottom:20px;
}
.af-cta-title .accent { background:var(--af-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.af-cta-sub { font-size:16px; color:var(--text-2); max-width:520px; line-height:1.7; font-weight:300; }
.af-cta-contacts { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:28px; }
.af-cta-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--text-2); text-decoration:none; transition:color .15s;
}
.af-cta-link svg { width:16px; height:16px; color:var(--af-3); }
.af-cta-link:hover { color:var(--af-3); }
.af-cta-note { font-size:12px; color:var(--text-3); margin-top:12px; }

/* Mobile banner */
.af-mobile-banner {
  background: linear-gradient(135deg, rgba(91,76,245,.08) 0%, rgba(167,139,250,.06) 100%);
  border-top: 1px solid rgba(91,76,245,.15);
  border-bottom: 1px solid rgba(91,76,245,.15);
  padding: 28px 72px;
}
.af-mobile-banner-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.af-mobile-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: var(--af-grad); color: white;
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 800;
  padding: 10px 18px; border-radius: 30px;
  letter-spacing: .02em;
}
.af-mobile-pill svg { width: 15px; height: 15px; stroke-width: 2; }
.af-mobile-text {
  flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px;
}
.af-mobile-text strong { font-size: 14px; color: var(--text); font-weight: 600; }
.af-mobile-text span { font-size: 13px; color: var(--text-2); line-height: 1.6; font-weight: 300; }
.af-mobile-text em { font-style: normal; color: var(--af-3); font-weight: 500; }
.af-mobile-devices {
  display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
}
.af-mobile-device {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 7px 14px;
  border-radius: 8px; border: 1px solid var(--border);
  color: var(--text-2); background: var(--surface);
}
.af-mobile-device svg { width: 13px; height: 13px; }
.af-mobile-device--on { border-color: rgba(91,76,245,.3); color: var(--af-3); }
@media(max-width:900px) {
  .af-mobile-banner { padding: 24px; }
  .af-mobile-banner-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── AUTOFLOW RESPONSIVE ── */
@media(max-width:1100px) {
  .af-timeline { grid-template-columns:1fr 1fr; }
  .af-timeline-item:nth-child(2) { border-right:none; }
  .af-timeline-item:nth-child(3) { border-top:1px solid var(--border); }
  .af-timeline-item:nth-child(4) { border-top:1px solid var(--border); border-right:none; }
  .af-pricing-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:900px) {
  .af-subnav { padding:0 24px; }
  .af-subnav-links { display:none; }
  .af-hero { padding:120px 24px 60px; min-height:auto; }
  .af-section { padding:64px 24px; }
  .af-features-grid { grid-template-columns:1fr 1fr; }
  .af-conformite-grid { grid-template-columns:1fr; }
  .af-agent-grid { grid-template-columns:1fr; }
  .af-chat-demo { position:static; }
  .af-surmerure-grid { grid-template-columns:1fr; }
  .af-pourqui-grid { grid-template-columns:1fr; }
  .af-timeline { grid-template-columns:1fr; }
  .af-timeline-item { border-right:none; border-top:1px solid var(--border); }
  .af-timeline-item:first-child { border-top:none; }
}
@media(max-width:600px) {
  .af-features-grid { grid-template-columns:1fr; }
  .af-pricing-grid { grid-template-columns:1fr; }
  .af-hero-stats { gap:24px; }
  .af-cta-contacts { flex-direction:column; gap:12px; }
}