<!DOCTYPE html>

<html lang="fr">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

  <link rel="manifest" href="/manifest.json">

  <meta name="theme-color" content="#0A4D68">

  <link rel="apple-touch-icon" href="/favicon.png">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="default">

  <meta name="mobile-web-app-capable" content="yes">

  <title>Convoyage Auto & Moto France | Bathily-Convoyage</title>

  <meta name="description" content="Convoyage auto et moto partout en France. Devis en 2min, suivi GPS temps réel, double assurance RC Pro. Expérience client inégalée.">

  <meta property="og:title" content="Bathily-Convoyage — Convoyage Auto & Moto France">

  <meta property="og:description" content="Devis en 2min, suivi GPS, photos état des lieux. +500 émissions réalisées.">

  <meta property="og:image" content="https://images.pexels.com/photos/3764984/pexels-photo-3764984.jpeg">

  <meta property="og:url" content="https://www.Bathily-Convoyage.fr/">

  <meta property="og:type" content="website">

  <meta name="google-site-verification" content="gTV1bbLGPHVto_oeIkc_OkmaQi8CrndIXk15ePeUzwI">

  <link rel="icon" type="image/png" href="/favicon.png?v=3">

  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="stylesheet" href="css/mobile-nav.css">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="None">

  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">



  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

  <script src="/supabase-config.js"></script>

  <style>

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    body {

      font-family: 'Inter', sans-serif;

      background: #FDFBF7;

      color: #2D2A24;

      line-height: 1.5;

      overflow-x: hidden;

    }



    .container {

      max-width: 1280px;

      margin: 0 auto;

      padding: 0 32px;

    }



    :root {

      --bordeaux: #0A4D68;

      --bordeaux-dark: #063244;

      --bordeaux-light: #E6F0F4;

      --cream: #FDFBF7;

      --beige: #F9F6F0;

      --gray-dark: #2D2A24;

      --gray-mid: #6B625A;

      --border-light: #E8E1D9;

      --success: #4A7C6B;

      --warning: #F5A623;

    }



    /* Header */

    header {

      position: sticky;

      top: 0;

      background: rgba(253, 251, 247, 0.96);

      backdrop-filter: blur(8px);

      border-bottom: 1px solid var(--border-light);

      z-index: 9999;

    }



    .header-inner {

      display: flex;

      justify-content: space-between;

      align-items: center;

      height: 72px;

    }



    .logo {

      font-family: 'Montserrat', sans-serif;

      font-size: 1.6rem;

      font-weight: 800;

      color: var(--gray-dark);

      text-decoration: none;

      letter-spacing: -0.02em;

      display: inline-flex;

      align-items: center;

    }

    .logo img {

      height: 42px;

      width: auto;

      display: block;

    }



    .logo span {

      color: var(--bordeaux);

    }



    .nav-links {

      display: flex;

      gap: 32px;

      align-items: center;

    }



    .nav-links a {

      text-decoration: none;

      color: var(--gray-mid);

      font-weight: 500;

      transition: color 0.2s;

    }



    .nav-links a:hover,

    .nav-links a.active {

      color: var(--bordeaux);

    }



    .btn-outline {

      border: 1px solid var(--bordeaux);

      background: transparent;

      padding: 8px 20px;

      border-radius: 40px;

      color: var(--bordeaux);

      font-weight: 600;

      transition: all 0.2s;

    }



    .btn-outline:hover {

      background: var(--bordeaux);

      color: white;

    }



    .menu-toggle {

      display: none;

      font-size: 1.5rem;

      cursor: pointer;

      color: var(--gray-dark);

    }



    /* Hero */

    .hero {

      padding: 80px 0 40px;

      background: linear-gradient(135deg, rgba(10,77,104,0.92) 0%, rgba(6,50,68,0.88) 100%),

                  url('https://images.pexels.com/photos/925664/pexels-photo-925664.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;

      overflow: hidden;

      position: relative;

    }

    .hero .hero-content h1,

    .hero .hero-content p {

      color: white;

    }

    .hero .hero-content h1 {

      color: #fff;

      text-shadow: 0 2px 20px rgba(0,0,0,0.3);

    }

    .hero .hero-content p {

      color: rgba(255,255,255,0.9);

    }

    .hero .hero-badge {

      background: rgba(255,255,255,0.15);

      color: #fff;

      border-color: rgba(255,255,255,0.3);

      backdrop-filter: blur(6px);

    }

    .hero .hero-trust-line {

      color: rgba(255,255,255,0.85);

    }

    .hero .hero-trust-line strong {

      color: #fff;

    }

    .hero .quick-quote {

      background: rgba(255,255,255,0.95);

      backdrop-filter: blur(10px);

    }

    .hero .quick-quote input,

    .hero .quick-quote select {

      background: #fff;

    }

    .hero .partners-banner {

      background: rgba(255,255,255,0.08);

      backdrop-filter: blur(4px);

    }

    .hero .partners-title {

      color: rgba(255,255,255,0.7);

    }

    .hero .partner-logo {

      color: rgba(255,255,255,0.6);

    }

    .hero .partner-logo:hover {

      color: #fff;

    }

    .hero .partner-logo i {

      color: var(--warning);

    }



    /* Stats Section */

    .stats-band {

      background: var(--bordeaux);

      padding: 48px 0;

      position: relative;

      overflow: hidden;

    }

    .stats-band::before {

      content: '';

      position: absolute;

      top: 0; left: 0; right: 0; bottom: 0;

      background: linear-gradient(90deg, var(--bordeaux-dark) 0%, var(--bordeaux) 100%);

    }

    .stats-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 24px;

      position: relative;

      z-index: 1;

    }

    @media (max-width: 768px) {

      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    }

    .stat-item {

      text-align: center;

      padding: 16px;

    }

    .stat-item .counter {

      font-family: 'Montserrat', sans-serif;

      font-weight: 800;

      font-size: 2.8rem;

      color: #fff;

      line-height: 1;

      margin-bottom: 8px;

    }

    .stat-item .counter-label {

      font-size: 0.8rem;

      font-weight: 600;

      color: rgba(255,255,255,0.7);

      text-transform: uppercase;

      letter-spacing: 0.05em;

    }

    .stat-item .stat-icon {

      font-size: 1.5rem;

      color: var(--warning);

      margin-bottom: 12px;

    }



    /* Process Timeline */

    .process-timeline {

      display: flex;

      justify-content: space-between;

      gap: 0;

      margin-top: 48px;

      position: relative;

    }

    .process-timeline::before {

      content: '';

      position: absolute;

      top: 36px;

      left: 10%;

      right: 10%;

      height: 3px;

      background: linear-gradient(90deg, var(--bordeaux-light) 0%, var(--bordeaux) 50%, var(--warning) 100%);

      border-radius: 3px;

      z-index: 0;

    }

    .timeline-step {

      flex: 1;

      text-align: center;

      position: relative;

      z-index: 1;

      padding: 0 8px;

    }

    .timeline-icon {

      width: 72px;

      height: 72px;

      background: white;

      border: 3px solid var(--bordeaux);

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 1.5rem;

      color: var(--bordeaux);

      margin: 0 auto 16px;

      transition: all 0.3s;

      box-shadow: 0 4px 12px rgba(10,77,104,0.1);

    }

    .timeline-step:hover .timeline-icon {

      transform: scale(1.1);

      border-color: var(--warning);

      color: var(--warning);

      box-shadow: 0 8px 24px rgba(245,166,35,0.3);

    }

    .timeline-step h4 {

      font-family: 'Montserrat', sans-serif;

      font-size: 0.9rem;

      font-weight: 700;

      margin-bottom: 6px;

      color: var(--gray-dark);

    }

    .timeline-step p {

      font-size: 0.78rem;

      color: var(--gray-mid);

    }

    @media (max-width: 768px) {

      .process-timeline { flex-direction: column; gap: 32px; }

      .process-timeline::before { display: none; }

    }



    /* Footer Trust Badges */

    .footer-trust {

      display: flex;

      gap: 20px;

      flex-wrap: wrap;

      align-items: center;

      justify-content: center;

      padding: 20px 0;

      margin-bottom: 24px;

      border-bottom: 1px solid var(--border-light);

    }

    .footer-trust-badge {

      display: flex;

      align-items: center;

      gap: 8px;

      padding: 8px 16px;

      background: white;

      border: 1px solid var(--border-light);

      border-radius: 12px;

      font-size: 0.75rem;

      font-weight: 600;

      color: var(--gray-dark);

    }

    .footer-trust-badge i {

      font-size: 1.1rem;

    }



    .hero-grid {

      display: grid;

      grid-template-columns: 1.2fr 0.8fr;

      align-items: center;

      gap: 48px;

    }



    .hero-content {

      display: flex;

      flex-direction: column;

    }



    .hero-badge {

      display: inline-block;

      align-self: flex-start;

      background: #E6F0F4;

      color: #088395;

      padding: 6px 14px;

      border-radius: 40px;

      font-size: 0.75rem;

      font-weight: 700;

      margin-bottom: 20px;

      border: 1px solid rgba(8, 131, 149, 0.2);

    }



    .hero h1 {

      font-family: 'Montserrat', sans-serif;

      font-size: 2.8rem;

      font-weight: 800;

      line-height: 1.25;

      margin-bottom: 16px;

      color: #0A4D68;

    }



    .hero p {

      font-size: 1.1rem;

      color: #6B625A;

      margin-bottom: 28px;

      max-width: 580px;

      line-height: 1.6;

    }



    .hero-trust-line {

      display: flex;

      align-items: center;

      gap: 8px;

      margin-top: 20px;

      font-size: 0.875rem;

      color: #6B625A;

      font-weight: 500;

    }



    .hero-trust-line .stars {

      color: #F5A623;

      font-size: 1.05rem;

      letter-spacing: 1px;

    }



    .hero-trust-line strong {

      color: var(--gray-dark);

      font-weight: 700;

    }



    .hero-map-container {

      width: 100%;

      height: 440px;

      border-radius: 32px;

      overflow: hidden;

      box-shadow: 0 20px 40px rgba(10, 77, 104, 0.12);

      border: 1px solid var(--border-light);

      position: relative;

      background: #E6F0F4;

    }



    #heroMap {

      width: 100%;

      height: 100%;

    }



    /* Animated Map Path */

    .animated-polyline {

      stroke-dasharray: 1000;

      stroke-dashoffset: 1000;

      animation: drawPath 5s ease-in-out forwards;

    }



    @keyframes drawPath {

      to {

        stroke-dashoffset: 0;

      }

    }



    /* Partners B2B Banner */

    .partners-banner {

      background: var(--beige);

      border-top: 1px solid var(--border-light);

      border-bottom: 1px solid var(--border-light);

      padding: 20px 0;

      margin-top: 40px;

    }



    .partners-banner-inner {

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 24px;

    }



    .partners-title {

      font-size: 0.8rem;

      text-transform: uppercase;

      letter-spacing: 0.05em;

      color: var(--gray-mid);

      font-weight: 700;

      white-space: nowrap;

    }



    .partners-logos {

      display: flex;

      align-items: center;

      justify-content: space-around;

      flex: 1;

      gap: 24px;

      flex-wrap: wrap;

    }



    .partner-logo {

      font-size: 0.95rem;

      font-weight: 700;

      color: #8C847C;

      display: flex;

      align-items: center;

      gap: 8px;

      user-select: none;

      transition: color 0.2s ease;

    }



    .partner-logo:hover {

      color: var(--bordeaux);

    }



    .partner-logo i {

      font-size: 1.15rem;

    }



    @media (max-width: 1024px) {

      .hero-grid {

        grid-template-columns: 1fr;

        gap: 40px;

      }

      .hero-map-container {

        height: 380px;

      }

      .partners-banner-inner {

        flex-direction: column;

        text-align: center;

        gap: 16px;

      }

      .partners-logos {

        justify-content: center;

      }

    }



    @media (max-width: 600px) {

      .hero h1 {

        font-size: 2.2rem;

      }

      .hero-map-container {

        height: 320px;

      }

    }



    /* Buttons */

    .btn-primary {

      background: var(--bordeaux);

      color: white;

      padding: 14px 32px;

      border-radius: 40px;

      text-decoration: none;

      font-weight: 600;

      display: inline-flex;

      align-items: center;

      gap: 10px;

      transition: all 0.25s ease;

      border: none;

      cursor: pointer;

    }



    .btn-primary:hover {

      background: var(--bordeaux-dark);

      transform: translateY(-2px);

      box-shadow: 0 8px 20px rgba(122, 46, 26, 0.2);

    }



    .btn-secondary {

      background: transparent;

      border: 1px solid var(--border-light);

      color: var(--gray-dark);

      padding: 14px 32px;

      border-radius: 40px;

      text-decoration: none;

      font-weight: 500;

      transition: all 0.2s;

    }



    .btn-secondary:hover {

      border-color: var(--bordeaux);

      color: var(--bordeaux);

    }



    /* Sections */

    section {

      padding: 80px 0;

    }



    .section-title {

      text-align: center;

      font-family: 'Montserrat', sans-serif;

      font-size: 2.2rem;

      font-weight: 700;

      margin-bottom: 16px;

    }



    .section-sub {

      text-align: center;

      color: var(--gray-mid);

      max-width: 700px;

      margin: 0 auto 48px;

      font-size: 1.1rem;

    }



    /* Cartes avec images de fond (services + why) */

    .grid-6 {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 32px;

      margin-bottom: 32px;

    }



    .service-card,

    .why-card {

      border-radius: 28px;

      padding: 32px;

      transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);

      background-size: cover;

      background-position: center;

      color: white;

      position: relative;

      overflow: hidden;

    }



    .service-card::before,

    .why-card::before {

      content: '';

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: linear-gradient(145deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%);

      z-index: 0;

      transition: opacity 0.3s;

    }



    .service-card>*,

    .why-card>* {

      position: relative;

      z-index: 1;

    }



    .service-card:hover,

    .why-card:hover {

      transform: translateY(-8px);

    }



    .service-card .service-icon,

    .why-card .why-icon {

      color: white;

      font-size: 2.2rem;

      margin-bottom: 20px;

    }



    .service-card h3,

    .why-card h3 {

      color: white;

      font-size: 1.4rem;

      margin-bottom: 12px;

    }



    .service-card p,

    .why-card p {

      color: rgba(255, 255, 255, 0.85);

      line-height: 1.6;

    }



    /* Images spécifiques */

    .card-1 {

      background-image: url('https://images.pexels.com/photos/120049/pexels-photo-120049.jpeg?auto=compress&cs=tinysrgb&w=800');

    }



    .card-2 {

      background-image: url('https://images.pexels.com/photos/120327/pexels-photo-120327.jpeg?auto=compress&cs=tinysrgb&w=800');

    }



    .card-3 {

      background-image: url('https://images.pexels.com/photos/1300550/pexels-photo-1300550.jpeg?auto=compress&cs=tinysrgb&w=800');

    }



    .card-4 {

      background-image: url('https://images.pexels.com/photos/290275/pexels-photo-290275.jpeg?auto=compress&cs=tinysrgb&w=800');

    }



    .card-5 {

      background-image: url('https://images.pexels.com/photos/3764984/pexels-photo-3764984.jpeg?auto=compress&cs=tinysrgb&w=800');

    }



    .card-6 {

      background-image: url('https://images.pexels.com/photos/925664/pexels-photo-925664.jpeg?auto=compress&cs=tinysrgb&w=800');

    }



    /* Process steps */

    .process-steps {

      display: flex;

      justify-content: space-between;

      gap: 24px;

      flex-wrap: wrap;

      margin-top: 40px;

    }



    .step {

      flex: 1;

      text-align: center;

      background: white;

      border-radius: 24px;

      padding: 28px 20px;

      border: 1px solid var(--border-light);

      transition: all 0.3s;

    }



    .step:hover {

      transform: translateY(-5px);

      border-color: var(--bordeaux-light);

    }



    .step-num {

      width: 48px;

      height: 48px;

      background: var(--bordeaux-light);

      color: var(--bordeaux);

      border-radius: 60px;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: 800;

      font-size: 1.2rem;

      margin: 0 auto 16px;

    }



    .step h4 {

      margin-bottom: 8px;

    }



    .step p {

      font-size: 0.875rem;

      color: var(--gray-mid);

    }



    /* Testimonials carousel */

    .testimonial-carousel {

      display: flex;

      overflow-x: auto;

      scroll-snap-type: x mandatory;

      gap: 32px;

      padding-bottom: 16px;

      scrollbar-width: thin;

    }



    .testimonial-card {

      flex: 0 0 calc(33.333% - 22px);

      scroll-snap-align: start;

      background: white;

      border-radius: 28px;

      padding: 32px;

      border: 1px solid var(--border-light);

    }



    @media (max-width: 900px) {

      .testimonial-card {

        flex: 0 0 calc(50% - 16px);

      }

    }



    @media (max-width: 600px) {

      .testimonial-card {

        flex: 0 0 100%;

      }

    }



    .testimonial-text {

      font-size: 1rem;

      font-style: italic;

      color: var(--gray-dark);

      margin-bottom: 24px;

      line-height: 1.6;

    }



    .testimonial-author {

      display: flex;

      align-items: center;

      gap: 12px;

    }



    .testimonial-avatar {

      width: 48px;

      height: 48px;

      background: var(--bordeaux-light);

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: 700;

      color: var(--bordeaux);

    }



    .testimonial-info strong {

      display: block;

      font-size: 0.9rem;

    }



    .testimonial-info span {

      font-size: 0.75rem;

      color: var(--gray-mid);

    }



    .carousel-nav {

      display: flex;

      justify-content: center;

      gap: 12px;

      margin-top: 32px;

    }



    .carousel-dot {

      width: 40px;

      height: 4px;

      background: var(--border-light);

      border-radius: 4px;

      cursor: pointer;

      transition: background 0.2s;

    }



    .carousel-dot.active {

      background: var(--bordeaux);

    }



    /* Quick quote */

    .quick-quote {

      background: white;

      border-radius: 60px;

      padding: 12px;

      display: inline-flex;

      gap: 12px;

      flex-wrap: wrap;

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

      margin-top: 24px;

      position: relative;

    }



    .search-wrapper {

      position: relative;

      flex: 1 1 200px;

      min-width: 180px;

    }



    .quick-quote input,

    .quick-quote select {

      width: 100%;

      padding: 12px 20px;

      border: 1px solid var(--border-light);

      border-radius: 40px;

      font-family: 'Inter', sans-serif;

      font-size: 0.9rem;

      background: var(--cream);

      color: var(--gray-dark);

    }



    .veh-tabs {

      display: flex;

      background: var(--cream);

      border: 1px solid var(--border-light);

      border-radius: 40px;

      padding: 4px;

      flex: 1 1 200px;

      min-width: 180px;

    }



    .veh-tab {

      flex: 1;

      border: none;

      background: transparent;

      padding: 10px 16px;

      border-radius: 36px;

      font-family: 'Inter', sans-serif;

      font-size: 0.9rem;

      font-weight: 600;

      color: var(--gray-mid);

      cursor: pointer;

      transition: all 0.2s ease;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 6px;

    }



    .veh-tab.active {

      background: #0A4D68;

      color: white;

    }



    .suggest-box {

      position: absolute;

      top: 100%;

      left: 0;

      width: 100%;

      background: white;

      border: 1px solid var(--border-light);

      border-radius: 16px;

      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

      max-height: 220px;

      overflow-y: auto;

      z-index: 300;

      display: none;

    }



    .suggest-item {

      padding: 10px 16px;

      cursor: pointer;

      font-size: 0.85rem;

      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      transition: all 0.15s ease;

      color: var(--gray-dark);

    }



    .suggest-item:last-child {

      border-bottom: none;

    }



    .suggest-item:hover {

      background: var(--bordeaux-light);

      color: var(--bordeaux);

      padding-left: 20px;

    }



    #btnEstimate {

      background: #F5A623;

      border: none;

      border-radius: 40px;

      padding: 12px 28px;

      color: #0A4D68;

      font-weight: 700;

      cursor: pointer;

      white-space: nowrap;

      animation: pulse 2s infinite;

      transition: all 0.2s ease;

    }



    #btnEstimate:hover {

      background: #e09315;

      transform: translateY(-2px);

      box-shadow: 0 6px 15px rgba(245, 166, 35, 0.4);

    }



    @keyframes pulse {

      0% {

        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.7);

      }

      70% {

        box-shadow: 0 0 0 12px rgba(245, 166, 35, 0);

      }

      100% {

        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);

      }

    }



    /* Map preview */

    .map-preview {

      background: var(--beige);

      border-radius: 32px;

      padding: 32px;

      margin-top: 40px;

    }



    #miniMap {

      height: 300px;

      border-radius: 24px;

      overflow: hidden;

      margin-top: 20px;

    }



    /* CTA final */

    .cta-final {

      background: var(--bordeaux);

      border-radius: 48px;

      padding: 64px;

      text-align: center;

      color: white;

    }



    .cta-final h2 {

      font-size: 2rem;

      margin-bottom: 16px;

    }



    .cta-final .btn-primary {

      background: white;

      color: var(--bordeaux);

      margin-top: 16px;

    }



    .cta-final .btn-primary:hover {

      background: #FDFBF7;

      transform: translateY(-2px);

    }



    /* Footer */

    footer {

      background: var(--beige);

      border-top: 1px solid var(--border-light);

      padding: 48px 0;

      margin-top: 60px;

    }



    .footer-grid {

      display: grid;

      grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;

      gap: 48px;

    }



    .footer-cities-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 12px;

    }



    .footer-logo {

      font-weight: 800;

      font-size: 1.3rem;

      margin-bottom: 16px;

    }



    .footer-logo span {

      color: var(--bordeaux);

    }



    .footer-about p {

      color: var(--gray-mid);

      font-size: 0.875rem;

    }



    .footer-links h4 {

      font-weight: 600;

      margin-bottom: 16px;

    }



    .footer-links a {

      display: block;

      color: var(--gray-mid);

      text-decoration: none;

      font-size: 0.875rem;

      margin-bottom: 8px;

    }



    .footer-links a:hover {

      color: var(--bordeaux);

    }



    .footer-bottom {

      text-align: center;

      margin-top: 48px;

      padding-top: 24px;

      border-top: 1px solid var(--border-light);

      color: var(--gray-mid);

      font-size: 0.75rem;

    }



    /* Reveal animation */

    .reveal {

      opacity: 0;

      transform: translateY(30px);

      transition: opacity 0.7s ease, transform 0.7s ease;

    }



    .reveal.visible {

      opacity: 1;

      transform: translateY(0);

    }



    /* Responsive */

    @media (max-width: 900px) {

      .menu-toggle {

        display: block;

      }



      .nav-links {

        display: none;

        position: absolute;

        top: 72px;

        left: 0;

        right: 0;

        background: var(--cream);

        flex-direction: column;

        padding: 24px;

        border-bottom: 1px solid var(--border-light);

      }



      .nav-links.show {

        display: flex;

      }



      .hero-grid {

        flex-direction: column;

      }



      .grid-6 {

        grid-template-columns: 1fr;

      }



      .hero h1 {

        font-size: 2.2rem;

      }



      .process-steps {

        flex-direction: column;

      }



      .quick-quote {

        width: 100%;

        justify-content: center;

      }



      .footer-grid {

        grid-template-columns: 1fr;

        gap: 32px;

      }

    }



    .floating-devis {

      position: fixed;

      bottom: 20px;

      right: 20px;

      z-index: 999;

      background: var(--bordeaux);

      color: #fff;

      padding: 14px 22px;

      border-radius: 50px;

      text-decoration: none;

      font-weight: 700;

      transition: all 0.2s ease;

      box-shadow: 0 4px 12px rgba(10, 77, 104, 0.25);

    }

    .floating-devis:hover {

      background: var(--bordeaux-dark);

      transform: translateY(-2px);

    }



    /* Sticky Call Mobile */

    .sticky-call-mobile {

      display: none;

      position: fixed;

      bottom: 20px;

      right: 20px;

      z-index: 999;

      background: #F5A623;

      width: 56px;

      height: 56px;

      border-radius: 50%;

      align-items: center;

      justify-content: center;

      box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);

      transition: transform 0.2s ease, background-color 0.2s ease;

      text-decoration: none;

    }

    .sticky-call-mobile:hover {

      transform: scale(1.08);

      background: #e09315;

    }

    .sticky-call-mobile:active {

      transform: scale(0.95);

    }



    @media (max-width: 900px) {

      .sticky-call-mobile {

        display: flex;

      }

      .floating-devis {

        bottom: 90px !important;

      }

    }



    /* Bandeau promotionnel */

    .promo-bar {

      background: var(--bordeaux);

      color: white;

      text-align: center;

      padding: 10px 16px;

      font-size: 0.85rem;

      font-weight: 700;

      letter-spacing: 0.03em;

      z-index: 101;

      position: relative;

      display: flex;

      justify-content: center;

      align-items: center;

      gap: 8px;

    }



    .promo-bar strong {

      background: white;

      color: var(--bordeaux);

      padding: 2px 8px;

      border-radius: 4px;

      margin: 0 4px;

    }



    /* Section Logos de Réassurance */

    .trust-bar {

      padding: 28px 0;

      background: white;

      border-bottom: 1px solid var(--border-light);

    }



    .trust-grid {

      display: flex;

      justify-content: space-around;

      align-items: center;

      flex-wrap: wrap;

      gap: 24px;

    }



    .trust-item {

      display: flex;

      align-items: center;

      gap: 12px;

      opacity: 0.9;

      transition: opacity 0.2s;

    }



    .trust-item:hover {

      opacity: 1;

    }



    .trust-item i {

      font-size: 1.6rem;

      color: var(--bordeaux);

    }



    .trust-item-title {

      font-weight: 700;

      font-size: 0.85rem;

      color: var(--gray-dark);

    }



    .trust-item-sub {

      font-size: 0.72rem;

      color: var(--gray-mid);

    }



    /* Grille Tarifaire */

    .pricing-section {

      background: var(--beige);

      padding: 80px 0;

    }



    .pricing-grid {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 40px;

      max-width: 960px;

      margin: 40px auto 0;

    }



    @media (max-width: 768px) {

      .pricing-grid {

        grid-template-columns: 1fr;

        padding: 0 20px;

      }

    }



    .price-card {

      background: white;

      border: 1px solid var(--border-light);

      border-radius: 28px;

      padding: 40px;

      display: flex;

      flex-direction: column;

      transition: all 0.3s ease;

      position: relative;

    }



    .price-card:hover {

      transform: translateY(-6px);

      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);

    }



    .price-card.popular {

      border-color: var(--bordeaux);

      box-shadow: 0 8px 30px rgba(122, 46, 26, 0.05);

    }



    .price-card.popular::before {

      content: 'Recommandé';

      position: absolute;

      top: 20px;

      right: 20px;

      background: var(--bordeaux);

      color: white;

      padding: 4px 12px;

      border-radius: 20px;

      font-size: 0.65rem;

      font-weight: 700;

      text-transform: uppercase;

    }



    .price-card-title {

      font-family: 'Montserrat', sans-serif;

      font-size: 1.5rem;

      font-weight: 800;

      margin-bottom: 8px;

      color: var(--gray-dark);

    }



    .price-card-desc {

      font-size: 0.875rem;

      color: var(--gray-mid);

      margin-bottom: 24px;

    }



    .price-card-val {

      font-family: 'Montserrat', sans-serif;

      font-size: 2.2rem;

      font-weight: 800;

      color: var(--bordeaux);

      margin-bottom: 24px;

    }



    .price-card-val span {

      font-size: 0.85rem;

      font-weight: 500;

      color: var(--gray-mid);

    }



    .price-card-features {

      list-style: none;

      margin-bottom: 40px;

      display: flex;

      flex-direction: column;

      gap: 12px;

    }



    .price-card-features li {

      font-size: 0.9rem;

      color: var(--gray-dark);

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .price-card-features li i {

      color: var(--success);

      font-size: 1rem;

    }



    .price-card .btn-primary {

      margin-top: auto;

      justify-content: center;

    }



    /* FAQ Accordion */

    .faq-accordion {

      max-width: 800px;

      margin: 40px auto 0;

      display: flex;

      flex-direction: column;

      gap: 16px;

    }



    .faq-item {

      background: white;

      border: 1px solid var(--border-light);

      border-radius: 20px;

      overflow: hidden;

      transition: all 0.3s;

    }



    .faq-item[open] {

      border-color: var(--bordeaux-light);

      box-shadow: 0 8px 20px rgba(122, 46, 26, 0.03);

    }



    .faq-item summary {

      padding: 20px 24px;

      font-weight: 700;

      cursor: pointer;

      list-style: none;

      display: flex;

      justify-content: space-between;

      align-items: center;

      user-select: none;

      color: var(--gray-dark);

    }



    .faq-item summary::-webkit-details-marker {

      display: none;

    }



    .faq-item summary::afêter {

      content: '\f078';

      font-family: 'Font Awesome 6 Free';

      font-weight: 900;

      font-size: 0.8rem;

      color: var(--bordeaux);

      transition: transform 0.3s;

    }



    .faq-item[open] summary::afêter {

      transform: rotate(180deg);

    }



    .faq-item p {

      padding: 0 24px 24px;

      font-size: 0.9rem;

      color: var(--gray-mid);

      line-height: 1.6;

    }



    @media (max-width: 375px) {

      .container {

        padding: 0 16px;

      }

      .hero-title {

        font-size: 1.8rem;

      }

      .quick-quote {

        flex-direction: column;

      }

      .quick-quote input,

      .quick-quote select,

      .quick-quote button {

        width: 100%;

      }

    }



    /* UX Animations - Fade-in Scroll */

    .fade-in {

      opacity: 0;

      transform: translateY(30px);

      transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    }



    .fade-in.visible {

      opacity: 1;

      transform: translateY(0);

    }



    /* UX Animations - Hover Effects */

    .service-card {

      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    }



    .service-card:hover {

      transform: translateY(-8px);

      box-shadow: 0 15px 40px rgba(10, 77, 104, 0.25);

      border-color: #F5A623;

    }



    .btn-primary {

      transition: background 0.3s ease, transform 0.2s ease;

    }



    .btn-primary:hover {

      background: #088395;

      transform: scale(1.05);

    }



    .btn-outline {

      transition: background 0.3s ease, transform 0.2s ease;

    }



    .btn-outline:hover {

      transform: scale(1.05);

    }



    /* UX Animations - Counters */

    .counter {

      font-family: 'Montserrat', sans-serif;

      font-weight: 800;

      font-size: 2.5rem;

      color: #0A4D68;

    }



    .counter-label {

      color: #088395;

      font-weight: 600;

    }



    .quick-quote select {

      width: 100%;

    }



    .nav-links.show {

      display: flex;

    }

  </style>



  <meta name="keywords" content="convoyage automobile, convoyage auto, transport véhicule, convoyage moto, livraison véhicule">

  <link rel="canonical" href="https://www.Bathily-Convoyage.fr/">

  <script type="application/ld+json">

{"@context":"https://schema.org","@type":"LocalBusiness","name":"Bathily-Convoyage","areaServed":"France","serviceType":["Convoyage automobile","Convoyage moto"]}

</script>

<script src="js/lang-switcher.js" defer="None"></script>

</head>



<body>



  <div class="promo-bar">

    <span>⭐ Offre de lancement : <strong>-10%</strong> sur votre premier convoyage avec le code :

      <strong>HELLO10</strong></span>

  </div>



  <header>

    <div class="container header-inner">

      <a href="index.html" class="logo"><img src="/logo.png" alt="Bathily-Convoyage" /></a>

      <button class="menu-toggle" id="menuToggle" aria-label="Menu principal" style="background:none;border:none;"><i class="fas fa-bars icon-bars"></i><i class="fas fa-times icon-times"></i></button>

      <div class="nav-links">

        <a href="index.html" class="active">Accueil</a>

        <a href="formation-convoyeur.html">Devenir convoyeur</a>

        <a href="espace-pro.html">Espace Pro</a>

        <a href="contact.html">Contact</a>

        <a href="dashboard-convoyeur.html">Espace convoyeur</a>

        <a href="dashboard-client.html" class="btn-outline">Espace client</a>

      </div>

    </div>

  </header>



  <main>

    <!-- Hero -->

    <section class="hero">

      <div class="container hero-grid">

        <div class="hero-content fade-in">

          <div class="hero-badge">⭐ Suivi GPS en temps réel</div>

          <h1>Convoyage Auto & Moto<br>Partout en France.</h1>

          <p>Votre véhicule transporté en toute sécurité par des professionnels. Devis gratuit en 2min.</p>

          <div class="quick-quote">

            <div class="search-wrapper">

              <input type="text" id="depart" placeholder="Adresse de départ" autocomplete="off" aria-label="Adresse de départ">

              <div id="departSuggests" class="suggest-box"></div>

            </div>

            <div class="search-wrapper">

              <input type="text" id="arrivee" placeholder="Adresse d'arrivée" autocomplete="off" aria-label="Adresse d'arrivée">

              <div id="arriveeSuggests" class="suggest-box"></div>

            </div>

            <input type="hidden" id="vehType" value="Automobile">

            <div class="veh-tabs">

              <button type="button" class="veh-tab active" data-value="Automobile" onclick="setVehType('Automobile')">🚗 Auto</button>

              <button type="button" class="veh-tab" data-value="Moto" onclick="setVehType('Moto')">🏍️ Moto</button>

            </div>

            <button id="btnEstimate" onclick="goToDevis()">Estimer mon prix ?</button>

          </div>

          <div id="quickQuoteResult" style="display:none; margin-top: 16px; padding: 16px 24px; background: var(--bordeaux-light); border: 1px solid var(--bordeaux); border-radius: 20px; align-items: center; justify-content: center; gap: 16px; font-weight: 600; color: var(--bordeaux); font-size: 0.95rem; box-shadow: 0 4px 12px rgba(122,46,26,0.1); max-width: 100%; flex-wrap:wrap;">

            <span>📍 Distance : <strong id="quickQuoteDist">— km</strong></span>

            <span style="color: var(--gray-mid);">|</span>

            <span>💰 Tarif estimé : <strong id="quickQuotePrice">— € TTC</strong></span>

            <button onclick="goToDevis()" style="background:var(--bordeaux);color:white;border:none;padding:8px 20px;border-radius:30px;font-size:0.85rem;cursor:pointer;font-weight:600;white-space:nowrap;">Obtenir mon devis →</button>

          </div>

          <div class="hero-trust-line">

            <span class="stars">⭐⭐⭐⭐⭐</span>

            <span><strong>Service client dédié</strong> — accompagnement personnalisé</span>

            <span style="margin-left:16px;">|</span>

            <span><strong>+1 200</strong> clients satisfaits</span>

            <span style="margin-left:16px;">|</span>

            <span><strong>+50</strong> convoyeurs certifiés</span>

          </div>

        </div>

        <div class="hero-map-container">

          <div id="heroMap"></div>

        </div>

      </div>

      <div class="partners-banner">

        <div class="container partners-banner-inner">

          <div class="partners-title">Ils nous font confiance :</div>

          <div class="partners-logos">

            <span class="partner-logo"><i class="fas fa-car-side"></i> Concessions</span>

            <span class="partner-logo"><i class="fas fa-wrench"></i> Garages</span>

            <span class="partner-logo"><i class="fas fa-truck-fleet"></i> Flottes Auto</span>

            <span class="partner-logo"><i class="fas fa-handshake"></i> Loueurs</span>

          </div>

        </div>

      </div>

    </section>



    <!-- Stats -->

    <section class="stats-band">

      <div class="container">

        <div class="stats-grid">

          <div class="stat-item reveal">

            <div class="stat-icon"><i class="fas fa-route"></i></div>

            <div class="counter" id="stat1" data-target="500">0</div>

            <div class="counter-label">Missions réalisées</div>

          </div>

          <div class="stat-item reveal">

            <div class="stat-icon"><i class="fas fa-clock"></i></div>

            <div class="counter" id="stat2" data-target="24">0</div>

            <div class="counter-label">Délai moyen (heures)</div>

          </div>

          <div class="stat-item reveal">

            <div class="stat-icon"><i class="fas fa-star"></i></div>

            <div class="counter" id="stat3" data-target="49">0</div>

            <div class="counter-label">Note moyenne</div>

          </div>

          <div class="stat-item reveal">

            <div class="stat-icon"><i class="fas fa-shield-halved"></i></div>

            <div class="counter" id="stat4" data-target="100">0</div>

            <div class="counter-label">Assurance tous risques</div>

          </div>

        </div>

      </div>

    </section>



    <!-- Section Réassurance / Logos -->

    <section class="trust-bar">

      <div class="container">

        <div class="trust-grid">

          <div class="trust-item">

            <i class="fab fa-stripe" style="color:#635BFF; font-size:2.2rem;"></i>

            <div>

              <div class="trust-item-title">Paiement Stripe</div>

              <div class="trust-item-sub">100% sécurisé et encrypté</div>

            </div>

          </div>

          <div class="trust-item">

            <i class="fas fa-id-card-clip" style="color:var(--bordeaux);"></i>

            <div>

              <div class="trust-item-title">Identification vehicule</div>

              <div class="trust-item-sub">Identification en temps réel</div>

            </div>

          </div>

          <div class="trust-item">

            <i class="fas fa-shield-halved" style="color:var(--bordeaux);"></i>

            <div>

              <div class="trust-item-title">Double RC Pro</div>

              <div class="trust-item-sub">Couverture  tous risques</div>

            </div>

          </div>

          <div class="trust-item">

            <i class="fas fa-clipboard-check" style="color:var(--bordeaux);"></i>

            <div>

              <div class="trust-item-title">EDL Certifié</div>

              <div class="trust-item-sub">Rapport numérique 20 photos</div>

            </div>

          </div>

        </div>

      </div>

    </section>



    <!-- Services (3 cartes) -->

    <section id="services">

      <div class="container">

        <div class="section-title reveal">Des services pensés pour vous</div>

        <div class="section-sub reveal">Une expérience de convoyage fluide, transparente et digitale</div>

        <div class="grid-6">

          <a href="devis.html?mode=route" class="service-card card-1 reveal" style="text-decoration:none;display:block;cursor:pointer;">

            <div class="service-icon"><i class="fas fa-car"></i></div>

            <h3>Convoyage par la route</h3>

            <p>convoyeur certifié, suivi GPS en temps réel, livraison porte-à-porte.</p>

          </a>

          <a href="devis.html?mode=plateau" class="service-card card-2 reveal" style="text-decoration:none;display:block;cursor:pointer;">

            <div class="service-icon"><i class="fas fa-truck"></i></div>

            <h3>Transport plateau</h3>

            <p>Protection maximale pour véhicules de collection, motos ou utilitaires.</p>

          </a>

          <a href="devis.html" class="service-card card-3 reveal" style="text-decoration:none;display:block;cursor:pointer;">

            <div class="service-icon"><i class="fas fa-mobile-alt"></i></div>

            <h3>Solution 100% digitale</h3>

            <p>Devis en 2min, suivi client, état des lieux photo 20 points.</p>

          </a>

        </div>

      </div>

    </section>



    <!-- Grille de Formules & Tarifs -->

    <section id="tarifs" class="pricing-section">

      <div class="container">

        <div class="section-title reveal">Nos formules et tarifs transparents</div>

        <div class="section-sub reveal">Des tarifs compétitifs, clairs et sans frais cachés</div>

        <div class="pricing-grid">

          <div class="price-card popular reveal">

            <div class="price-card-title">Convoyage par la Route</div>

            <div class="price-card-desc">Idéal pour les berlines, SUV et motos en toute simplicité</div>

            <div class="price-card-val">1.20 €<span> TTC / km</span></div>

            <p style="font-size: 0.85rem; color: var(--gray-mid); margin-top: -16px; margin-bottom: 24px;">Min. 150 € TTC

              par trajet · Moto : 1.00 € TTC/km</p>

            <ul class="price-card-features">

              <li><i class="fas fa-check"></i> convoyeur professionnel</li>

              <li><i class="fas fa-check"></i> Suivi GPS en temps réel (Lien dédié)</li>

              <li><i class="fas fa-check"></i> État des lieux numérique (20 photos)</li>

              <li><i class="fas fa-check"></i> Double RC Pro (Bathily-Convoyage + convoyeur)</li>

            </ul>

            <a href="devis.html?mode=route" class="btn-primary">Choisir cette formule</a>

          </div>



          <div class="price-card reveal">

            <div class="price-card-title">Transport sur Plateau</div>

            <div class="price-card-desc">Sécurité maximale pour véhicules de prestige ou non roulants</div>

            <div class="price-card-val">1.40 €<span> TTC / km</span></div>

            <p style="font-size: 0.85rem; color: var(--gray-mid); margin-top: -16px; margin-bottom: 24px;">Min. 350 € TTC

              par trajet · Zéro km au compteur</p>

            <ul class="price-card-features">

              <li><i class="fas fa-check"></i> Zéro kilomètre au compâteur</li>

              <li><i class="fas fa-check"></i> Idéal pour véhicules de collection et motos</li>

              <li><i class="fas fa-check"></i> Chargement et arrimage sécurisés</li>

              <li><i class="fas fa-check"></i> Assurance transport premium incluse</li>

            </ul>

            <a href="devis.html?mode=plateau" class="btn-primary">Choisir cette formule</a>

          </div>

        </div>



        <!-- Packs de service -->

        <div style="margin-top: 50px; text-align: center;" class="reveal">

          <h4 style="font-family: 'Montserrat', sans-serif; font-size: 1.2rem; margin-bottom: 16px; color: var(--gray-dark);">

            Niveaux de service optionnels</h4>

          <div style="display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;">

            <div onclick="window.location.href='devis.html?pack=starter'" style="cursor: pointer; background: white; border: 1px solid var(--border-light); padding: 16px 24px; border-radius: 20px; text-align: left; width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'">

              <strong style="color: var(--bordeaux); display: block; margin-bottom: 4px;">Formule Starter — Inclus</strong>

              <span style="font-size: 0.8rem; color: var(--gray-mid);">Convoyeur certifié, suivi GPS, état des lieux 20 photos, service client standard.</span>

            </div>

            <div onclick="window.location.href='devis.html?pack=serenite'" style="cursor: pointer; background: white; border: 1px solid var(--border-light); padding: 16px 24px; border-radius: 20px; text-align: left; width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'">

              <strong style="color: var(--bordeaux); display: block; margin-bottom: 4px;">Pack Sérénité — +69€ TTC</strong>

              <span style="font-size: 0.8rem; color: var(--gray-mid);">Tout Starter + nettoyage int./ext., lavage avant livraison, RDV planifié, support VIP.</span>

            </div>

            <div onclick="window.location.href='devis.html?pack=excellence'" style="cursor: pointer; background: white; border: 1px solid var(--border-light); padding: 16px 24px; border-radius: 20px; text-align: left; width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'">

              <strong style="color: var(--bordeaux); display: block; margin-bottom: 4px;">Pack Excellence — +159€ TTC</strong>

              <span style="font-size: 0.8rem; color: var(--gray-mid);">Tout Sérénité + plein de carburant, photos pro 4K, livraison dim./férié, priorité d'affectation.</span>

            </div>

          </div>

        </div>

      </div>

    </section>

    <section>

      <div class="container">

        <div class="section-title reveal">Pourquoi Bathily-Convoyage ?</div>

        <div class="section-sub reveal">L'innovation au service de votre tranquillité</div>

        <div class="grid-6">

          <div class="why-card card-4 reveal">

            <div class="why-icon"><i class="fas fa-chart-line"></i></div>

            <h3>technologie de pointe</h3>

            <p>Devis en 2miné, plateforme de suivi, notifications automatiques.</p>

          </div>

          <div class="why-card card-5 reveal">

            <div class="why-icon"><i class="fas fa-shield-alt"></i></div>

            <h3>Confiance absolue</h3>

            <p>Double RC Pro, identification par plaque, état des lieux exhaustif.</p>

          </div>

          <div class="why-card card-6 reveal">

            <div class="why-icon"><i class="fas fa-hand-holding-heart"></i></div>

            <h3>Proximité humaine</h3>

            <p>Un interlocuteur dédié de la réservation à la livraison.</p>

          </div>

        </div>

      </div>

    </section>



    <!-- Processus en 5 étapes -->

    <section id="howitworks" style="background: var(--beige);">

      <div class="container">

        <div class="section-title reveal">Comment ça marche ?</div>

        <div class="section-sub reveal">Un processus simple et transparent</div>

        <div class="process-timeline">

          <div class="timeline-step reveal">

            <div class="timeline-icon"><i class="fas fa-clipboard-list"></i></div>

            <h4>Demande de devis</h4>

            <p>2 minutes suffisent</p>

          </div>

          <div class="timeline-step reveal">

            <div class="timeline-icon"><i class="fas fa-user-check"></i></div>

            <h4>Assignation convoyeur</h4>

            <p>Convoyeur professionnel</p>

          </div>

          <div class="timeline-step reveal">

            <div class="timeline-icon"><i class="fas fa-camera"></i></div>

            <h4>Prise en charge</h4>

            <p>État des lieux photo + signature</p>

          </div>

          <div class="timeline-step reveal">

            <div class="timeline-icon"><i class="fas fa-satellite-dish"></i></div>

            <h4>Transport & suivi GPS</h4>

            <p>Géolocalisation temps réel</p>

          </div>

          <div class="timeline-step reveal">

            <div class="timeline-icon"><i class="fas fa-flag-checkered"></i></div>

            <h4>Livraison & validation</h4>

            <p>Photos + signature client</p>

          </div>

        </div>

      </div>

    </section>



    <!-- Avis clients & convoyeurs -->

    <section id="avis">

      <div class="container">

        <div class="section-title reveal">Ils nous font confiance</div>

        <div class="section-sub reveal">Découvrez les avis de nos clients et convoyeurs</div>

        <div id="avisContainer" style="margin-top:32px;">

          <p style="text-align:center;color:var(--gray-mid);font-size:0.9rem;">Chargement des avis...</p>

        </div>

        <div style="text-align:center;margin-top:24px;">

          <button id="btnLaisserAvis" class="btn-primary" style="background:var(--bordeaux);color:white;border:none;padding:12px 32px;border-radius:30px;font-size:0.9rem;cursor:pointer;font-weight:600;">

            <i class="fas fa-star" style="margin-right:6px;"></i> Laisser un avis

          </button>

        </div>

      </div>

    </section>



    <!-- Carte de suivi interactive -->

    <section class="map-section">

      <div class="container map-preview">

        <h3 style="text-align:center; margin-bottom:16px;">Suivez votre véhicule en temps réel</h3>

        <p style="text-align:center; margin-bottom:24px;">Une carte interactive pour chaque émission.</p>

        <div id="miniMap" style="height: 300px; border-radius: 24px;"></div>

      </div>

    </section>



    <!-- CTA final -->

    <section class="container">

      <div class="cta-final reveal">

        <h2>Prêt à confier votre véhicule ?</h2>

        <p style="margin-bottom:24px;">Obtenez votre devis maintenant et rejoignez les centaines de clients satisfaits.

        </p>

        <a href="devis.html" class="btn-primary" style="background:white; color:var(--bordeaux);">Commencer mon devis

          ?</a>

      </div>

    </section>

  </main>



  <footer>

    <div class="container">

      <div class="footer-grid">

        <div class="footer-about">

          <div class="footer-logo">Bathily-Convoyage<span>.</span></div>

          <p>La solution digitale de convoyage automobile & moto avec suivi en temps réel en France.</p>

        </div>

        <div class="footer-links">

          <h4>Navigation</h4><a href="index.html">Accueil</a><a href="#services">Services</a><a href="#tarifs">Tarifs</a><a href="#howitworks">Processus</a><a href="devis.html">Devis</a>

        </div>

        <div class="footer-links">

          <h4>Espaces</h4><a href="dashboard-client.html">Espace client</a><a href="dashboard-convoyeur.html">Espace

            convoyeur</a><a href="espace-pro.html">Espace Pro</a><a href="dashboard-admin.html">Espace admin</a>

        </div>

        <div class="footer-links">

          <h4>Contact</h4><a href="mailto:contact@Bathily-Convoyage.fr">contact@Bathily-Convoyage.fr</a><span>France

            entière</span>

        </div>

        <div class="footer-links">

          <h4>convoyage dans votre ville</h4>

          <div class="footer-cities-grid">

            <div>

              <a href="convoyage-moto-voiture-france.html">France</a>

              <a href="convoyage-moto-voiture-paris.html">Paris</a>

              <a href="convoyage-lyon.html">Lyon</a>

              <a href="convoyage-marseille.html">Marseille</a>

            </div>

            <div>

              <a href="convoyage-bordeaux.html">Bordeaux</a>

              <a href="convoyage-toulouse.html">Toulouse</a>

              <a href="convoyage-montpellier.html">Montpellier</a>

            </div>

          </div>

        </div>

      </div>

      <div class="footer-trust">

        <div class="footer-trust-badge"><i class="fab fa-stripe" style="color:#635BFF"></i> Paiement sécurisé Stripe</div>

        <div class="footer-trust-badge"><i class="fas fa-shield-halved" style="color:var(--bordeaux)"></i> Double RC Pro </div>

        <div class="footer-trust-badge"><i class="fas fa-id-card" style="color:var(--bordeaux)"></i> Identification par plaque</div>

        <div class="footer-trust-badge"><i class="fas fa-lock" style="color:var(--success)"></i> Données chiffrées TLS</div>

      </div>

      <div class="footer-bottom">© 2025 Bathily-Convoyage — Tous droits réservés — <a href="mentions-legales.html" style="color:inherit;text-decoration:underline;">Mentions Légales & CGV/CGU</a></div>

      <div style="margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);text-align:center;">

        <h4 style="color:white;font-family:Montserrat,sans-serif;font-size:1rem;margin-bottom:12px;">📬 Newsletter</h4>

        <p style="color:rgba(255,255,255,0.6);font-size:0.8rem;margin-bottom:16px;">Recevez nos offres exclusives et actualités</p>

        <form id="newsletterForm" style="display:flex;gap:8px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center;">

          <input type="email" name="email" placeholder="Votre email" required style="flex:1;min-width:200px;padding:10px 16px;border-radius:30px;border:none;font-size:0.85rem;">

          <button type="submit" style="background:var(--bordeaux);color:white;border:none;padding:10px 24px;border-radius:30px;cursor:pointer;font-weight:600;font-size:0.85rem;">S'inscrire</button>

        </form>

      </div>

    </div>

  </footer>



  <script>

    // Helper functions for geocoding & distance calculation

    async function geocodeAddress(query) {

      if (!query.trim()) return null;

      try {

        const response = await fetch(`https://api-adresse.data.gouv.fr/search/?q=${encodeURIComponent(query)}&limit=1`);

        const data = await response.json();

        if (data.features && data.features.length > 0) {

          const [lon, lat] = data.features[0].geometry.coordinates;

          return { lat, lon };

        }

        return null;

      } catch (err) {

        console.warn("Erreur géocodage:", err);

        return null;

      }

    }



    function haversine(lat1, lon1, lat2, lon2) {

      const R = 6371;

      const dLat = (lat2 - lat1) * Math.PI / 180;

      const dLon = (lon2 - lon1) * Math.PI / 180;

      const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) ** 2;

      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

      let dist = R * c;

      dist = Math.round(dist * 1.22);

      return dist;

    }



    let quickQuoteDistVal = 0;

    async function calculateQuickQuote() {

      const depart = document.getElementById('depart').value.trim();

      const arrivee = document.getElementById('arrivee').value.trim();

      const resultBox = document.getElementById('quickQuoteResult');

      const distEl = document.getElementById('quickQuoteDist');

      const priceEl = document.getElementById('quickQuotePrice');

      const btn = document.getElementById('btnEstimate');



      if (!depart || !arrivee) {

        if (resultBox) resultBox.style.display = 'none';

        if (btn) btn.innerHTML = "Estimer mon prix ?";

        return;

      }



      if (resultBox) {

        resultBox.style.display = 'inline-flex';

        distEl.textContent = 'Calcul en cours...';

        priceEl.textContent = '—';

      }



      try {

        const coord1 = await geocodeAddress(depart);

        const coord2 = await geocodeAddress(arrivee);

        if (coord1 && coord2) {

          let dist = 0;

          try {

            const response = await fetch(`https://router.project-osrm.org/route/v1/driving/${coord1.lon},${coord1.lat};${coord2.lon},${coord2.lat}?overview=false`);

            if (!response.ok) throw new Error("Erreur service routier");

            const data = await response.json();

            if (data.routes && data.routes.length > 0) {

              dist = Math.round(data.routes[0].distance / 1000);

            } else {

              throw new Error("Itinéraire introuvable");

            }

          } catch (osrmErr) {

            console.warn("Calcul OSRM échoué, repli sur Haversine :", osrmErr);

            dist = haversine(coord1.lat, coord1.lon, coord2.lat, coord2.lon);

          }



          quickQuoteDistVal = dist;

          const isMoto = document.getElementById('vehType').value === 'Moto';

          const rate = isMoto ? 1.0 : 1.2;

          const base = Math.round(Math.max(dist * rate, isMoto ? 120 : 150));



          if (distEl) distEl.textContent = dist + ' km';

          if (priceEl) priceEl.textContent = base + ' € TTC';

          if (btn) btn.innerHTML = "Confirmer ce tarif ?";

        } else {

          if (distEl) distEl.textContent = 'Adresse non reconnue';

        }

      } catch (err) {

        console.error(err);

        if (distEl) distEl.textContent = 'Erreur de calcul';

      }

    }



    // ----- Autocomplétion d'adresse via l'API BAN (Géoportail) -----

    async function setupAddressAutocomplete(inputElement, boxId) {

      const box = document.getElementById(boxId);

      let debounceTimer;



      inputElement.addEventListener('input', function (e) {

        clearTimeout(debounceTimer);

        const query = this.value.trim();

        // On ne lance la recherche qu'à partir de 3 caractères

        if (query.length < 3) {

          box.style.display = 'none';

          return;

        }

        debounceTimer = setTimeout(() => fetchSuggestions(query, box, inputElement), 150);

      });



      async function fetchSuggestions(query, box, inputElement) {

        // Appel à l'API de géocodage de la Géoplateforme (BAN)

        const url = `https://data.geopf.fr/geocodage/search?q=${encodeURIComponent(query)}&limit=6`;

        try {

          const response = await fetch(url);

          if (!response.ok) throw new Error(`Erreur HTTP ${response.status}`);

          const data = await response.json();

          if (data.features && data.features.length > 0) {

            box.innerHTML = '';

            data.features.forEach(feature => {

              const fullAddress = feature.properties.label;

              const div = document.createElement('div');

              div.className = 'suggest-item';

              div.textContent = fullAddress;

              div.addEventListener('click', () => {

                inputElement.value = fullAddress;

                box.style.display = 'none';

                calculateQuickQuote();

                if (typeof saveDraftQuote === 'function') saveDraftQuote();

              });

              box.appendChild(div);

            });

            box.style.display = 'block';

          } else {

            box.style.display = 'none';

          }

        } catch (error) {

          console.error("Erreur lors de l'appel à l'API BAN :", error);

          box.style.display = 'none';

        }

      }

    }



    // Initialiser l'autocomplétion pour les deux champs

    const departInput = document.getElementById('depart');

    const arriveeInput = document.getElementById('arrivee');

    if (departInput) setupAddressAutocomplete(departInput, 'departSuggests');

    if (arriveeInput) setupAddressAutocomplete(arriveeInput, 'arriveeSuggests');



    // Pre-remplissage geolocalise du depart

    if (departInput && !departInput.value && navigator.geolocation) {

      navigator.geolocation.getCurrentPosition(function(pos) {

        var lat = pos.coords.latitude.toFixed(5);

        var lon = pos.coords.longitude.toFixed(5);

        fetch('https://api-adresse.data.gouv.fr/reverse/?lon=' + lon + '&lat=' + lat + '&limit=1')

          .then(function(r) { return r.json(); })

          .then(function(data) {

            if (data.features && data.features[0]) {

              departInput.value = data.features[0].properties.label;

            }

          })

          .catch(function() {});

      }, function() {}, { timeout: 5000, enableHighAccuracy: false });

    }



    // Restaurer le brouillon depuis localStorage

    try {

      var saved = JSON.parse(localStorage.getItem('bathily_devis') || '{}');

      if (saved.depart && departInput && !departInput.value) departInput.value = saved.depart;

      if (saved.arrivee && arriveeInput && !arriveeInput.value) arriveeInput.value = saved.arrivee;

    } catch(e) {}



    // Listen to select type changes

    document.getElementById('vehType').addEventListener('change', calculateQuickQuote);



    // ----- Tabs Véhicule Helper -----

    function setVehType(value) {

      const input = document.getElementById('vehType');

      if (!input) return;

      input.value = value;

      

      const tabs = document.querySelectorAll('.veh-tab');

      tabs.forEach(tab => {

        if (tab.dataset.value === value) {

          tab.classList.add('active');

        } else {

          tab.classList.remove('active');

        }

      });

      

      input.dispatchEvent(new Event('change'));

    }



    // ----- Auto-save Devis Helper -----

    function saveDraftQuote() {

      const depart = document.getElementById('depart').value.trim();

      const arrivee = document.getElementById('arrivee').value.trim();

      const vehType = document.getElementById('vehType').value;

      

      const draft = { depart, arrivee, vehType };

      localStorage.setItem('bathily_draft_quote', JSON.stringify(draft));

    }



    function restoreDraftQuote() {

      try {

        const saved = localStorage.getItem('bathily_draft_quote');

        if (saved) {

          const draft = JSON.parse(saved);

          if (draft.depart) document.getElementById('depart').value = draft.depart;

          if (draft.arrivee) document.getElementById('arrivee').value = draft.arrivee;

          if (draft.vehType) {

            // Set type and style active tab

            const input = document.getElementById('vehType');

            if (input) input.value = draft.vehType;

            const tabs = document.querySelectorAll('.veh-tab');

            tabs.forEach(tab => {

              if (tab.dataset.value === draft.vehType) {

                tab.classList.add('active');

              } else {

                tab.classList.remove('active');

              }

            });

          }

          if (draft.depart && draft.arrivee) {

            calculateQuickQuote();

          }

        }

      } catch (e) {

        console.warn("Failed to restore draft quote:", e);

      }

    }



    // Bind auto-save listeners on blur

    document.addEventListener('DOMContentLoaded', () => {

      const departEl = document.getElementById('depart');

      const arriveeEl = document.getElementById('arrivee');

      const vehTypeEl = document.getElementById('vehType');

      

      if (departEl) {

        departEl.addEventListener('blur', saveDraftQuote);

        departEl.addEventListener('change', saveDraftQuote);

      }

      if (arriveeEl) {

        arriveeEl.addEventListener('blur', saveDraftQuote);

        arriveeEl.addEventListener('change', saveDraftQuote);

      }

      if (vehTypeEl) {

        vehTypeEl.addEventListener('change', saveDraftQuote);

      }

      

      restoreDraftQuote();

    });



    // Fermer les suggestions en cliquant ailleurs

    document.addEventListener('click', (e) => {

      if (!e.target.closest('.search-wrapper')) {

        document.querySelectorAll('.suggest-box').forEach(box => box.style.display = 'none');

      }

    });



    // ----- UX Animations: Fade-in Scroll -----

    const fadeObserver = new IntersectionObserver((entries) => {

      entries.forEach(entry => {

        if (entry.isIntersecting) {

          entry.target.classList.add('visible');

        }

      });

    }, { threshold: 0.1 });



    document.querySelectorAll('.fade-in').forEach(el => fadeObserver.observe(el));



    // ----- Compâteurs animés -----

    function animateCounter(el, target, suffix) {

      let current = 0;

      const duration = 2000;

      const start = performance.now();

      

      const update = (currentTime) => {

        const elapsed = currentTime - start;

        const progress = Math.min(elapsed / duration, 1);

        const easeOut = 1 - Math.pow(1 - progress, 3);

        

        // Special handling for Google rating to show 4.9 instead of 4.9

        let displayValue = Math.floor(target * easeOut);

        if (el.id === 'stat3') {

          displayValue = (displayValue / 10).toFixed(1);

        }

        

        el.textContent = displayValue + suffix;

        

        if (progress < 1) requestAnimationFrame(update);

        else {

          if (el.id === 'stat3') {

            el.textContent = (target / 10).toFixed(1) + suffix;

          } else {

            el.textContent = target + suffix;

          }

        }

      };

      

      requestAnimationFrame(update);

    }



    // Délai 1s après load pour 0 impact LCP

    setTimeout(() => {

      const counters = document.querySelectorAll('.counter');

      counters.forEach(counter => {

        const target = parseInt(counter.dataset.target);

        const suffix = counter.id === 'stat1' ? '+' : (counter.id === 'stat2' ? 'h' : (counter.id === 'stat3' ? '/5' : (counter.id === 'stat4' ? '%' : '')));

        animateCounter(counter, target, suffix);

      });

    }, 1000);



    // ----- Carrousel témoignages -----

    const carousel = document.getElementById('testimonialCarousel');

    const navContainer = document.getElementById('carouselNav');

    if (!carousel || !navContainer) { /* carrousel non présent sur cette page */ }

    else {

    const cards = Array.from(carousel.children);

    let currentIndex = 0;



    function updateCarousel() {

      cards.forEach((_, i) => {

        const dot = navContainer.children[i];

        if (dot) dot.classList.toggle('active', i === currentIndex);

      });

      carousel.scrollTo({ left: currentIndex * carousel.clientWidth, behavior: 'smooth' });

    }



    function initCarousel() {

      navContainer.innerHTML = '';

      cards.forEach((_, i) => {

        const dot = document.createElement('div');

        dot.classList.add('carousel-dot');

        dot.addEventListener('click', () => { currentIndex = i; updateCarousel(); });

        navContainer.appendChild(dot);

      });

      updateCarousel();

      carousel.addEventListener('scroll', () => {

        const newIndex = Math.round(carousel.scrollLeft / carousel.clientWidth);

        if (newIndex !== currentIndex && !isNaN(newIndex)) { currentIndex = newIndex; updateCarousel(); }

      });

    }

    initCarousel();

    }



    // ----- Chargement asynchrone et dynamique de Leaflet (Lazy Load) -----

    let leafletPromise = null;

    function loadLeaflet() {

      if (leafletPromise) return leafletPromise;

      

      leafletPromise = new Promise((resolve, reject) => {

        // Chargement du fichier CSS de Leaflet

        const link = document.createElement('link');

        link.rel = 'stylesheet';

        link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';

        link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';

        link.crossOrigin = '';

        document.head.appendChild(link);

        

        // Chargement du fichier JS de Leaflet

        const script = document.createElement('script');

        script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';

        script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=';

        script.crossOrigin = '';

        script.onload = () => resolve(window.L);

        script.onerror = () => reject(new Error('Leaflet failed to load'));

        document.head.appendChild(script);

      });

      return leafletPromise;

    }



    function initHeroMap(L) {

      const heroMapEl = document.getElementById('heroMap');

      if (!heroMapEl) return;

      

      const heroMap = L.map('heroMap', {

        zoomControl: true,

        scrollWheelZoom: false

      });

      

      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {

        attribution: '&copy; OpenStreetMap contributors &copy; CARTO'

      }).addTo(heroMap);



      const route = [

        [48.8566, 2.3522], // Paris

        [45.7640, 4.8357], // Lyon

        [43.2965, 5.3698]  // Marseille

      ];



      L.marker([48.8566, 2.3522]).addTo(heroMap).bindPopup('Paris').openPopup();

      L.marker([45.7640, 4.8357]).addTo(heroMap).bindPopup('Lyon');

      L.marker([43.2965, 5.3698]).addTo(heroMap).bindPopup('Marseille');



      const polyline = L.polyline(route, {

        color: '#0A4D68',

        weight: 5,

        opacity: 0.9,

        className: 'animated-polyline'

      }).addTo(heroMap);



      heroMap.fitBounds(polyline.getBounds(), { padding: [40, 40] });

    }



    function initMiniMap(L) {

      const miniMapEl = document.getElementById('miniMap');

      if (!miniMapEl) return;

      

      const miniMap = L.map('miniMap').setView([46.5, 2.5], 6);

      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {

        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> & CartoDB',

        subdomains: 'abcd',

        maxZoom: 19

      }).addTo(miniMap);

      

      L.marker([48.8566, 2.3522]).addTo(miniMap).bindPopup('Paris').openPopup();

      L.marker([45.7640, 4.8357]).addTo(miniMap).bindPopup('Lyon');

      L.polyline([[48.8566, 2.3522], [45.7640, 4.8357]], { color: '#0A4D68', weight: 4, opacity: 0.8 }).addTo(miniMap);

    }



    // Initialisation différée via IntersectionObserver

    const mapObserver = new IntersectionObserver((entries, observer) => {

      entries.forEach(entry => {

        if (entry.isIntersecting) {

          loadLeaflet().then(L => {

            initHeroMap(L);

            initMiniMap(L);

          }).catch(err => console.error("Erreur Leaflet lazy-load :", err));

          observer.disconnect();

        }

      });

    }, { rootMargin: '100px' });



    const heroMapEl = document.getElementById('heroMap');

    if (heroMapEl) {

      mapObserver.observe(heroMapEl);

    } else {

      const miniMapEl = document.getElementById('miniMap');

      if (miniMapEl) mapObserver.observe(miniMapEl);

    }



    // ----- Redirection vers la page devis avec stockage des données -----

    function goToDevis() {

      const depart = document.getElementById('depart').value;

      const arrivee = document.getElementById('arrivee').value;

      if (!depart || !arrivee) {

        Swal.fire({

          title: 'Champs requis',

          text: 'Veuillez renseigner l\'adresse de départ et l\'adresse d\'arrivée.',

          icon: 'warning',

          confirmButtonColor: '#0A4D68'

        });

        return;

      }

      const type = document.getElementById('vehType').value === 'Automobile' ? 'auto' : 'moto';

      localStorage.setItem('bathily_devis', JSON.stringify({

        vehicule: type,

        depart: depart,

        arrivee: arrivee,

        mode: 'route',

        dist: quickQuoteDistVal

      }));

      window.location.href = 'devis.html';

    }



    // ----- Menu mobile : fermeture après clic -----

    document.querySelectorAll('.nav-links a').forEach(link => {

      link.addEventListener('click', () => {

        document.querySelector('.nav-links').classList.remove('show');

      });

    });



    // ----- Animation au défilement (reveal) -----

    const revealObserver = new IntersectionObserver((entries) => {

      entries.forEach(entry => {

        if (entry.isIntersecting) {

          entry.target.classList.add('visible');

        }

      });

    }, { threshold: 0.15 });

    document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));



    // ========== SUPABASE SINGLETON ==========

    var _supabaseClient = null;

    function getSupabase() {

      if (!_supabaseClient) {

        if (!window.SUPABASE_URL || !window.SUPABASE_ANON_KEY) {

          console.error("Supabase credentials missing. Check supabase-config.js");

          return null;

        }

        _supabaseClient = supabase.createClient(window.SUPABASE_URL, window.SUPABASE_ANON_KEY);

        window._sbClient = _supabaseClient;

      }

      return _supabaseClient;

    }



    // ----- Supabase Sync Packs Config -----

    async function loadPacksConfig() {

      try {

        const client = getSupabase();

        const { data, error } = await client.from('system_settings').select('key, value');

        if (error || !data) return;



        data.forEach(setting => {

          if (setting.key.startsWith('pack_')) {

            const p = setting.value;

            const type = setting.key.replace('pack_', ''); // 'starter', 'serenite', 'excellence'

            

            const nameEl = document.getElementById(`idx_pack_${type}_name`);

            const descEl = document.getElementById(`idx_pack_${type}_desc`);

            

            if (nameEl) {

              nameEl.textContent = p.name || type;

              if (p.price > 0) nameEl.textContent += ` (+${p.price}€)`;

            }

            if (descEl && p.features) {

              // Extract the first feature or a summary for the short description if needed,

              // or we just replace the text with a comma separated list.

              descEl.textContent = p.features.split('\n').slice(0, 3).join(', ') + '.';

            }

          }

        });

      } catch (err) {

        console.warn('Failed to load packs config on index', err);

      }

    }

    loadPacksConfig();

  </script>



  <section style="padding:40px 20px" id="seo-zones">

    <div class="container" style="text-align: center; max-width: 800px; margin-bottom: 60px;">

      <h2 style="font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; color: var(--gray-dark);">

        convoyage de véhicules partout en France</h2>

      <p style="color: var(--gray-mid); font-size: 0.95rem; line-height: 1.6;">Bathily-Convoyage intervient à Paris,

        Lyon, Marseille, Lille, Bordeaux, Toulouse, Nantes, Strasbourg, Nice et sur l'ensemble du territoire français.

      </p>

    </div>

  </section>



  <section style="padding:80px 0; background: white; border-top: 1px solid var(--border-light);" id="faq">

    <div class="container">

      <div class="section-title reveal">Questions fréquentes</div>

      <div class="section-sub reveal">Tout ce que vous devez savoir sur notre service de convoyage</div>



      <div class="faq-accordion reveal">

        <details class="faq-item" open="None">

          <summary>Combien coûte un convoyage automobile ?</summary>

          <p>Le tarif dépend de la distance à parcourir, de la formule choisie (par la route ou sur plateau) et de la

            catégorie de votre véhicule. Notre simulateur en ligne estime un coût à partir de 1,20 € TTC du kilomètre par

            la route, avec un forfait minimum de 150 € TTC.</p>

        </details>



        <details class="faq-item">

          <summary>Le véhicule convoyé est-il assuré pendant le trajet ?</summary>

          <p>Oui, absolument. toutes nos émissions de convoyage sont entièrement couvertes par notre double assurance

            professionnelle multirisque  (RC Pro). En cas de sinistre, les dommages matériels et corporéels sont

            pris en charge.</p>

        </details>



        <details class="faq-item">

          <summary>Dans quelles régions de France intervenez-vous ?</summary>

          <p>Nous intervenons sur l'ensemble du territoire français (France métropolitaine). Que ce soit à Paris, Lyon,

            Marseille, Bordeaux, Lille, Nantes, Strasbourg ou dans de plus petites communes, nos convoyeurs certifiés

            récupèrent et livrent votre véhicule porte-à-porte.</p>

        </details>



        <details class="faq-item">

          <summary>Comment fonctionne le suivi en temps réel de ma livraison ?</summary>

          <p>Une fois le convoyage démarré, vous recevez un lien unique par email ou SMS. Ce lien vous donne accès à une

            carte interactive montrant la position GPS du véhicule en temps réel, mise à jour en continu par le

            convoyeur.</p>

        </details>



        <details class="faq-item">

          <summary>Qu'est-ce que l'état des lieux certifié EDL ?</summary>

          <p>Au départ et à l'arrivée, le convoyeur réalise un état des lieux complet de carrosserie et d'habitacle via

            notre application. Il prend au minimum 20 photos certifiées et géolocalisées qui vous sont transmises

            instantanéément sous forme de rapport numérique co-signé.</p>

        </details>

      </div>

    </div>

  </section>

  <a href="devis.html" class="floating-devis">Demander un devis</a>



  <!-- Sticky Call Mobile -->

  <a href="tel:0758362249" class="sticky-call-mobile" aria-label="Appeler Bathily-Convoyage">

    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24" height="24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">

      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>

    </svg>

  </a>





<script src="js/avis.js" defer></script>

<script src="js/newsletter.js" defer></script>

<script src="js/mobile-nav.js" defer></script>

<script>

if ("serviceWorker" in navigator) {

  window.addEventListener("load", function() {

    navigator.serviceWorker.register("/sw.js").catch(function(e) {

      console.warn("SW registration failed:", e);

    });

  });

}

</script>

</body>



</html>





