:root{
      --bg:#f7fafc;--ink:#0b1324;--sub:#4a5568;--brand:#0f7ae5;--brand2:#03b0c5;--ok:#0ead69;--warn:#c05621;--card:#ffffff;--line:#e2e8f0;
      --shadow:0 10px 30px rgba(2,21,48,.08);
      --radius:20px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
    a{color:var(--brand);text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    .wrap{max-width:1120px;margin:auto;padding:0 20px}
    header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .logo{display:flex;align-items:center;gap:10px;font-weight:800}
    .logo img{width:34px;height:34px;border-radius:8px;box-shadow:var(--shadow)}
    .nav a{margin:0 10px;color:var(--ink);font-weight:600}
    .btn{appearance:none;border:none;border-radius:999px;padding:14px 20px;font-weight:700;cursor:pointer}
    .btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 10px 25px rgba(15,122,229,.25)}
    .btn-light{background:#fff;border:1px solid var(--line);color:var(--ink)}
    .btn-ghost{background:transparent;border:1px solid var(--line)}
    body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}/* HERO */
    .hero{position:relative;isolation:isolate}
    .hero::before{
      content:"";position:absolute;inset:0;z-index:-1;
      background:url('images/tokyo-cars.jpg') center/cover no-repeat,#dbeafe;
      filter:brightness(.75);
    }
    .hero .wrap{padding:80px 20px 60px}
    .hero-card{max-width:950px;margin:auto;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
   .hero h1 {
  font-family: Inter, sans-serif !important;
}
    .hero p{color:var(--sub);font-size:clamp(14px,2.5vw,18px);margin:0 0 20px}
    .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
    .trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;color:#1f2937;font-size:14px}
    .trust .chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:999px}
    .chip img{width:20px;height:20px}
    /* BANNERS */
    .banner{background:#fff;border:1px solid var(--line);border-left:5px solid var(--ok);padding:12px 14px;border-radius:12px;display:flex;gap:10px;align-items:flex-start}
    /* GRID SECTIONS */
    section{padding:60px 0}
    .grid{display:grid;gap:22px}
    @media(min-width:900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
    .card h3{margin:0 0 8px}
    .muted{color:var(--sub)}
    .flags{font-size:34px;line-height:1}
    /* HOW IT WORKS */
    .step{display:flex;gap:14px}
    .step .num{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:800}
    /* ORDER FORM */
    form{display:grid;gap:14px}
    label{font-weight:700}
    input,select{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
    .hint{font-size:12px;color:var(--sub);margin-top:-8px}
    .reassure{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:12px}
    .two{display:grid;gap:14px}
    @media(min-width:700px){.two{grid-template-columns:1fr 1fr}}
    /* REVIEWS */
    .reviews{display:grid;gap:16px}
    .quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
    .quote strong{display:block;margin-top:6px}
    /* FAQ */
    details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
    details+details{margin-top:10px}
    summary{cursor:pointer;font-weight:700}
    /* Sticky CTA */
    .sticky-cta{position:fixed;left:0;right:0;bottom:10px;display:flex;justify-content:center;z-index:60}
    .sticky-cta .inner{background: transparent;box-shadow:var(--shadow);padding:10px;border-radius:999px}
    .hidden{display:none}
    footer{background:#0b1324;color:#fff}
    footer a{color:#fff;text-decoration:underline}
    .hero-right{
      background:#f8fbff;
      border-radius:20px;
      border:1px solid #dbe7ff;
      padding:16px 18px 14px;
      font-size:14px;
    }

    .hero-right-title{
      font-size:14px;
      font-weight:600;
      color:#003580;
      margin-bottom:10px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .hero-right-row{
      display:flex;
      justify-content:space-between;
      margin-bottom:6px;
      font-size:14px;
    }

    .hero-right-row span:first-child{
      color:var(--sub);
    }

    .hero-price{
      font-size:26px;
      font-weight:700;
      color:#003580;
      margin:4px 0;
    }

    .hero-price small{
      font-size:12px;
      font-weight:400;
      color:var(--sub);
      margin-left:4px;
    }

    .hero-note{
      font-size:12px;
      color:var(--sub);
      margin-top:4px;
    }
    @media (max-width: 600px) {
  /* Réduire l’espace au-dessus du hero sur mobile */
  section.hero {
    padding-top: 20px;      /* au lieu de 60px */
    padding-bottom: 30px;   /* un peu plus compact aussi */
  }

  .hero .wrap {
    padding-top: 24px;      /* au lieu de 80px */
    padding-bottom: 24px;
  }

  /* Optionnel : header plus compact sur mobile */
  header .wrap {
    padding: 8px 0 !important;
  }
}

@media (max-width: 600px) {
  /* Réduire l’espace au-dessus du hero sur mobile */
  section.hero {
    padding-top: 20px;      /* au lieu de 60px */
    padding-bottom: 30px;   /* un peu plus compact aussi */
  }

  .hero .wrap {
    padding-top: 24px;      /* au lieu de 80px */
    padding-bottom: 24px;
  }

  /* Optionnel : header plus compact sur mobile */
  header .wrap {
    padding: 8px 0 !important;
  }
}
/* --- Trust badges (chips) --- */
.trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.trust .chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  width: 100%;

  font-size: 14px;
  line-height: 1.3;
  text-align: left; /* ⬅️ important */
}

.trust .chip img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
}

.trust .chip span {
  display: block;
  text-align: left; /* ⬅️ force le texte à gauche */
}

/* Desktop : 2 par ligne */
@media (min-width: 700px) {
  .trust {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .trust .chip {
    flex: 1 1 calc(50% - 12px);
    min-width: 260px;
  }
}
#start {
  scroll-margin-top: 120px;
}
#print {
  scroll-margin-top: 120px;
}

#renting {
  scroll-margin-top: 120px;
}

#steps {
  scroll-margin-top: 120px;
}
.side-guide-link {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  font-size: 14px;
}

.side-guide-link .hint {
  color: #6b7280;
  font-size: 13px;
}

.side-guide-link a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.side-guide-link a:hover {
  text-decoration: underline;
}
.guide-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  font-weight:700;
  color:#111827;
  box-shadow:0 10px 25px rgba(2,21,48,.06);
}

.guide-chip span{
  color: var(--brand);
  font-weight: 900;
}

.guide-chip:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(2,21,48,.10);
}


