/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box}

/* ================= BASE ================= */
body{
  font-family:'Poppins',sans-serif;
  color:#111;
}

/* ================= HEADER ================= */
header{
  background:#001f3f;
  color:#fff;
  padding:22px 15px 55px; /* bas agrandi pour trust-top */
  position: relative;    /* OBLIGATOIRE pour absolute */
  top: 0;
  z-index: 1000;
}

/* Conteneur interne centré */
#mainHeader{
  background:#001f3f;
  color:#fff;
  padding:22px 15px 55px; /* espace pour trust-top */
 /* position: sticky;   */   /* ⬅️ IMPORTANT */
  top: 0;
  z-index: 1000;
  }

/* Titre */
#mainHeader h1{
  font-size:30px;
  letter-spacing:1px;
  margin-bottom:8px;
  text-align:center;
}

/* Slogan */
.hero-h1{
  margin-top:6px;
  font-size:16px;
  font-weight:600;
  color:#f1c40f;
  opacity:0.95;
  text-align:center;
  letter-spacing:0.5px;
}

/* ================= MENU FINAL ================= */
.main-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:nowrap;
}

/* Boutons du menu – Style MasterTripTransfers */
#mainHeader nav a{
  background:#FFB400;
  color:#001F3F;                 /* Bleu nuit MasterTrip */
  padding:12px 22px;
  border-radius:30px;
  font-weight:900;
  font-size:17px;
  letter-spacing:1px;
  text-decoration:none;
 /* box-shadow:0 10px 30px rgba(255,159,0,0.45);*/
  transition:0.3s;
}

#mainHeader nav a:hover{
  background:linear-gradient(135deg,#00AAFF,#0090e0);
  color:#ffffff;
  transform:translateY(-3px);
}

/* Drapeau langue */
.lang-flag-single img{
  width:32px;
  height:22px;
  cursor:pointer;
  border-radius:4px;
  margin:0 4px;
  box-shadow:0 0 4px rgba(0,0,0,.4);
  transition:.25s;
}
.lang-flag-single img:hover{transform:scale(1.2)}

/* Mobile */
@media (max-width:600px){
  #mainHeader{padding:10px}
  #mainHeader h1{font-size:24px}
  .main-nav{gap:8px}
  #mainHeader nav a{font-size:15px;padding:8px 14px;letter-spacing:1px}
  .lang-flag-single img{width:24px;height:16px}
}

/* Tablette */
@media (min-width:601px) and (max-width:1024px){
  .main-nav{gap:14px}
  #mainHeader nav a{font-size:17px;padding:10px 18px}
}


 

/* ================= SECTIONS ================= */
section{
  background:rgba(255,255,255,0.96);
  max-width:1200px;
  margin:15px auto;
  padding:30px 20px;
  border-radius:18px;
}

