:root{
    --navy:#003879;
    --navy-deep:#001F42;
    --pink:#CD0062;
    --pink-soft:#FDE8F1;
    --paper:#FAF9F6;
    --surface:#FFFFFF;
    --ink:#142238;
    --text-soft:#54607A;
    --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.65;font-size:17px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:800;line-height:1.15;color:var(--navy);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
  a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px;}

  /* Header */
  header{background:var(--surface);box-shadow:0 2px 14px rgba(0,31,66,0.06);position:sticky;top:0;z-index:100;}
  .nav-container{max-width:1140px;margin:0 auto;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
  .brand img{width:100%;max-width:230px;}
  nav.links{display:flex;align-items:center;gap:24px;}
  nav.links a{font-weight:600;font-size:0.95rem;color:var(--navy);transition:color .15s;}
  nav.links a:hover{color:var(--pink);}
  
  /* Conteneur groupe Tél + Logo SAP */
  .header-actions{display:flex;align-items:center;gap:16px;}

  /* Bouton Tél Header */
  .call-btn-header{
    background:var(--navy);color:#fff !important;padding:10px 18px;border-radius:999px;
    font-weight:700;font-size:0.95rem;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;
    box-shadow:0 4px 12px rgba(0,56,121,0.18);transition:all .2s ease;
  }
  .call-btn-header:hover{
    background:var(--navy-deep);transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,31,66,0.25);
  }

  /* Logo SAP Officiel Header (>= 60px) */
  .sap-logo-header img{
    height:44px;width:auto;min-width:60px;display:block;
    transition:transform 0.2s ease;
  }
  .sap-logo-header a:hover img{transform:scale(1.08);}

  .menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--navy);cursor:pointer;}

  /* Hero */
  .hero{padding:64px 0 40px;}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
  
  /* Badge SAP Animé en Hero */
  .badge-sap{
    display:inline-flex;align-items:center;gap:8px;background:var(--pink-soft);color:var(--pink);
    padding:8px 16px;border-radius:999px;font-weight:700;font-size:0.9rem;margin-bottom:20px;
    box-shadow: 0 2px 10px rgba(205, 0, 98, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    animation: pulseBadge 3.5s infinite ease-in-out;
    cursor: default;
  }
  .badge-sap::before{
    content:"●";font-size:0.6rem;
    transition: transform 0.25s ease;
  }
  .badge-sap:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(205, 0, 98, 0.2);
    background-color: #FBD5E5;
  }

  @keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); box-shadow: 0 4px 14px rgba(205, 0, 98, 0.18); }
  }

  .hero h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:18px;}
  .hero p.lead{font-size:1.12rem;color:var(--text-soft);max-width:52ch;margin-bottom:30px;}
  .btn-group{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    padding:16px 26px;border-radius:999px;font-weight:700;font-size:1rem;
    display:inline-flex;align-items:center;gap:10px;transition:transform .15s,background .15s;
    text-decoration:none;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:var(--navy-deep);}
  .btn-whatsapp{background:#25D366;color:#fff;}
  .btn-whatsapp:hover{background:#1da851;}

  /* Hero Portrait & Badge Animé */
  .hero-portrait{position:relative;}
  .hero-portrait img{border-radius:24px;box-shadow:0 24px 48px rgba(0,31,66,0.18);}
  .hero-portrait .tag {
    position: absolute;
    bottom: -18px;
    left: -18px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 14px 20px;
    box-shadow: 0 12px 28px rgba(0, 31, 66, 0.14);
    font-weight: 700;
    color: var(--navy);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
  }
  .hero-portrait .tag:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 31, 66, 0.2);
  }
  .hero-portrait .tag .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pink);
    flex: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .hero-portrait .tag:hover .dot {
    transform: scale(1.3);
    background: #FF007A;
  }

  /* SAP trust bar & Logo Animé */
  .trust-bar{background:var(--surface);border-top:1px solid #EDEAE3;border-bottom:1px solid #EDEAE3;padding:22px 0;}
  .trust-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;text-align:center;}
  
  .trust-inner .sap-trust-link {
    display: inline-block;
    transition: transform 0.25s ease, filter 0.25s ease;
  }
  .trust-inner img{
    height:70px;width:auto;flex:none;
    transition: transform 0.25s ease, filter 0.25s ease;
  }
  .trust-inner .sap-trust-link:hover img {
    transform: scale(1.08) rotate(-1deg);
    filter: drop-shadow(0 6px 12px rgba(0, 56, 121, 0.15));
  }
  .trust-inner p{font-size:0.95rem;color:var(--text-soft);max-width:52ch;}
  .trust-inner strong{color:var(--navy);}

  /* Sections */
  section{padding:72px 0;}
  .section-title{text-align:center;font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:14px;}
  .section-sub{text-align:center;color:var(--text-soft);max-width:56ch;margin:0 auto 48px;}

  /* Steps path */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
  .steps::before{
    content:"";position:absolute;top:28px;left:12%;right:12%;height:2px;
    background:repeating-linear-gradient(90deg,var(--pink) 0 8px,transparent 8px 16px);
  }
  .step{text-align:center;padding:0 14px;position:relative;}
  .step-num{
    width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
    font-family:'Manrope',sans-serif;font-weight:800;font-size:1.2rem;position:relative;z-index:2;
    box-shadow:0 0 0 6px var(--paper);
    transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
    cursor:pointer;
  }
  .step:hover .step-num{
    transform:translateY(-6px) scale(1.08);
    background:var(--pink);
    box-shadow:0 0 0 6px var(--paper), 0 10px 20px rgba(205,0,98,0.3);
  }
  .step h3{font-size:1.05rem;margin-bottom:8px;color:var(--ink);transition:color .2s;}
  .step:hover h3{color:var(--navy);}
  .step p{font-size:0.9rem;color:var(--text-soft);}

  /* Services */
  .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
  .card{
    background:var(--surface);padding:28px 24px;border-radius:var(--radius);
    box-shadow:0 6px 20px rgba(0,31,66,0.06);border-top:4px solid var(--pink);
    transition:transform .18s,box-shadow .18s;
  }
  .card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,31,66,0.1);}
  .card h3{font-size:1.1rem;margin-bottom:10px;}
  .card p{font-size:0.94rem;color:var(--text-soft);}

  /* Tarifs & Animation de la Carte */
  .price-card{
    background:var(--surface);border-radius:24px;padding:40px 32px;max-width:680px;margin:0 auto;
    box-shadow:0 10px 30px rgba(0,31,66,0.08);text-align:center;border:2px solid #EDEAE3;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 31, 66, 0.12);
    border-color: var(--pink-soft);
  }
  .price-amount{font-size:2.8rem;font-weight:800;color:var(--navy);line-height:1;}
  .price-amount span{font-size:1.1rem;color:var(--text-soft);font-weight:500;}
  .price-net{color:var(--pink);font-weight:700;font-size:1.15rem;margin:8px 0 24px;}
  .price-features{list-style:none;text-align:left;max-width:480px;margin:0 auto 28px;color:var(--text-soft);font-size:0.95rem;}
  .price-features li{padding:8px 0;display:flex;align-items:center;gap:10px;border-bottom:1px dashed #EDEAE3;}
  .price-features li:last-child{border-bottom:none;}

  /* Avance immédiate - Style Adouci et Resserré */
  .avance {
    background: var(--surface);
    color: var(--ink);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 31, 66, 0.08);
    border-top: 4px solid var(--pink);
  }
  .avance h2 {
    color: var(--navy);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 16px;
  }
  .avance > p {
    max-width: 680px;
    margin: 0 auto 24px;
    color: var(--text-soft);
  }
  .reassure-box {
    background: var(--paper);
    border: 1px solid #EDEAE3;
    padding: 20px 24px;
    border-radius: var(--radius);
    max-width: 680px;
    margin: 0 auto 24px;
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .reassure-box .emoji {
    font-size: 1.4rem;
    flex: none;
  }
  .reassure-box strong {
    display: block;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .reassure-box p {
    font-size: 0.95rem;
    color: var(--text-soft);
    margin: 0;
  }
  .avance .link-official {
    display: inline-block;
    background: var(--navy);
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 56, 121, 0.18);
  }
  .avance .link-official:hover {
    background: var(--navy-deep);
    transform: translateY(-2px);
  }
  .avance small {
    color: var(--text-soft);
    display: block;
    max-width: 680px;
    margin: 0 auto;
    font-size: 0.82rem;
  }

  /* Contact */
  .contact-box{
    background:var(--surface);padding:40px 32px;border-radius:24px;max-width:640px;margin:0 auto;
    box-shadow:0 10px 30px rgba(0,31,66,0.08);text-align:center;
  }
  .contact-box p.lead-contact{font-weight:700;color:var(--navy);margin-bottom:8px;font-size:1.1rem;}
  .contact-box p.sub-contact{color:var(--text-soft);margin-bottom:26px;}
  .contact-box .note{font-size:0.85rem;color:var(--text-soft);margin-top:22px;}

  /* Footer & Boutons Footer */
  footer{background:var(--navy-deep);color:#E2E8F0;padding:56px 24px 24px;margin-top:24px;font-size:0.92rem;}
  .footer-container{
    max-width:1140px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:32px;border-bottom:1px solid #26406B;padding-bottom:28px;margin-bottom:22px;
  }
  footer h4{color:#fff;margin-bottom:12px;font-size:1.02rem;font-family:'Manrope',sans-serif;}
  footer p{color:#B9C4DA;margin-bottom:6px;}
  footer strong{color:#fff;}
  .btn-footer-badge{
    display:inline-block;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);
    color:#fff !important;padding:3px 10px;border-radius:4px;font-size:0.75rem;
    text-decoration:none;transition:all 0.2s;cursor:pointer;margin-top:4px;
  }
  .btn-footer-badge:hover{
    background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5);
    transform:translateY(-1px);
  }
  .legal-notice{text-align:center;line-height:1.6;color:#7E8FAE;font-size:0.82rem;}

  @media (max-width:860px){
    nav.links{position:fixed;top:70px;left:0;right:0;background:var(--surface);flex-direction:column;
      align-items:flex-start;gap:0;padding:8px 24px 20px;box-shadow:0 12px 20px rgba(0,31,66,0.08);display:none;}
    nav.links.open{display:flex;}
    nav.links a{padding:14px 0;width:100%;border-bottom:1px solid #EEE;}
    .header-actions{width:100%;justify-content:space-between;padding-top:10px;}
    .menu-toggle{display:block;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-portrait{order:-1;max-width:340px;margin:0 auto;}
    .steps{grid-template-columns:1fr 1fr;gap:32px 0;}
    .steps::before{display:none;}
  }
  @media (max-width:520px){
    .steps{grid-template-columns:1fr;}
    section{padding:52px 0;}
    .avance{padding:36px 20px;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important; animation:none !important;}
  }
</style>
          <style>
            .blue-accent { fill: #003879; transition: fill 0.3s ease; cursor: pointer; }
            .pink-accent { fill: #CD0062; transition: fill 0.3s ease; cursor: pointer; }
            svg:hover .blue-accent { fill: #0066FF; }
            svg:hover .pink-accent { fill: #FF007A; }

/* Bloc "Zone d'intervention" - pages villes */
.zone-box{
  background:var(--paper);border:1px solid #EDEAE3;padding:20px 24px;border-radius:14px;
  max-width:680px;margin:28px auto 0;text-align:left;display:flex;gap:14px;align-items:flex-start;
}
.zone-box .emoji{font-size:1.4rem;flex:none;}
.zone-box strong{display:block;color:var(--navy);margin-bottom:6px;}
.zone-box p{font-size:0.95rem;color:var(--text-soft);margin:0;}

/* Icônes de prestations */
.card h3{display:flex;align-items:center;gap:10px;}
.card-icon{width:30px;height:30px;flex:none;}