:root{
  --red:#c60000;
  --yellow:#f5c400;
  --text:#111;
  --muted:#5b5b5b;
  --line:#eaeaea;
  --bg:#ffffff;
  --shadow: 0 18px 45px rgba(0,0,0,.08);
  --radius:16px;
}

/* Reset & base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:var(--bg);
}

.container{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:10;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  gap:12px;
}

/* BRAND (plus classe) */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  letter-spacing:.4px;
  font-weight:600;
}
.brand__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--red), var(--yellow));
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.brand__name{
  color:#141414;
}
.brand__name strong{
  font-weight:900;
  letter-spacing:.7px;
}

.nav__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
.btn:hover{ transform: translateY(-1px); }

.btn--red{ background:var(--red); color:#fff; }
.btn--yellow{ background:var(--yellow); color:#111; }
.btn--lg{ padding:14px 18px; border-radius:14px; }
.btn--full{ width:100%; }

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  padding:42px 0 56px;
  align-items:center;
  position:relative;
  z-index:2;
}

h1{
  margin:0 0 10px;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing:-.6px;
}

.hero__lead{
  margin:0 0 18px;
  color:#222;
  line-height:1.6;
  font-size:16px;
  max-width:62ch;
}

.checks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  max-width:620px;
}
.checks li{
  position:relative;
  padding-left:28px;
  line-height:1.5;
}
.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:14px;
  height:14px;
  border-radius:4px;
  background:linear-gradient(90deg, var(--red), var(--yellow));
}

.hero__buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Ribbons catalanes */
.ribbons{
  position:absolute;
  inset:auto -20% -22% -20%;
  height:320px;
  z-index:1;
  opacity:.95;
  transform: rotate(-4deg);
}
.ribbon{
  position:absolute;
  left:0;
  right:0;
  height:120px;
  border-radius:999px;
  box-shadow: 0 25px 60px rgba(0,0,0,.08);
}
.ribbon--yellow{ background: rgba(245,196,0,.85); top:40px; }
.ribbon--red{ background: rgba(198,0,0,.78); top:110px; }
.ribbon--thin{ height:80px; top:190px; opacity:.55; }

/* Phone illustration */
.phone-card{
  position:relative;
  width:min(420px, 100%);
  margin-left:auto;
  aspect-ratio: 4/3;
}