.card.step {
  text-align: center;
  padding: 30px 25px;
}

.step-img-wrap {
  margin-bottom: 20px;
}

.step-img-wrap img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 18px;
}

.card.step .num {
  font-size: 14px;
  font-weight: 700;
  color: #2b6cb0;
  margin-bottom: 10px;
}

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

.card.step p {
  font-size: 14px;
  line-height: 1.5;
}
.card.step {
  text-align: center;
  padding: 35px 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-img-wrap {
  width: 100%;
  margin-bottom: 25px;
}

.step-img-wrap img {
  width: 100%;
  max-width: 280px;   /* plus grande */
  height: auto;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
}

.card.step .num {
  font-size: 14px;
  font-weight: 700;
  color: #2b6cb0;
  background: #edf2f7;
  padding: 6px 12px;
  border-radius: 30px;
  margin-bottom: 14px;
}

.card.step h3 {
  font-size: 20px;
  margin-bottom: 14px;
}

.card.step p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 260px;
}
.card.step {
  text-align: left;
  padding: 35px 30px 40px;
  display: flex;
  flex-direction: column;
}

.step-img-wrap {
  margin-bottom: 25px;
  text-align: center;
}

.step-img-wrap img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.step-title .num {
  font-size: 13px;
  font-weight: 700;
  color: #2b6cb0;
  background: #edf2f7;
  padding: 4px 9px;
  border-radius: 20px;
}

.step-title h3 {
  font-size: 20px;
  margin: 0;
}
.card.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start; /* ⭐ IMPORTANT */
  gap: 10px;                   /* contrôle exact des espaces */
}
.card.step h3,
.card.step p,
.step-title {
  margin: 0;
}