
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background: #071121;
      color: #ffffff;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .container {
      width: 90%;
      max-width: 1180px;
      margin: auto;
    }

    header {
      padding: 24px 0;
      background: rgba(7, 17, 33, 0.95);
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      height: 58px;
    }

    nav a {
      margin-left: 28px;
      color: #a5a9ae;
      font-size: 15px;
      transition: 0.3s;
    }

    nav a:hover {
      color: #ffffff;
    }

    .hero {
      padding: 110px 0 90px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 50px;
      align-items: center;
    }

    .badge {
      display: inline-block;
      padding: 8px 16px;
      background: rgba(34, 127, 207, 0.14);
      color: #6fb7ff;
      border: 1px solid rgba(34, 127, 207, 0.35);
      border-radius: 999px;
      font-size: 14px;
      margin-bottom: 22px;
    }

    h1 {
      font-size: 54px;
      line-height: 1.08;
      margin-bottom: 22px;
      letter-spacing: -1px;
    }

    h1 span {
      color: #7bbf52;
    }

    .hero p {
      color: #a5a9ae;
      max-width: 590px;
      font-size: 18px;
      margin-bottom: 34px;
    }

    .buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn {
      padding: 15px 24px;
      border-radius: 14px;
      font-weight: bold;
      font-size: 15px;
      transition: 0.3s;
    }

    .btn-primary {
      background: linear-gradient(135deg, #227fcf, #7bbf52);
      color: #ffffff;
    }

    .btn-secondary {
      border: 1px solid rgba(255,255,255,0.18);
      color: #ffffff;
      background: rgba(255,255,255,0.04);
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .hero-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 28px;
      padding: 34px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    }

    .hero-card img {
      width: 100%;
      max-width: 260px;
      display: block;
      margin: 0 auto 28px;
    }

    .hero-card ul {
      list-style: none;
    }

    .hero-card li {
      padding: 12px 0;
      color: #d8dce0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .section {
      padding: 80px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 46px;
    }

    .section-title h2 {
      font-size: 38px;
      margin-bottom: 12px;
    }

    .section-title p {
      color: #a5a9ae;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .card {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 24px;
      padding: 30px;
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
      border-color: rgba(123,191,82,0.35);
    }

    .icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: linear-gradient(135deg, #227fcf, #7bbf52);
      margin-bottom: 20px;
    }

    .card h3 {
      font-size: 21px;
      margin-bottom: 12px;
    }

    .card p {
      color: #a5a9ae;
      font-size: 15px;
    }

    .why {
      background: #0b1729;
      border-radius: 36px;
      padding: 58px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .why h2 {
      font-size: 38px;
      margin-bottom: 20px;
    }

    .why p {
      color: #a5a9ae;
      margin-bottom: 20px;
    }

    .why-list {
      list-style: none;
    }

    .why-list li {
      margin-bottom: 14px;
      color: #d8dce0;
    }

    .why-list li::before {
      content: "✓";
      color: #7bbf52;
      font-weight: bold;
      margin-right: 10px;
    }

    .contact {
      background: linear-gradient(135deg, rgba(34,127,207,0.16), rgba(123,191,82,0.12));
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 32px;
      padding: 50px;
      text-align: center;
    }

    .contact h2 {
      font-size: 36px;
      margin-bottom: 14px;
    }

    .contact p {
      color: #a5a9ae;
      margin-bottom: 28px;
    }

    footer {
      padding: 34px 0;
      color: #a5a9ae;
      border-top: 1px solid rgba(255,255,255,0.08);
      text-align: center;
      font-size: 14px;
    }

    @media (max-width: 850px) {
      nav {
        display: none;
      }

      .hero-grid,
      .why {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: 40px;
      }

      .cards {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 70px;
      }

      .why,
      .contact {
        padding: 34px;
      }
    }
  

    nav {display:flex;flex-wrap:wrap;gap:16px;align-items:center} nav a {margin-left:0}
    a:focus-visible {outline:3px solid #7bbf52;outline-offset:4px}
    .text-link {color:#9ccfff;text-decoration:underline;text-underline-offset:3px}
    .intro {max-width:850px;margin:0 auto 35px;color:#d8dce0}
    .prose {max-width:870px;margin:auto}.prose h2{font-size:30px;margin:30px 0 12px}.prose h3{font-size:22px;margin:22px 0 10px}.prose p,.prose li{color:#d8dce0;margin-bottom:14px}.prose ul{padding-left:24px}
    .breadcrumbs{padding:22px 0;color:#a5a9ae;font-size:14px}.breadcrumbs a{text-decoration:underline}
    .city-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;list-style:none}.city-list li{border:1px solid #516070;border-radius:999px;padding:8px 14px}
    .site-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:18px}.site-links a{text-decoration:underline}
    @media(max-width:850px){nav{display:flex;gap:10px}nav a{font-size:13px}.navbar{flex-direction:column;gap:14px}.hero{padding:55px 0}.hero-card{padding:24px}.section{padding:55px 0}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Navigation identique sur toutes les pages */
header {padding:14px 0}
.navbar {gap:24px}
.brand-link {flex:0 0 auto;display:flex;align-items:center}
.logo {display:block;width:176px;height:auto;max-width:100%}
.main-nav {display:flex;justify-content:flex-end;align-items:center;gap:clamp(9px,1.2vw,19px);flex-wrap:wrap}
.main-nav a {margin:0;font-size:clamp(12px,.9vw,14px);color:#c5c9cf;text-decoration:none;white-space:nowrap;padding:9px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.main-nav a:hover,.main-nav a:focus-visible {color:#fff;border-bottom-color:#298bcc}
.main-nav a[aria-current="page"] {color:#fff;border-bottom-color:#7bbf52}
.card h3 .service-title-link {color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.card h3 .service-title-link:hover,.card h3 .service-title-link:focus-visible {color:#9ccfff;border-bottom-color:#9ccfff}
@media(max-width:1050px) {.navbar {flex-direction:column;gap:10px}.main-nav {justify-content:center;gap:8px 16px}.main-nav a {font-size:13px;padding:6px 0}}
@media(max-width:600px) {header {padding:12px 0}.logo {width:150px}.main-nav {gap:4px 12px}.main-nav a {font-size:12px;padding:6px 0}}