.phone{
  position:absolute;
  right:0;
  bottom:10px;
  width:260px;
  height:420px;
  border-radius:34px;
  background:#111;
  box-shadow: var(--shadow);
  border:6px solid #1c1c1c;
}
.phone__top{
  height:36px;
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  background:linear-gradient(#1d1d1d, #121212);
}
.phone__bottom{
  height:44px;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  background:linear-gradient(#121212, #1d1d1d);
}
.phone__screen{
  height:340px;
  margin:0 10px;
  border-radius:18px;
  background:#f7f7f7;
  overflow:hidden;
  position:relative;
}

/* Badge “Votre chauffeur est en approche” */
.driver-status{
  position:absolute;
  top:12px;
  left:12px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:#fff;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}
.driver-status .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#1ccf6d;
  box-shadow:0 0 0 6px rgba(28,207,109,.18);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(28,207,109,.45); }
  70%{ box-shadow:0 0 0 10px rgba(28,207,109,0); }
  100%{ box-shadow:0 0 0 0 rgba(28,207,109,0); }
}

/* Map inside phone (CSS map) */
.map{
  position:absolute;
  inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,0)),
    repeating-linear-gradient(90deg, #ececec 0 18px, #f7f7f7 18px 36px),
    repeating-linear-gradient(0deg, #efefef 0 16px, #f7f7f7 16px 32px);
}

.map__route{
  position:absolute;
  left:34px;
  top:40px;
  width:170px;
  height:260px;
  border-left:6px solid #2b6cff;
  border-bottom:6px solid #2b6cff;
  border-radius:24px;
  transform: rotate(10deg);
  opacity:.9;
}

.map__pin{
  position:absolute;
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
.map__pin--a{
  left:22px;
  top:24px;
  background:var(--red);
}
.map__pin--b{
  right:34px;
  bottom:86px;
  background:var(--yellow);
  color:#111;
}

.map__car{
  position:absolute;
  right:46px;
  bottom:58px;
  width:34px;
  height:18px;
  border-radius:6px;
  background:#111;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
.map__car::before, .map__car::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#444;
  bottom:-4px;
}
.map__car::before{ left:4px; }
.map__car::after{ right:4px; }

/* Hand */
.hand{
  position:absolute;
  right:-8px;
  bottom:0;
  width:230px;
  height:260px;
  border-radius: 140px 140px 40px 40px;
  background:#f1c7a8;
  opacity:.35;
  filter: blur(.2px);
  transform: rotate(-8deg);
}

/* Sections */
.section{ padding:28px 0; }
.section--soft{
  background:#fafafa;
  border-top:1px solid var(--line);
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:20px;
}
.card--wide{ padding:22px; }

.card h2{
  margin:0 0 8px;
  font-size:22px;
}
.muted{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
}

.bullets{
  margin:0;
  padding-left:18px;
  color:#222;
}
.bullets li{ padding:6px 0; }

.stack{
  display:grid;
  gap:10px;
  margin-top:10px;
}

/* Mini-map */
.mini-map{
  margin-top:14px;
  height:170px;
  border-radius:14px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 30% 35%, rgba(198,0,0,.14), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(245,196,0,.18), transparent 55%),
    linear-gradient(0deg, #f3f3f3, #ffffff);
  position:relative;
  overflow:hidden;
}
.mini-map__title{
  position:absolute;
  left:12px;
  top:10px;
  font-weight:900;
  background:#fff;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}
.mini-map__pin{
  position:absolute;
  left:55%;
  top:52%;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--red);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.mini-map__lines{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 18px);
  opacity:.35;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
}
.footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:18px 0;
  color:#333;
}
.footer a{
  color:inherit;
  text-decoration:none;
  font-weight:900;
}

/* Quality-of-life */
.btn, button, a { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size:16px; }

/* Responsive: tablette + mobile */
@media (max-width: 920px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__right{ order:-1; }
  .phone-card{ margin:0 auto; }
  .grid-2{ grid-template-columns:1fr; }
}

/* Mobile */
@media (max-width: 560px){
  .container{ width: calc(100% - 28px); }

  .nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
  }

  .nav__cta{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .nav__cta .btn{
    width: 100%;
    padding: 12px 10px;
    border-radius: 12px;
  }

  .hero__grid{
    grid-template-columns: 1fr;
    padding: 26px 0 34px;
    gap: 16px;
  }

  h1{
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 8px;
  }

  .hero__lead{
    font-size: 15px;
    margin: 0 0 14px;
  }

  .checks li{
    font-size: 14.5px;
    padding-left: 26px;
  }
  .checks li::before{
    top: 5px;
    width: 13px;
    height: 13px;
  }

  .hero__buttons{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .btn--lg{
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 14px;
  }

  .phone-card{
    width: 100%;
    margin: 0 auto;
    height: 340px;
    aspect-ratio: auto;
  }

  .phone{
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 0;
    width: 220px;
    height: 360px;
    border-radius: 30px;
    position: absolute;
  }

  .phone__screen{ height: 285px; }

  .hand{
    opacity: .22;
    right: 0;
    width: 190px;
    height: 220px;
  }

  .ribbons{
    inset: auto -35% -30% -35%;
    height: 260px;
    opacity: .85;
  }
  .ribbon{ height: 95px; }
  .ribbon--red{ top: 95px; }
  .ribbon--thin{ height: 70px; top: 165px; }

  .section{ padding: 18px 0; }

  .card{
    padding: 16px;
    border-radius: 16px;
  }

  .card h2{
    font-size: 18px;
    line-height: 1.2;
  }

  .muted{
    font-size: 14px;
    margin-bottom: 12px;
  }

  .mini-map{ height: 150px; }

  .footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 0;
  }

  .driver-status{
    font-size:12.5px;
    padding:7px 10px;
  }
}

/* Tablette (optionnel) */
@media (min-width: 561px) and (max-width: 920px){
  .phone-card{ height: 380px; }
}

/* SVG helper classes (si tu utilises les cartes illustrées SVG) */
.map-illu{
  position:absolute;
  inset:0;
}
.map-illu svg{
  width:100%;
  height:100%;
  display:block;
}
.mini-map--illu{
  padding:0;
  overflow:hidden;
}
.mini-map--illu svg{
  width:100%;
  height:100%;
  display:block;
}
/* Header premium (titre du haut plus classe) */
.brand--premium{ text-decoration:none; color:inherit; }
.brand__name{ display:flex; flex-direction:column; line-height:1.05; }
.brand__top{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.75; }
.brand__main{ font-size:18px; letter-spacing:.02em; font-weight:900; }

/* Note sous les boutons hero */
.hero__note{
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* Maps SVG */
.map-illu{ position:absolute; inset:0; }
.map-illu svg{ width:100%; height:100%; display:block; }
.mini-map--illu{ padding:0; overflow:hidden; }
.mini-map--illu svg{ width:100%; height:100%; display:block; }

/* Bouton SMS dans le téléphone */
.driver-sms{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:#ffffff;
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  color:#111;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.driver-sms__icon{
  width:28px;
  height:28px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--red), var(--yellow));
  position:relative;
  flex:0 0 auto;
}
.driver-sms__icon::after{
  content:"";
  position:absolute;
  left:8px;
  top:9px;
  width:12px;
  height:8px;
  border:2px solid rgba(255,255,255,.95);
  border-top:none;
  border-left:none;
  transform: rotate(45deg);
  opacity:.9;
}

/* Mobile : texte header + SMS plus compact */
@media (max-width:560px){
  .brand__main{ font-size:17px; }
  .driver-sms{ font-size:12.5px; padding:9px 11px; }
}