/* ================= FOOTER ================= */
#siteFooter{
  background:linear-gradient(160deg,#001f3f,#003b6f);
  color:white;
  text-align:center;
  padding:40px 20px;
  margin-top:40px;
}
.footer-content h3{
  font-size:24px;
  margin-bottom:6px;
  color:#f1c40f;
}
.footer-content p{
  margin:6px 0;
  opacity:0.9;
}
.footer-contact{
  margin:15px 0;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

/* ================= FOOTER CONTACT BUTTONS ================= */
.footer-contact a{
  color:#001f3f;                 /* Bleu nuit MasterTrip */
  text-decoration:none;
  font-weight:700;
  background:#f1c40f;            /* Or MasterTrip (hover permanent) */
  padding:8px 16px;
  border-radius:20px;
  transition:0.3s;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Hover = léger boost (pas de changement brutal) */
.footer-contact a:hover{
  background:#ffcc33;            /* Or un peu plus clair */
  color:#001f3f;
  transform:translateY(-2px);
}
.footer-copy{
  margin-top:20px;
  font-size:13px;
  opacity:0.7;
}

/* ================= TITRES ================= */
h2{color:#001f3f;margin-bottom:30px}

/* ================= SERVICES ================= */
.service-list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}
.service-card{
  background:#001f3f;
  color:#fff;
  width:200px;
  padding:20px;
  border-radius:14px;
}
.service-card h3{color:#00aaff}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
  margin-top:25px;
}
.service-pro{
  background:linear-gradient(160deg,#001f3f,#003b6f);
  color:white;
  padding:18px 20px;
  border-radius:22px;
  text-align:center;
  transition:0.35s;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
}
.service-pro:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 25px 60px rgba(0,0,0,0.35);
}
.service-pro h3{
  margin:8px 0;
  color:#00c3ff;
  font-size:22px;
}
.service-pro p{
  font-size:16px;
  opacity:0.95;
  margin-bottom:10px;
}
.service-pro a{
  color:#f1c40f;
  font-weight:700;
  text-decoration:none;
  font-size:16px;
}
.service-pro h3 a{
color:#f1c40f;              /* couleur voulue */
font-size:22px;          /* taille voulue */
font-weight:800;         /* gras */
letter-spacing:0.6px;
text-decoration:none;
}

  


  
.service-icon{font-size:48px}

/* ================= FORMULAIRE ================= */

form{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* ⬅️ plus de décalage */
  gap:12px;
}


form input,
form select,
form textarea{
width:320px; /* ⬅️ +20px */
height:62px; /* ⬅️ un peu plus haut */
padding:18px 16px;
border-radius:14px;
border:2px solid #dde3ea;
background:#f9fbfc;
font-size:16.5px;
box-sizing:border-box;
}




  /* ===============================
   FORMULAIRE ADAPTATIF À LA CARTE
================================= */

.booking-form-card .phone-group select{
  width:115px;
  flex-shrink:0;
}

.booking-form-card .phone-group input{
  flex:1;
  min-width:0;   /* ⬅️ CLÉ ANTI-DÉBORDEMENT */
}
    

/* Groupe téléphone — aligné PARFAITEMENT au formulaire */
.phone-group{
  display:flex;
  width:310px;
  margin:0;           /* ⬅️ enlève le centrage */
  gap:10px;
  box-sizing:border-box;
}

/* Indicatif */
.phone-group select{
  width:115px;
  height:62px;
  border-radius:14px;
  border:2px solid #dde3ea;
  background:#f9fbfc;
  font-size:16.5px;
  font-weight:700;
  text-align:center;
  box-sizing:border-box;
}

/* Numéro */
.phone-group input{
  flex:1;                      /* prend le reste automatiquement */
  width:195px;
  height:62px;
  border-radius:14px;
  border:2px solid #dde3ea;
  background:#f9fbfc;
  font-size:16.5px;
  padding:0 16px; 
  box-sizing:border-box;
}
    
/* ===============================
   TABLETTE – INDICATIF TÉLÉPHONE PLUS LARGE
================================= */
@media (min-width:601px) and (max-width:1024px){
  .phone-group select{
    flex:0 0 140px;   /* ⬅️ PLUS LARGE */
    width:140px;      /* sécurité */
    font-size:16.5px;
    padding-left:10px;
  }
}
  
  #message{
  min-height:80px;   /* plus haut */
  line-height:1.6;
  }
  
/* Boutons */
button{
  width:310px;
  height:60px;
  padding:15px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#f39c12,#f1c40f);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

button:hover{transform:translateY(-2px)}

/* Champs conditionnels */
#intervillesFields,
#circuitsFields,
#transferFields{
  display:none;
  width:100%;
  max-width:100%;
  flex-direction:column;
  gap:8px;
  }

/* ================= RÉSERVATION ================= */
#bookingTitle{
  text-align:left;
  font-size:25px;
  font-weight:800;
  color:#001f3f;
  margin-bottom:25px;
}
#bookingSubtitle{
  text-align:left;
  font-size:20px;
  font-weight:600;
  color:#001f3f;
  margin-top:-15px;
  margin-bottom:8px;
}
.floating-field{
  position:relative;
  width:100%;
  max-width:320px;
}
.floating-field select{padding:22px 16px 10px}
.floating-field input{padding:22px 16px 10px}
.floating-field textarea{padding:28px 16px 10px;resize:none}
.floating-field label{
  position:absolute;
  top:6px;
  left:14px;
  font-size:12px;
  font-weight:600;
  color:#001f3f;
  pointer-events:none;
}
.floating-field input[type="date"],
.floating-field input[type="time"]{
  padding:26px 14px 10px;
}

