*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #fdfdfd; color: #23272b; font-family: Manrope, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #0f6dae; text-decoration: none; }
  a:hover { color: #0b558a; }
  h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  img { max-width: 100%; }
  @keyframes dgpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }

  .bar { background:#23272b; color:#fff; font-size:13px; font-weight:600; padding:9px 20px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; align-items:center }
  .dot { width:7px; height:7px; border-radius:50%; background:#0f6dae; animation:dgpulse 1.8s ease-in-out infinite }
  header { position:sticky; top:0; z-index:20; background:rgba(253,253,253,.94); backdrop-filter:blur(10px); border-bottom:1px solid #ebedef }
  .wrap { max-width:1180px; margin:0 auto; padding:0 20px }
  .head { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; padding:14px 20px }
  nav { display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; font-size:15px; font-weight:600 }
  nav a { color:#4a5158 }
  .btn { display:inline-flex; align-items:center; justify-content:center; border-radius:6px; font-weight:800; min-height:46px; padding:14px 24px; font-size:16px; background:#0f6dae; color:#fff }
  .btn:hover { background:#0b558a; color:#fff }
  .btn-dark { background:#23272b }
  .btn-dark:hover { background:#000 }
  .btn-ghost { background:transparent; color:#23272b; border:1.5px solid #d9dde1; font-weight:700 }
  .btn-ghost:hover { background:transparent; border-color:#0f6dae; color:#0f6dae }
  section { padding:clamp(56px,8vw,112px) 0 }
  .hero { display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); align-items:center; padding:clamp(40px,7vw,80px) 20px clamp(56px,8vw,110px) }
  .eyebrow { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#0f6dae }
  h1 { font-size:clamp(34px,5.4vw,58px); line-height:1.05 }
  .lead { font-size:clamp(17px,2vw,20px); line-height:1.6; color:#4a5158; max-width:42ch }
  h2 { font-size:clamp(26px,3.6vw,38px) }
  .stats { background:#23272b; color:#fff; padding:clamp(44px,6vw,72px) 0; margin-bottom:clamp(16px,3vw,40px) }
  .stats .grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)) }
  .stats b { display:block; font-size:clamp(24px,3.2vw,34px); color:#4fb0f0 }
  .stats span { font-size:14px; color:#c3c9ce; font-weight:600 }
  .cards { margin-top:32px; display:grid; gap:1px; background:#e6e9ec; border:1px solid #e6e9ec; border-radius:10px; overflow:hidden; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)) }
  .cards article { background:#fff; padding:26px; display:flex; flex-direction:column; gap:9px }
  .num { font-family:'IBM Plex Mono', monospace; font-size:12px; color:#0f6dae }
  .cards h3 { font-size:18px; font-weight:700 }
  .cards p, .steps p, .faq p { font-size:15px; line-height:1.6; color:#5a6168 }
  .grey { background:#f5f7f9; border-top:1px solid #ebedef; border-bottom:1px solid #ebedef }
  .steps { margin-top:32px; display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)) }
  .steps > div { border-top:2px solid #0f6dae; padding-top:18px; display:flex; flex-direction:column; gap:9px }
  .steps h3 { font-size:18px; font-weight:700 }
  .two { display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) }
  .col { display:flex; flex-direction:column; gap:16px; align-items:flex-start }
  .chips { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start }
  .chips span { border:1px solid #e0e4e8; border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; color:#3c4349; background:#fff }
  .faq { margin-top:28px; display:flex; flex-direction:column; gap:1px; background:#e2e6ea; border:1px solid #e2e6ea; border-radius:10px; overflow:hidden }
  .faq > div { background:#fdfdfd; padding:22px 26px; display:flex; flex-direction:column; gap:8px }
  .faq h3 { font-size:17px; font-weight:700 }
  .cta { background:#23272b; color:#fff; text-align:center }
  .cta .wrap { display:flex; flex-direction:column; gap:22px; align-items:center }
  .cta h2 { font-size:clamp(28px,4.4vw,46px); max-width:22ch }
  .cta .btn-ghost { color:#fff; border-color:#4a5158 }
  .cta .btn-ghost:hover { border-color:#fff; color:#fff }
  footer { max-width:1180px; margin:0 auto; padding:34px 20px; display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; justify-content:space-between; font-size:14px; color:#6b7278 }

#zones { padding:clamp(64px,9vw,130px) 0 }
#zones .chips { padding-top:6px }

.chip-link { border:1px solid #e0e4e8; border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; color:#0f6dae; background:#fff }
.chip-link:hover { border-color:#0f6dae; color:#0b558a }
.villes { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }

.villes { margin-top:28px; margin-bottom:8px }
section:has(> .villes), section:has(.villes) { padding:clamp(64px,9vw,130px) 0 }
section:has(.chip-link) { padding:clamp(64px,9vw,130px) 0 }