/* =========================
   VARIABLES
========================= */
:root{
  --bleu-nuit:#0F172A;
  --bleu-royal:#2563EB;
  --orange-premium:#F97316;
  --gris-clair:#F3F4F6;
  --texte:#1E293B;
  --border-radius:18px;
}

body{
  background-color:var(--gris-clair);
  color:var(--texte);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

/* =========================
   BOUTONS
========================= */
.btn-outline-primary{
  color:var(--orange-premium)!important;
  border-color:var(--orange-premium);
  font-size:.9rem;
  padding:8px 12px;
  border-radius:8px;
}
.btn-outline-primary:hover{
  background-color:var(--orange-premium);
  color:#fff!important;
}

/* CTA (utilisé partout) */
.btn-cta{
  background:#F97316;
  border:none;
  color:#fff;
  border-radius:12px;
  padding:13px 14px;
  font-weight:800;
  font-size:15px;
  box-shadow:0 14px 30px rgba(249,115,22,.20);
  transition:.2s;
}
.btn-cta:hover{ filter:brightness(1.06); }

/* =========================
   NAVBAR
========================= */
.navbar{
  background-color:var(--bleu-nuit)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.nav-link{
  color:#fff!important;
  font-weight:500;
  margin:0 10px;
}
.nav-link:hover,
.nav-link.active{
  color:var(--orange-premium)!important;
}

/* =========================
   HERO PREMIUM + BOOKING
========================= */
.hero-premium{
  position:relative;
  min-height:520px;
  padding:90px 0 70px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero-premium .hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(3,7,18,.88) 0%, rgba(3,7,18,.65) 45%, rgba(3,7,18,.35) 100%);
}
.hero-premium .hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:40px;
  align-items:center;
}