/* ================= OVERLAY ================= */
#resumeOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:0.25s ease;
}
#resumeOverlay.active{
  opacity:1;
  pointer-events:auto;
}
#resumeBox{
  background:#fff;
  width:90%;
  max-width:420px;
  padding:25px;
  border-radius:16px;
  font-size:14px;
  transform:translateY(30px) scale(.95);
  opacity:0;
  transition:0.3s;
}
#resumeOverlay.active #resumeBox{
  transform:translateY(0) scale(1);
  opacity:1;
}
#resumeBox h3{margin-bottom:15px;color:#001f3f}
#resumeContent p{margin:6px 0}
#resumeBox button{
  flex:1;
  padding:12px;
  border-radius:12px;
  border:none;
  font-weight:600;
  cursor:pointer;
}
#resumeCancel{background:#ccc}
#resumeConfirm{background:linear-gradient(135deg,#25D366,#1ebe57);color:white}

/* ================= EXCURSIONS ================= *
.excursions-section{text-align:center}
.exc-sub{margin-bottom:30px;color:#444}
.exc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
  justify-items:center;
}
@media(max-width:700px){
  .exc-grid{grid-template-columns:1fr}
}
.exc-card{
  background:#fff;
  border-radius:16px;
  padding:15px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  max-width:360px;
  display:flex;
  flex-direction:column;
}
.exc-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
}
.exc-card h3{margin:12px 0;color:#001f3f}
.exc-card ul{list-style:none;padding:0;font-size:14px}
.exc-card li{margin:4px 0}
.exc-card a{
  display:inline-block;
  margin-top:12px;
  padding:10px 18px;
  background:#f39c12;
  color:#fff;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}
.exc-card a:hover{background:#e08e0b}
.exc-card p{font-size:15px;line-height:1.6}

 ================= SLIDER AUTO HORIZONTAL ================= 

.exc-slider{
  width:100%;
  height:200px;
  display:flex;              
  overflow-x:hidden;         
  overflow-y:hidden;
  scroll-behavior:smooth;
  position:relative;
}

 Images 
.exc-slider img{
  min-width:100%;            
  height:100%;
  object-fit:cover;
  flex-shrink:0;             
}

 Détails (grands sliders) 
#excursionDetails .exc-slider{
  height:340px;
}

@media(max-width:600px){
  .exc-slider{
    height:180px;
  }
}
===========FIN ===============*/


/* ================= EXCURSIONS ================= */
.excursions-section{text-align:center}
.exc-sub{margin-bottom:30px;color:#444}
.exc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
  justify-items:center;
}
@media(max-width:700px){
  .exc-grid{grid-template-columns:1fr}
}
.exc-card{
  background:#fff;
  border-radius:16px;
  padding:15px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  max-width:360px;
  display:flex;
  flex-direction:column;
}
.exc-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
}
.exc-card h3{margin:12px 0;color:#001f3f}
.exc-card ul{list-style:none;padding:0;font-size:14px}
.exc-card li{margin:4px 0}
.exc-card a{
  display:inline-block;
  margin-top:12px;
  padding:10px 18px;
  background:#f39c12;
  color:#fff;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}
.exc-card a:hover{background:#e08e0b}
.exc-card p{font-size:15px;line-height:1.6}

/* ===============================
   SLIDER EXCURSIONS — AUTO SCROLL
   Compatible JS scrollTo()
=============================== */
.exc-slider{
  position:relative;
  width:100%;
  height:200px;
  overflow:hidden;
}

.exc-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s ease-in-out;
}

.exc-slider img.active{
  opacity:1;
}

/* Mobile */
@media(max-width:600px){
  .exc-slider{
    height:180px;
  }
}

/* ================= TEXTE PREMIUM ================= */
.exc-card h3{font-size:20px;margin-top:14px;margin-bottom:10px;letter-spacing:0.4px}
.exc-card p{font-size:16px;line-height:1.7}
.exc-card ul{font-size:15px}
.exc-card .price{display:block;margin-top:10px;font-size:17px;font-weight:700;color:#f39c12}

.service-pro h3{font-size:22px;letter-spacing:0.5px}
.service-pro p{font-size:16px;line-height:1.7}
.service-pro a{font-size:16px}

/* ================= DETAILS EXCURSIONS ================= */
#excursionDetails{
  background:#fff;
  max-width:720px;
  margin:40px auto;
  padding:28px 22px;
  border-radius:22px;
}
.exc-detail{margin-bottom:40px}
.exc-detail img{
  width:100%;
  max-height:500px;
  object-fit:cover;
  border-radius:20px;
  margin-bottom:16px;
}
.exc-detail h3{color:#001f3f;margin:12px 0}
#excursionDetails .exc-slider.auto.slow,
#excursionDetails .exc-slider.auto.slow img{
  height:340px!important;
}
#excursionDetails .exc-slider.auto.slow img{border-radius:20px}
.exc-transport{
  background:linear-gradient(120deg,#f4f8fb,#ffffff);
  border-left:5px solid #f39c12;
  padding:16px 18px;
  border-radius:14px;
  margin-top:18px;
  font-size:14px;
  color:#001f3f;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

/* ================= DESTINATIONS ================= */
.dest-title{text-align:center;font-size:32px;font-weight:900;color:#001f3f;margin-bottom:10px}
.dest-sub{text-align:center;max-width:700px;margin:0 auto 30px;color:#555}
.dest-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}

.dest-card{
  display:block;              /* 🔑 OBLIGATOIRE */
  height:80px;               /* 80px est trop petit */
  border-radius:18px;
  background-size:cover;
  background-position:center;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(0,0,0,0.25);
  transition:.35s;
}


.dest-card:hover{transform:scale(1.04)}
.dest-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(0,0,0,.6),rgba(0,0,0,.2));
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;
}
.dest-overlay span{font-size:17px;font-weight:700}
.dest-overlay b{color:#f1c40f;font-size:16px}

/* ================= TRUST + REVIEWS ================= */
.trust-box{
  margin-top:22px;
  background:linear-gradient(120deg,#f4f8fb,#ffffff);
  border-left:5px solid #f39c12;
  padding:16px 18px;
  border-radius:14px;
  font-size:14px;
  color:#001f3f;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  text-align:left;
}
.trust-box div{margin:6px 0}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
}
.review-card{
  background:white;
  padding:18px;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(0,0,0,0.18);
  font-size:15px;
  line-height:1.6;
  color:#001f3f;
}
.review-card b{display:block;margin-top:10px;color:#f39c12}
.trust-top{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  background: linear-gradient(135deg,#f39c12,#f1c40f);
  color:#001f3f;
  text-align:center;
  font-weight:700;
  padding:10px 15px;
  font-size:14px;
}
@media(max-width:600px){
  header{
    padding-bottom: 65px;
  }
}
/* ================= WHATSAPP ================= */
.wa-label{
  position:fixed;
  bottom:90px;
  right:22px;
  background:#25D366;
  color:white;
  padding:8px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

/* ================= RESPONSIVE ================= */
@media(max-width:600px){
  .hero-h1{font-size:14px}
  .local-badge{font-size:12px}
}

  /* ===============================
   CARTE SERVICES EXCURSIONS — PREMIUM PLEINE LARGEUR
================================= */
#services .service-pro:nth-child(3){
  grid-column:1 / -1;                 /* pleine largeur */
  background:linear-gradient(160deg,#001f3f,#003b6f); /* même couleur */
  padding:18px 22px;                  /* plus compacte */
  min-height:unset;
  border-radius:22px;
}

/* Texte compact */
#services .service-pro:nth-child(3) p{
  margin-bottom:10px;
  font-size:15.5px;
  line-height:1.6;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* Titre */
#services .service-pro:nth-child(3) h3{
  margin:8px 0;
  font-size:22px;
}

/* Bouton */
#services .service-pro:nth-child(3) a{
  margin-top:8px;
  font-size:16px;
  padding:10px 26px;
}

/* Mobile */
@media(max-width:700px){
  #services .service-pro:nth-child(3){
    grid-column:1;
    padding:16px 18px;
  }
  }
  /* ===============================
   TITRES PREMIUM – STYLE DESTINATIONS
================================= */
#services h2,
#excursions h2,
#reviews h2,
section h2[data-fr="Pourquoi choisir MasterTripTransfers ?"],
section h2[data-fr="Ils nous font confiance"]{
  text-align:center;
  font-size:32px;
  font-weight:900;
  color:#001f3f;
  margin-bottom:12px;
  position:relative;
  letter-spacing:0.8px;
}

/* Soulignement doré */
#services h2::after,
#excursions h2::after,
#reviews h2::after,
section h2[data-fr="Pourquoi choisir MasterTripTransfers ?"]::after,
section h2[data-fr="Ils nous font confiance"]::after{
  content:"";
  display:block;
  width:90px;
  height:4px;
  background:linear-gradient(90deg,#f39c12,#f1c40f);
  margin:14px auto 0;
  border-radius:10px;
}

/* Mobile */
@media(max-width:600px){
  #services h2,
  #excursions h2,
  #reviews h2,
  section h2[data-fr="Pourquoi choisir MasterTripTransfers ?"],
  section h2[data-fr="Ils nous font confiance"]{
    font-size:26px;
  }
}

  /* ===============================
   TRUST / AVANTAGES – TEXTE PREMIUM
================================= */

/* Cartes Pourquoi nous */
.review-card{
  font-size:17px;           /* ⬅️ PLUS GROS */
  font-weight:700;
  letter-spacing:0.4px;
}

/* Bloc réassurance sous le formulaire */
.trust-box{
  font-size:16.5px;        /* ⬅️ PLUS GROS */
  font-weight:600;
  line-height:1.8;
}

/* Première ligne ⭐⭐⭐⭐⭐ 4.9/5 ... */
.trust-box div:first-child{
  font-size:18.5px;
  font-weight:900;
  color:#f39c12;
}

/* Mobile */
@media(max-width:600px){
  .review-card{font-size:16px}
  .trust-box{font-size:15.5px}
  .trust-box div:first-child{font-size:17px}
}

  /* ===============================
   TITRE HEADER – MÊME COULEUR QUE LE MENU
================================= */
#mainHeader h1{
  color:#f1c40f;          /* même or que les boutons */
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
  /* ===============================
   CHAMP MESSAGE PLUS GRAND
================================= */
#message{
  height:68px;        /* ⬅️ AVANT 60px */
  line-height:1.6;
  resize:vertical;
}
#btnPay{
  background:#00C853;
  color:#001F3F;;
  font-weight:800;
  justify-content:center;
  padding-bottom:10px;  
  border:none;
  box-shadow:0 4px 10px rgba(0,200,83,0.35);
  transition:0.3s;
}

#btnPay:hover{
  background:#00E676;
  box-shadow:0 6px 14px rgba(0,200,83,0.45);
  transform:translateY(-2px) scale(1.05);
}


/* BOUTON RÉSERVER MAINTENANT */
button[type="submit"]{
  font-size:20px !important;   /* Texte plus grand */
  font-weight:900 !important;  /* Très gras */
  letter-spacing:0.8px;
}

/* BOUTON PAYER */
#btnPay{
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:0.8px;
  }

#btnPayDeposit{
  background:#8FD3F4;        /* Bleu perle */
  color:#001F3F;
  font-size:20px;
  font-weight:900;
  padding-bottom:10px;  
  letter-spacing:0.6px;
  border:none;
  /*box-shadow:0 4px 10px rgba(0,200,83,0.35);*/
  transition:0.3s;
}