.hero-left h2{
  color:#fff;
  font-size:clamp(30px,3vw,52px);
  line-height:1.08;
  margin:0 0 12px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-subtitle{
  color:rgba(255,255,255,.92);
  font-size:clamp(18px,1.6vw,26px);
  margin:0 0 12px;
}
.hero-meta{
  color:rgba(255,255,255,.85);
  font-size:15px;
  margin:0 0 18px;
}
.trust-badges{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 0;
}
.trust-badges span{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
}

.hero-checks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  max-width:420px;
}
.hero-checks li{
  color:rgba(255,255,255,.92);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-checks li::before{
  content:"✓";
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(249,115,22,.95);
  color:#111827;
  font-weight:900;
}

/* booking card */
.hero-right{ display:flex; justify-content:flex-end; }
.booking-card{
  width:100%;
  max-width:420px;
  border-radius:18px;
  padding:18px;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}
.booking-title{
  color:#fff;
  font-size:22px;
  font-weight:800;
  margin-bottom:6px;
}
.booking-switch{
  color:rgba(255,255,255,.70);
  font-size:13px;
}
.booking-body{
  margin-top:12px;
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px;
}
.booking-foot{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.booking-urgent{
  color:rgba(255,255,255,.92);
  font-size:13px;
  text-align:center;
}
.booking-rating{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  color:rgba(255,255,255,.78);
  font-size:13px;
}
.booking-rating .stars{ color:#FBBF24; font-weight:800; }

/* booking form inside */
.booking-form{ display:grid; gap:12px; }
.booking-trip{ display:flex; gap:14px; }
.trip-option{
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.85);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}
.trip-option input{ accent-color:#F97316; }
.booking-field .form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  color:#fff;
  padding:12px;
}
.booking-field .form-control::placeholder{ color:rgba(255,255,255,.55); }
.booking-field .form-control:focus{
  box-shadow:0 0 0 .2rem rgba(249,115,22,.18);
  border-color:rgba(249,115,22,.55);
}
.booking-field .input-group-text{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-right:0;
  color:rgba(255,255,255,.75);
  border-radius:12px 0 0 12px;
}
.booking-field .input-group .form-control{
  border-left:0;
  border-radius:0 12px 12px 0;
}

/* =========================
   BOUTON FLOTTANT
========================= */
.btn-reservation{
  position:fixed;
  bottom:20px;
  right:20px;
  background-color:var(--orange-premium);
  color:#fff;
  padding:15px 20px;
  border-radius:50px;
  font-size:18px;
  box-shadow:0 4px 10px rgba(249,115,22,.5);
  z-index:1000;
  text-decoration:none;
  transition:all .3s ease;
}
.btn-reservation:hover{
  background-color:#e85d0c;
  transform:translateY(-3px);
  color:#fff;
}
.toast-vtc{
  position: fixed;
  right: 18px;
  bottom: 90px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(10px);
  transition: .25s;
  z-index: 2000;
}
.toast-vtc.show{ opacity:1; transform: translateY(0); }
.toast-success{ background:#16a34a; }
.toast-danger{ background:#dc2626; }
}
/* =========================
   SECTIONS / TITRES
========================= */
.section{ padding:80px 0; }
.section-title{ text-align:center; margin-bottom:60px; }
.section-title h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--bleu-nuit);
  margin-bottom:15px;
}
.section-title p{
  font-size:1.2rem;
  color:#64748b;
  max-width:700px;
  margin:0 auto;
}

.bg-light{ background-color:var(--gris-clair)!important; }
.text-warning{ color:var(--orange-premium)!important; }

/* =========================
   TRUST STRIP (bande blanche)
========================= */
.trust-strip{
  background:#fff;
  padding:18px 0;
  border-bottom:1px solid #eee;
}
.trust-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  text-align:center;
}
.trust-star{
  color:#FBBF24;
  font-size:22px;
  font-weight:900;
}
.trust-text{
  font-weight:600;
  color:#1f2933;
}
.trust-divider{
  width:1px;
  height:26px;
  background:#ddd;
}
.trust-logos{
  display:flex;
  gap:18px;
  font-weight:700;
}
.trust-logo.google{ color:#4285F4; }
.trust-logo.trustpilot{ color:#00B67A; }

/* =========================
   FEATURES 4 BLOCS
========================= */
.features-section{
  background:#f8fafc;
  padding:60px 0;
}
.features-title{
  text-align:center;
  font-weight:900;
  color:#111827;
  margin-bottom:38px;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.feature-card{
  background:#fff;
  border-radius:16px;
  padding:26px 24px;
  text-align:left;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  border:1px solid rgba(15,23,42,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 45px rgba(0,0,0,.10);
}
.feature-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(249,115,22,.10);
  color:#F97316;
  margin-bottom:14px;
}
.icon-svg{ width:24px; height:24px; display:block; }
.feature-card h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
  color:#111827;
}
.feature-card p{
  margin:0;
  font-size:14px;
  color:#6b7280;
  line-height:1.45;
}

/* Reveal animation (si tu utilises le JS IntersectionObserver) */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TRAJETS / CARDS / SIDEBAR
========================= */
.card{
  background-color:#fff;
  border-radius:var(--border-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  padding:30px;
  margin-bottom:30px;
  height:100%;
  border:none;
  transition:all .25s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.card-icon{
  width:60px; height:60px;
  background-color:rgba(37,99,235,.10);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.card-icon i{ font-size:1.5rem; color:var(--bleu-royal); }

.trajet-card{
  background:#fff;
  border-radius:var(--border-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  padding:25px;
  margin-bottom:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:all .25s ease;
}
.trajet-card:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.trajet-icon{
  width:50px; height:50px;
  background-color:rgba(249,115,22,.10);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-right:20px;
  flex-shrink:0;
}
.trajet-icon i{ font-size:1.2rem; color:var(--orange-premium); }
.trajet-info{ flex-grow:1; }
.trajet-info h4{ font-size:1.2rem; margin-bottom:5px; color:var(--bleu-nuit); }
.trajet-price{ font-size:1.2rem; font-weight:700; color:var(--bleu-royal); margin-right:15px; }

.sidebar{
  background:#fff;
  border-radius:var(--border-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  padding:30px;
  margin-bottom:30px;
  position:sticky;
  top:100px;
}
.form-label{ font-weight:600; color:var(--bleu-nuit); margin-bottom:8px; }
.form-control{ border:1px solid #e2e8f0; border-radius:8px; padding:12px 15px; }

/* =========================
   FAQ
========================= */
.faq-item{
  background:#fff;
  border-radius:var(--border-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  margin-bottom:20px;
  overflow:hidden;
}
.faq-question{
  width:100%;
  text-align:left;
  padding:20px 25px;
  background:none;
  border:none;
  font-size:1.1rem;
  font-weight:600;
  color:var(--bleu-nuit);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
}
.faq-question:hover{ background-color:rgba(37,99,235,.05); }
.faq-question.active{ color:var(--bleu-royal); }
.faq-question i{ transition:transform .3s ease; }
.faq-question.active i{ transform:rotate(180deg); }
.faq-answer{
  padding:0 25px;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  color:#64748b;
}
.faq-answer.active{ padding:0 25px 20px; max-height:500px; }

/* =========================
   AVIS (REVIEWS) — FIXES
   - étoiles jaunes
   - pas de bordure orange
   - espacement OK
========================= */
#avis .row{ row-gap:28px; }
#avis .col-lg-6{ padding-left:14px; padding-right:14px; }

.review-card{
  background:#fff;
  padding:22px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  height:100%;
  border:none; /* ✅ plus de bord orange */
  transition:all .25s ease;
}
.review-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(0,0,0,.10);
}
.review-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.review-avatar{
  width:44px; height:44px;
  background:#f1f5f9;
  color:var(--bleu-royal);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  font-size:14px;
  border:1px solid rgba(0,0,0,.05);
}
.review-info h4{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--bleu-nuit);
}
.review-info p{
  margin:0;
  font-size:12px;
  color:#64748b;
  font-style:italic;
}
.review-rating{
  margin:8px 0 10px;
  font-size:14px;
}
.review-rating i{ color:#FACC15; }   /* ⭐ jaune */
.review-rating .far{ color:#e5e7eb; } /* ⭐ vide */
.review-text{
  color:#334155;
  font-size:14px;
  line-height:1.5;
  font-style:italic;
}

/* =========================
   CTA SECTION
========================= */
.cta-section{
  background-color:var(--bleu-nuit);
  color:#fff;
  padding:80px 20px;
  text-align:center;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px){
  .hero-premium{ padding:70px 0 60px; }
  .hero-premium .hero-grid{ grid-template-columns:1fr; }
  .hero-right{ justify-content:flex-start; }
  .booking-card{ max-width:520px; }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px){
  .trajet-card{ flex-direction:column; text-align:center; }
  .trajet-icon{ margin-right:0; margin-bottom:15px; }
  .btn-reservation{ padding:12px 15px; font-size:16px; }
  .trust-badges{ flex-direction:column; gap:10px; text-align:center; }
}

@media (max-width: 576px){
  .features-grid{ grid-template-columns:1fr; }
}