#btnPayDeposit:hover{
  background:#00AAFF;
 /* box-shadow:0 6px 14px rgba(0,200,83,0.45);*/
  transform:translateY(-2px) scale(1.05);
}

/* ===== FORMULAIRE REVIEWS ===== */
.review-row{
  display:flex;
  width:320px;
  margin:0 auto;
  gap:10px;
}

/* ===== DRAPEAU DANS FORMULAIRE REVIEW ===== */
.review-country{
  width:70px;
  height:60px;
  padding-left:44px;                 /* espace pour le drapeau */
  background-position:10px center;   /* position du drapeau */
  background-size:35px 30px;         /* ⬅️ TAILLE DU DRAPEAU */
  background-repeat:no-repeat;
  }
  @media(max-width:600px){
  .review-country{
    background-size:35px 25px;
    padding-left:20px;
  }
  }

.review-stars-select{
  width:220px;
  height:60px;
  border-radius:12px;
  border:2px solid #dde3ea;
  background:#f9fbfc;
  font-size:16px;
  font-weight:600;
}

#reviewName,
#reviewMessage{
  width:320px;
  border-radius:12px;
  border:2px solid #dde3ea;
  background:#f9fbfc;
  font-size:16px;
  padding:14px;
}

#reviewMessage{
  min-height:140px;
  line-height:1.7;
}

/* ===== CARTES AVIS ===== */
.review-card{
  background:#ffffff;
  padding:18px;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(0,0,0,0.18);
  font-size:16px;
  line-height:1.7;
  color:#001f3f;
  width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}

.review-stars{
  color:#f1c40f;
  font-size:18px;
}

.review-msg{
  font-style:italic;
  margin:10px 0;
  line-height:1.6;
  color:#001f3f;
}

.review-name{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-weight:700;
  color:#f39c12;
}

/* ===== DRAPEAU FORMULAIRE REVIEWS ===== */
.review-flag{
  width:40px;          /* ⬅️ plus grand */
  height:auto;
  border-radius:0px;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  flex-shrink:0;       /* ⬅️ empêche l’écrasement */
}

  @media(max-width:600px){
  .review-flag{
    width:40px;
  }
  }

/* ===== GRILLE AVIS ===== */
#liveReviews{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  max-width:900px;
  margin:0 auto;
}

  /* =====ANCIEN  ANIMATION VIBRATION PREMIUM MENU ===== */
@keyframes menuShake {
  0%   { transform: translateX(0) }
  15%  { transform: translateX(-2px) rotate(-1deg) }
  30%  { transform: translateX(2px) rotate(1deg) }
  45%  { transform: translateX(-2px) rotate(-1deg) }
  60%  { transform: translateX(2px) rotate(1deg) }
  75%  { transform: translateX(-1px) rotate(-0.5deg) }
  100% { transform: translateX(0) }
}

.menu-shake {
  animation: menuShake 0.6s ease-in-out;
}


#bookNowBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Shake Book Now */
#bookNowBtn.btn-shake {
  animation: menuShake 0.6s ease-in-out;
}

  /* ===== TITRE PREMIUM LEAVE REVIEW ===== */
#leaveReview h2{
  text-align:center;
  font-size:32px;
  font-weight:900;
  color:#001f3f;
  margin-bottom:12px;
  position:relative;
  letter-spacing:0.8px;
}

#leaveReview h2::after{
  content:"";
  display:block;
  width:90px;
  height:4px;
  background:linear-gradient(90deg,#f39c12,#f1c40f);
  margin:14px auto 0;
  border-radius:10px;
}

/* Mobile */
@media(max-width:600px){
  #leaveReview h2{
    font-size:26px;
  }
}
 

 @media (max-width:600px){  
  /* Formulaire fluide */
  form{
    width:100%;
  }
  form input,
  form select,
  form textarea,
  .phone-group{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  /* Groupe téléphone */
  .phone-group select{
    width:115px;
  }
  .phone-group input{
    flex:1;
    min-width:0;
  }  
  .phone-group select{
    font-size:15px;
  }  
  #countryCode{
    padding-left:1px !important;
    background-position:3px center !important;
  }
}


  /* CONTENEUR DES 3 BOUTONS */
 .floating-btn-field{
  position:relative;
  width:100%;
  max-width:320px;
  display:flex;
  flex-direction:column;
  gap:14px;               /* espace entre les boutons */
}

/* BOUTONS */
.floating-btn{
  width:100%;
  height:64px;                 /* hauteur du bouton */
  border-radius:14px;
  border:none;
  font-weight:900;
  font-size:20px;
  cursor:pointer;
 /* padding-top:6px;     */  /* espace pour le label bas */
  line-height:1.15;
}

/* LABEL EN BAS DANS LE BOUTON */
.floating-btn-field label{
  position:absolute;
   bottom:6px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  font-weight:900;
  color:#000;
  pointer-events:none;
  opacity:.95;
}
  .floating-btn .btn-text{
  margin-top:4px;   /* ⬅️ descend le texte */
}


  
/* Empêche que le texte principal écrase le label */
#btnReserve,
#btnPay,
#btnPayDeposit{
  line-height:1.15;
}    

  #btnReserve{
  color:#001F3F;   /* Bleu nuit MasterTripTransfers */
  }
  
  #resumeOverlay.active{
  touch-action:none;
  overscroll-behavior:contain;
  }

    /* ================== CARTES FORM ET PHOTOS DROITE ================== */
   
.booking-cards-row{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:20px;                 /* 20px ENTRE formulaire et photos */
  width:100%;
  margin:0;
  padding:0 20px 0 12px;    /* respiration écran */
  box-sizing:border-box;
}

/* ================== CARTE FORMULAIRE ================== */
.booking-form-card{
  padding:26px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.16);
  box-sizing:border-box;
  margin:0;                /* collée à gauche */
}

/* ===============================
   FORMULAIRE ADAPTATIF À LA CARTE
================================= */
.booking-form-card form,
.booking-form-card input,
.booking-form-card select,
.booking-form-card textarea,
.booking-form-card button,
.booking-form-card .phone-group{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}


  .booking-form-card .phone-group{
  display:flex;
  gap:10px;
}

.booking-form-card .phone-group select{
  width:96px;
  flex-shrink:0;
}

.booking-form-card .phone-group input{
  flex:1;
  min-width:0;   /* ⬅️ CLÉ ANTI-DÉBORDEMENT */
}


  

/* ================== COLONNE PHOTOS ================== */

.booking-right{
  display:flex;
  flex-direction:column;
  gap:20px;                /* espace entre photos */
  flex:0 0 320px;       /* réduire largeur carte  photo*/
  max-width:360px;
  margin-right:20px;      /* respiration bord droit écran */
}

/* ================== CARTES PHOTOS ================== */
.booking-empty-card{
  width:100%;
  width:400;
  height:260px;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(0,0,0,.15);
}

/* Images */
.booking-empty-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
} 

  /* ===============================
   CARTE PHOTOS ADAPTATIVE
================================= */
.booking-right,
.booking-empty-card,
.booking-empty-card img{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
  .booking-empty-card{
  overflow:hidden;      /* ⬅️ CLÉ */
  border-radius:20px;   /* cohérent avec la carte formulaire */
  }

  /* ================== CARTES BOOKING ÉGALES ================== */
.booking-form-card,
.booking-right{
  flex:0 0 50%;
  max-width:50%;
  box-sizing:border-box;
}

/* ================== MOBILE ================== */
@media(max-width:600px){
 
  .booking-cards-row{
    flex-direction:column;
    padding:0 12px;
  }

.booking-form-card,
  .booking-right{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  flex:1;
  margin:0 auto;
  box-sizing:border-box;
  }

  .booking-right{
    margin-right:0;
    margin-top:18px;
  }

  .booking-empty-card{
    width:100%;
    height:220px;
  }
/* ================== CARTE FIRM ET PHOTO  100% SUR TEL ================== */

  .booking-cards-row{
    flex-direction:column;
  }

  .booking-form-card,
  .booking-right{
    flex:0 0 100%;
    max-width:100%;
    width:100%;
  }
    
}

  
  

/* ================== TITRES BOOKING ALIGNÉS À LA CARTE ================== */
#bookingTitle,
#bookingSubtitle{
  max-width:420px;          /* ⬅️ même largeur que .booking-form-card */
  margin-left:0;            /* collé à gauche */
  margin-right:auto;
  text-align:center;        /* texte centré */
}

    /* ===============================
   TELEPHONE HORIZONTAL – BOOKING
================================= */
@media (max-width:900px) and (orientation:landscape){

  .booking-cards-row{
    gap:14px;
    padding:0 10px;
  }


  /* Colonne photos */
  .booking-right{
    display:flex;
    flex-wrap:nowrap; 
  /*  flex:0 0 300px;
    max-width:300px;*/
    gap:14px;
    margin-right:10;
  }

  /* Cartes photos */
  .booking-empty-card{
   /* width:300px;*/
    height:200px;
  }
}
  
/* div champs du formulaire*/
  .floating-field{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}



/* ===============================
   CARTE FORMULAIRE reviews AVIS CLIENT
================================= */



.review-form-card{
  width:50%;
  max-width:620px;
  margin:0 auto;
  background:#ffffff;
  padding:28px 26px;
  border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,0.18);
  box-sizing:border-box;
}

/* Formulaire interne */
.review-form-card form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}

/* Champs alignés */
.review-form-card input,
.review-form-card select,
.review-form-card textarea,
.review-form-card button{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  height:60px;
  padding:14px 16px;
  border-radius:14px;
  border:2px solid #dde3ea;
  background:#f9fbfc;
  font-size:16px;
}

/* Message */
.review-form-card textarea{
  min-height:140px;
  resize:vertical;
  line-height:1.6;
}

/* Bouton */
.review-form-card button{
  background:linear-gradient(135deg,#f39c12,#f1c40f);
  color:#001F3F;
  font-weight:900;
  font-size:18px;
  border:none;
  cursor:pointer;
}

/* 📱 Téléphone uniquement */
@media (max-width:600px){
  .review-form-card{
    width:100%;
    max-width:100%;
    padding:22px 16px;
  }
}

/*========BOUTON BOOK NOW FIXE EN BAS D ECRAN==========*/
#bookNowBtn{
  position:fixed;
  bottom:2px;
  left:20px;
  z-index:9999;
  background:#ffb400;
  color:#001F3F;
  padding:14px 10px;
  border-radius:40px;
  font-weight:900;
  font-size:18px;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transition:opacity .3s ease, transform .3s ease;
}

#bookNowBtn.hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
}

/* CTA BOUTON EN BAS FIXE MOBILE */
.cta-fixed{
  position:fixed;
  bottom:2px;
  left:20px;
  transform:translateX(-50%);
  z-index:9999;
  display: none;

  background:#ffad33;
  color:#001f3f;
  font-weight:900;
  font-size:18px;

  padding:14px 10px;
  border-radius:40px;
  text-decoration:none;
}

.intro-seo-card {
  background: #eaf6ff; /* bleu ciel léger */
  border-radius: 6px;
  padding: 6px 6px;
  max-width: 900px;
  margin: 0px auto 0px;
  text-align: center;
}

.intro-seo-card .intro-seo {
  font-size: 16px;
  line-height: 1.65;
  color: #0b2e4a; /* bleu foncé lisible */
}

.intro-seo-card .intro-seo strong {
  color: #0056b3; /* bleu plus soutenu pour mots clés */
}

.intro-seo-card h2 {
  margin-top: 0;
  margin-bottom: 2px;
}

.dest-intro {
  margin-bottom: 30px; /* espace avant les cartes */
}

.dest-intro h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.dest-intro p {
  margin: 0;
  line-height: 1.6;
}



/* Affiché surtout sur mobile */
@media(min-width:768px){
  .cta-fixed{
    display:none;
  }
}


.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:62px;
  height:62px;
  background:#25D366;
  color:white;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  text-decoration:none;
  z-index:9999;
  box-shadow:0 12px 30px rgba(37,211,102,0.45);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.1)}
  100%{transform:scale(1)}
}

.dest-link{
  display:block;
  text-decoration:none;
}

/* ===============================
   DESKTOP – INDICATIF TÉLÉPHONE PLUS LARGE
================================= */
@media (min-width:1025px){
  .booking-form-card .phone-group select{
    width:140px;        /* ⬅️ largeur confortable */
    flex:0 0 140px;
    font-size:16.5px;
    padding-left:12px;
  }
}

/* ===============================
   CTA CARTES SERVICES – OR MASTERTRIP
================================= */
.service-pro h3 span{
  color:#f1c40f;              /* Or MasterTripTransfers */
  font-weight:800;
  letter-spacing:0.6px;
  transition:0.25s ease;
}

/* Hover carte entière */
.service-pro:hover h3 span{
  color:#ffcc33;              /* Or plus clair au hover */
}