* {
  margin: 0;
  padding: 0;

}
body{
font-family:'Poppins',sans-serif;
background:#fff;
color:#111;
line-height:1.7;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}
/* Hide desktop language selector on mobile */
.desktop-language-switcher {
  display: none !important;
}
header{
background:#fff;
padding:18px 0;
box-shadow:0 2px 15px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:1000;
}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo h1{
font-size:24px;
line-height:1.2;
color:#111;
}

.logo p{
color:#b8860b;
font-size:14px;
}

nav ul{
display:flex;
list-style:none;
gap:22px;
}

nav a{
text-decoration:none;
color:#111;
font-weight:600;
}

nav a:hover{
color:#b8860b;
}

.hero{


justify-content:space-between;


background:linear-gradient(90deg,#fff 45%,#f8f8f8);
}

.hero-text{
max-width:560px;
}

.hero-text h2{
font-size:54px;
line-height:1.1;
margin-bottom:20px;
}

.hero-text p{
font-size:18px;
margin-bottom:25px;
}

.btn{
display:inline-block;
background:#c89216;
color:#fff;
padding:15px 35px;
border-radius:8px;
text-decoration:none;
font-weight:700;
}

.minimum{
margin-top:20px;



}

.hero-image img{
max-width:520px;

}

section{
padding:80px 0;
}

.section-label{
text-align:center;
color:#b8860b;
font-weight:700;
text-transform:uppercase;
letter-spacing:3px;
}

section h2{
text-align:center;
font-size:36px;
margin-bottom:45px;
}

.tesla{
  border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,.2);
background:#fafafa;
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}



.quick-contact{
background:#f8f8f8;
text-align:center;
}

.quick-contact p{
font-size:18px;
margin:10px 0;
}

.whatsapp{



background:#25D366;
color:white;
text-decoration:none;
padding:16px 25px;
border-radius:50px;
font-weight:700;
box-shadow:0 8px 25px rgba(0,0,0,.25);

}

footer{
background:#111;
color:white;
padding:50px 0 25px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:35px;
}

footer a{
display:block;
color:white;
text-decoration:none;
margin:8px 0;
}

footer a:hover{
color:#d4af37;
}

.copyright{
text-align:center;
margin-top:35px;
color:#ccc;
font-size:14px;
}

@media(max-width:768px){

header .container{
flex-direction:column;
text-align:center;
gap:15px;
}

.logo h1{
font-size:28px;
}

nav ul{
flex-direction:column;
gap:12px;
}

.hero{
flex-direction:column;

text-align:center;
}





.hero-image img{
margin-top:30px;
}

section h2{
font-size:30px;
}



}
.tesla-benefits{
background:#fafafa;
}

.tesla-benefits .features div{
border
}

.menu-btn{

background:#c89216;
color:white;
border:none;
font-size:28px;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}

@media(max-width:768px){

.menu-btn{
display:block;
margin:auto;
}

nav{
display:none;
width:100%;
}

nav.active{
display:block;
}

nav ul{
padding-top:15px;
}

}

@media(max-width:768px){

.hero{
padding:45px 20px;
}

.hero-text h2{
font-size:34px;
line-height:1.15;
}

.hero-text p{
font-size:18px;
line-height:1.6;
}

.btn{
width:100%;
max-width:330px;
text-align:center;
}

.minimum{
font-size:20px;
}



}

@media(max-width:768px){

.hero-image{
margin-top:10px;
}

.hero-image img{
display:block;
width:100%;

margin:0 auto;
}

.minimum{
margin-bottom:25px;
}

}

@media(max-width:768px){

header{
position:relative;
}

.hero{
padding-top:35px;
}

.btn{
display:block;
margin:25px auto 0;
}

}
@media(max-width:768px){

.whatsapp{
right:18px;
bottom:80px;
padding:12px 18px;
font-size:14px;
}

.hero-image img{
max-width:280px;
}

.hero-image{
padding-bottom:40px;
}
}
.car-caption{

    margin-top:15px;
    font-size:18px;
    font-weight:600;
    color:#b8860b;
}
.feature-card{
background:#fff;
border-radius:20px;
padding:25px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.feature-card .icon{
font-size:42px;

}

.feature-card h3{
font-size:28px;
color:#b8860b;
margin:15px 0;
}

.feature-card p{
font-size:18px;
line-height:1.6;
color:#555;
}


.feature-card .icon{
height:auto;
min-height:0;
padding:0;
margin-bottom:15px;
box-shadow:none;
border:none;
background:transparent;
}

.feature-card .icon i{
font-size:46px;
color:#b8860b;
}

@media(max-width:768px){

.feature-card{
border-left:5px solid #b8860b;
padding:25px 20px;
}

.feature-card::before{
display:none;
}

}


/* Reservation Page */

.page-hero{
    text-align:center;
    padding:60px 20px 30px;
}

.booking{
    padding:20px;
}

.booking-form{
    max-width:700px;
    margin:auto;
}

.booking-form input,
.booking-form select,
.booking-form textarea{
    width:100%;
    padding:15px;
    margin-bottom:18px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
    font-family:inherit;
    box-sizing:border-box;
}

.booking-form textarea{
    min-height:130px;
    resize:vertical;
}

.booking-form .btn{
    width:100%;
}

.form-note{
    text-align:center;
    color:#666;
    margin-top:15px;
    font-size:15px;
}
.minimum{
    color:#b8860b;
    font-size:28px;
    font-weight:bold;
    text-align:center;
    white-space:nowrap;
}

.booking-form select,
.booking-form input,
.booking-form textarea {
  width: 100%;
  font-family: 'Poppins', sans-serif;
}
.btn-submit {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: #111;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(212,175,55,0.3);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(212,175,55,0.45);
}


.call-float {


       /* Move it above WhatsApp */


    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 28px;

    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.fare-estimator {
  background: #fff;
  padding: 25px;
  border-radius: 18px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  text-align: center;
}

.fare-estimator h3 {
  font-size: 26px;
  margin-bottom: 10px;
}

.fare-estimator input {
  width: 100%;
  padding: 16px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 16px;
}

.estimate-btn {
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border: none;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.tarif-resultat {
  margin-top: 15px;
  font-size: 22px;
  font-weight: 800;
  color: #b8860b;
}

.tarif-resultat small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.reviews {
    padding: 45px 0;
    background: #fff;
    text-align: center;
}

.reviews h2{
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 18px;
    white-space: normal;
    line-height: 1.2;

    background: linear-gradient(
        90deg,
        #111111,
        #c99510,
        #111111
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reviews-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 20px;
    line-height: 1.6;

    background: linear-gradient(
        90deg,
        #c99510,
        #f5d76e,
        #c99510
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.review-card {
  background: #f8f8f8;
  padding: 25px;
  border-radius: 18px;
  margin: 18px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.review-card p {
  font-size: 17px;
  line-height: 1.6;
}

.why-us{
    padding:70px 20px;
    background:#f8f8f8;
}

.why-us h2{
    text-align:center;
    font-size:34px;
    margin-bottom:40px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
}

.why-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    text-align:center;
}

.why-card h3{
    color:#c99700;
    margin-bottom:15px;
}

.why-card p{
    color:#555;
    line-height:1.6;
}
html, body {
  overflow-x: hidden;
  width: 100%;
}

* {
  box-sizing: border-box;
}

section,
.container {
  max-width: 100%;
  overflow-x: hidden;
}

.whatsapp {
  position: fixed;
  right: 25px;

  z-index: 99999;
}

.call-float {
  position: fixed;
  right: 25px;

  z-index: 99999;
}

@media (max-width: 600px) {
  .whatsapp {
    right: 25px;
    bottom: 25px;
  }

  .call-float {
    right: 25px;
    bottom: 95px;
  }
}
/* Contact method popup */
.contact-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  padding: 20px;
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.contact-modal.show {
  display: flex;
}

.contact-modal-box {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 24px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.contact-modal-box h2 {
  margin: 0 25px 14px;
  font-size: 26px;
  line-height: 1.3;
  color: #111111;
}

.contact-modal-box p {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: #555555;
}

.contact-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #555555;
  font-size: 34px;
  cursor: pointer;
}

.contact-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-choice {
  min-height: 58px;
  border: 2px solid #c99510;
  border-radius: 14px;
  background: #ffffff;
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.contact-choice:active {
  transform: scale(0.97);
}

.whatsapp-choice {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

@media (max-width: 400px) {
  .contact-options {
    grid-template-columns: 1fr;
  }

  .contact-modal-box {
    padding: 34px 18px 22px;
  }
}
/* ===== Smooth animations ===== */

.btn,
.service-card,
.airport-card,
.review-card,
.contact-card {
    transition: all 0.35s ease;
}

/* Cards lift slightly */
.service-card:hover,
.airport-card:hover,
.review-card:hover,
.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

/* Buttons */
.btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 30px rgba(201,149,16,.35);
}

/* Mobile touch effect */
.btn:active,
.service-card:active,
.airport-card:active,
.review-card:active,
.contact-card:active {
    transform: scale(.98);
}

.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: skewX(-20deg);
  animation: buttonShine 4s ease-in-out infinite;
}

.btn:active {
  transform: scale(0.97);
}

@keyframes buttonShine {
  0%,
  65% {
    left: -120%;
  }

  100% {
    left: 140%;
  }
}

/* ===== Interactive cards: phone and laptop ===== */

.feature-card,
.airports .features > div,
.engagements .features > div {
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}

/* Laptop: effect when the mouse passes over a card */
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .airports .features > div:hover,
  .engagements .features > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.14);
    border-color: #c99510;
  }
}

/* Phone and laptop: effect while pressing */
.feature-card:active,
.airports .features > div:active,
.engagements .features > div:active {
  transform: translateY(-3px) scale(0.98);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .airports .features > div,
  .engagements .features > div {
    transition: none;
  }
}


/* ===== Slow Tesla image zoom ===== */

.hero-image {
  overflow: hidden;
}

.hero-image img {
  display: block;
  width: 100%;
  transform-origin: center;

  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18));
}

@keyframes teslaSlowZoom {
  0% {
    transform: scale(0.96);
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
  }

  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 28px 45px rgba(0,0,0,0.28));
  }

  100% {
    transform: scale(0.96);
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
  }
}

/* Reduce animation for visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero-image img {
    animation: none;
  }
}


/* ===== Hero section spacing ===== */

.hero {
  padding: 70px 6%;
  min-height: 75vh;
  display: flex;
  align-items: center;
  gap: 50px;
}

/* Phone layout */
@media (max-width: 768px) {
  .hero {
    min-height: auto;


  }

  .hero-content h2 {
    margin-bottom: 16px;
    font-size: clamp(42px, 11vw, 58px);
    line-height: 1.05;
  }

  .hero-content > p {
    margin-bottom: 18px;
    font-size: 20px;
    line-height: 1.45;
  }

  .hero-content .btn {
    margin-top: 4px;
    margin-bottom: 12px;
  }

  .minimum {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.2;
  }
}

/* ===== Twins Fab Cab logo ===== */

.brand-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #c99510;
  border-radius: 50%;

  background: #111;
  color: #d4a017;

  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.brand-text h1 {
  margin: 0;
}

.brand-text p {
  margin: 4px 0 0;
}

/* Phone */
@media (max-width: 768px) {







}

.hero-image img {
    animation: teslaFloat 6s ease-in-out infinite;
    transition: transform 0.5s ease;
}

@keyframes teslaFloat {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.03);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

/* ===== Booking button and minimum price together ===== */

.booking-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 28px auto 0;
}

.booking-group .btn {
  display: block;
  margin: 0;
}

.booking-group .minimum {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  text-align: center;
}

/* Phone */
@media (max-width: 768px) {
  .booking-group {
    width: 100%;

  }

  .booking-group .btn {
    width: 100%;
  }


}

.car-caption{
    text-align:center;
    line-height:1.7;
}

.car-caption br{
    display:block;
    margin-top:6px;
}

/* ===== Sticky premium navigation ===== */

#mainHeader {




  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}

#mainHeader.header-scrolled {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== Premium hero badge ===== */

.hero-badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 9px 16px;

  border: 1px solid rgba(201, 149, 16, 0.35);
  border-radius: 999px;

  background: rgba(201, 149, 16, 0.08);
  color: #a97700;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Phone */
@media (max-width: 768px) {

}

/* ========================================
   NEW PREMIUM MOBILE HEADER
======================================== */

@media (max-width: 768px) {

  #mainHeader {
    background: #ffffff;
    width: 100%;
  }

  #mainHeader .container {



    justify-content: space-between;
    width: 100%;


  }

  #mainHeader .logo {
    flex: 1;

  }

  .brand-line {
    display: flex;
    align-items: center;

    gap: 12px;
  }

  .brand-mark {


    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 3px solid #c99510;
    border-radius: 50%;

    background: #111111;
    color: #d4a017;


    font-weight: 800;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  }

  .brand-text {
    min-width: 0;
    text-align: left;
  }

  .brand-text h1 {
    margin: 0;




    text-align: left;
  }

  .brand-text p {
    margin: 6px 0 0;

    color: #b8860b;


    text-align: left;
  }

  .menu-btn {


    flex: 0 0 58px;













    line-height: 1;


  }


}


/* ===== Final mobile menu fix ===== */

@media (max-width: 768px) {

  #mainHeader {
    overflow: visible !important;
  }

  #mainHeader .container {

    overflow: visible !important;
  }

  #mainHeader nav {








    height: auto !important;




    margin: 0 !important;






  }

  #mainHeader nav.open {
    display: block !important;
  }

  #mainHeader nav ul {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;


    list-style: none !important;
  }

  #mainHeader nav li {
    display: block !important;
    width: 100% !important;
  }

  #mainHeader nav a {

    width: 100% !important;



    color: #111111 !important;
    background: transparent !important;

    text-align: left !important;
    text-decoration: none !important;


  }


}

/* ===== Keep mobile menu button at top-right ===== */

@media (max-width: 768px) {
  #mainHeader .container {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #mainHeader .logo {
    min-width: 0 !important;
  }

  .brand-line {
    justify-content: flex-start !important;
  }

  .menu-btn {

    align-self: center !important;
    justify-self: end !important;

  }

  #mainHeader nav {
    grid-column: 1 / -1;
  }
}

/* ===== Premium mobile hero spacing ===== */

@media (max-width: 768px) {


  .hero-badge {



    line-height: 1.2 !important;
  }









  .booking-group .minimum {


    line-height: 1.2 !important;
  }
}

/* ===== Fit premium hero into first mobile screen ===== */

@media (max-width: 768px) {
  #mainHeader .container {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }











  .hero-badge {
    margin-bottom: 8px !important;


  }

  .hero-text h2,
  .hero-content h2 {
    margin-bottom: 12px !important;


  }

  .hero-text > p:not(.hero-badge),
  .hero-content > p:not(.hero-badge):not(.minimum) {
    margin-bottom: 14px !important;


  }








}
/* ===== Final compact first-screen mobile layout ===== */

@media (max-width: 768px) {

  #mainHeader .container {
    padding: 8px 14px !important;
  }

  .brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    font-size: 17px !important;
  }

  .brand-text h1 {
    max-width: 210px !important;
    font-size: 18px !important;
    line-height: 1.02 !important;
  }

  .brand-text p {
    margin-top: 3px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .menu-btn {


    flex-basis: 48px !important;


  }

  .hero {
    padding: 14px 16px 18px !important;
    gap: 10px !important;
  }

  .hero-badge {
    margin: 0 auto 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .hero-text h2,
  .hero-content h2 {
    margin: 0 0 10px !important;
    font-size: clamp(32px, 8.5vw, 41px) !important;
    line-height: 0.98 !important;
  }

  .hero-text > p:not(.hero-badge),
  .hero-content > p:not(.hero-badge):not(.minimum) {
    margin: 0 auto 11px !important;
    max-width: 620px;
    font-size: 14px !important;
    line-height: 1.32 !important;
  }

  .booking-group {
    margin-top: 2px !important;
  }

  .booking-group .btn {
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
  }

  .booking-group .minimum {
    margin-top: 5px !important;
    font-size: 15px !important;
  }

  .hero-image {
    margin-top: 10px !important;
  }
}

/* ===== Compact Tesla caption on mobile ===== */

@media (max-width: 768px) {
  .car-caption {
    margin: 10px auto 0 !important;





  }

  .car-caption br {
    display: block;

  }

  .hero-image img {

    object-fit: cover;
    border-radius: 16px;
  }
}

/* ===== Final Tesla caption fit on mobile ===== */

@media (max-width: 768px) {
  .hero-image img {
    max-height: 245px !important;
  }

  .car-caption{
    margin-top:8px !important;
    padding:0 2px 8px !important;
    width:100% !important;
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.35 !important;
    text-align:center !important;
    white-space:normal !important;
    word-break:keep-all !important;
}

  .car-caption br {
    margin-top: 2px !important;
  }

  .car-caption .counter {
    display: inline !important;
  }
}
/* ===== Premium Tesla image styling ===== */

.hero-image {
  position: relative;
  border-radius: 22px;
}

.hero-image::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: -1;

  background: radial-gradient(
    circle,
    rgba(201, 149, 16, 0.22) 0%,
    rgba(201, 149, 16, 0.08) 45%,
    transparent 72%
  );

  filter: blur(22px);
}

.hero-image img {
  border-radius: 22px !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(201, 149, 16, 0.08);
}
/* ===== Premium button animation ===== */

.btn,
.menu-btn {
    transition: all 0.3s ease;
}

.btn:hover,
.btn:active {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(201,149,16,.35);
}

.menu-btn:hover,
.menu-btn:active {
    transform: scale(1.08);
    box-shadow: 0 12px 25px rgba(201,149,16,.35);
}

/* ===== Premium trust bar ===== */

.trust-bar {
  padding: 22px 20px;
  background: #111111;
  color: #ffffff;
}

.trust-bar-inner {
  width: min(1100px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.trust-bar-inner div {
  padding: 12px 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

.trust-bar-inner div::first-letter {
  color: #d4a017;
}

/* Phone */
@media (max-width: 768px) {
  .trust-bar {
    padding: 16px 14px;
  }

  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .trust-bar-inner div {
    padding: 9px 5px;
    font-size: 12px;
    line-height: 1.3;
  }
}
/* ===== Premium mobile dropdown menu ===== */

@media (max-width: 768px) {
  #mainHeader nav {

    border: 1px solid rgba(201, 149, 16, 0.25);


    background: rgba(255, 255, 255, 0.98) !important;

    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.5);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }



  #mainHeader nav a {
    position: relative;






    border-radius: 11px;

    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.25s ease;
  }

  #mainHeader nav a::after {
    content: "›";



    color: #c99510;

    line-height: 1;
  }

  #mainHeader nav a:hover,
  #mainHeader nav a:active {
    color: #9d7300 !important;
    background: rgba(201, 149, 16, 0.11) !important;
    transform: translateX(4px);
  }
}
/* ===== Compact animated mobile menu ===== */

@media (max-width: 768px) {
  #mainHeader nav {
    display: block !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;




    max-height: 0;
    overflow: hidden;

    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      max-height 0.35s ease,
      visibility 0.25s ease;
  }

  #mainHeader nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;


    max-height: 520px;
  }






}
/* ===== Small premium dropdown menu ===== */

@media (max-width: 768px) {

  #mainHeader nav {






    border-radius: 18px !important;
    padding: 8px 0 !important;
  }

  #mainHeader nav a {

    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #mainHeader nav ul {
    gap: 0 !important;
  }

  #mainHeader nav a::after {
    right: 14px !important;

  }

}
/* ===== Dropdown directly below gold menu button ===== */

@media (max-width: 768px) {

  #mainHeader .container {
    position: relative !important;
  }

  #mainHeader nav {







    transform: translateY(-10px) scale(0.97) !important;
    transform-origin: top right !important;
  }

  #mainHeader nav.open {
    transform: translateY(0) scale(1) !important;
  }

#mainHeader nav a {
    padding: 8px 40px 8px 14px !important;
    display: inline-flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#mainHeader nav a::after {
    position: static !important;
    margin-left: 8px !important;
    font-size: 16px !important;
}
}
/* ===== Better floating contact buttons ===== */

.call-float,
.whatsapp {
  position: fixed;
  right: 18px;
  z-index: 1500;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  font-size: 24px;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.call-float {
  bottom: 94px;
}

.whatsapp {
  bottom: 24px;
}

.call-float:hover,
.call-float:active,
.whatsapp:hover,
.whatsapp:active {
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* Phone */
@media (max-width: 768px) {
  .call-float,
  .whatsapp {
    right: 14px;
    width: 54px;
    height: 54px;
    font-size: 22px;
  }

  .call-float {
    bottom: 82px;
  }

  .whatsapp {
    bottom: 18px;
  }
}
.call-float {
  background: linear-gradient(135deg, #c99700, #e6b325) !important;
  color: #ffffff !important;
}


/* ===== Correct anchor position under header ===== */

#home,
#services,
#vehicule,
#apropos,
#contact {
  scroll-margin-top: 120px;
}

/* Phone */
@media (max-width: 768px) {
  #home,
  #services,
  #vehicule,
  #apropos,
  #contact {
    scroll-margin-top: 150px;
  }
}

/* ===== Active mobile menu link ===== */

#mainHeader nav a.active {
  color: #b8860b !important;
  background: rgba(201, 149, 16, 0.12) !important;
}


/* ===== Keep the header visible while scrolling ===== */

#mainHeader {
  position: sticky;
  top: 0;
  z-index: 3000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== Reservation field labels ===== */

.booking-form .field-label {
  display: block;
  margin: 4px 0 8px;
  font-size: 15px;
  color: #222;
    font-weight: 600;
}

/* Make date and time text clearly visible */
.booking-form input[type="date"],
.booking-form input[type="time"] {
    color: #222;
    font-size: 17px;
    font-weight: 500;
}

/* Calendar and clock icons */
.booking-form input[type="date"]::-webkit-calendar-picker-indicator,
.booking-form input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
}/* ===== Trajets populaires ===== */

.popular-routes {
  padding: 90px 20px;
  background: #f8f8f8;
  text-align: center;
}

.popular-routes h2 {
  margin-bottom: 40px;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.route-card {
  background: #ffffff;
  border: 1px solid rgba(201, 151, 10, 0.22);
  border-radius: 22px;
  padding: 30px 24px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.route-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.13);
}

.route-card h3 {
  margin-bottom: 14px;
  font-size: 21px;
}

.route-card p {
  margin-bottom: 24px;
  line-height: 1.7;
}

.route-card .btn {
  display: inline-block;
  width: auto;
  padding: 13px 20px;
}

@media (max-width: 900px) {
  .routes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .popular-routes {
    padding: 65px 18px;
  }

  .routes-grid {
    grid-template-columns: 1fr;
  }

  .route-card {
    padding: 26px 20px;
  }
}
/* ===== DESTINATION STRIP ===== */

.destination-strip{
    overflow-x:auto;
    padding:15px 0 25px;
    scrollbar-width:none;
}

.destination-strip::-webkit-scrollbar{
    display:none;
}

.destination-strip-track{
    display:flex;
    gap:15px;
    padding:0 20px;
}

.destination-chip{
    min-width:130px;
    background:#fff;
    border-radius:18px;
    padding:18px 14px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid #f1f1f1;
    transition:.3s;
}

.destination-chip:hover{
    transform:translateY(-5px);
}

.destination-chip span{
    font-size:28px;
    display:block;
    margin-bottom:8px;
}

.destination-chip strong{
    display:block;
    font-size:18px;
    color:#111;
    margin-bottom:4px;
}

.destination-chip small{
    color:#999;
    font-size:14px;
}

/* ===== PREMIUM HERO ===== */

.hero-premium{


    background:#111;


}

.hero-overlay{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
}





.google-rating{





    font-weight:600;
}






.hero-features .feature{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.1rem;
    font-weight:600;
}









.hero-right{

    display:flex;
    justify-content:center;
    align-items:flex-end;
}

.hero-car{
    width:100%;
    max-width:720px;

    position:relative;
    z-index:2;
}

.hero-location{



    z-index:3;






}

/* ==================================================
   APPROVED PREMIUM DESIGN — HEADER, HERO, INFO BAR
   ================================================== */

:root {
  --gold: #c99a2e;
  --gold-light: #dfb64d;
  --black: #090909;
  --white: #ffffff;
}

/* ---------- HEADER ---------- */

#mainHeader.premium-header {
  position: sticky;
  top: 0;
  z-index: 5000;
  width: 100%;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

.premium-header .header-inner {
  width: min(92%, 1420px);
  max-width: 1420px;
  min-height: auto;
  margin: 0 auto;
  padding: 8px 0 8px;
    display: grid;
    grid-template-columns: 320px 1fr auto;
    align-items: center;
    gap: 30px;

    overflow: visible;
}

.premium-brand {
  display: flex;
  align-items: center;
  gap: 14px;

  color: #111111;
  text-decoration: none;
}

.premium-brand-mark {
  position: relative;
  width: 58px;
  height: 66px;
  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--gold);
  background: #ffffff;
  border: 3px solid var(--gold);

  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 700;

  clip-path: polygon(
    50% 0,
    93% 14%,
    88% 74%,
    50% 100%,
    12% 74%,
    7% 14%
  );
}

.premium-brand-mark::before {
  content: "♛";
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 22px;
}

.premium-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.premium-brand-text strong {
  color: #111111;
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.premium-brand-text span {
  margin-top: 5px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

.premium-header nav {
  display: block;
  position: static;
  width: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.premium-header nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-header nav a {
  position: relative;
  display: inline-block;
  padding: 42px 0 36px;

  color: #151515;
  text-decoration: none;
  text-transform: uppercase;

  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.premium-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;

  height: 2px;
  background: var(--gold);

  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.premium-header nav a:hover::after,
.premium-header nav a.active::after,
.premium-header nav li:first-child a::after {
  transform: scaleX(1);
}
{

.header-booking-btn{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;

    width:180px;
    height:44px;

    padding:0 20px;
    margin-top:-18px;
    margin-bottom:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:15px;
    border-radius:10px;
}

}

.menu-btn {
  display: none;
}


/* ---------- HERO ---------- */

.hero-premium {
  position: relative;
  min-height: 645px;
  padding: 55px 0 92px;
  overflow: hidden;

  color: #ffffff;
  background-color: #080808;
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.96) 0%,
      rgba(0, 0, 0, 0.88) 30%,
      rgba(0, 0, 0, 0.38) 61%,
      rgba(0, 0, 0, 0.10) 100%
    ),
    url("../images/tesla-model-y-lille.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hero-dark-layer {
  display: none;
}

.hero-premium-inner {
  position: relative;
  z-index: 2;

  width: min(90%, 1370px);
  max-width: 1370px;
  min-height: 500px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(500px, 47%) 1fr;
  align-items: center;
}

.hero-left {
  position: relative;
  z-index: 3;
  max-width: 610px;
}

.google-rating {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding: 11px 18px;
  margin-bottom: 28px;

  color: #ffffff;
  background: rgba(8, 8, 8, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;

  font-size: 16px;
}

.google-rating strong {
  font-size: 17px;
}

.rating-stars {
  color: var(--gold-light);
  letter-spacing: 3px;
}

.hero-left h1 {
  margin: 0;
  color: #ffffff;

  font-size: clamp(48px, 4vw, 67px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.5px;
}

.hero-left h1 span {
  color: var(--gold-light);
}

.gold-line {
  width: 86px;
  height: 4px;
  margin: 27px 0 23px;

  background: var(--gold);
  border-radius: 999px;
}

.hero-description {
  margin: 0;
  color: #ffffff;

  font-size: 20px;
  line-height: 1.55;
}

.hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;

  margin: 38px 0 34px;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: 13px;
}

.hero-feature-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--gold-light);
  border: 2px solid var(--gold);
  border-radius: 50%;

  font-size: 22px;
}

.hero-feature div:last-child {
  display: flex;
  flex-direction: column;
}

.hero-feature strong,
.hero-feature span {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.28;
}

.hero-feature strong {
  font-weight: 600;
}

.hero-buttons {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-gold,
.btn-outline {
  min-height: 62px;
  padding: 14px 27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  border-radius: 8px;
  text-decoration: none;
  text-transform: uppercase;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.btn-gold {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light)
  );
}

.btn-outline {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.88);
}

.btn-outline .fa-whatsapp {
  font-size: 27px;
}

.hero-right {
  position: relative;
  min-height: 500px;
}

.hero-car {
  display: none;
}

.hero-location {
  position: absolute;
  right: 0;
  bottom: 3px;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 11px 20px;

  color: #ffffff;
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;

  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-location i {
  color: #ffffff;
}


/* ---------- WHITE VEHICLE INFORMATION BAR ---------- */

.vehicle-info-strip {
  position: relative;
  z-index: 20;

  padding: 0 0 42px;
  margin-top: -45px;

  background: transparent;
  overflow: visible;
}

.vehicle-info-grid {
  width: min(90%, 1370px);
  max-width: 1370px;
  min-height: 126px;
  margin: 0 auto;
  padding: 24px 44px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;

  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.vehicle-info-item {
  min-height: 70px;
  padding: 0 28px;

  display: flex;
  align-items: center;
  gap: 19px;

  border-right: 1px solid #e4e4e4;
}

.vehicle-info-item:first-child {
  padding-left: 0;
}

.vehicle-info-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.vehicle-info-icon {
  width: 48px;
  flex: 0 0 48px;

  color: var(--gold);
  text-align: center;
  font-size: 38px;
}

.vehicle-info-item > div:last-child {
  display: flex;
  flex-direction: column;
}

.vehicle-info-item strong {
  color: #151515;
  font-size: 17px;
  line-height: 1.35;
}

.vehicle-info-item span {
  color: #222222;
  font-size: 15px;
  line-height: 1.4;
}


/* ---------- PHONE VERSION ---------- */

@media (max-width: 768px) {







  .premium-brand-mark {


    flex-basis: 48px;

  }


























  .hero-premium-inner {




    grid-template-columns: 1fr;
  }

















  .hero-feature-icon {


    flex-basis: 44px;

  }







  .hero-car {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;

    border-radius: 0;
    box-shadow: none;
  }

  .hero-location {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;

    justify-content: center;
    padding: 10px 12px;

    font-size: 11px;
    white-space: normal;
    text-align: center;
  }




  .vehicle-info-grid {

    min-height: auto;



    gap: 0;



  }



  .vehicle-info-item:nth-child(2) {
    border-right: 0;
  }

  .vehicle-info-item:nth-child(3),
  .vehicle-info-item:nth-child(4) {
    border-bottom: 0;
  }

  .vehicle-info-item:nth-child(4) {
    border-right: 0;
  }

  .vehicle-info-icon {

    flex-basis: 35px;

  }




}

/* ===== Approved mobile hero sizing fix ===== */

@media (max-width: 768px) {





  .google-rating {
    margin-bottom: 22px !important;
  }


}

/* ==================================================
   MOBILE HERO — MATCH APPROVED REFERENCE
   ================================================== */

@media (max-width: 768px) {

  /* ---------- HEADER ---------- */






















  /* ---------- HERO ---------- */









  .google-rating strong {
    font-size: 13px !important;
  }

  .rating-stars {
    font-size: 13px !important;

  }










  /* ---------- THREE FEATURES IN ONE ROW ---------- */












  /* ---------- BUTTONS ---------- */








  /* Hide the separate image because it is now the hero background */

  .hero-right {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .hero-car,
  .hero-location {
    display: none !important;
  }


  /* ---------- VEHICLE INFORMATION CARD ---------- */



  .vehicle-info-grid {

    margin-top: -1px !important;








  }












  /* Target screenshot does not show floating circles */


}
/* ==================================================
   CLEAN FINAL MOBILE VERSION
   ================================================== */

@media (max-width: 768px) {

  /* HEADER */

  #mainHeader.premium-header {





    overflow: visible !important;
  }





  .premium-brand-mark {




    border-width: 2px !important;
  }











  .header-booking-btn span {
    font-size: 0 !important;
  }

  .header-booking-btn span::after {
    content: "Réserver";
    font-size: 9px !important;
  }




  /* MOBILE MENU */



  .premium-header nav.open,
  .premium-header nav.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .premium-header nav ul {


    align-items: stretch !important;




  }







  .premium-header nav a:hover,
  .premium-header nav a:active,
  .premium-header nav a.active {
    color: #a97700 !important;
    background: rgba(201, 154, 46, 0.12) !important;
  }


  /* HERO — TESLA USED ONLY AS BACKGROUND */

  .hero-premium {











    background-color: #080808 !important;

    background-image:
      linear-gradient(
        180deg,
        rgba(5, 5, 5, 0.78) 0%,
        rgba(5, 5, 5, 0.58) 32%,
        rgba(5, 5, 5, 0.17) 59%,
        rgba(5, 5, 5, 0.55) 78%,
        rgba(5, 5, 5, 0.96) 100%
      ),
      url("../images/tesla-model-y-lille.png") !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 58% center !important;
  }






















  /* FEATURES */












  /* HERO BUTTONS */








  /* REMOVE THE SEPARATE CAR IMAGE */




  /* VEHICLE INFORMATION CARD */

  .vehicle-info-strip {
    position: relative !important;
    z-index: 20 !important;


    padding: 0 14px 28px !important;

    background: #ffffff !important;
  }

  .vehicle-info-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13) !important;
  }

  .vehicle-info-item {
    min-height: 70px !important;
    padding: 11px 6px !important;

    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    align-items: center !important;
    gap: 12px !important;

    border-right: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  .vehicle-info-item:last-child {
    border-bottom: 0 !important;
  }

  .vehicle-info-icon {
    width: 42px !important;
    font-size: 28px !important;
  }

  .vehicle-info-item strong {
    font-size: 13px !important;
  }

  .vehicle-info-item span {
    font-size: 12px !important;
  }


}

/* ==================================================
   MOBILE HERO — FINAL BACKGROUND + ONE-SCREEN LAYOUT
   ================================================== */

@media (max-width: 768px) {

  /* HERO CONTAINER */
  .hero-premium {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    height: calc(100svh - 168px) !important;
    min-height: 520px !important;
    max-height: 620px !important;

    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;

    background: #080808 !important;
    color: #ffffff !important;
  }

  /* TESLA IMAGE FORCED AS BACKGROUND */
  .hero-premium::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background-image: url("../images/tesla-model-y-lille.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 58% 64% !important;
  }

  /* DARK GRADIENT OVER THE PHOTO */
  .hero-premium::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;

    background:
      linear-gradient(
        180deg,
        rgba(4, 4, 4, 0.88) 0%,
        rgba(4, 4, 4, 0.67) 34%,
        rgba(4, 4, 4, 0.16) 62%,
        rgba(4, 4, 4, 0.68) 82%,
        rgba(4, 4, 4, 0.98) 100%
      ) !important;
  }

  .hero-premium-inner {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
  }

  .hero-left {
    position: static !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* HIDE THE NORMAL TESLA IMAGE */
  .hero-right,
  .hero-car,
  .hero-location {
    display: none !important;
  }

  /* GOOGLE RATING */
  .google-rating {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    color: #ffffff !important;
    background: rgba(5, 5, 5, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 7px !important;

    font-size: 10px !important;
    line-height: 1 !important;

    transform: none !important;
  }

  .google-rating strong,
  .rating-stars {
    font-size: 11px !important;
  }

  .rating-stars {
    letter-spacing: 0 !important;
  }

  /* TITLE */
  .hero-left h1 {
    position: absolute !important;
    top: 73px !important;
    left: 18px !important;

    width: calc(100% - 36px) !important;
    max-width: 330px !important;

    margin: 0 !important;

    color: #ffffff !important;
    font-size: clamp(26px, 7.7vw, 32px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.7px !important;
  }

  .hero-left h1 span {
    color: #dfb64d !important;
  }

  /* GOLD LINE */
  .gold-line {
    position: absolute !important;
    top: 186px !important;
    left: 18px !important;

    width: 44px !important;
    height: 2px !important;

    margin: 0 !important;
    background: #c99a2e !important;
  }

  /* DESCRIPTION */
  .hero-description {
    position: absolute !important;
    top: 207px !important;
    left: 18px !important;

    width: calc(100% - 36px) !important;
    max-width: 290px !important;

    margin: 0 !important;

    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  .hero-description br {
    display: block !important;
  }

  /* THREE FEATURES */
  .hero-features {
    position: absolute !important;
    right: 10px !important;
    bottom: 98px !important;
    left: 10px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;

    margin: 0 !important;
    text-align: center !important;
  }

  .hero-feature-icon {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #dfb64d !important;
    border: 2px solid #c99a2e !important;
    border-radius: 50% !important;

    font-size: 13px !important;
  }

  .hero-feature div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-feature strong,
  .hero-feature span {
    color: #ffffff !important;
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  /* BOTH BUTTONS */
  .hero-buttons {
    position: absolute !important;
    right: 16px !important;
    bottom: 8px !important;
    left: 16px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .btn-gold,
  .btn-outline {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border-radius: 5px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }

  .btn-outline .fa-whatsapp {
    font-size: 15px !important;
  }

  /* VEHICLE CARD STARTS AFTER HERO */
  .vehicle-info-strip {
    margin-top: 0 !important;
  }

  /* FLOATING BUTTONS REMAIN HIDDEN */
  .call-float,
  .whatsapp {
    display: none !important;
  }
}
/* ==================================================
   MOBILE MENU FIX
================================================== */

@media (max-width: 768px) {

  #mainHeader,
  #mainHeader .header-inner {
    overflow: visible !important;
  }

  .premium-header nav {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 14px !important;
    left: auto !important;

    display: block !important;
    width: 265px !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;

    margin: 0 !important;
    padding: 9px !important;

    background: #ffffff !important;
    border: 1px solid rgba(201, 154, 46, 0.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-8px) scale(0.98) !important;
    transform-origin: top right !important;

    transition:
      opacity 0.22s ease,
      visibility 0.22s ease,
      transform 0.22s ease !important;

    z-index: 99999 !important;
  }

  .premium-header nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .premium-header nav ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;

    list-style: none !important;
  }

  .premium-header nav li {
    display: block !important;
    width: 100% !important;
  }

  .premium-header nav a {
    display: block !important;
    width: 100% !important;

    padding: 11px 13px !important;

    color: #111111 !important;
    background: transparent !important;

    border-radius: 9px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  .premium-header nav a::after {
    display: none !important;
  }

  .premium-header nav a:hover,
  .premium-header nav a:active {
    color: #a97700 !important;
    background: rgba(201, 154, 46, 0.12) !important;
  }
}
/* ===== MOBILE LOGO — MATCH REFERENCE ===== */

@media (max-width: 768px) {












}
/* ==================================================
   FINAL MOBILE LOGO AND MENU FIX
================================================== */

@media (max-width: 768px) {



  .premium-header .header-inner {
    position: relative !important;
    overflow: visible !important;









  }

  /* ---------- LOGO ---------- */

  .premium-brand {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;

    min-width: 0 !important;
    color: #111111 !important;
    text-decoration: none !important;
  }

  .premium-brand-mark {
    position: relative !important;

    width: 48px !important;
    height: 57px !important;
    flex: 0 0 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #c99a2e !important;
    background: #ffffff !important;

    border: 2px solid #c99a2e !important;
    border-radius: 8px 8px 18px 18px !important;

    clip-path: none !important;
    overflow: visible !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    box-shadow: none !important;
  }

  /* Pointed shield bottom */
  .premium-brand-mark::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    bottom: -8px !important;

    width: 17px !important;
    height: 17px !important;

    background: #ffffff !important;
    border-right: 2px solid #c99a2e !important;
    border-bottom: 2px solid #c99a2e !important;

    transform: translateX(-50%) rotate(45deg) !important;
    border-radius: 0 0 4px 0 !important;

    z-index: -1 !important;
  }

  /* Crown */
  .premium-brand-mark::before {
    content: "♛" !important;

    position: absolute !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    color: #c99a2e !important;
    font-size: 20px !important;
    line-height: 1 !important;

    z-index: 3 !important;
  }

  .premium-brand-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  .premium-brand-text strong {
    display: block !important;

    width: auto !important;
    max-width: 170px !important;

    color: #111111 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;

    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .premium-brand-text span {
    display: block !important;
    margin-top: 4px !important;

    color: #b88923 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;

    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* ---------- HAMBURGER ---------- */

  .menu-btn {
    position: relative !important;
    z-index: 100002 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    min-width: 46px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-size: 31px !important;
    cursor: pointer !important;
  }

  /* ---------- DROPDOWN MENU ---------- */

  #mainHeader nav,
  .premium-header nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 16px !important;
    left: auto !important;

    display: none !important;

    width: 270px !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 10px !important;

    overflow: visible !important;

    background: #ffffff !important;
    border: 1px solid rgba(201, 154, 46, 0.35) !important;
    border-radius: 14px !important;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;

    z-index: 100001 !important;
  }

  #mainHeader nav.open,
  .premium-header nav.open {
    display: block !important;
  }

  #mainHeader nav:not(.open),
  .premium-header nav:not(.open) {
    display: none !important;
  }

  #mainHeader nav ul,
  .premium-header nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3px !important;

    list-style: none !important;
  }

  #mainHeader nav li,
  .premium-header nav li {
    display: block !important;
    width: 100% !important;
  }

  #mainHeader nav a,
  .premium-header nav a {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 12px 14px !important;

    color: #111111 !important;
    background: transparent !important;

    border-radius: 9px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  #mainHeader nav a::after,
  .premium-header nav a::after {
    display: none !important;
    content: none !important;
  }

  #mainHeader nav a:active,
  .premium-header nav a:active {
    color: #a97700 !important;
    background: rgba(201, 154, 46, 0.13) !important;
  }
}

/* ==================================================
   KEEP HEADER VISIBLE WHEN ACCUEIL IS CLICKED
================================================== */

@media (max-width: 768px) {

  #mainHeader,
  #mainHeader.premium-header {






    overflow: visible !important;


  }

  #accueil {
    scroll-margin-top: 96px !important;
  }
}

/* Fix mobile header content clipping */

@media (max-width: 768px) {
  #mainHeader.premium-header {


    padding-top: 10px !important;
  }



  .premium-brand-mark::before {
    top: -14px !important;
  }
}

/* ==================================================
   FINAL FIX — MOBILE HEADER MUST NEVER MOVE
================================================== */

@media (max-width: 768px) {



  .premium-header .header-inner {







    transform: none !important;
  }




}

/* ==================================================
   FINAL MOBILE HEADER HEIGHT FIX
================================================== */

@media (max-width: 768px) {

  #mainHeader,
  #mainHeader.premium-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 168px !important;
    padding: 0 !important;

    background: #ffffff !important;
    z-index: 999999 !important;
    transform: none !important;
  }

  .premium-header .header-inner {
    width: 100% !important;
    height: 168x !important;
    min-height: 168px !important;

    margin: 0 !important;
    padding: 12px 16px 6px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .premium-brand {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  .menu-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .header-booking-btn {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;

  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;

  height: 44px !important;
  min-height: 44px !important;

  margin: 6px 0 10px !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #c99a2e, #dfb64d) !important;

  border-radius: 7px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;

  font-size: 10px !important;
  font-weight: 700 !important;
}




}
@media (max-width: 768px) {
  main {
    padding-top: 120px !important;
  }

  #accueil,
  #services,
  #trajets,
  #vehicule,
  #apropos,
  #contact {
    scroll-margin-top: 148px !important;
  }
}

/* ==================================================
   OPTION E — PREMIUM VEHICLE EXPERIENCE
   Only affects the new vehicle section
================================================== */

.vehicle-experience {
  position: relative !important;
  margin: 0 !important;
  padding: 26px 16px 34px !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(201, 154, 46, 0.13),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #17130f 0%,
      #231c15 48%,
      #15120f 100%
    ) !important;
}

.vehicle-experience-inner {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;

  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.01)
    );

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- SECTION TITLE ---------- */

.vehicle-experience-heading {
  position: relative;
  z-index: 3;

  padding: 38px 22px 24px;
  text-align: center;
}

.vehicle-experience-heading::before {
  content: "♛";
  display: block;
  margin-bottom: 8px;

  color: #d6a62c;
  font-size: 24px;
  line-height: 1;
}

.vehicle-experience-heading p {
  margin: 0 !important;

  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1.05;
}

.vehicle-experience-heading h2 {
  margin: 4px 0 0 !important;

  color: #d6a62c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
}

.vehicle-experience-line {
  width: 62px;
  height: 3px;
  margin: 20px auto 0;

  background: linear-gradient(
    90deg,
    #b77d08,
    #f1c54c,
    #b77d08
  );

  border-radius: 999px;
}

/* ---------- CARDS ---------- */

.vehicle-experience .vehicle-info-grid {
  position: relative;
  z-index: 3;

  width: auto !important;
  min-height: 0 !important;
  margin: 0 18px 90px !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.vehicle-experience .vehicle-info-item {
  min-height: 106px !important;
  padding: 17px 18px !important;

  display: grid !important;
  grid-template-columns: 68px 1fr !important;
  align-items: center !important;
  gap: 17px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.025)
    ) !important;

  border: 1px solid rgba(212, 175, 55, 0.16) !important;
  border-radius: 16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.13);
}

.vehicle-experience .vehicle-info-icon {
  width: 62px !important;
  height: 62px !important;
  flex: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #17130f !important;
  background:
    linear-gradient(
      145deg,
      #b9800f,
      #f0c24a
    ) !important;

  border-radius: 50% !important;

  font-size: 25px !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 1px rgba(255, 255, 255, 0.38);
}

.vehicle-experience .vehicle-info-item > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.vehicle-experience .vehicle-info-item strong {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.vehicle-experience .vehicle-info-item span {
  margin-top: 4px !important;

  color: #e8e0d7 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ---------- GOLD CITY SKYLINE ---------- */

.vehicle-city-skyline {
  position: absolute;
  right: 0;
  bottom: 67px;
  left: 0;
  z-index: 1;

  height: 115px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;

  padding: 0 14px;

  opacity: 0.42;
  pointer-events: none;
}

.vehicle-city-skyline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;
  background: rgba(212, 175, 55, 0.45);
}

.vehicle-city-skyline span {
  position: relative;
  width: 7%;
  max-width: 48px;
  min-width: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(212, 175, 55, 0.78),
      rgba(140, 89, 10, 0.24)
    );

  border-radius: 3px 3px 0 0;
}

.vehicle-city-skyline span::before,
.vehicle-city-skyline span::after {
  content: "";
  position: absolute;
  top: 10px;

  width: 3px;
  height: 3px;

  background: #f3ca5a;
  border-radius: 50%;

  box-shadow:
    0 12px 0 #f3ca5a,
    0 24px 0 #f3ca5a,
    0 36px 0 #f3ca5a;
}

.vehicle-city-skyline span::before {
  left: 25%;
}

.vehicle-city-skyline span::after {
  right: 25%;
}

.vehicle-city-skyline span:nth-child(1)  { height: 38px; }
.vehicle-city-skyline span:nth-child(2)  { height: 72px; }
.vehicle-city-skyline span:nth-child(3)  { height: 50px; }
.vehicle-city-skyline span:nth-child(4)  { height: 92px; }
.vehicle-city-skyline span:nth-child(5)  { height: 63px; }
.vehicle-city-skyline span:nth-child(6)  { height: 108px; }
.vehicle-city-skyline span:nth-child(7)  { height: 78px; }
.vehicle-city-skyline span:nth-child(8)  { height: 98px; }
.vehicle-city-skyline span:nth-child(9)  { height: 56px; }
.vehicle-city-skyline span:nth-child(10) { height: 86px; }
.vehicle-city-skyline span:nth-child(11) { height: 68px; }
.vehicle-city-skyline span:nth-child(12) { height: 44px; }

/* ---------- GOLD FOOTER STRIP ---------- */

.vehicle-experience-footer {
  position: relative;
  z-index: 4;

  min-height: 67px;
  padding: 14px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: #18130d;
  background:
    linear-gradient(
      110deg,
      #af780b,
      #efc24a 48%,
      #bb8211
    );

  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  text-align: center;
}

.vehicle-experience-footer i {
  font-size: 24px;
}

/* ==================================================
   PHONE VERSION
================================================== */

@media (max-width: 768px) {






















}

/* ==================================================
   DESKTOP VERSION
================================================== */

@media (min-width: 769px) {

  .vehicle-experience {
    padding: 55px 5% 65px !important;
  }

  .vehicle-experience-inner {
    border-radius: 26px;
  }

  .vehicle-experience-heading {
    padding: 46px 30px 30px;
  }

  .vehicle-experience-heading p {
    font-size: 39px;
  }

  .vehicle-experience-heading h2 {
    font-size: 48px;
  }

  .vehicle-experience .vehicle-info-grid {
    margin: 0 40px 105px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .vehicle-experience .vehicle-info-item {
    min-height: 122px !important;
    padding: 22px !important;
    grid-template-columns: 72px 1fr !important;
  }

  .vehicle-experience .vehicle-info-icon {
    width: 66px !important;
    height: 66px !important;
    font-size: 27px !important;
  }

  .vehicle-experience .vehicle-info-item strong {
    font-size: 19px !important;
  }

  .vehicle-experience .vehicle-info-item span {
    font-size: 15px !important;
  }

  .vehicle-experience-footer {
    min-height: 74px;
    font-size: 20px;
  }
}

/* ==================================================
   OPTION E — COMPACT MOBILE VERSION
================================================== */

/* Mobile */
@media (max-width: 768px) {

  .vehicle-experience {
    padding: 14px 12px 22px !important;
  }

  .vehicle-experience-inner {
    border-radius: 17px !important;
  }

  .vehicle-experience-heading {
    padding: 10px 16px 6px !important;
  }

  .vehicle-experience-heading::before {
    margin-bottom: 6px !important;
    font-size: 20px !important;
  }

  .vehicle-experience-heading p {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  .vehicle-experience-heading h2 {
    margin-top: 2px !important;
    font-size: 16px !important;
    line-height: 1.02 !important;
  }

  .vehicle-experience-line {
    width: 52px !important;
    height: 3px !important;
    margin-top: 14px !important;
  }

  .vehicle-experience .vehicle-info-grid {
    margin: 0 12px 22px !important;
    gap: 8px !important;
  }

  .vehicle-experience .vehicle-info-item {
    min-height: 44px !important;
    padding: 12px 14px !important;

    grid-template-columns: 54px 1fr !important;
    gap: 13px !important;

    border-radius: 14px !important;
  }

  .vehicle-experience .vehicle-info-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
  }

  .vehicle-experience .vehicle-info-item strong {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .vehicle-experience .vehicle-info-item span {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .vehicle-city-skyline {
    bottom: 48px !important;
    height: 34px !important;
    gap: 4px !important;
  }

  .vehicle-experience-footer {
    min-height: 56px !important;
    padding: 10px 12px !important;
    gap: 9px !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .vehicle-experience-footer i {
    font-size: 20px !important;
  }
}
/* ==================================================
   WHY CHOOSE US — ULTRA PREMIUM
================================================== */

.why-premium {
  position: relative;
  margin: 0;
  padding: 28px 14px 34px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 14% 34%,
      rgba(212, 175, 55, 0.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #050505 0%,
      #0d0b08 48%,
      #050505 100%
    );
}

.why-premium-inner {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 16px 108px;

  overflow: hidden;

  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.006)
    );

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* GOLD ARC */

.why-premium-inner::before {
  content: "";
  position: absolute;
  top: -110px;
  left: -220px;

  width: 390px;
  height: 720px;

  border: 4px solid rgba(236, 187, 53, 0.9);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;

  transform: rotate(20deg);

  box-shadow:
    0 0 12px rgba(236, 187, 53, 0.65),
    0 0 30px rgba(236, 187, 53, 0.28);

  pointer-events: none;
}

/* INTRO */

.why-premium-intro {
  position: relative;
  z-index: 3;

  max-width: 210px;
  margin: 0 0 24px;
  padding: 26px 6px 12px;

  text-align: left;
}

.why-premium-crown {
  margin-bottom: 9px;
  color: #d6a62c;
  font-size: 25px;
}

.why-premium-intro > p {
  margin: 0;

  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.05;
}

.why-premium-intro h2 {
  margin: 4px 0 0;

  color: #d6a62c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.02;
  text-align: left;
  text-transform: uppercase;
}

.why-premium-line {
  width: 62px;
  height: 2px;
  margin: 18px 0 14px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #e5b83d,
      transparent
    );
}

.why-premium-intro > span {
  display: block;
  max-width: 150px;

  color: #f1ede7;
  font-size: 16px;
  line-height: 1.45;
}

.why-premium-diamond {
  margin-top: 17px;

  color: #d6a62c;
  font-size: 28px;
}

/* CARDS */

.why-premium-list {
  position: relative;
  z-index: 4;

  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.why-premium-card {
  position: relative;

  min-height: 94px;



  align-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 9px 20px rgba(0, 0, 0, 0.22);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.why-premium-card:active {
  transform: scale(0.985);
  border-color: rgba(238, 190, 56, 0.65);
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.why-premium-icon {
  position: absolute;
  left: 14px;
  top: 50%;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  color: #17120b;
  background:
    linear-gradient(
      145deg,
      #b87d0c,
      #f1c64e
    );

  border: 1px solid rgba(255, 220, 110, 0.68);
  border-radius: 50%;

  font-size: 21px;

  box-shadow:
    0 0 0 8px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(218, 168, 36, 0.32);
}

.why-premium-text h3 {
  margin: 0;

  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.why-premium-text p {
  margin: 4px 0 0;

  color: #e7dfd5;
  font-size: 13px;
  line-height: 1.45;
}

.why-premium-arrow {
  position: absolute;
  top: 50%;
  right: 16px;

  transform: translateY(-50%);

  color: #d6a62c;
  font-size: 17px;
}

/* SKYLINE */

.why-premium-skyline {








  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;

  padding: 0 16px;


  pointer-events: none;
}

.why-premium-skyline::before {


  right: 0;







  box-shadow:
    0 0 15px rgba(223, 173, 39, 0.55);
}

.why-premium-skyline span {
  position: relative;

  width: 7%;
  max-width: 46px;
  min-width: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(212, 175, 55, 0.72),
      rgba(111, 68, 8, 0.24)
    );

  border-radius: 3px 3px 0 0;
}

.why-premium-skyline span::before,
.why-premium-skyline span::after {
  content: "";
  position: absolute;
  top: 10px;

  width: 3px;
  height: 3px;

  background: #f0c651;
  border-radius: 50%;

  box-shadow:
    0 12px 0 #f0c651,
    0 24px 0 #f0c651,
    0 36px 0 #f0c651;
}

.why-premium-skyline span::before {
  left: 26%;
}

.why-premium-skyline span::after {
  right: 26%;
}

.why-premium-skyline span:nth-child(1)  { height: 38px; }
.why-premium-skyline span:nth-child(2)  { height: 72px; }
.why-premium-skyline span:nth-child(3)  { height: 50px; }
.why-premium-skyline span:nth-child(4)  { height: 90px; }
.why-premium-skyline span:nth-child(5)  { height: 64px; }
.why-premium-skyline span:nth-child(6)  { height: 98px; }
.why-premium-skyline span:nth-child(7)  { height: 76px; }
.why-premium-skyline span:nth-child(8)  { height: 88px; }
.why-premium-skyline span:nth-child(9)  { height: 58px; }
.why-premium-skyline span:nth-child(10) { height: 82px; }
.why-premium-skyline span:nth-child(11) { height: 67px; }
.why-premium-skyline span:nth-child(12) { height: 44px; }

/* FOOTER BUTTON */

.why-premium-footer {







  padding: 11px 15px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  overflow: hidden;

  color: #e5b83d;
  background: rgba(5, 5, 5, 0.88);

  border: 1px solid rgba(222, 173, 41, 0.78);
  border-radius: 999px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  text-align: center;

  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.why-premium-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;

  width: 42%;
  height: 100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255, 223, 124, 0.72),
      transparent
    );

  transform: skewX(-20deg);

  animation: whyPremiumShine 4.2s ease-in-out infinite;
}

.why-premium-footer i,
.why-premium-footer span {
  position: relative;
  z-index: 2;
}

.why-premium-footer i {
  font-size: 19px;
}

@keyframes whyPremiumShine {
  0%,
  66% {
    left: -130%;
  }

  100% {
    left: 145%;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {







  .why-premium-intro {

    margin-bottom: 18px;

  }




























}

/* ==================================================
   MOBILE — WHY CHOOSE US
================================================== */

@media (max-width: 768px) {

  .why-premium {
    padding: 14px 8px 24px;
  }

  .why-premium-inner {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
    column-gap: 10px;

    padding: 18px 8px 96px;
    border-radius: 20px;
  }

  /* Gold arc starts lower and remains on the left */

  .why-premium-inner::before{
    content:"";
    position:absolute;

    top:45px;
    left:-305px;

    width:420px;
    height:540px;

    border:4px solid rgba(235,188,63,.95);
    border-right:none;

    border-radius:50%;

    transform:none;

    opacity:1;

    box-shadow:
        0 0 8px rgba(255,206,72,.85),
        0 0 22px rgba(236,187,53,.45);

    pointer-events:none;
}

  /* Left-side title */

  .why-premium-intro {
    grid-column: 1;
    grid-row: 1;

    align-self: start;

    max-width: none;
    margin: 0;
    padding: 165px 0 0 8px;

    text-align: left;
  }

  .why-premium-crown {
    margin-bottom: 14px;
    font-size: 20px;
  }

  .why-premium-intro > p {
    font-size: 19px;
    line-height: 1;
  }

  .why-premium-intro h2 {
    margin-top: 8px;

    font-size: 21px;
    line-height: 1.18;
  }

  .why-premium-line {
    width: 46px;
    margin: 17px 0 19px;
  }

  .why-premium-intro > span {
    max-width: 92px;

    font-size: 12px;
    line-height: 1.5;
  }

  .why-premium-diamond {
    margin-top: 20px;
    font-size: 22px;
  }

  /* Right-side cards */

  .why-premium-list {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    gap: 10px;
  }

  .why-premium-card {


    padding:
      12px
      27px
      12px
      70px;

    border-radius: 14px;
  }

  /* Icons now sit completely inside each card */

  .why-premium-icon {
    left: 9px;

    width: 50px;
    height: 50px;

    font-size: 18px;

    box-shadow:
      0 0 0 5px rgba(0, 0, 0, 0.28),
      0 0 15px rgba(218, 168, 36, 0.27);
  }

  .why-premium-text {
    min-width: 0;
  }

  .why-premium-text h3 {
    margin: 0;

    font-size: 13px;
    line-height: 1.22;
  }

  .why-premium-text p {
    margin-top: 5px;

    font-size: 10px;
    line-height: 1.4;
  }

  .why-premium-arrow {
    right: 9px;
    font-size: 14px;
  }

  .why-premium-skyline {
    bottom: 56px;
    height: 72px;
    gap: 3px;
  }

  .why-premium-footer {
    right: 12px;
    bottom: 12px;
    left: 12px;

    min-height: 46px;
    padding: 9px 10px;

    font-size: 14px;
  }
}

/* ==================================================
   WHY PREMIUM — ACCORDION ADDITIONS
   Paste at the very bottom of style.css
================================================== */

/* Subtle moving dark-gold reflection */

.why-premium-inner::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;

  background:
    radial-gradient(
      circle at 28% 35%,
      rgba(211, 161, 35, 0.12),
      transparent 24%
    ),
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(213, 164, 37, 0.08) 48%,
      rgba(255, 215, 105, 0.13) 50%,
      rgba(213, 164, 37, 0.06) 52%,
      transparent 65%
    );

  transform: translateX(-20%);
  animation: whyGoldReflection 10s ease-in-out infinite alternate;

  pointer-events: none;
}

@keyframes whyGoldReflection {
  from {
    transform: translateX(-22%) translateY(-3%);
  }

  to {
    transform: translateX(22%) translateY(3%);
  }
}

/* Keep all real content above the moving reflection */

.why-premium-intro,
.why-premium-list,
.why-premium-skyline,
.why-premium-footer {
  position: relative;
}

.why-premium-intro,
.why-premium-list,
.why-premium-footer {
  z-index: 4;
}

/* Accordion card */

.why-premium-card {
  display: block;
  padding: 0;
  overflow: hidden;
}

/* Clickable top area */

.why-premium-trigger {
  position: relative;

  width: 100%;
  min-height: inherit;
  padding: 14px 42px 14px 78px;

  display: flex;
  align-items: center;

  color: inherit;
  background: transparent;

  border: 0;
  border-radius: inherit;

  font: inherit;
  text-align: left;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.why-premium-trigger:focus-visible {
  outline: 2px solid rgba(229, 184, 61, 0.9);
  outline-offset: -3px;
}

/* Existing icon remains inside the card */

.why-premium-trigger .why-premium-icon {
  top: 50%;
}

/* New text elements */

.why-premium-text {
  display: block;
  min-width: 0;
}

.why-premium-text strong {
  display: block;

  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.why-premium-text small {
  display: block;
  margin-top: 4px;

  color: #e7dfd5;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

/* Arrow animation */

.why-premium-arrow {
  transition:
    transform 0.32s ease,
    color 0.32s ease;
}

.why-premium-card.is-open .why-premium-arrow {
  transform:
    translateY(-50%)
    rotate(90deg);

  color: #f2c64d;
}

/* Hidden details */

.why-premium-details {
  display: grid;
  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows 0.42s ease,
    opacity 0.3s ease;
}

.why-premium-card.is-open .why-premium-details {
  grid-template-rows: 1fr;
  opacity: 1;
}

.why-premium-details-inner {
  min-height: 0;
  overflow: hidden;

  border-top: 1px solid rgba(218, 171, 45, 0);
}

.why-premium-card.is-open .why-premium-details-inner {
  padding: 18px 18px 20px;

  border-top-color: rgba(218, 171, 45, 0.3);

  background:
    linear-gradient(
      145deg,
      rgba(218, 171, 45, 0.09),
      rgba(255, 255, 255, 0.018) 45%,
      rgba(0, 0, 0, 0.12)
    );

  box-shadow:
    inset 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Expanded heading and paragraph */

.why-premium-details h3 {
  margin: 0 0 8px;

  color: #e5b83d;
  font-size: 15px;
  line-height: 1.3;
}

.why-premium-details p {
  margin: 0 0 14px;

  color: #f0ebe4;
  font-size: 12px;
  line-height: 1.55;
}

/* Gold checklist */

.why-premium-details ul {
  margin: 0;
  padding: 0;

  display: grid;
  gap: 10px;

  list-style: none;
}

.why-premium-details li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;

  color: #f3eee7;
  font-size: 12px;
  line-height: 1.45;
}

.why-premium-details li i {
  margin-top: 2px;

  color: #e5b83d;
  font-size: 14px;

  filter:
    drop-shadow(
      0 0 5px rgba(229, 184, 61, 0.35)
    );
}

/* Payment logos */

.why-premium-payment-logos {

  padding-top: 14px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: center;

  border-top: 1px solid rgba(218, 171, 45, 0.28);
}

.why-premium-payment-logos i {
  color: #e5b83d;
  font-size: 29px;
  text-align: center;

  filter:
    drop-shadow(
      0 0 7px rgba(229, 184, 61, 0.28)
    );
}

/* Open-card glow */

.why-premium-card.is-open {
  border-color: rgba(235, 188, 63, 0.72);

  box-shadow:
    0 0 18px rgba(218, 171, 45, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* ==================================================
   MOBILE ACCORDION ADJUSTMENTS
================================================== */

@media (max-width: 768px) {

  .why-premium-card {
    min-height: 0;
  }

  .why-premium-trigger {
    min-height: 100px;
    padding: 12px 27px 12px 70px;
  }

  .why-premium-text strong {
    font-size: 13px;
    line-height: 1.22;
  }

  .why-premium-text small {
    margin-top: 5px;

    font-size: 10px;
    line-height: 1.4;
  }

  .why-premium-card.is-open
  .why-premium-details-inner {
    padding: 15px 12px 17px;
  }

  .why-premium-details h3 {
    font-size: 13px;
  }

  .why-premium-details p,
  .why-premium-details li {
    font-size: 10px;
  }

  .why-premium-details ul {
    gap: 8px;
  }

  .why-premium-details li {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px;
  }

  .why-premium-details li i {
    font-size: 12px;
  }

  .why-premium-payment-logos {
    gap: 6px;
  }

  .why-premium-payment-logos i {
    font-size: 23px;
  }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {

  .why-premium-inner::after {
    animation: none;
  }

  .why-premium-details,
  .why-premium-arrow {
    transition: none;
  }
}
/* ==================================================
   FINAL POSITION FIXES — WHY PREMIUM
================================================== */

/* Give the section enough room for skyline + footer */

.why-premium-inner {
  padding-bottom: 190px !important;
}

/* Skyline stays behind the cards and above the footer */

.why-premium-skyline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 72px !important;
  z-index: 2 !important;

  height: 105px !important;
  opacity: 0.48 !important;
}

/* Bright gold glow directly above the footer */

.why-premium-skyline::after {
  content: "";
  position: absolute;

  left: 8%;
  right: 8%;
  bottom: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(224, 174, 42, 0.75) 25%,
      #ffd65c 50%,
      rgba(224, 174, 42, 0.75) 75%,
      transparent
    );

  box-shadow:
    0 0 8px rgba(255, 210, 76, 0.9),
    0 0 18px rgba(231, 179, 42, 0.75),
    0 0 32px rgba(231, 179, 42, 0.38);

  pointer-events: none;
}

/* Strong central light point */

.why-premium-skyline::before {
  content: "";
  position: absolute;

  left: 50%;
  bottom: -3px;

  width: 90px;
  height: 8px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 244, 193, 1) 0%,
      rgba(255, 211, 74, 0.9) 18%,
      rgba(224, 174, 42, 0.42) 45%,
      transparent 75%
    );

  filter: blur(1px);
  pointer-events: none;
}

/* Footer always remains at the bottom */

.why-premium-footer {
  position: absolute !important;

  left: 24px !important;
  right: 24px !important;
  bottom: 18px !important;

  z-index: 8 !important;

  min-height: 58px !important;
  margin: 0 !important;
}

/* Payment logos remain clean and aligned */

.why-premium-payment-logos {
  width: 100%;
  margin-top: 18px;
  padding-top: 14px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
}

.why-premium-payment-logos i {
  flex: 0 0 auto;

  color: #e5b83d;
  font-size: 30px;
  line-height: 1;

  filter:
    drop-shadow(0 0 7px rgba(229, 184, 61, 0.3));
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

  .why-premium-inner {
    padding-bottom: 170px !important;
  }

  .why-premium-skyline {
    bottom: 68px !important;
    height: 92px !important;
  }

  .why-premium-footer {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;

    min-height: 48px !important;
    padding: 10px 12px !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .why-premium-payment-logos {
    gap: 8px;
  }

  .why-premium-payment-logos i {
    font-size: 25px;
  }
}

/* ==================================================
   TARIFS PREMIUM — OPTION 6
================================================== */

.tarifs-premium {
  position: relative;
  padding: 26px 14px 34px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 18%,
      rgba(212, 175, 55, 0.12),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #050505 0%,
      #0d0b08 48%,
      #050505 100%
    );
}

.tarifs-premium-inner {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 16px 118px;
  overflow: hidden;

  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.006)
    );

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- HEADING ---------- */

.tarifs-heading {
  position: relative;
  z-index: 4;
  margin-bottom: 26px;
  text-align: center;
}

.tarifs-crown {
  margin-bottom: 8px;
  color: #d6a62c;
  font-size: 25px;
}

.tarifs-heading p {
  margin: 0;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: 1;
}

.tarifs-heading h2 {
  margin: 4px 0 0;
  color: #d6a62c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.tarifs-heading-line {
  width: 70px;
  height: 2px;
  margin: 18px auto 14px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #e5b83d,
      transparent
    );
}

.tarifs-heading span {
  display: block;
  max-width: 540px;
  margin: 0 auto;

  color: #eee7df;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- MAIN LAYOUT ---------- */

.tarifs-layout {
  position: relative;
  z-index: 4;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  align-items: stretch;
}

.tarifs-list {
  display: grid;
  gap: 10px;
}

/* ---------- SERVICE CARDS ---------- */

.tarif-service-card {
  position: relative;
  min-height: 90px;
  padding: 14px 150px 14px 78px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 15px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 9px 20px rgba(0, 0, 0, 0.22);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.tarif-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(238, 190, 56, 0.62);

  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.tarif-service-icon {
  position: absolute;
  top: 50%;
  left: 14px;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  color: #17120b;

  background:
    linear-gradient(
      145deg,
      #b87d0c,
      #f1c64e
    );

  border-radius: 50%;

  font-size: 20px;

  box-shadow:
    0 0 0 7px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(218, 168, 36, 0.29);
}

.tarif-service-content {
  min-width: 0;
}

.tarif-service-content h3 {
  margin: 0;
  color: #e5b83d;
  font-size: 16px;
  line-height: 1.25;
  text-transform: uppercase;
}

.tarif-service-content p {
  margin: 5px 0 0;
  color: #ebe4db;
  font-size: 12px;
  line-height: 1.45;
}

.tarif-service-price {
  position: absolute;
  top: 50%;
  right: 14px;

  width: 120px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  transform: translateY(-50%);

  text-align: right;
}

.tarif-service-price small {
  color: #d9c79a;
  font-size: 9px;
  text-transform: uppercase;
}

.tarif-service-price strong {
  margin-top: 2px;
  color: #f1c64e;
  font-size: 23px;
  line-height: 1;
}

.tarif-service-price span {
  margin-top: 5px;
  color: #ddd4ca;
  font-size: 10px;
  line-height: 1.2;
}

.tarif-service-price .tarif-quote {
  font-size: 16px;
  text-transform: uppercase;
}

/* ---------- MINIMUM FARE CARD ---------- */

.tarif-minimum-card {
  position: relative;
  min-height: 100%;

  padding: 28px 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(212, 175, 55, 0.13),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.01)
    );

  border: 1px solid rgba(229, 184, 61, 0.6);
  border-radius: 18px;

  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tarif-minimum-card i {
  margin-bottom: 15px;
  color: #e5b83d;
  font-size: 26px;
}

.tarif-minimum-card span {
  color: #e5b83d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.tarif-minimum-card strong {
  margin: 14px 0 10px;
  color: #f1c64e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1;
}

.tarif-minimum-card p {
  margin: 0;
  color: #e8e0d7;
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- PAYMENTS ---------- */

.tarifs-payments {
  position: relative;
  z-index: 4;
  margin-top: 28px;
  padding-top: 22px;

  border-top: 1px solid rgba(212, 175, 55, 0.26);
}

.tarifs-payments h3 {
  margin: 0 0 17px;

  color: #e5b83d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.tarifs-payment-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.tarifs-payment-list div {
  min-height: 58px;
  padding: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #eee7df;

  background: rgba(255, 255, 255, 0.018);

  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
}

.tarifs-payment-list i {
  color: #e5b83d;
  font-size: 20px;
}

.tarifs-payment-list .fa-paypal {
  color: #4aa3ff;
}

.tarifs-payment-list span {
  font-size: 12px;
  line-height: 1.2;
}

/* ---------- SKYLINE ---------- */

.tarifs-skyline {
  position: absolute;
  right: 0;
  bottom: 58px;
  left: 0;
  z-index: 1;

  height: 78px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;

  padding: 0 14px;

  opacity: 0.42;
  pointer-events: none;
}

.tarifs-skyline::before {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 0;
  left: 7%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(232, 183, 49, 0.85),
      transparent
    );

  box-shadow:
    0 0 9px rgba(255, 213, 90, 0.9),
    0 0 22px rgba(224, 174, 42, 0.48);
}

.tarifs-skyline span {
  width: 7%;
  max-width: 45px;
  min-width: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(212, 175, 55, 0.72),
      rgba(111, 68, 8, 0.24)
    );

  border-radius: 3px 3px 0 0;
}

.tarifs-skyline span:nth-child(1)  { height: 26px; }
.tarifs-skyline span:nth-child(2)  { height: 54px; }
.tarifs-skyline span:nth-child(3)  { height: 38px; }
.tarifs-skyline span:nth-child(4)  { height: 68px; }
.tarifs-skyline span:nth-child(5)  { height: 46px; }
.tarifs-skyline span:nth-child(6)  { height: 78px; }
.tarifs-skyline span:nth-child(7)  { height: 58px; }
.tarifs-skyline span:nth-child(8)  { height: 72px; }
.tarifs-skyline span:nth-child(9)  { height: 42px; }
.tarifs-skyline span:nth-child(10) { height: 62px; }
.tarifs-skyline span:nth-child(11) { height: 49px; }
.tarifs-skyline span:nth-child(12) { height: 31px; }

/* ---------- FOOTER NOTE ---------- */

.tarifs-footer-note {
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: 18px;
  z-index: 5;

  min-height: 38px;
  padding: 9px 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #e7dfd5;
  background: rgba(5, 5, 5, 0.9);

  border-top: 1px solid rgba(212, 175, 55, 0.35);

  font-size: 12px;
  text-align: center;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

  .tarifs-premium {
    padding: 14px 8px 24px;
  }

  .tarifs-premium-inner {
    padding: 20px 10px 108px;
    border-radius: 20px;
  }

  .tarifs-heading {
    margin-bottom: 20px;
  }

  .tarifs-crown {
    font-size: 20px;
  }

  .tarifs-heading p {
    font-size: 20px;
  }

  .tarifs-heading h2 {
    font-size: 29px;
  }

  .tarifs-heading span {
    font-size: 12px;
  }

  .tarifs-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tarif-service-card {
    min-height: 92px;
    padding: 12px 105px 12px 66px;
    border-radius: 14px;
  }

  .tarif-service-icon {
    left: 10px;
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .tarif-service-content h3 {
    font-size: 12px;
  }

  .tarif-service-content p {
    margin-top: 4px;
    font-size: 10px;
  }

  .tarif-service-price {
    right: 10px;
    width: 88px;
  }

  .tarif-service-price small {
    font-size: 7px;
  }

  .tarif-service-price strong {
    font-size: 19px;
  }

  .tarif-service-price span {
    font-size: 8px;
  }

  .tarif-service-price .tarif-quote {
    font-size: 12px;
  }

  .tarif-minimum-card {
    min-height: 165px;
    padding: 20px 16px;
  }

  .tarif-minimum-card span {
    font-size: 17px;
  }

  .tarif-minimum-card strong {
    margin: 10px 0 8px;
    font-size: 40px;
  }

  .tarif-minimum-card p {
    font-size: 11px;
  }

  .tarifs-payments {
    margin-top: 20px;
    padding-top: 18px;
  }

  .tarifs-payments h3 {
    font-size: 13px;
  }

  .tarifs-payment-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tarifs-payment-list div {
    min-height: 52px;
    padding: 8px;
  }

  .tarifs-payment-list i {
    font-size: 18px;
  }

  .tarifs-payment-list span {
    font-size: 10px;
  }

  .tarifs-skyline {
    bottom: 54px;
    height: 64px;
  }

  .tarifs-footer-note {
    right: 10px;
    bottom: 10px;
    left: 10px;

    min-height: 36px;
    padding: 8px;

    font-size: 10px;
  }
}

@media (max-width: 768px) {
  #tarifs {
    scroll-margin-top: 168px !important;
  }

  .tarifs-premium {
    padding-top: 22px !important;
  }
}

/* ==================================================
   TARIFS — COMPACT MINIMUM CARD + BOOKING BUTTON
================================================== */

.tarifs-booking-btn {
  position: absolute;
  right: 24px;
  bottom: 58px;
  left: 24px;
  z-index: 6;

  min-height: 54px;
  padding: 12px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #b9800f,
      #efc54d
    );

  border-radius: 10px;

  text-decoration: none;
  text-transform: uppercase;

  font-size: 14px;
  font-weight: 700;

  box-shadow:
    0 10px 24px rgba(212, 175, 55, 0.24);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.tarifs-booking-btn:hover,
.tarifs-booking-btn:active {
  transform: translateY(-2px);

  box-shadow:
    0 14px 30px rgba(212, 175, 55, 0.34);
}

/* Make space for the new button */

.tarifs-premium-inner {
  padding-bottom: 178px;
}

.tarifs-skyline {
  bottom: 112px;
}

.tarifs-footer-note {
  bottom: 12px;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

  .tarif-minimum-card {
  min-height: 92px;
  padding: 12px 16px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  column-gap: 12px;
  align-items: center;

  text-align: left;
}

  .tarif-minimum-card i {
    grid-column: 1;
    grid-row: 1;

    margin: 0;

    font-size: 24px;
  }

  .tarif-minimum-card span {
    grid-column: 2;
    grid-row: 1;

    font-size: 17px;
  }

  .tarif-minimum-card strong {
    grid-column: 3;
    grid-row: 1;

    margin: 0;

    font-size: 36px;
  }

  .tarif-minimum-card p {
  display: none !important;
}

  .tarifs-premium-inner {
    padding-bottom: 166px;
  }

  .tarifs-skyline {
    bottom: 102px;
  }

  .tarifs-booking-btn {
    right: 12px;
    bottom: 52px;
    left: 12px;

    min-height: 46px;
    padding: 9px 12px;

    font-size: 12px;
  }

  .tarifs-footer-note {
    bottom: 8px;
  }
}
/* ==================================================
   DESTINATIONS PREMIUM — DESIGN F
================================================== */

.destinations-premium {
  position: relative;
  padding: 28px 14px 36px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 28%,
      rgba(212, 175, 55, 0.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #050505 0%,
      #0d0b08 48%,
      #050505 100%
    );
}

.destinations-premium-inner {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 18px 28px;
  overflow: hidden;

  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.006)
    );

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- HEADING ---------- */

.destinations-heading {
  position: relative;
  z-index: 4;
  margin-bottom: 30px;
  text-align: center;
}

.destinations-crown {
  margin-bottom: 8px;

  color: #d6a62c;
  font-size: 25px;
}

.destinations-heading p {
  margin: 0;

  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: 1.05;
}

.destinations-heading h2 {
  margin: 4px 0 0;

  color: #d6a62c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.destinations-heading-line {
  width: 70px;
  height: 2px;
  margin: 18px auto 14px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #e5b83d,
      transparent
    );
}

.destinations-heading span {
  display: block;
  max-width: 590px;
  margin: 0 auto;

  color: #eee7df;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- MAIN LAYOUT ---------- */

.destinations-main-layout {
  position: relative;
  z-index: 4;

  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: stretch;
}

/* ==================================================
   GLOWING ROUTE MAP
================================================== */

.destinations-map {
  position: relative;
  min-height: 570px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 48% 46%,
      rgba(232, 183, 49, 0.18),
      transparent 20%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.03),
      rgba(0, 0, 0, 0.18)
    );

  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 20px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

/* Decorative map lines */

.destinations-map::before {
  content: "";
  position: absolute;
  inset: 7%;

  opacity: 0.35;

  background:
    linear-gradient(
      28deg,
      transparent 47%,
      rgba(212, 175, 55, 0.22) 48%,
      rgba(212, 175, 55, 0.22) 49%,
      transparent 50%
    ),
    linear-gradient(
      -24deg,
      transparent 47%,
      rgba(212, 175, 55, 0.16) 48%,
      rgba(212, 175, 55, 0.16) 49%,
      transparent 50%
    );

  pointer-events: none;
}

.destinations-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;

  width: 110px;
  height: 110px;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      rgba(255, 224, 123, 0.5) 0%,
      rgba(218, 168, 36, 0.16) 35%,
      transparent 72%
    );

  filter: blur(3px);
  pointer-events: none;
}

/* City labels */

.map-city {
  position: absolute;
  z-index: 4;

  padding: 7px 10px;

  color: #f4e7bd;
  background: rgba(5, 5, 5, 0.82);

  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.12);
}

.map-city::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;

  width: 8px;
  height: 8px;

  transform: translateY(-50%);

  background: #e5b83d;
  border-radius: 50%;

  box-shadow:
    0 0 8px rgba(229, 184, 61, 0.9);
}

.map-lille {
  left: 44%;
  top: 43%;

  padding: 10px 15px;

  color: #15100a;
  background:
    linear-gradient(
      135deg,
      #b9800f,
      #f0c64f
    );

  border-color: #f2cf6a;
  font-size: 15px;

  box-shadow:
    0 0 12px rgba(229, 184, 61, 0.55),
    0 0 30px rgba(229, 184, 61, 0.25);
}

.map-lille::before {
  display: none;
}

.map-bruxelles {
  right: 9%;
  top: 10%;
}

.map-charleroi {
  right: 4%;
  top: 29%;
}

.map-cdg {
  right: 5%;
  bottom: 20%;
}

.map-orly {
  right: 23%;
  bottom: 6%;
}

.map-beauvais {
  left: 7%;
  bottom: 18%;
}

/* Routes */

.map-route {
  position: absolute;
  z-index: 2;

  height: 2px;

  transform-origin: left center;

  background:
    linear-gradient(
      90deg,
      rgba(229, 184, 61, 0.95),
      rgba(229, 184, 61, 0.3)
    );

  box-shadow:
    0 0 6px rgba(229, 184, 61, 0.7),
    0 0 15px rgba(229, 184, 61, 0.28);
}

.route-bruxelles {
  left: 50%;
  top: 47%;
  width: 47%;
  transform: rotate(-57deg);
}

.route-charleroi {
  left: 50%;
  top: 47%;
  width: 32%;
  transform: rotate(-34deg);
}

.route-cdg {
  left: 50%;
  top: 47%;
  width: 42%;
  transform: rotate(50deg);
}

.route-orly {
  left: 50%;
  top: 47%;
  width: 51%;
  transform: rotate(77deg);
}

.route-beauvais {
  left: 50%;
  top: 47%;
  width: 59%;
  transform: rotate(143deg);
}

/* ==================================================
   FEATURED DESTINATIONS
================================================== */

.destinations-featured-list {
  display: grid;
  gap: 12px;
}

.destination-featured-card {
  position: relative;
  min-height: 128px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 44% 56%;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 9px 20px rgba(0, 0, 0, 0.22);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.destination-featured-card:hover {
  transform: translateY(-3px);

  border-color: rgba(238, 190, 56, 0.62);

  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.destination-photo {
  position: relative;
  min-height: 128px;
  overflow: hidden;
}

.destination-photo::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 45%,
      rgba(7, 7, 7, 0.9) 100%
    );

  pointer-events: none;
}

.destination-photo img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  transition: transform 0.45s ease;
}

.destination-featured-card:hover .destination-photo img {
  transform: scale(1.05);
}

.destination-card-content {
  position: relative;
  padding: 18px 16px 18px 14px;

  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
}

.destination-card-icon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #17120b;

  background:
    linear-gradient(
      145deg,
      #b87d0c,
      #f1c64e
    );

  border-radius: 50%;

  font-size: 18px;

  box-shadow:
    0 0 0 6px rgba(0, 0, 0, 0.22),
    0 0 15px rgba(218, 168, 36, 0.27);
}

.destination-card-content h3 {
  margin: 0;

  color: #e5b83d;
  font-size: 15px;
  line-height: 1.25;
}

.destination-card-content p {
  margin: 3px 0 8px;

  color: #e8e0d7;
  font-size: 12px;
}

.destination-card-content span {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #d9c79a;
  font-size: 11px;
}

.destination-card-content span i {
  color: #e5b83d;
}

/* ==================================================
   OTHER DESTINATIONS
================================================== */

.destinations-more {
  position: relative;
  z-index: 4;

  margin-top: 27px;
  padding-top: 22px;

  border-top: 1px solid rgba(212, 175, 55, 0.26);
}

.destinations-more h3 {
  margin: 0 0 16px;

  color: #e5b83d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.destinations-more-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.destinations-more-list span {
  min-height: 40px;
  padding: 9px 13px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #eee7df;
  background: rgba(255, 255, 255, 0.018);

  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;

  font-size: 11px;
}

.destinations-more-list i {
  color: #e5b83d;
}

/* ---------- BUTTON ---------- */

.destinations-booking-btn {
  position: relative;
  z-index: 4;

  width: min(380px, 100%);
  min-height: 52px;
  margin: 24px auto 0;
  padding: 12px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #b9800f,
      #efc54d
    );

  border-radius: 10px;

  text-decoration: none;
  text-transform: uppercase;

  font-size: 13px;
  font-weight: 700;

  box-shadow:
    0 10px 24px rgba(212, 175, 55, 0.24);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.destinations-booking-btn:hover,
.destinations-booking-btn:active {
  transform: translateY(-2px);

  box-shadow:
    0 14px 30px rgba(212, 175, 55, 0.34);
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

  .destinations-premium {
    padding: 14px 8px 24px;
  }

  .destinations-premium-inner {
    padding: 20px 10px 24px;
    border-radius: 20px;
  }

  .destinations-heading {
    margin-bottom: 20px;
  }

  .destinations-crown {
    font-size: 20px;
  }

  .destinations-heading p {
    font-size: 20px;
  }

  .destinations-heading h2 {
    font-size: 29px;
  }

  .destinations-heading span {
    font-size: 12px;
  }

  .destinations-main-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

 .destinations-map-crop {
  width: 100%;
  height: 230px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 16px;
}

.destinations-map-crop .destinations-map {
  width: 100% !important;
  height: 360px !important;
  min-height: 360px !important;
  transform: translateY(-65px) !important;
  border: none !important;
  border-radius: 0 !important;
}

  .map-city {
    padding: 6px 8px;
    font-size: 9px;
  }

  .map-lille {
    left: 42%;
    top: 43%;

    padding: 8px 12px;
    font-size: 12px;
  }

  .map-bruxelles {
    right: 4%;
    top: 9%;
  }

  .map-charleroi {
    right: 2%;
    top: 28%;
  }

  .map-cdg {
    right: 2%;
    bottom: 21%;
  }

  .map-orly {
    right: 18%;
    bottom: 5%;
  }

  .map-beauvais {
    left: 4%;
    bottom: 18%;
  }

  .destination-featured-card {
    min-height: 105px;
    grid-template-columns: 42% 58%;
    border-radius: 14px;
  }

  .destination-photo {
    min-height: 105px;
  }

  .destination-card-content {
    padding: 12px 10px;
    grid-template-columns: 38px 1fr;
    gap: 9px;
  }

  .destination-card-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .destination-card-content h3 {
    font-size: 11px;
  }

  .destination-card-content p {
    margin: 2px 0 6px;
    font-size: 9px;
  }

  .destination-card-content span {
    gap: 4px;
    font-size: 8px;
  }

  .destinations-more {
    margin-top: 20px;
    padding-top: 18px;
  }

  .destinations-more h3 {
    font-size: 13px;
  }

  .destinations-more-list {
    gap: 7px;
  }

  .destinations-more-list span {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 9px;
  }

  .destinations-booking-btn {
    min-height: 47px;
    margin-top: 20px;
    padding: 10px 13px;
    font-size: 11px;
  }

  #destinations {
    scroll-margin-top: 168px;
  }
}
.destination-featured-card {
  cursor: pointer;
}

/* =========================================
   CONTACT RAPIDE — LUXURY BLACK & GOLD
========================================= */

.luxury-contact {
  position: relative;
  overflow: hidden;
  padding: 70px 20px 28px;
  background:
    radial-gradient(circle at 85% 12%, rgba(212, 164, 32, 0.12), transparent 28%),
    radial-gradient(circle at 15% 88%, rgba(212, 164, 32, 0.08), transparent 32%),
    linear-gradient(180deg, #080808 0%, #0d0d0d 55%, #070707 100%);
  color: #ffffff;
  border-top: 1px solid rgba(212, 164, 32, 0.35);
  border-bottom: 1px solid rgba(212, 164, 32, 0.25);
}

.luxury-contact::before {
  content: "";
  position: absolute;
  inset: auto -20% 95px -20%;
  height: 120px;
  background:
    repeating-radial-gradient(
      ellipse at center,
      rgba(245, 193, 51, 0.18) 0 1px,
      transparent 1px 10px
    );
  opacity: 0.22;
  transform: rotate(-4deg);
  pointer-events: none;
}

.luxury-contact__glow {
  position: absolute;
  top: 110px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(226, 174, 32, 0.12);
  filter: blur(70px);
  pointer-events: none;
}

.luxury-contact__top,
.luxury-contact__cards,
.luxury-contact__advantages {
  position: relative;
  z-index: 1;
}

.luxury-contact__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.luxury-contact__crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 94px;
  height: 108px;
  background: #fffaf0;
  color: #e9bd43;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 700;
  border: 3px solid #c99820;
  border-radius: 12px 12px 44px 44px;
  box-shadow:
    0 0 0 1px rgba(255, 221, 112, 0.28),
    0 0 22px rgba(218, 166, 35, 0.2);
}

.luxury-contact__crest::before {
  content: "♛";
  position: absolute;
  top: -31px;
  color: #e4b532;
  font-size: 36px;
  line-height: 1;
}

.luxury-contact__crest::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 44px;
  height: 24px;
  border-bottom: 2px solid #c99820;
  border-radius: 50%;
}

.luxury-contact__eyebrow {
  margin: 0 0 10px;
  color: #d7a51f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.luxury-contact__intro h2 {
  margin: 0;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 10vw, 50px);
  line-height: 1.08;
}

.luxury-contact__subtitle {
  max-width: 520px;
  margin: 18px auto 0;
  color: #dedede;
  font-size: 17px;
  line-height: 1.7;
}

.luxury-contact__intro::after {
  content: "";
  display: block;
  width: 86px;
  height: 2px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, #e6b52f, transparent);
}

.luxury-contact__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1180px;
  margin: 42px auto 0;
}

.luxury-contact__card {
  display: flex;
  min-height: 245px;
  padding: 30px 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(25, 25, 25, 0.96), rgba(8, 8, 8, 0.98));
  border: 1px solid rgba(213, 164, 37, 0.8);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 132, 0.08),
    0 15px 38px rgba(0, 0, 0, 0.38);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.luxury-contact__card:active {
  transform: scale(0.98);
}

.luxury-contact__icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 24px;
  color: #efbf3c;
  font-size: 36px;
  border: 1px solid rgba(226, 174, 44, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(235, 181, 44, 0.16), rgba(8, 8, 8, 0.7) 68%);
  box-shadow:
    0 0 18px rgba(231, 178, 43, 0.24),
    inset 0 0 18px rgba(227, 173, 35, 0.08);
}

.luxury-contact__card h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.25;
}

.luxury-contact__card p {
  margin: 0;
  color: #e5e5e5;
  font-size: 17px;
  line-height: 1.5;
}

.luxury-contact__link {
  margin-top: 18px;
  color: #e5b32c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
}

.luxury-contact__card--booking {
  min-height: 265px;
  border-width: 2px;
  box-shadow:
    0 0 24px rgba(224, 172, 37, 0.18),
    inset 0 1px 0 rgba(255, 226, 132, 0.12);
}

.luxury-contact__card--booking h3 {
  max-width: 230px;
  color: #e6b938;
  font-size: 25px;
  text-transform: uppercase;
}

.luxury-contact__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 22px;
  color: #e9b934;
  font-size: 20px;
  border: 1px solid #e4b02c;
  border-radius: 50%;
}

.luxury-contact__advantages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1180px;
  margin: 38px auto 0;
  padding: 22px 18px;
  border: 1px solid rgba(214, 166, 43, 0.45);
  border-radius: 18px;
  background: rgba(15, 15, 15, 0.78);
}

.luxury-contact__advantages span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #e8c96d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
}

.luxury-contact__advantages i {
  color: #e0ad26;
  font-size: 18px;
}

@media (min-width: 700px) {
  .luxury-contact {
    padding: 85px 36px 34px;
  }

  .luxury-contact__brand {
    flex-direction: row;
    justify-content: center;
    text-align: left;
  }

  .luxury-contact__subtitle {
    margin-left: 0;
  }

  .luxury-contact__intro::after {
    margin-left: 0;
  }

  .luxury-contact__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .luxury-contact__advantages {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1050px) {
  .luxury-contact {
    padding: 90px 56px 36px;
  }

  .luxury-contact__top {
    max-width: 1180px;
    margin: 0 auto;
  }

  .luxury-contact__brand {
    justify-content: flex-start;
  }

  .luxury-contact__cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .luxury-contact__card:hover {
    transform: translateY(-6px);
    border-color: #edbe3d;
    box-shadow:
      0 0 28px rgba(226, 174, 37, 0.17),
      0 18px 42px rgba(0, 0, 0, 0.48);
  }

  .luxury-contact__advantages {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* =========================================
   CONTACT — MOBILE LAYOUT CORRECTION
========================================= */

@media (max-width: 699px) {
  .luxury-contact {
    padding: 48px 16px 22px;
  }

  .luxury-contact__brand {
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 18px;
    text-align: left;
  }

  .luxury-contact__crest {
    width: 66px;
    height: 78px;
    font-size: 25px;
    border-width: 2px;
    border-radius: 9px 9px 30px 30px;
  }

  .luxury-contact__crest::before {
    top: -23px;
    font-size: 27px;
  }

  .luxury-contact__crest::after {
    bottom: -10px;
    width: 34px;
    height: 18px;
  }

  .luxury-contact__eyebrow {
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .luxury-contact__intro h2 {
    font-size: 29px;
    line-height: 1.08;
  }

  .luxury-contact__subtitle {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .luxury-contact__intro::after {
    width: 58px;
    margin: 15px 0 0;
  }

  .luxury-contact__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 32px;
  }

  .luxury-contact__card {
    min-height: 205px;
    padding: 22px 10px;
    border-radius: 14px;
  }

  .luxury-contact__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 17px;
    font-size: 25px;
  }

  .luxury-contact__card h3 {
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.25;
  }

  .luxury-contact__card p {
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .luxury-contact__link {
    margin-top: 13px;
    font-size: 13px;
  }

  .luxury-contact__card--booking {
    min-height: 205px;
    border-width: 1px;
  }

  .luxury-contact__card--booking h3 {
    max-width: 150px;
    font-size: 17px;
  }

  .luxury-contact__arrow {
    width: 40px;
    height: 40px;
    margin-top: 15px;
    font-size: 16px;
  }

  .luxury-contact__advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 24px;
    padding: 14px 8px;
    border-radius: 10px;
  }

  .luxury-contact__advantages span {
    min-height: 46px;
    padding: 7px;
    font-size: 9px;
    line-height: 1.35;
  }

  .luxury-contact__advantages i {
    font-size: 13px;
  }
}

/* =========================================
   AVIS GOOGLE — LUXURY BLACK & GOLD
   PARTIE 1 : SECTION + TITRES
========================================= */

.premium-reviews {
  position: relative;
  overflow: hidden;
  padding: 70px 18px 60px;
  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(215, 164, 34, 0.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 88%,
      rgba(215, 164, 34, 0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #080808 0%,
      #0d0d0d 55%,
      #070707 100%
    );
  color: #ffffff;
  border-top: 1px solid rgba(215, 164, 34, 0.35);
  border-bottom: 1px solid rgba(215, 164, 34, 0.25);
}

.premium-reviews::before {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: 55px;
  height: 120px;
  opacity: 0.22;
  pointer-events: none;
  transform: rotate(-3deg);
  background:
    repeating-radial-gradient(
      ellipse at center,
      rgba(234, 182, 45, 0.2) 0 1px,
      transparent 1px 10px
    );
}

.premium-reviews .container {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}

.premium-reviews .section-label {
  position: relative;
  width: fit-content;
  margin: 0 auto 14px;
  color: #ddb039;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.premium-reviews .section-label::before,
.premium-reviews .section-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #d9a72b
  );
}

.premium-reviews .section-label::before {
  right: calc(100% + 14px);
}

.premium-reviews .section-label::after {
  left: calc(100% + 14px);
  transform: rotate(180deg);
}

.premium-reviews h2 {
  max-width: 720px;
  margin: 0 auto;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 9vw, 54px);
  line-height: 1.08;
  text-align: center;
}

.premium-reviews .reviews-subtitle {
  max-width: 620px;
  margin: 18px auto 38px;
  color: #d7ad39;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 699px) {
  .premium-reviews {
    padding: 58px 16px 48px;
  }

  .premium-reviews .section-label {
    font-size: 12px;
    letter-spacing: 0.17em;
  }

  .premium-reviews .section-label::before,
  .premium-reviews .section-label::after {
    width: 28px;
  }

  .premium-reviews h2 {
    font-size: 36px;
  }

  .premium-reviews .reviews-subtitle {
    margin-bottom: 30px;
    font-size: 15px;
  }
}
/* =========================================
   AVIS GOOGLE — DESIGN 5
   PARTIE 2 : WIDGET ELFSIGHT
========================================= */

/* Main Elfsight area */
.premium-reviews [class*="elfsight-app"] {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

/* Try to force the widget background to blend with the section */
.premium-reviews [class*="eapps-google-reviews"] {
  background: transparent !important;
  color: #ffffff !important;
}

/* General widget containers */
.premium-reviews [class*="eapps-google-reviews"] > div,
.premium-reviews [class*="WidgetBackground"] {
  background: transparent !important;
}

/* Rating summary card */
.premium-reviews [class*="HeaderContainer"],
.premium-reviews [class*="Header__Container"],
.premium-reviews [class*="eapps-google-reviews-header"] {
  padding: 24px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(219, 170, 42, 0.75) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(
      145deg,
      rgba(24, 24, 24, 0.98),
      rgba(8, 8, 8, 0.98)
    ) !important;
  box-shadow:
    0 0 22px rgba(224, 171, 35, 0.12),
    inset 0 1px 0 rgba(255, 226, 135, 0.08) !important;
}

/* Review cards */
.premium-reviews [class*="ReviewItem"],
.premium-reviews [class*="ReviewCard"],
.premium-reviews [class*="eapps-google-reviews-review-item"] {
  border: 1px solid rgba(219, 170, 42, 0.65) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(
      145deg,
      rgba(22, 22, 22, 0.98),
      rgba(7, 7, 7, 0.98)
    ) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 226, 135, 0.06) !important;
}

/* Main text */
.premium-reviews [class*="ReviewItem"] *,
.premium-reviews [class*="ReviewCard"] *,
.premium-reviews [class*="eapps-google-reviews"] * {
  font-family: inherit !important;
}

/* Reviewer name */
.premium-reviews [class*="AuthorName"],
.premium-reviews [class*="ReviewAuthorName"],
.premium-reviews [class*="ReviewerName"] {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Review text */
.premium-reviews [class*="ReviewText"],
.premium-reviews [class*="ReviewContent"],
.premium-reviews [class*="ReviewItemText"] {
  color: #eeeeee !important;
  line-height: 1.65 !important;
}

/* Dates and secondary text */
.premium-reviews [class*="ReviewDate"],
.premium-reviews [class*="Caption"],
.premium-reviews [class*="Subtitle"] {
  color: #aaa !important;
}

/* Stars */
.premium-reviews [class*="Star"],
.premium-reviews svg[fill="#fbbc04"],
.premium-reviews svg[fill="#f9b805"] {
  color: #f2bd2e !important;
  fill: #f2bd2e !important;
}

/* Google review button */
.premium-reviews a[href*="google"],
.premium-reviews [class*="Button"] {
  border-radius: 10px !important;
}

.premium-reviews a[href*="google"] {
  color: #111 !important;
  font-weight: 700 !important;
  background:
    linear-gradient(
      135deg,
      #b9850f,
      #f3c94e,
      #b9850f
    ) !important;
  box-shadow:
    0 8px 22px rgba(212, 163, 36, 0.25) !important;
}

/* Navigation arrows */
.premium-reviews [class*="Arrow"],
.premium-reviews [class*="Navigation"] button {
  color: #e8b630 !important;
  border: 1px solid rgba(220, 169, 37, 0.75) !important;
  background: #111 !important;
}

/* Pagination dots */
.premium-reviews [class*="Pagination"] span,
.premium-reviews [class*="Dots"] span {
  background: rgba(255, 255, 255, 0.28) !important;
}

.premium-reviews [class*="Pagination"] span[class*="active"],
.premium-reviews [class*="Dots"] span[class*="active"] {
  background: #e8b630 !important;
}

/* Widget branding line */
.premium-reviews [class*="powered"],
.premium-reviews [class*="Powered"] {
  color: #c9a84b !important;
}

/* Mobile layout */
@media (max-width: 699px) {
  .premium-reviews [class*="HeaderContainer"],
  .premium-reviews [class*="Header__Container"],
  .premium-reviews [class*="eapps-google-reviews-header"] {
    padding: 20px 16px !important;
    border-radius: 15px !important;
  }

  .premium-reviews [class*="ReviewItem"],
  .premium-reviews [class*="ReviewCard"],
  .premium-reviews [class*="eapps-google-reviews-review-item"] {
    border-radius: 15px !important;
  }
}

/*=========================================
   LUXURY GOOGLE REVIEWS
=========================================*/

.luxury-reviews-summary{
    max-width:1100px;
    margin:0 auto 40px;
}

.luxury-reviews-main{

    background:
    linear-gradient(145deg,#141414,#090909);

    border:1px solid rgba(230,183,55,.35);





    box-shadow:
    0 0 45px rgba(212,165,36,.12),
    inset 0 1px 0 rgba(255,255,255,.04);

    display:flex;
    flex-direction:column;


    position:relative;

    overflow:hidden;
}

.luxury-reviews-main::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at right,
    rgba(212,165,36,.12),
    transparent 45%);

    pointer-events:none;

}

.luxury-reviews-google{

    text-align:center;

    position:relative;

    z-index:2;

}

.luxury-reviews-google-title{

    color:#fff;



    font-weight:800;

    margin-bottom:18px;

}

.luxury-google-g{

    color:#4285F4;

}

.luxury-reviews-score{

    display:flex;

    justify-content:center;

    align-items:center;





}

.luxury-reviews-score strong{

    color:#fff;



    font-weight:800;

}

.luxury-reviews-stars{

    display:flex;

    gap:6px;

    color:#f6c443;



}

.luxury-reviews-score span{

    color:#bdbdbd;



}

.luxury-reviews-google-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;



    border-radius:50px;

    text-decoration:none;

    color:#111;

    font-weight:700;

    background:linear-gradient(135deg,#b8860b,#f7cf55,#c7961a);

    box-shadow:0 10px 30px rgba(212,165,36,.35);

    transition:.35s;
}

.luxury-reviews-google-button:hover{

    transform:translateY(-4px);

}

/* =========================================
   AVIS GOOGLE — DESIGN 5 POLISH
========================================= */

.luxury-reviews-main {
  padding: 24px 18px;
  gap: 22px;
}

.luxury-reviews-google-title {

  line-height: 1.2;
}

.luxury-reviews-score {
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}



.luxury-reviews-stars {
  font-size: 22px;
}

.luxury-reviews-score span {
  font-size: 16px;
}

.luxury-reviews-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
}

.luxury-reviews-stats > div {
  display: flex;
  min-height: 90px;
  padding: 14px 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(215, 166, 39, 0.35);
  border-radius: 14px;
  background: rgba(8, 8, 8, 0.65);
  text-align: center;
}

.luxury-reviews-stats strong {
  color: #efc44f;
  font-size: 25px;
}

.luxury-reviews-stats span {
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  color: #dddddd;
  font-size: clamp(10px, 3vw, 13px);
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.luxury-reviews-slider {
  position: relative;
  display: flex;
  max-width: 900px;
  margin: 0 auto;

  align-items: center;
  justify-content: center;
}

.luxury-review-card {
  width: 100%;
  max-width: 620px;


  color: #ffffff;
  text-align: left;

  border: 1px solid rgba(218, 168, 39, 0.7);


  background:
    linear-gradient(
      145deg,
      rgba(22, 22, 22, 0.98),
      rgba(8, 8, 8, 0.98)
    );

  box-shadow:
    0 0 30px rgba(214, 167, 38, 0.12),
    0 25px 60px rgba(0, 0, 0, 0.45);

  box-sizing: border-box;
}

.luxury-review-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.luxury-review-profile > div:last-child {
  min-width: 0;
}
.luxury-review-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  border: 1px solid #d8a625;
  border-radius: 50%;
  background: #0b5b50;
}

.luxury-review-profile h3 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  white-space: nowrap;
}

.luxury-review-profile h3 i {
  color: #3d9cff;
  font-size: 15px;
}

.luxury-review-profile p {
  margin: 4px 0 0;
  color: #aaaaaa;
  font-size: 14px;
}

.luxury-review-stars {
  display: flex;
  gap: 5px;
  margin: 20px 0 16px;
  color: #f2bd2d;
  font-size: 20px;
}

.luxury-review-card blockquote {
  margin: 0;
  color: #eeeeee;

  line-height: 1.7;
}

.luxury-review-arrow{



border:2px solid #d7a625;
background:#111;
box-shadow:0 0 25px rgba(214,167,38,.25);
transition:.3s;
}

.luxury-review-arrow:hover{
background:#d7a625;
color:#000;
transform:translateY(-50%) scale(1.08);
}

.luxury-review-arrow--left {
  left: -2px;
}

.luxury-review-arrow--right {
  right: -2px;
}

.luxury-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.luxury-review-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.luxury-review-dots span.active {
  background: #e6b22c;
  box-shadow: 0 0 10px rgba(230, 178, 44, 0.55);
}

@media (max-width: 699px) {
 .luxury-review-card {
    max-width: none;
    padding: 24px 18px;
    margin-bottom: 26px;
  }
}

  .luxury-reviews-main {
    border-radius: 18px;
  }

  .luxury-reviews-google-title {
    font-size: 24px;
  }

  .luxury-reviews-score strong {
    font-size: 38px;
  }

  .luxury-reviews-google-button {
    width: 100%;
    padding: 14px 18px;
  }

  .luxury-reviews-slider {
    padding: 0 31px;
  }

  .luxury-review-card {
    padding: 24px 18px;
    border-radius: 17px;
  }

  .luxury-review-card blockquote {
    font-size: 15px;
  }

  .luxury-review-arrow {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}
@media (max-width: 699px) {
  .luxury-reviews-slider {
    width: 100%;
    max-width: 100%;
    padding: 0 18px;
  }

  .luxury-review-card {
    width: 100%;
    max-width: none;
    padding: 26px 22px;
    border-radius: 18px;
  }

  .luxury-review-profile {
    gap: 12px;
  }

  .luxury-review-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
  }

  .luxury-review-profile h3 {
    font-size: 20px;
    white-space: normal;
  }

  .luxury-review-profile p {
    font-size: 14px;
  }

  .luxury-review-stars {
    margin: 18px 0 14px;
    font-size: 19px;
  }

  .luxury-review-card blockquote {
    font-size: 16px;
    line-height: 1.65;
  }

  .luxury-review-arrow {
    width: 38px;
    height: 38px;
    font-size: 14px;
    border-radius: 50%;
  }

  .luxury-review-arrow--left {
    left: 0;
  }

  .luxury-review-arrow--right {
    right: 0;
  }
}

@media (max-width: 699px) {
  .luxury-review-arrow {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    color: #e8b62d !important;
    background: #101010 !important;

    border: 1px solid #d7a425 !important;
    border-radius: 50% !important;

    box-shadow:
      0 0 18px rgba(219, 169, 38, 0.22) !important;

    transform: translateY(-50%) !important;
  }

  .luxury-review-arrow--left {
    left: -3px !important;
  }

  .luxury-review-arrow--right {
    right: -3px !important;
  }
}

/* =========================================
   LUXURY FOOTER — MOBILE FIRST
========================================= */

.luxury-footer {
  position: relative;
  overflow: hidden;
  padding: 48px 20px 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(211, 161, 34, 0.1),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #090909 0%,
      #0d0d0d 55%,
      #070707 100%
    );
  border-top: 1px solid rgba(213, 164, 37, 0.45);
}

.luxury-footer::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40px;
  height: 90px;
  border-top: 2px solid rgba(230, 180, 45, 0.72);
  border-radius: 50%;
  box-shadow: 0 -8px 24px rgba(226, 175, 40, 0.18);
  pointer-events: none;
}

.luxury-footer h3 {
  margin: 0;
  color: #e2b336;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.luxury-footer h3 i {
  margin-right: 10px;
}

.luxury-footer__contact {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(213, 164, 37, 0.5);
}

.luxury-footer__contact h3::after {
  content: "";
  display: block;
  width: 115px;
  height: 1px;
  margin-top: 13px;
  background: #d4a32a;
}

.luxury-footer__contact-list {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.luxury-footer__contact-list a,
.luxury-footer__contact-list > div {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #eeeeee;
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
}

.luxury-footer__contact-list i {
  width: 24px;
  flex: 0 0 24px;
  color: #e4ae27;
  font-size: 21px;
  text-align: center;
}

.luxury-footer__qualities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  border: 1px solid rgba(213, 164, 37, 0.55);
  border-radius: 16px;
  overflow: hidden;
}

.luxury-footer__qualities > div {
  display: flex;
  min-height: 150px;
  padding: 22px 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(21, 21, 21, 0.98),
      rgba(8, 8, 8, 0.98)
    );
}

.luxury-footer__qualities > div:nth-child(odd) {
  border-right: 1px solid rgba(213, 164, 37, 0.45);
}

.luxury-footer__qualities > div:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(213, 164, 37, 0.45);
}

.luxury-footer__qualities i {
  color: #e9b42f;
  font-size: 40px;
}

.luxury-footer__qualities span {
  color: #f2f2f2;
  font-size: 15px;
  line-height: 1.45;
  text-transform: uppercase;
}

.luxury-footer__payments {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(213, 164, 37, 0.5);
}

.luxury-footer__payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.payment-badge {
  display: grid;


  place-items: center;



  font-weight: 800;
  text-align: center;
}

.payment-badge--visa {
  color: #1a1f71;
  font-size: 23px;
  font-style: italic;
}

.payment-badge--mastercard {
  color: #222222;
  font-size: 15px;
}

.payment-badge--amex {
  color: #ffffff;
  background: #1677c8;
  font-size: 13px;
  line-height: 1.1;
}

.payment-badge--paypal {
  color: #1576bd;
  font-size: 21px;
  font-style: italic;
}

.luxury-footer__bank {
  display: flex;
  width: fit-content;
  margin: 18px auto 0;
  padding: 13px 18px;
  align-items: center;
  gap: 12px;
  color: #eeeeee;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(14, 14, 14, 0.9);
  text-transform: uppercase;
}

.luxury-footer__bank i {
  color: #e0ad2b;
  font-size: 24px;
}

.luxury-footer__bottom {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  padding-top: 28px;
  padding-bottom: 32px;
  border-top: 1px solid rgba(213, 164, 37, 0.5);
  text-align: center;
}

.luxury-footer__bottom p {
  margin: 0;
  color: #e6b432;
  font-size: 16px;
}

.luxury-footer__bottom > span {
  display: block;
  margin-top: 9px;
  color: #d8d8d8;
  font-size: 14px;
}

.luxury-footer__legal {
  display: flex;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.luxury-footer__legal a,
.luxury-footer__legal span {
  color: #dddddd;
  font-size: 13px;
  text-decoration: none;
}

@media (min-width: 760px) {
  .luxury-footer {
    padding: 60px 36px 32px;
  }

  .luxury-footer__payment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .luxury-footer {
    padding: 40px 20px 18px;
  }

  .luxury-footer__contact-list {
    gap: 16px;
    margin-top: 24px;
  }

  .luxury-footer__qualities > div {
    min-height: 130px;
    padding: 18px 10px;
  }

  .luxury-footer__qualities i {
    font-size: 34px;
  }

  .luxury-footer__qualities span {
    font-size: 14px;
  }



  .payment-badge {
    min-height: 54px;

  }

  .payment-badge--visa,
  .payment-badge--paypal {
    font-size: 20px;
  }

  .payment-badge--mastercard {
    font-size: 14px;
  }

  .payment-badge--amex {
    font-size: 12px;
  }

  .luxury-footer__bottom {


    padding-bottom: 24px;
  }
}

@media (max-width: 699px) {
  .luxury-footer__legal {
    flex-direction: column;
    align-items: center;

  }

  .luxury-footer__legal > span {
    display: none;
  }
}

/* FIX OFFICIAL PAYMENT LOGOS */



.payment-badge img {
  display: block;





}

/* Slight visual balancing per logo */






@media (max-width: 699px) {







}
/* PAYMENT LOGOS — NO WHITE CARDS */

.payment-badge {
  min-height: auto !important;
  padding: 6px !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

.payment-badge img {
  width: auto !important;
  max-width: 110px !important;
  height: 38px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* Balance the different logo shapes */
.payment-badge--visa img {
  max-width: 90px !important;
}

.payment-badge--mastercard img {
  max-width: 82px !important;
}

.payment-badge--amex img {
  max-width: 88px !important;
}

.payment-badge--paypal img {
  max-width: 98px !important;
}
/* PAYMENT LOGOS — ONE ROW ON MOBILE */

@media (max-width: 699px) {
  .luxury-footer__payment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    margin-top: 18px;
  }

  .payment-badge {
    min-width: 0;
    padding: 0 !important;
  }

  .payment-badge img {
    width: 100% !important;
    max-width: 58px !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  .payment-badge--mastercard img {
    max-width: 54px !important;
  }

  .payment-badge--amex img {
    max-width: 56px !important;
  }

  .payment-badge--paypal img {
    max-width: 60px !important;
  }

  .luxury-footer__bank {
    margin-top: 14px;
  }

  .luxury-footer__bottom {
    margin-top: 18px;
    padding-top: 18px;
  }

  .luxury-footer__legal {
    gap: 6px;
    margin-top: 14px;
  }
}

@media (max-width: 699px){

}

/* =========================================
   FINAL CLEAN MOBILE HEADER
========================================= */

@media (max-width: 768px) {

  #mainHeader.premium-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;

    width: 100% !important;
    height: auto !important;
min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;

    background: #f7f2e9 !important;
    box-shadow: none !important;
  }

  #mainHeader .header-inner {


    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    display: grid !important;

    grid-template-columns:
      54px
      minmax(0, 1fr)
      92px
      32px !important;

    grid-template-rows: auto auto !important;

    grid-template-areas:
      "logo title button menu"
      "logo subtitle button menu" !important;

    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 3px !important;

    background: #fffaf2 !important;
    border: 1px solid rgba(201, 154, 46, 0.20) !important;
    border-radius: 18px !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14) !important;
    overflow: visible !important;
  }

  /* Let the children enter the main grid */
  #mainHeader .premium-brand,
  #mainHeader .premium-brand-text,
  #mainHeader .header-actions {
    display: contents !important;
  }

  /* Logo */
  #mainHeader .premium-brand-mark {
    grid-area: logo !important;

    position: relative !important;

    width: 42px !important;
    height: 48px !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #c99a2e !important;
    background: transparent !important;

    border: 2px solid #c99a2e !important;
    border-radius: 9px 9px 19px 19px !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #mainHeader .premium-brand-mark::before {
    content: "♛" !important;

    position: absolute !important;
    top: -18px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    color: #c99a2e !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  #mainHeader .premium-brand-mark::after {
    content: "" !important;

    position: absolute !important;
    bottom: -7px !important;
    left: 50% !important;

    width: 13px !important;
    height: 13px !important;

    background: #fffaf2 !important;

    border-right: 2px solid #c99a2e !important;
    border-bottom: 2px solid #c99a2e !important;

    transform: translateX(-50%) rotate(45deg) !important;
  }

  /* Company name */
 #mainHeader .premium-brand-text span {



    align-self: start !important;


















}

  /* Subtitle */
  #mainHeader .premium-brand-text span {
    grid-area: subtitle !important;




    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    color: #b88923 !important;

    font-family: Georgia, "Times New Roman", serif !important;

    font-weight: 700 !important;



    text-transform: uppercase !important;

  }

  #mainHeader .premium-brand-text span::before,
  #mainHeader .premium-brand-text span::after {
    content: "" !important;

    width: 8px !important;
    height: 1px !important;

    background: #c99a2e !important;
  }

  /* Booking button */
  #mainHeader .header-booking-btn {
    grid-area: button !important;




    min-height: 46px !important;

    margin: 0 !important;


    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    color: #fff !important;
    text-decoration: none !important;

    background: linear-gradient(135deg, #b98612, #edc54f) !important;
    border-radius: 8px !important;


    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow: 0 6px 15px rgba(185, 134, 18, 0.23) !important;
  }

  #mainHeader .header-booking-btn i {
    font-size: 11px !important;
  }

  /* Hamburger */
  #mainHeader .menu-btn {
    grid-area: menu !important;




    min-width: 32px !important;









    color: #111 !important;


    box-shadow: none !important;

    font-size: 27px !important;
    cursor: pointer !important;
  }

  /* Dropdown menu */
  #mainHeader nav {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;

    width: 265px !important;
    max-width: calc(100vw - 20px) !important;

    z-index: 100000 !important;
  }

  /* Remove empty space before hero */
  main,
  .hero-premium {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 768px) {

  /* Keep the company name on two lines */
  #mainHeader .premium-brand-text strong {
    grid-column: 2 !important;
    grid-row: 1 !important;



    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Place subtitle beneath the title without entering the logo */
  #mainHeader .premium-brand-text span {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;

    justify-self: start !important;






    overflow: visible !important;
  }

  #mainHeader .premium-brand-text span::before,
  #mainHeader .premium-brand-text span::after {
    display: none !important;
  }

  /* Give the title slightly more room */
  #mainHeader .header-booking-btn {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    padding: 0 5px !important;
    font-size: 8px !important;
  }
}
@media (max-width:768px){

  #mainHeader .header-inner{
    grid-template-columns:90px 1fr 70px !important;
    column-gap:10px !important;
  }

  #mainHeader .header-booking-btn{
    display:none !important;
  }

  #mainHeader .premium-brand-text strong{
    font-size:11px !important;
    line-height:1.05 !important;
  }

  #mainHeader .premium-brand-text span{
    font-size:8px !important;
    margin-top:4px !important;
    text-align:left !important;
    white-space:nowrap !important;
  }
}
@media (max-width: 768px){

  #mainHeader .premium-brand-text strong{
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

}
@media (max-width: 768px){

  #mainHeader .menu-btn{
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;

    width: 54px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #fffaf2 !important;
    border: 2px solid #c99a2e !important;
    border-radius: 12px !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 10 !important;
  }

  #mainHeader .menu-btn i{
    font-size: 26px !important;
    color: #111111 !important;
  }

}

@media (max-width: 768px){

  #mainHeader .header-inner{
    position: relative !important;
  }

  #mainHeader .premium-brand-text span{
    position: absolute !important;

    left: 20% !important;
    top: 66% !important;
    transform: translate(-50%, -50%) !important;

    width: calc(100% - 150px) !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
    white-space: nowrap !important;

    font-size: 10px !important;
    line-height: 1 !important;

    z-index: 2 !important;
    pointer-events: none !important;
  }

}

/* Shared animated business-card flip used by desktop and tablet portrait. */
@keyframes tfBusinessCardAutomaticFlip {

  0%,
  35% {
    transform: rotateY(0deg);
  }

  45%,
  85% {
    transform: rotateY(180deg);
  }

  95%,
  100% {
    transform: rotateY(360deg);
  }
}

/* =========================================
   TABLET PORTRAIT HEADER — CANONICAL
   Dedicated 769–1023px portrait layout.
   Mobile portrait/landscape and desktop are not affected.
========================================= */
@media screen and (orientation: portrait) and (min-width: 769px) and (max-width: 1023px) {
  #mainHeader.premium-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    background: #f7f2e9;
    box-shadow: none;
  }

  #mainHeader .header-inner {
    position: relative;
    width: calc(100% - 28px);
    max-width: none;
    min-height: 92px;
    margin: 0 auto;
    padding: 12px 124px 12px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fffaf2;
    border: 1px solid rgba(201, 154, 46, 0.22);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    overflow: visible;
  }

  #mainHeader .premium-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    color: #111111;
    text-decoration: none;
  }

  #mainHeader .premium-brand-mark {
    position: relative;
    width: 50px;
    height: 60px;
    flex: 0 0 50px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c99a2e;
    background: #ffffff;
    border: 2px solid #c99a2e;
    border-radius: 14px;
    clip-path: none;
    box-shadow: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }

  #mainHeader .premium-brand-mark::before {
    content: "\f521";
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    color: #c99a2e;
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    z-index: 2;
  }

  #mainHeader .premium-brand-mark::after {
    display: none;
    content: none;
  }

  #mainHeader .premium-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.05;
    text-align: left;
  }

  #mainHeader .premium-brand-text strong {
    margin: 0;
    color: #111111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.02;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #mainHeader .premium-brand-text span {
    position: static;
    display: block;
    width: auto;
    margin: 5px 0 0;
    padding: 0;
    transform: none;
    color: #b88923;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #mainHeader .premium-brand-text span::before,
  #mainHeader .premium-brand-text span::after {
    display: none;
    content: none;
  }

  /* The old blue Réserver shortcut is not part of the tablet header. */
  #mainHeader .header-actions {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    z-index: 5;
  }

  #mainHeader .header-booking-btn {
    display: none;
  }

  /* All five languages sit immediately before the hamburger. */
  #mainHeader .desktop-language-switcher {
    position: absolute;
    top: 50%;
    right: 72px;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 4;
  }

  #mainHeader .desktop-language-switcher .language-option {
    appearance: none;
    width: 29px;
    min-width: 29px;
    height: 29px;
    min-height: 29px;
    margin: 0;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fffaf2;
    border: 1px solid rgba(201, 154, 46, 0.34);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
  }

  #mainHeader .desktop-language-switcher .language-option span {
    display: none;
  }

  #mainHeader .desktop-language-switcher .language-option img {
    display: block;
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 1px;
  }

  #mainHeader .desktop-language-switcher .language-option.is-active {
    background: rgba(212, 166, 42, 0.16);
    border-color: #c99a2e;
  }

  #mainHeader .menu-btn {
    position: static;
    width: 48px;
    min-width: 48px;
    height: 46px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    background: #fffaf2;
    border: 2px solid #c99a2e;
    border-radius: 12px;
    box-shadow: none;
    font-size: 24px;
    cursor: pointer;
  }

  /* Compact tablet dropdown. */
  #mainHeader nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px;
    left: auto;
    display: block;
    width: 280px;
    max-width: calc(100vw - 40px);
    height: auto;
    margin: 0;
    padding: 7px;
    background: #ffffff;
    border: 1px solid rgba(201, 154, 46, 0.30);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(0.985);
    transform-origin: top right;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 100000;
  }

  #mainHeader nav.open,
  #mainHeader nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #mainHeader nav ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 1px;
    list-style: none;
  }

  #mainHeader nav li {
    display: block;
    width: 100%;
  }

  #mainHeader nav a {
    display: block;
    width: 100%;
    padding: 8px 11px;
    color: #111111;
    background: transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #mainHeader nav a::after {
    display: none;
  }

  #mainHeader nav a:hover,
  #mainHeader nav a:active,
  #mainHeader nav a.active {
    color: #a97700;
    background: rgba(201, 154, 46, 0.12);
  }

  /* Languages are outside the menu on tablet portrait. */
  #mainHeader nav .mobile-language-switcher {
    display: none;
  }

  /* Keep the tablet portrait crown artwork consistent and gold. */
  .why-premium-crown,
  .why-premium-crown i {
    color: #d6a62c;
  }

  .tarifs-crown,
  .destinations-crown {
    color: #d6a62c;
    font-size: 0;
  }

  .tarifs-crown::before,
  .destinations-crown::before,
  .vehicle-experience-heading::before,
  .luxury-contact__crest::before {
    content: "\f521";
    color: #d6a62c;
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .vehicle-experience-heading::before {
    display: block;
    margin-bottom: 8px;
  }

  .luxury-contact__crest::before {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
  }


  /* Keep the gold back-to-top control directly above the gold call
     button on tablet portrait. */
  #backToTop.back-to-top {
    right: 18px;
    bottom: 164px;
    z-index: 1600;
  }

  /* Tablet portrait Why Choose Us — approved balanced design. */
  section#services.why-premium {
    padding: 20px 14px 30px;
    overflow: visible;
  }

  section#services .why-premium-inner {
    position: relative;
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    align-items: start;
    column-gap: 18px;
    width: 100%;
    max-width: 920px;
    min-height: 720px;
    margin: 0 auto;
    padding: 26px 20px 175px;
    overflow: hidden;
  }

  section#services .why-premium-inner::before {
    content: "";
    position: absolute;
    top: 105px;
    left: -210px;
    width: 440px;
    height: 440px;
    border: 0;
    border-right: 4px solid rgba(235, 188, 63, 0.98);
    border-radius: 50%;
    transform: none;
    opacity: 1;
    box-shadow:
      5px 0 9px rgba(255, 210, 76, 0.80),
      12px 0 28px rgba(225, 172, 45, 0.38);
    pointer-events: none;
  }

  section#services .why-premium-intro {
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 185px 0 0 10px;
    text-align: left;
  }

  section#services .why-premium-crown {
    margin: 0 0 13px;
    text-align: left;
  }

  section#services .why-premium-intro > p {
    margin: 0 0 5px;
    font-size: 23px;
    line-height: 1.05;
    text-align: left;
  }

  section#services .why-premium-intro h2 {
    width: 145px;
    max-width: 145px;
    margin: 0;
    font-size: 29px;
    line-height: 1.06;
    text-align: left;
    white-space: normal;
  }

  section#services .why-premium-line {
    width: 56px;
    margin: 20px 0 18px;
  }

  section#services .why-premium-intro > span {
    width: 135px;
    max-width: 135px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
  }

  section#services .why-premium-diamond {
    margin: 24px 0 0;
    text-align: left;
  }

  section#services .why-premium-list {
    position: relative;
    z-index: 4;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 11px;
  }

  section#services .why-premium-card {
    width: 100%;
    min-height: 0;
  }

  section#services .why-premium-trigger {
    position: relative;
    width: 100%;
    min-height: 88px;
    padding: 13px 38px 13px 78px;
    display: flex;
    align-items: center;
    text-align: left;
  }

  section#services .why-premium-trigger .why-premium-icon {
    left: 12px;
    top: 50%;
    width: 52px;
    height: 52px;
    min-width: 52px;
    transform: translateY(-50%);
    font-size: 19px;
  }

  section#services .why-premium-text strong {
    font-size: 15px;
    line-height: 1.2;
  }

  section#services .why-premium-text small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
  }

  section#services .why-premium-arrow {
    right: 12px;
  }

  section#services .why-premium-skyline {
    bottom: 68px;
    height: 92px;
  }

  section#services .why-premium-footer {
    left: 18px;
    right: 18px;
    bottom: 14px;
    min-height: 50px;
    padding: 10px 12px;
    font-size: 14px;
  }


  /* ==================================================
     TABLET PORTRAIT — VTC EXPERIENCE
     Compact service messages + animated business card.
  ================================================== */

  #vehicule .vehicle-experience-inner {
    overflow: hidden;
  }

  #vehicule .vehicle-desktop-layout {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.78fr);
    align-items: center;
    gap: 18px;
    padding: 26px 24px 112px;
  }

  #vehicule .vehicle-service-column {
    min-width: 0;
  }

  #vehicule .vehicle-service-column .vehicle-experience-heading {
    padding: 0 8px 22px;
    text-align: center;
  }

  #vehicule .vehicle-service-column .vehicle-experience-heading p {
    font-size: 25px;
  }

  #vehicule .vehicle-service-column .vehicle-experience-heading h2 {
    font-size: 31px;
  }

  #vehicule .vehicle-service-column .vehicle-experience-line {
    margin-top: 14px;
  }

  #vehicule .vehicle-service-column .vehicle-info-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #vehicule .vehicle-service-column .vehicle-info-item {
    min-height: 0 !important;
    padding: 5px 0 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #vehicule .vehicle-service-column .vehicle-info-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  }

  #vehicule .vehicle-service-column .vehicle-info-item strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  #vehicule .vehicle-service-column .vehicle-info-item span {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #vehicule .vehicle-business-card-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 6px 0 0;
  }

  #vehicule .business-card-label {
    margin-bottom: 11px;
    color: #d9a72d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-align: center;
    text-transform: uppercase;
  }

  #vehicule .tf-business-card-scene {
    width: 100%;
    max-width: 292px;
    aspect-ratio: 1.55 / 1;
    perspective: 1200px;
    pointer-events: none;
  }

  #vehicule .tf-business-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: tfBusinessCardAutomaticFlip 10s ease-in-out infinite;
  }

  #vehicule .tf-business-card-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(230, 179, 37, 0.75);
    border-radius: 18px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: radial-gradient(circle at 75% 30%, rgba(213, 160, 34, 0.14), transparent 38%), linear-gradient(145deg, #171717, #080808);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  #vehicule .tf-business-card-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #vehicule .business-card-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #vehicule .business-card-logo .premium-brand-mark {
    position: relative !important;
    width: 24px !important;
    height: 28px !important;
    min-width: 24px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #c9972f !important;
    background: #fffaf0 !important;
    border: 1.5px solid #d4a33a !important;
    border-radius: 7px !important;
    clip-path: none !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  #vehicule .business-card-logo .premium-brand-mark::before {
    content: "\f521" !important;
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #d4a12f !important;
    background: transparent !important;
    font-family: "Font Awesome 6 Free" !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #vehicule .business-card-logo .premium-brand-mark::after {
    display: none !important;
    content: none !important;
  }

  #vehicule .tf-business-card-front h3 {
    margin: 10px 0 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    text-transform: uppercase;
  }

  #vehicule .tf-business-card-front h4 {
    margin: 3px 0 0;
    color: #d9a72d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  #vehicule .tf-business-card-front p {
    margin: 9px 0 0;
    color: #e7ddd0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    font-style: italic;
  }

  #vehicule .business-card-values {
    margin-top: 10px;
    color: #ddb145;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 8px;
  }

  #vehicule .tf-business-card-back {
    display: flex;
    flex-direction: column;
    transform: rotateY(180deg);
    text-align: left;
  }

  #vehicule .tf-business-card-back h3 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
  }

  #vehicule .tf-business-card-back > p:first-of-type {
    margin: 2px 0 7px;
    color: #d7a62d;
    font-size: 9px;
  }

  #vehicule .business-card-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 0;
    color: #eee6dc;
    border-bottom: 1px solid rgba(214, 166, 44, 0.20);
    font-size: 8.5px;
    overflow-wrap: anywhere;
  }

  #vehicule .business-card-contact-row i {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    color: #dfa92d;
    border: 1px solid rgba(223, 169, 45, 0.55);
    border-radius: 50%;
    font-size: 9px;
  }

  #vehicule .tf-business-card-back small {
    margin-top: auto;
    padding-top: 5px;
    color: #d9a72d;
    border-top: 1px solid rgba(214, 166, 44, 0.20);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 7.5px;
    line-height: 1.15;
    text-align: center;
  }

  #vehicule .vehicle-city-skyline {
    bottom: 66px;
    height: 82px;
    opacity: 0.40;
  }

  /* ==================================================
     TABLET PORTRAIT — RATES HEADING SIDE BADGES
  ================================================== */

  #tarifs .tarifs-heading {
    position: relative;
    max-width: 100%;
    min-height: 108px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 168px;
  }

  #tarifs .tarifs-heading-badge {
    position: absolute !important;
    top: 22px !important;
    display: flex !important;
    min-width: 0 !important;
    width: 150px !important;
    min-height: 44px !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.94), rgba(8, 8, 8, 0.90)) !important;
    border: 1px solid rgba(217, 165, 46, 0.72) !important;
    border-radius: 24px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
    z-index: 4 !important;
  }

  #tarifs .tarifs-badge-left { left: 0 !important; }
  #tarifs .tarifs-badge-right { right: 0 !important; }

  #tarifs .tarifs-heading-badge i {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 28px !important;
    color: #d9a52e !important;
    border: 1px solid rgba(217, 165, 46, 0.60) !important;
    border-radius: 50% !important;
    font-size: 11px !important;
  }

  #tarifs .tarifs-heading-badge > span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  #tarifs .tarifs-heading-badge strong {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #tarifs .tarifs-heading-badge small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 7px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #tarifs .tarifs-badge-left::after,
  #tarifs .tarifs-badge-right::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 45px !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(217, 165, 46, 0.90), rgba(217, 165, 46, 0.18)) !important;
  }

  #tarifs .tarifs-badge-left::after { right: -46px !important; }
  #tarifs .tarifs-badge-right::before { left: -46px !important; transform: rotate(180deg) !important; }

  /* ==================================================
     TABLET PORTRAIT — STATIONS/AIRPORTS HEADING BADGES
  ================================================== */

  #destinations .destinations-heading {
    position: relative !important;
    max-width: 100% !important;
    min-height: 112px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 165px !important;
    padding-right: 165px !important;
  }

  #destinations .destinations-heading .destinations-flight-label,
  #destinations .destinations-heading .destinationsStationPickupLabel {
    position: absolute !important;
    top: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 150px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px 10px !important;
    color: #f1d58b !important;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.94), rgba(7, 7, 7, 0.90)) !important;
    border: 1px solid rgba(217, 165, 46, 0.45) !important;
    border-radius: 24px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
    z-index: 4 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #destinations .destinations-heading .destinations-flight-label > span,
  #destinations .destinations-heading .destinationsStationPickupLabel > span {
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #destinations .destinations-heading .destinations-flight-label i,
  #destinations .destinations-heading .destinationsStationPickupLabel i {
    flex: 0 0 auto !important;
  }

  #destinations .destinations-heading .destinations-flight-label { left: 0 !important; }
  #destinations .destinations-heading .destinationsStationPickupLabel { right: 0 !important; }

  #destinations .destinations-heading .destinations-flight-label::after,
  #destinations .destinations-heading .destinationsStationPickupLabel::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 45px !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(217, 165, 46, 0.90), rgba(217, 165, 46, 0.18)) !important;
  }

  #destinations .destinations-heading .destinations-flight-label::after { right: -46px !important; }
  #destinations .destinations-heading .destinationsStationPickupLabel::before { left: -46px !important; transform: rotate(180deg) !important; }

  /* ==================================================
     TABLET PORTRAIT — COMPACT CONTACT FOOTER
  ================================================== */

  .luxury-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.9fr);
    column-gap: 34px;
    align-items: start;
    padding: 42px 36px 24px;
  }

  .luxury-footer__contact {
    grid-column: 1;
    padding-bottom: 14px;
    border-bottom: 0;
  }

  .luxury-footer__contact-list {
    gap: 15px;
    margin-top: 24px;
  }

  .luxury-footer__contact-list a,
  .luxury-footer__contact-list > div,
  .luxury-footer__contact-list .footer-contact-btn {
    font-size: 14px;
    line-height: 1.3;
  }

  .luxury-footer__qualities {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    align-self: start;
    margin: 52px 0 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .luxury-footer__qualities > div {
    min-height: 0;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    text-align: left;
    background: transparent;
    border: 0 !important;
  }

  .luxury-footer__qualities i {
    width: 30px;
    flex: 0 0 30px;
    color: #e9b42f;
    font-size: 25px;
    text-align: center;
  }

  .luxury-footer__qualities span {
    color: #f2f2f2;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
  }

  .luxury-footer__payments,
  .luxury-footer__bottom {
    grid-column: 1 / -1;
  }

  .luxury-footer__payments {
    margin-top: 12px;
    padding-top: 18px;
  }

  .luxury-footer__bottom {
    margin-top: 22px;
    padding-top: 20px;
  }

  /* ==================================================
     TABLET PORTRAIT — RESERVATION PHONE + PASSENGERS
     Phone and passenger count share one 50/50 row.
  ================================================== */

  body.reservation-page .reservation-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 14px;
  }

  body.reservation-page .reservation-form > * {
    grid-column: 1 / -1;
  }

  body.reservation-page .reservation-field-name {
    grid-row: 1;
  }

  body.reservation-page .reservation-field-phone {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  body.reservation-page .reservation-field-passengers {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  body.reservation-page .reservation-field-phone .iti {
    width: 100%;
  }

  body.reservation-page .reservation-field-passengers > i {
    left: 14px;
    font-size: 17px;
  }

  body.reservation-page .reservation-field-passengers select {
    min-height: 58px;
    padding-left: 43px;
    padding-right: 24px;
    font-size: 13px;
  }

  body.reservation-page .reservation-form > .reservation-field:not(.reservation-field-name):not(.reservation-field-phone):not(.reservation-field-passengers),
  body.reservation-page .reservation-date-time-grid,
  body.reservation-page .reservation-submit-button,
  body.reservation-page .reservation-form-note {
    grid-column: 1 / -1;
  }

  /* ==================================================
     TABLET PORTRAIT — INFORMATION FOOTER BRAND
     Uses the same approved TF mark and gold crown as the header.
  ================================================== */

  .information-page .information-footer__brand .premium-brand-mark {
    position: relative;
    width: 50px;
    height: 60px;
    flex: 0 0 50px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c99a2e;
    background: #ffffff;
    border: 2px solid #c99a2e;
    border-radius: 14px;
    clip-path: none;
    box-shadow: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }

  .information-page .information-footer__brand .premium-brand-mark::before {
    content: "\f521";
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    color: #c99a2e;
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    z-index: 2;
  }

  .information-page .information-footer__brand .premium-brand-mark::after {
    display: none;
    content: none;
  }

  /* Cross-page links such as reservation → Accueil must land with
     the tablet header still visible above the hero. */
  #accueil {
    scroll-margin-top: 112px;
  }
}
/* =========================================
   MOBILE LANDSCAPE HEADER
   Canonical layout for phone landscape only.
========================================= */
@media screen and (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .hero-premium {
    --hero-scroll-left: 56%;
    --hero-scroll-top: clamp(125px, 40vh, 160px);
    --hero-scroll-bottom: auto;
  }

  /* Reservation page: in phone landscape, show the down arrow directly
     between the hero title and the reservation requirement text. */
  .reservation-page .reservation-scroll-down--default {
    display: none;
  }

  .reservation-page .reservation-scroll-down--landscape {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin: -8px auto 8px;
  }

  /* Reservation phone field: use the same full row width as name/email
     in phone landscape. The intl-tel-input wrapper is inline-sized by
     default, which caused the large empty area on the right. */
  body.reservation-page .reservation-field-phone,
  body.reservation-page .reservation-field-phone .iti {
    width: 100% !important;
    max-width: none !important;
  }

  body.reservation-page .reservation-field-phone input {
    width: 100% !important;
  }

  #mainHeader.premium-header {
    min-height: 0 !important;
    padding: 7px 10px !important;

    /* In phone landscape the hamburger is fixed to the viewport.
       Do not let header filter/containment turn it into a header-relative
       fixed element that scrolls away with the header. */
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
  }

  #mainHeader .header-inner {
    position: relative !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 8px 88px !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  #mainHeader .premium-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  #mainHeader .premium-brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #mainHeader .premium-brand-mark {
    position: relative !important;
    width: 42px !important;
    height: 48px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
  }

  #mainHeader .premium-brand-text strong {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.04 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #mainHeader .premium-brand-text span {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  #mainHeader .premium-brand-text span::before,
  #mainHeader .premium-brand-text span::after {
    display: none !important;
    content: none !important;
  }

  #mainHeader .header-actions {
    display: block !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
  }

  #mainHeader .header-booking-btn {
    display: none !important;
  }

  #mainHeader .menu-btn {
    position: fixed !important;
    top: 18px !important;
    right: 14px !important;
    left: auto !important;
    transform: none !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100003 !important;
  }

  /* Keep the landscape dropdown attached to the viewport as well,
     so the fixed hamburger remains usable from anywhere on the page. */
  #mainHeader nav {
    position: fixed !important;
    top: 76px !important;
    right: 14px !important;
    left: auto !important;
    padding: 6px !important;
    max-height: calc(100dvh - 84px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 100002 !important;
  }

  /* Phone-landscape menu is deliberately compact so every destination,
     including Contact, remains comfortably tappable without scrolling. */
  #mainHeader nav ul {
    gap: 0 !important;
  }

  #mainHeader nav a {
    padding: 5px 10px !important;
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  #mainHeader nav .mobile-language-switcher {
    display: none !important;
  }

  #mainHeader .desktop-language-switcher {
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
  }

  #mainHeader .desktop-language-switcher .language-option {
    appearance: none !important;
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(201, 154, 46, 0.34) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  #mainHeader .desktop-language-switcher .language-option span {
    display: none !important;
  }

  #mainHeader .desktop-language-switcher .language-option img {
    display: block !important;
    width: 17px !important;
    height: 12px !important;
    object-fit: cover !important;
    border-radius: 1px !important;
  }

  #mainHeader .desktop-language-switcher .language-option.is-active {
    background: rgba(212, 166, 42, 0.16) !important;
    border-color: #c99a2e !important;
  }
}

/* =========================================
   INFORMATION PAGE — STEP 1
========================================= */

.information-page {
  margin: 0;
  min-height: 100vh;
  background: #f5eddf;
  color: #171717;
  font-family: "Poppins", sans-serif;
}

.information-main {
  min-height: 100vh;
  background: #f5eddf;
}

.information-start {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px 20px;
  text-align: center;
}

.information-start p {
  margin: 0;
  color: #b78025;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* =========================================
   INFORMATION PAGE — HERO
========================================= */

.information-hero {
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #f8f0e3 0%,
    #f3e7d3 100%
  );
}

.information-hero__content {
  padding: 52px 24px 30px;
  text-align: center;
}

.information-hero__eyebrow {
  margin: 0 0 10px;
  color: #bd8625;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.information-hero h1 {
  margin: 0;
  color: #151515;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.75rem;
  line-height: 1.05;
}

.information-hero__line-row {
  display: block;
}

.information-hero__line {
  position: relative;
  width: 64px;
  height: 2px;
  margin: 20px auto;
  background: #c58c27;
}

.information-scroll-down--landscape {
  display: none !important;
}

.information-hero__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dca43e;
  transform: translate(-50%, -50%);
}

.information-hero__description {
  max-width: 390px;
  margin: 0 auto;
  color: #292929;
  font-size: 0.93rem;
  line-height: 1.75;
}

.information-hero__visual {
  position: relative;
  overflow: hidden;
  background: #dfc9aa;
}

.information-hero__visual::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -28px;
  left: -8%;
  height: 65px;
  background: #f5eddf;
  transform: rotate(-4deg);
}

.information-hero__visual img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center 58%;
}

@media (min-width: 768px) {
  .information-hero__content {
    padding: 72px 30px 38px;
  }

  .information-hero__visual img {
    height: 500px;
  }
}

/*==========================================
DESTINATION CARDS
==========================================*/

.information-destinations{

padding:30px 18px 10px;

display:flex;

flex-direction:column;

gap:14px;

}

.information-card{

display:flex;

align-items:center;

gap:16px;

background:#111;

color:#fff;

padding:16px;

border-radius:18px;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,.12);

transition:.3s;

}

.information-card:active{

transform:scale(.98);

}

.information-card-icon{

width:48px;

height:48px;

border-radius:50%;

background:rgba(201,152,55,.12);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#d2a33c;

flex-shrink:0;

}

.information-card-content{

flex:1;

}

.information-card-content h3{

margin:0;

font-size:1.2rem;

font-weight:700;

color:#fff;

}

.information-card-content p{

margin:6px 0 0;

font-size:.88rem;

color:#d8d8d8;

}

.information-card-arrow{

font-size:18px;

color:#fff;

}
/* =========================================
   CUSTOM DESTINATION CARD
========================================= */

.information-custom-destination {
  padding: 18px 18px 34px;
  background: #f5eddf;
}

.information-custom-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    #e7ad3d 0%,
    #d39727 100%
  );
  box-shadow: 0 12px 28px rgba(90, 55, 8, 0.16);
}

.information-custom-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.information-custom-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #111111;
  color: #dca43e;
  font-size: 1.35rem;
}

.information-custom-card__content {
  flex: 1;
}

.information-custom-card__content h2 {
  margin: 0 0 10px;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.25;
}

.information-custom-card__content p {
  margin: 0;
  color: #171717;
  font-size: 0.88rem;
  line-height: 1.65;
}

.information-custom-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: 10px;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.information-custom-card__button i {
  margin-left: auto;
}

.information-custom-card__button:active {
  transform: scale(0.985);
}
/* =========================================
   INFORMATION ACCORDION CARDS
========================================= */

.information-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 36px;
  background: #f5eddf;
}

.information-item {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(176, 128, 42, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 6px 18px rgba(54, 38, 13, 0.05);
  overflow: hidden;
}

.information-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 74px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.information-item summary::-webkit-details-marker {
  display: none;
}

.information-item-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.information-item-left > span:last-child {
  color: #171717;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.information-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #111111;
  color: #dca43e;
  font-size: 1.05rem;
}

.information-item summary > i {
  flex-shrink: 0;
  color: #111111;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.information-item[open] summary > i {
  transform: rotate(180deg);
}

.information-item-content {
  padding: 0 18px 20px 73px;
  color: #333333;
  font-size: 0.86rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .information-links {
    padding: 0 30px 60px;
  }

  .information-item summary {
    min-height: 82px;
    padding: 16px 20px;
  }

  .information-item-left > span:last-child {
    font-size: 1rem;
  }
}
/* CONTACT LINKS */

.information-item-content p{
    margin:0 0 14px;
}

.information-item-content a{
    color:#1b1b1b;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.information-item-content a:hover{
    color:#c89a37;
}

.information-item-content i{
    width:22px;
    color:#c89a37;
    margin-right:8px;
}

/* =========================================
   DESTINATION ACCORDION — VILLES
========================================= */

.information-card--accordion {
  display: block;
  padding: 0;
  overflow: hidden;
}

.information-card--accordion summary {
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.information-card--accordion summary::-webkit-details-marker {
  display: none;
}

.information-card--accordion .information-card-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.information-card--accordion .information-card-content strong {
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.3;
}

.information-card--accordion .information-card-content small {
  color: #d8d8d8;
  font-size: 0.88rem;
  line-height: 1.5;
}

.information-card--accordion .information-card-arrow {
  transition: transform 0.3s ease;
}

.information-card--accordion[open] .information-card-arrow {
  transform: rotate(180deg);
}

.information-card-details {
  padding: 0 16px 20px;
  border-top: 1px solid rgba(220, 164, 55, 0.22);
}

.information-card-region {
  padding-top: 18px;
}

.information-card-region + .information-card-region {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.information-card-region h3 {
  margin: 0 0 12px;
  color: #dca43e;
  font-size: 0.95rem;
  line-height: 1.4;
}

.information-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.information-card-tags span {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid rgba(220, 164, 55, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.2;
}
/* =========================================
   INFORMATION FOOTER
========================================= */

.information-footer {
  margin-top: 12px;
  padding: 50px 22px 30px;
  background: #111111;
  color: #ffffff;
  text-align: center;
}

.information-footer__content {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

.information-footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border: 2px solid #d9a62e;
  border-radius: 18px;
  color: #d9a62e;
  font-size: 1.25rem;
  font-weight: 800;
}

.information-footer h2 {
  margin: 0;
  color: #d9a62e;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.information-footer__subtitle {
  margin: 8px 0 30px;
  color: #ffffff;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.information-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.information-footer__item {
  display: grid;
  grid-template-columns: 24px auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
}

.information-footer__item i {
  width: 24px;
  color: #d9a62e;
  text-align: center;
}

.information-footer__benefits {
  margin-top: 34px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.information-footer__benefits p {
  margin: 0;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.information-footer__benefits span {
  margin: 0 8px;
  color: #d9a62e;
}

.information-footer__bottom {
  padding-top: 24px;
  color: #dddddd;
  font-size: 0.85rem;
}

.information-footer__bottom p {
  margin: 0 0 8px;
}

.information-footer__bottom span {
  display: block;
}

/* =========================================================
   NOUVELLE PAGE RÉSERVATION
   ========================================================= */

.reservation-page {
  --reservation-gold: #c78b00;
  --reservation-gold-dark: #a96f00;
  --reservation-black: #171a21;
  --reservation-text: #4f5968;
  --reservation-border: #e2e5e9;
  --reservation-soft: #fffaf2;
  --reservation-white: #ffffff;

  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--reservation-black);
  font-family: Arial, Helvetica, sans-serif;
}

.reservation-page *,
.reservation-page *::before,
.reservation-page *::after {
  box-sizing: border-box;
}

.reservation-page a {
  text-decoration: none;
}

.reservation-container {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.reservation-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.04);
}

.reservation-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 30px, 1180px);
  min-height: 150px;
  margin-inline: auto;
  gap: 20px;
}

.reservation-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--reservation-black);
}

.reservation-logo {
  display: block;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  object-fit: contain;
}

.reservation-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.reservation-brand-text strong {
  color: #111820;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.reservation-brand-text span {
  margin-top: 8px;
  color: var(--reservation-gold-dark);
  font-size: 16px;
  font-weight: 500;
}

.reservation-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 2px solid var(--reservation-gold);
  border-radius: 14px;
  background: #ffffff;
  color: #161616;
  cursor: pointer;
  font-size: 28px;
}

.reservation-navigation {
  display: flex;
  align-items: center;
  gap: 30px;
}

.reservation-navigation a {
  position: relative;
  padding: 14px 0;
  color: #1f232a;
  font-size: 15px;
  font-weight: 600;
}

.reservation-navigation a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 2px;
  background: var(--reservation-gold);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.reservation-navigation a:hover::after,
.reservation-navigation a.active::after {
  transform: scaleX(1);
}


/* =========================================================
   HERO
   ========================================================= */

.reservation-hero {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 252, 247, 0.68) 0%,
      rgba(255, 252, 247, 0.78) 55%,
      rgba(255, 255, 255, 1) 100%
    );
}

.reservation-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    #ffffff
  );
}

.reservation-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 249, 240, 0.12);
}

.reservation-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: auto;
  padding: 26px 20px 34px;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}

.reservation-eyebrow {
  margin: 0 0 16px;
  color: var(--reservation-gold-dark);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.reservation-hero h1 {
  margin: 0;
  color: #171b23;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.6px;
}

.reservation-hero-description {
  margin: 22px 0 20px;
  color: #3d4653;
  font-size: 21px;
  line-height: 1.55;
}

.reservation-minimum-badge {
  display: inline-flex;
  min-height: 64px;
  padding: 14px 27px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(28, 30, 35, 0.12);
  color: var(--reservation-gold-dark);
  font-size: 21px;
}

.reservation-minimum-badge i {
  color: #f2b52d;
  font-size: 25px;
}


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

.reservation-form-section {
  position: relative;
  z-index: 10;
  margin-top: -48px;
  padding: 0 0 22px;
}

.reservation-form-card {
  width: min(100%, 920px);
  margin-inline: auto;
  padding: 42px;
  border: 1px solid rgba(220, 222, 225, 0.65);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 15px 45px rgba(32, 37, 44, 0.08),
    0 3px 12px rgba(32, 37, 44, 0.04);
}

.reservation-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 34px;
}

.reservation-card-heading > i {
  margin-top: 1px;
  color: var(--reservation-gold);
  font-size: 38px;
}

.reservation-card-heading h2 {
  margin: 0;
  color: #171a20;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.reservation-heading-line {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 16px;
  border-radius: 20px;
  background: var(--reservation-gold);
}

.reservation-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reservation-field {
  position: relative;
  width: 100%;
}

.reservation-field > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 21px;
  width: 24px;
  color: var(--reservation-gold);
  font-size: 21px;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.reservation-field input,
.reservation-field select,
.reservation-field textarea {
  display: block;
  width: 100%;
  border: 1.5px solid var(--reservation-border);
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: #222934;
  font-family: inherit;
  font-size: 17px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.reservation-field input,
.reservation-field select {
  min-height: 62px;
  padding: 12px 48px 12px 62px;
}

.reservation-field textarea {
  min-height: 150px;
  padding: 20px 20px 20px 62px;
  line-height: 1.45;
  resize: vertical;
}

.reservation-field input::placeholder,
.reservation-field textarea::placeholder {
  color: #68717e;
  opacity: 1;
}

.reservation-field input:focus,
.reservation-field select:focus,
.reservation-field textarea:focus {
  border-color: var(--reservation-gold);
  box-shadow: 0 0 0 3px rgba(199, 139, 0, 0.1);
}

.reservation-field select {
  cursor: pointer;
  appearance: auto;
}

.reservation-select-field select {
  min-height: 72px;
  padding-top: 28px;
  padding-left: 17px;
  font-weight: 700;
}

.reservation-select-label {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 17px;
  color: #66707b;
  font-size: 12px;
  pointer-events: none;
}

.reservation-date-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.reservation-date-time-grid input {
  padding-right: 16px;
}

.reservation-textarea-field > i {
  top: 24px;
  transform: none;
}

.reservation-submit-button {
  display: flex;
  width: 100%;
  min-height: 64px;
  margin-top: 2px;
  padding: 14px 24px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(
    100deg,
    #c98600 0%,
    #e2a500 52%,
    #c57d00 100%
  );
  box-shadow: 0 7px 18px rgba(184, 121, 0, 0.19);
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.reservation-submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(184, 121, 0, 0.26);
}

.reservation-submit-button:active {
  transform: translateY(0);
}

.reservation-form-note {
  display: flex;
  margin: 0;
  padding: 0 4px;
  align-items: flex-start;
  gap: 13px;
  color: #56606d;
  font-size: 14px;
  line-height: 1.5;
}

.reservation-form-note i {
  margin-top: 2px;
  color: #56606d;
  font-size: 17px;
}


/* =========================================================
   AIDE ET CONTACT
   ========================================================= */

.reservation-help-section {
  padding: 0 0 20px;
}

.reservation-help-card {
  width: min(100%, 920px);
  margin-inline: auto;
  padding: 26px 30px 18px;
  border: 1px solid #f0e6d7;
  border-radius: 21px;
  background: linear-gradient(
    115deg,
    #fffdf9 0%,
    #fff7ec 50%,
    #ffffff 100%
  );
  box-shadow: 0 10px 30px rgba(32, 37, 44, 0.07);
}

.reservation-help-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}

.reservation-help-icon {
  display: flex;
  width: 68px;
  height: 68px;
  align-items: center;
  justify-content: center;
  color: var(--reservation-gold);
  font-size: 47px;
}

.reservation-help-text h2 {
  margin: 0 0 7px;
  color: #171a20;
  font-size: 21px;
  font-weight: 800;
}

.reservation-help-text p {
  margin: 0;
  color: #58616d;
  font-size: 16px;
  line-height: 1.55;
}

.reservation-contact-button {
  display: inline-flex;
  min-height: 55px;
  padding: 12px 27px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1.8px solid var(--reservation-gold);
  border-radius: 999px;
  color: var(--reservation-gold-dark);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.reservation-direct-contact {



  min-height: 54px;
  margin: 16px auto 0;
  align-items: center;
  border: 1px solid #eadfcf;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.reservation-direct-contact a {
  display: flex;
  min-height: 52px;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 800;
}

.reservation-whatsapp-button {
  color: #08aa45;
}

.reservation-call-button {
  color: var(--reservation-gold-dark);
}

.reservation-whatsapp-button i,
.reservation-call-button i {
  font-size: 23px;
}

.reservation-contact-divider {
  width: 1px;
  height: 28px;
  background: #dfd4c5;
}


/* =========================================================
   FOOTER
   ========================================================= */

.reservation-footer {
  display: flex;
  min-height: 105px;
  padding: 25px 20px;
  align-items: center;
  justify-content: center;
  background: #14171c;
  color: #ffffff;
  text-align: center;
}

.reservation-footer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}


/* =========================================================
   MODAL
   ========================================================= */

.reservation-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.reservation-modal.open {
  display: flex;
}

.reservation-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 18, 0.72);
  backdrop-filter: blur(4px);
}

.reservation-modal-box {
  position: relative;
  z-index: 2;
  width: min(100%, 480px);
  padding: 38px 28px 30px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.reservation-modal-close {
  position: absolute;
  top: 12px;
  right: 15px;
  border: 0;
  background: transparent;
  color: #353b43;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
}

.reservation-modal-icon {
  display: flex;
  width: 65px;
  height: 65px;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff6e4;
  color: var(--reservation-gold);
  font-size: 28px;
}

.reservation-modal-box h2 {
  margin: 0 0 14px;
  color: #171a20;
  font-size: 25px;
  line-height: 1.25;
}

.reservation-modal-box > p {
  margin: 0 0 25px;
  color: #5d6570;
  font-size: 16px;
  line-height: 1.6;
}

.reservation-modal-options {
  display: grid;
  gap: 12px;
}

.reservation-modal-choice {
  display: flex;
  min-height: 57px;
  padding: 13px 20px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #e0e3e7;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
}

.reservation-modal-choice.whatsapp {
  border-color: #29b965;
  color: #15994a;
}

.reservation-modal-choice.sms {
  border-color: var(--reservation-gold);
  color: var(--reservation-gold-dark);
}

.reservation-modal-choice.email {
  color: #414851;
}


/* =========================================================
   VERSION MOBILE
   ========================================================= */

@media (max-width: 820px) {

  .reservation-container {
    width: min(100% - 24px, 720px);
  }

  .reservation-header-inner {
    width: calc(100% - 28px);
    min-height: 150px;
  }

  .reservation-logo {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
  }

  .reservation-brand-text strong {
    font-size: 22px;
  }

  .reservation-brand-text span {
    font-size: 15px;
  }

  .reservation-menu-button {
    display: flex;
  }

  .reservation-navigation {
    position: absolute;
    z-index: 50;
    top: calc(100% - 7px);
    right: 0;
    left: 0;
    display: none;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    border-radius: 0 0 15px 15px;
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  }

  .reservation-navigation.open {
    display: flex;
  }

  .reservation-navigation a {
    padding: 13px 10px;
    text-align: center;
  }

  .reservation-navigation a::after {
    display: none;
  }

  .reservation-navigation a.active {
    border-radius: 8px;
    background: #fff8ea;
    color: var(--reservation-gold-dark);
  }

 .reservation-hero {
  min-height: auto;
  margin-top: 0;
  padding: 12px 16px 18px;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 252, 247, 0.72) 0%,
      rgba(255, 252, 247, 0.82) 55%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("../images/lille-background.png") center top / cover no-repeat;
}
.reservation-hero-content{
    min-height:auto;
    padding:0;
}

 .reservation-eyebrow{
    margin-bottom:8px;
}

  .reservation-hero h1 {
    font-size: 39px;
    line-height: 1.08;
    letter-spacing: -1px;
    margin:0 0 12px;
  }

 .reservation-hero-description{
    margin: 8px 0 12px;
    font-size: 18px;
    line-height: 1.45;
}

  .reservation-minimum-badge {
    min-height: 58px;
    padding: 12px 22px;
    font-size: 18px;
  }

  .reservation-form-section {
    margin-top: -7px;
  }

  .reservation-form-card {
    padding: 30px 24px 24px;
    border-radius: 20px;
  }

  .reservation-card-heading {
    gap: 16px;
    margin-bottom: 28px;
  }

  .reservation-card-heading > i {
    font-size: 31px;
  }

  .reservation-card-heading h2 {
    font-size: 20px;
  }

  .reservation-field input,
  .reservation-field select {
    min-height: 58px;
    padding-left: 56px;
    font-size: 15px;
  }

  .reservation-field textarea {
    min-height: 130px;
    padding-left: 56px;
    font-size: 15px;
  }

  .reservation-field > i {
    left: 18px;
    font-size: 19px;
  }

  .reservation-select-field select {
  min-height: 58px;
  padding: 0 44px 0 15px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
}

  .reservation-date-time-grid {
    gap: 12px;
  }

  .reservation-submit-button {
    min-height: 59px;
    font-size: 17px;
  }

  .reservation-help-card {
    padding: 22px 20px 14px;
  }

  .reservation-help-main {
    grid-template-columns: auto 1fr;
    gap: 15px;
  }

  .reservation-help-icon {
    width: 52px;
    height: 52px;
    font-size: 40px;
  }

  .reservation-help-text h2 {
    font-size: 17px;
  }

  .reservation-help-text p {
    font-size: 14px;
  }

  .reservation-contact-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 50px;
    margin-top: 5px;
    font-size: 16px;
  }

  .reservation-direct-contact {
    width: 100%;
    margin-top: 13px;
  }

  .reservation-direct-contact a {
    padding-inline: 10px;
    font-size: 16px;
  }

  .reservation-footer {
    min-height: 90px;
  }

  .reservation-footer p {
    font-size: 14px;
  }
}


/* =========================================================
   PETITS TÉLÉPHONES
   ========================================================= */

@media (max-width: 480px) {

  .reservation-header-inner {
    min-height: 138px;
  }

  .reservation-logo {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }

  .reservation-brand {
    gap: 5px;
  }

  .reservation-brand-text strong {
    font-size: 18px;
    letter-spacing: -0.3px;
  }

  .reservation-brand-text span {
    margin-top: 6px;
    font-size: 13px;
  }

  .reservation-menu-button {
    width: 55px;
    height: 55px;
    flex-basis: 55px;
    font-size: 25px;
  }

  .reservation-hero h1 {
    font-size: 34px;
  }

  .reservation-hero-description {
    font-size: 16px;
  }

  .reservation-minimum-badge {
    font-size: 16px;
  }

  .reservation-form-card {
    padding: 27px 16px 20px;
  }

  .reservation-card-heading {
    gap: 13px;
  }

  .reservation-card-heading h2 {
    font-size: 17px;
  }

  .reservation-card-heading > i {
    font-size: 28px;
  }

  .reservation-date-time-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .reservation-date-time-grid .reservation-field > i {
    left: 14px;
    font-size: 17px;
  }

  .reservation-date-time-grid input {
    padding-right: 6px;
    padding-left: 43px;
    font-size: 13px;
  }

  .reservation-field input,
  .reservation-field select,
  .reservation-field textarea {
    font-size: 14px;
  }

  .reservation-submit-button {
    font-size: 16px;
  }

  .reservation-form-note {
    font-size: 12px;
  }

  .reservation-direct-contact a {
    font-size: 14px;
  }
}


/* =========================================================
   VERSION ORDINATEUR
   ========================================================= */

@media (min-width: 821px) {

  .reservation-form-card {
    margin-top: 10px;
  }

  .reservation-help-card {
    margin-top: 5px;
  }
}

/* ==========================
   ADDRESS AUTOCOMPLETE
========================== */

.address-suggestions{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    margin-top:6px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    z-index:9999;
    overflow:hidden;
    display:none;
}

.address-suggestion{
    width:100%;
    border:none;
    background:#fff;
    text-align:left;
    padding:14px 16px;
    font-size:15px;
    cursor:pointer;
    transition:.2s;
}

.address-suggestion:hover{
    background:#f5f5f5;
}
/* ==========================
   CONTACT CHOICE POPUP
========================== */

button.luxury-contact__card{
    font-family:inherit;
    color:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

/* Full-screen dark overlay */
.contact-choice-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:99999;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

/* Visible popup */
.contact-choice-modal.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* Popup box */
.contact-choice-box{
    width:100%;
    max-width:390px;
    padding:30px 22px 22px;
    text-align:center;
    background:
        radial-gradient(
            circle at top,
            rgba(214,169,52,.13),
            transparent 45%
        ),
        #0c0c0c;
    border:1px solid rgba(214,169,52,.9);
    border-radius:24px;
    box-shadow:
        0 24px 70px rgba(0,0,0,.7),
        inset 0 0 30px rgba(214,169,52,.05);

    transform:translateY(18px) scale(.96);
    transition:transform .25s ease;
}

.contact-choice-modal.show .contact-choice-box{
    transform:translateY(0) scale(1);
}

.contact-choice-box h3{
    margin:0 0 8px;
    color:#fff;
    font-size:27px;
    line-height:1.2;
}

.contact-choice-question {
  display: block;
  margin: 42px 0 -2px;
  color: #cfcfcf;
  font-size: 14px;
}

/* Contact buttons */
.contact-choice-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:58px;
    margin:12px 0;
    padding:13px 18px;

    color:#fff;
    font-size:17px;
    font-weight:700;
    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(214,169,52,.08)
        );
    border:1px solid rgba(214,169,52,.75);
    border-radius:16px;

    box-shadow:inset 0 0 0 rgba(214,169,52,0);
    transition:
        transform .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.contact-choice-btn:hover,
.contact-choice-btn:active{
    color:#0a0a0a;
    background:#d6a934;
    box-shadow:0 8px 22px rgba(214,169,52,.22);
    transform:translateY(-1px);
}

/* Close button */
.contact-choice-close{
    width:100%;
    min-height:50px;
    margin-top:16px;
    color:#d3d3d3;
    font-size:15px;
    font-weight:700;
    background:transparent;
    border:1px solid rgba(255,255,255,.22);
    border-radius:15px;
    cursor:pointer;
    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease;
}

.contact-choice-close:hover,
.contact-choice-close:active{
    color:#fff;
    border-color:rgba(214,169,52,.7);
    background:rgba(214,169,52,.08);
}

@media (max-width:480px){
    .contact-choice-box{
        max-width:350px;
        padding:27px 18px 20px;
        border-radius:21px;
    }

    .contact-choice-box h3{
        font-size:24px;
    }

    .contact-choice-btn{
        min-height:56px;
        font-size:16px;
    }
}
/* Footer phone contact button */
.footer-contact-btn{

    grid-template-columns:48px 1fr;











    outline:none;
    box-shadow:none;


    appearance:none;
    -webkit-appearance:none;
}

.footer-contact-btn{
    display:flex;
    align-items:center;
    gap:18px;
    width:100%;
    padding:0;
    margin:0;

    background:none;
    border:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.footer-contact-btn i{
    width:30px;
    font-size:16px;
    color:#e6ad27;
    text-align:center;
    flex-shrink:0;
}

.footer-contact-btn span{
    color:#fff;
}

.footer-contact-btn:hover span{
    color:#e6ad27;
}

/* =========================================
   REVIEWS CAROUSEL — CLEAN FINAL VERSION
========================================= */

.reviews-carousel {
    width: calc(100% - 32px);
    max-width: 580px;
    margin: 0 auto;
}

.reviews-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    touch-action: auto;
    scrollbar-width: none;
}

.reviews-viewport::-webkit-scrollbar {
    display: none;
}

.reviews-track {
    display: flex;
    align-items: flex-start;
    gap: 36px;

    width: 100%;
    transform: none;
    transition: none;
}

.reviews-card {
    flex: 0 0 100%;
    width: 100%;

    min-height: 420px;
    max-height: 420px;

    display: grid;
    grid-template-rows: 118px 50px minmax(0, 1fr) 30px;

    box-sizing: border-box;
    padding: 24px;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    color: #ffffff;
    background: linear-gradient(
        145deg,
        rgba(24, 24, 24, 0.98),
        rgba(7, 7, 7, 0.98)
    );

    border: 1.5px solid #e6ad27;
    border-radius: 28px;

    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(.4, 0, .2, 1);
}

.reviews-card.is-expanded {
    max-height: 1200px;
    grid-template-rows: 118px 50px auto 30px;
}

.reviews-profile {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 15px;

    width: 100%;
    height: 118px;
}

.reviews-avatar {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #116d61;
    border: 1.5px solid #e6ad27;
    border-radius: 50%;

    font-size: 28px;
    font-weight: 800;
}

.reviews-customer {
    min-width: 0;
}

.reviews-name {
    display: block;
    margin: 0;

    color: #ffffff;
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.15;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.reviews-name i {
    display: inline-block;
    margin-left: 5px;

    color: #369bf5;
    font-size: 17px;
}

.reviews-date {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.65);
    font-size: 17px;
    line-height: 1.25;
}

.reviews-stars {
    height: 50px;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: #ffc52f;
    font-size: 23px;
}

.reviews-text {
    align-self: center;
    width: 100%;
    margin: 0;

    color: #ffffff;
    font-size: 18px;
    line-height: 1.55;
    text-align: center;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.reviews-text.is-expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.reviews-toggle {
    align-self: end;
    justify-self: start;

    display: block;
    margin: 0;
    padding: 0;

    color: #e6ad27;
    background: transparent;
    border: none;

    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 30px;
    text-decoration: underline;

    cursor: pointer;
}

/* Native draggable bar: follows the cards and controls them. */

.reviews-range {
    --range-progress: 0%;

    display: block;
    width: 70%;
    max-width: 300px;
    height: 32px;
    margin: 18px auto 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    border: 0;
    outline: 0;

    cursor: pointer;
    touch-action: none;
}

.reviews-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;

    background: linear-gradient(
        to right,
        #e6ad27 0%,
        #e6ad27 var(--range-progress),
        rgba(255, 255, 255, 0.28) var(--range-progress),
        rgba(255, 255, 255, 0.28) 100%
    );

    border: 0;
    border-radius: 999px;
}

.reviews-range::-webkit-slider-thumb {
    width: 34px;
    height: 12px;
    margin-top: -3px;

    appearance: none;
    -webkit-appearance: none;

    background: #e6ad27;
    border: 0;
    border-radius: 999px;

    box-shadow: 0 0 10px rgba(230, 173, 39, 0.42);
}

.reviews-range::-moz-range-track {
    width: 100%;
    height: 6px;

    background: rgba(255, 255, 255, 0.28);
    border: 0;
    border-radius: 999px;
}

.reviews-range::-moz-range-progress {
    height: 6px;
    background: #e6ad27;
    border-radius: 999px;
}

.reviews-range::-moz-range-thumb {
    width: 34px;
    height: 12px;

    background: #e6ad27;
    border: 0;
    border-radius: 999px;

    box-shadow: 0 0 10px rgba(230, 173, 39, 0.42);
}

@media (max-width: 480px) {
    .reviews-carousel {
        width: calc(100% - 24px);
    }

    .reviews-track {
        gap: 30px;
    }

    .reviews-card {
        min-height: 420px;
        max-height: 420px;
        padding: 22px 20px;
        border-radius: 24px;
    }

    .reviews-card.is-expanded {
        max-height: 1200px;
    }

    .reviews-name {
        font-size: clamp(19px, 5.4vw, 23px);
    }

    .reviews-text {
        font-size: 17px;
    }
}


/* ===== HERO DOWN ARROW ===== */

html {
  scroll-behavior: smooth;
}

.hero-scroll-down {
  position: absolute;
  left: var(--hero-scroll-left, 50%);
  top: var(--hero-scroll-top, auto);
  bottom: var(--hero-scroll-bottom, 16px);
  z-index: 20;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  font-size: 32px;
  text-decoration: none;

  transform: translateX(-50%);
  animation: heroArrowBounce 1.6s infinite;
}

@keyframes heroArrowBounce {
  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, 9px);
  }
}

/* ===== BACK TO TOP BUTTON ===== */

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 1000;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111111;
  background: linear-gradient(
    135deg,
    #d4a62a,
    #f0c64f
  );

  border: none;
  border-radius: 50%;

  font-size: 24px;
  cursor: pointer;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(12px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}

.back-to-top:active {
  transform: scale(0.92);
}

/* ===== INFORMATION PAGE MENU HIGHLIGHT ===== */

.information-page #mainHeader nav a:hover,
.information-page #mainHeader nav a:focus,
.information-page #mainHeader nav a:active,
.information-page #mainHeader nav a.active {
  color: #b8860b !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== MOVE INFORMATION TITLE UP ===== */

.information-page .information-hero {
  padding-top: 90px !important;
  padding-bottom: 0 !important;
}

.information-page .information-hero__content {
  padding-top: 28px !important;
}

/* ===== RESERVATION DIRECT CONTACT BUTTONS ===== */

.reservation-help-card {
  gap: 20px;
}

.reservation-direct-contact {
  width: 100%;
  margin-top: 6px;




}

.reservation-contact-option {









  color: #a87900;
  background: #ffffff;

  border: 1.5px solid rgba(190, 142, 15, 0.4);
  border-radius: 18px;


  font-weight: 700;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.07);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.reservation-contact-option i {
  font-size: 25px;
}

.reservation-contact-option:active {
  transform: scale(0.96);
}

.reservation-contact-option.reservation-whatsapp-option {
  color: #16a94a;
}

.reservation-contact-option.call {
  color: #b17b00;
}

.reservation-contact-option.sms {
  color: #2778c9;
}

.reservation-contact-option.email {
  color: #b04a3f;
}

/* ===== FIX THE FOUR CONTACT BOXES ===== */

.reservation-direct-contact {
  display: grid !important;
  grid-template-columns: repeat(2, 125px) !important;
justify-content: center !important;
  grid-auto-rows: 105px !important;
  gap: 12px !important;
}

.reservation-contact-option {
  width: 100% !important;
  height: 105px !important;
  min-height: 105px !important;
  padding: 10px 6px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  box-sizing: border-box !important;
  font-size: 14px !important;
}

.reservation-contact-option i,
.reservation-contact-option .whatsapp-svg {
  display: block !important;
  width: 29px !important;
  height: 29px !important;
  font-size: 29px !important;
  line-height: 1 !important;
}

.reservation-whatsapp-option .whatsapp-svg {
  color: #16a94a !important;
}

/* ===== FINAL CONTACT BUTTON FIX ===== */



.reservation-help-section .reservation-contact-option {





  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;



}



/* WhatsApp icon without Font Awesome */
.reservation-help-section
.reservation-whatsapp-option
i,
.reservation-help-section
.reservation-whatsapp-option
svg {
  display: none !important;
}

.reservation-help-section
.reservation-whatsapp-option::before {
  content: "" !important;

  display: block !important;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316a94a' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.521.149-.173.198-.297.298-.495.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.075-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 21.785a9.87 9.87 0 0 1-5.034-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26C2.168 6.443 6.603 2.01 12.055 2.01a9.82 9.82 0 0 1 7.021 2.91 9.82 9.82 0 0 1 2.9 7.026c-.002 5.45-4.437 9.884-9.926 9.839M20.465 3.488A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.478-8.413'/%3E%3C/svg%3E") !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* ===== VERY SMALL CONTACT BUTTONS ===== */








/* ===== SMALL INNER CONTACT BUTTONS ===== */

.reservation-help-section .reservation-direct-contact {
  width: fit-content !important;
  margin: 12px auto 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, 100px) !important;
  grid-auto-rows: 58px !important;
  justify-content: center !important;
  gap: 10px !important;
}

.reservation-help-section .reservation-contact-option {
  width: 100px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 3px !important;

  gap: 2px !important;
  border-radius: 12px !important;

  font-size: 11px !important;
  line-height: 1 !important;
}

.reservation-help-section .reservation-contact-option i {
  font-size: 18px !important;
}

.reservation-help-section
.reservation-whatsapp-option::before {
  width: 18px !important;
  height: 18px !important;
}

/* ===== RESERVATION DOWN ARROW ===== */

#reservationForm {
  scroll-margin-top: 20px;
}

.reservation-scroll-down {
  width: 48px;
  height: 48px;
  margin: 12px auto 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111111;
  background: linear-gradient(
    135deg,
    #d4a62a,
    #f0c64f
  );

  border-radius: 50%;
  text-decoration: none;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

  animation: reservationArrowBounce 1.6s infinite;
}

.reservation-scroll-down i {
  font-size: 23px;
}

/* The extra arrow is used only for phone landscape.
   Other responsive versions keep the original reservation arrow position. */
.reservation-scroll-down--landscape {
  display: none;
}

@keyframes reservationArrowBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}

/* ===== RESERVATION BACK TO TOP ===== */

.reservation-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 1000;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111111;
  background: linear-gradient(
    135deg,
    #d4a62a,
    #f0c64f
  );

  border: none;
  border-radius: 50%;

  font-size: 24px;
  cursor: pointer;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(12px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

.reservation-back-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.reservation-back-to-top:active {
  transform: scale(0.92);
}

/* =========================================
   DESKTOP ONLY — HEADER OVER HERO
   Mobile version is not affected
========================================= */

@media (min-width: 1024px) {
  #mainHeader.premium-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
    padding: 0;

    background: linear-gradient(
      180deg,
      rgba(4, 10, 17, 0.92) 0%,
      rgba(4, 10, 17, 0.58) 60%,
      rgba(4, 10, 17, 0) 100%
    );

    box-shadow: none;
    border: none;
  }

  #mainHeader.premium-header .header-inner {
    min-height: 88px;
    padding: 12px 0;
  }

  #mainHeader.premium-header .premium-brand,
  #mainHeader.premium-header .premium-brand-text strong,
  #mainHeader.premium-header nav a {
    color: #ffffff;
  }

  #mainHeader.premium-header .brand-subtitle {
    color: #c99a24;
  }
}

/* MOBILE ONLY — À LILLE ON THIRD LINE */
@media screen and (max-width: 768px) {
  #accueil .hero-left h1 span {
    display: block !important;
    width: fit-content;
    color: var(--gold-light) !important;

    text-decoration: underline;
    text-decoration-color: var(--gold-light);
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;
  }
}

/* MOBILE — REMOVE THE OLD EXTRA GOLD LINE */
@media screen and (max-width: 768px) {
  #accueil .gold-line {
    display: none !important;
  }
}

.vehicle-business-card-wrap {
  display: none !important;
}
/* Hide Tarifs badges on mobile */
.tarifs-heading-badge {
  display: none !important;
}

/* MOBILE — hide Tarifs descriptions */
@media screen and (max-width: 1023px) {

  /* Hide: Des tarifs transparents pour tous vos déplacements */
  #tarifs .tarifs-heading > span {
    display: none !important;
  }

  /* Hide: Même pour un trajet de courte distance */
  #tarifs [class*="minimum"] p {
    display: none !important;
  }
}

/* ==================================================
   MOBILE — DESTINATIONS MAP FINAL CORRECTION
================================================== */

@media screen and (max-width: 1023px) {

  /* Keep the desktop redesign hidden */
  #destinations .destinations-desktop-redesign {
    display: none !important;
  }

  /* Hide the unwanted sentence */
  #destinations .destinations-heading > span {
    display: none !important;
  }
/* Remove the old transparent desktop rays on mobile */
#destinations .destinations-map::before {
  content: none !important;
  display: none !important;
  background: none !important;
}



  /* =========================================
     RESET ALL OLD DESTINATION LABEL STYLES
  ========================================= */

 #destinations .destinations-map .map-city {
  position: absolute !important;

  right: auto;
  bottom: auto;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 108px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 10px !important;

  color: #e0ae2b !important;
  background: linear-gradient(
    145deg,
    rgba(10, 10, 10, 0.98),
    rgba(0, 0, 0, 0.98)
  ) !important;

  border: 1px solid rgba(224, 174, 43, 0.82) !important;
  border-radius: 20px !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;

  box-shadow: 0 0 10px rgba(224, 174, 43, 0.10) !important;
  z-index: 7 !important;
}

  /* Remove old label lines and duplicate dots */
  #destinations .destinations-map .map-city::before,
  #destinations .destinations-map .map-city::after {
    content: none !important;
    display: none !important;
  }


  /* =========================================
     LILLE — CENTRE
  ========================================= */

#destinations .destinations-map .map-lille {
  left: 50% !important;
  top: 50% !important;

  right: auto !important;
  bottom: auto !important;

  padding: 9px 16px !important;

  color: #17120a !important;
  background: linear-gradient(145deg, #f7cf55, #dfa426) !important;

  border: 1px solid #ffe59a !important;
  border-radius: 24px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  transform: translate(-50%, -50%) !important;

  box-shadow:
    0 0 14px rgba(239, 184, 43, 0.85),
    0 0 32px rgba(239, 184, 43, 0.34) !important;

  z-index: 10 !important;
}


  /* =========================================
     DESTINATION LABEL POSITIONS
  ========================================= */

  /* Upper left */
  #destinations .map-bruxelles {
    left: 22% !important;
    top: 26% !important;

    transform: none !important;
  }

  /* Upper right */
  #destinations .map-charleroi {
    left: auto !important;
    right: 22% !important;
    top: 26% !important;

    transform: none !important;
  }

  /* Middle left */
#destinations .map-lesquin {
  left: 2% !important;
  top: 50% !important;

  width: 112px !important;
  max-width: 112px !important;
  padding: 7px 10px !important;

  white-space: normal !important;
  line-height: 1.12 !important;
  text-align: center !important;

  transform: translateY(-50%) !important;
}

  /* Middle right */
  #destinations .map-cdg {
    left: auto !important;
    right: 2% !important;
    top: 50% !important;

    transform: translateY(-50%) !important;
  }

  /* Lower left */
  #destinations .map-beauvais {
    left: 20% !important;
    top: auto !important;
    bottom: 24% !important;

    transform: none !important;
  }

  /* Lower right */
  #destinations .map-orly {
    left: auto !important;
    right: 20% !important;
    top: auto !important;
    bottom: 24% !important;

    transform: none !important;
  }


  /* =========================================
     RESET AND STYLE ALL GOLD ROUTES
  ========================================= */

  #destinations .destinations-map .map-route {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    right: auto !important;
    bottom: auto !important;

    width: 0;
    height: 3px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    transform-origin: left center !important;

    background:
      linear-gradient(
        90deg,
        #f6c743,
        #dda322
      ) !important;

    box-shadow:
      0 0 5px rgba(242, 190, 48, 0.90),
      0 0 12px rgba(242, 190, 48, 0.34) !important;

    opacity: 1 !important;
    overflow: visible !important;

    z-index: 3 !important;
  }

  /* Remove any previous route decorations */
  #destinations .destinations-map .map-route::before {
    content: none !important;
    display: none !important;
  }

  /* One gold dot at the route endpoint */
  #destinations .destinations-map .map-route::after {
    content: "" !important;

    position: absolute !important;
    right: -6px !important;
    top: 50% !important;

    width: 12px !important;
    height: 12px !important;

    transform: translateY(-50%) !important;

    background: #f3c44a !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow:
      0 0 9px rgba(243, 196, 74, 0.98) !important;
  }


  /* =========================================
     EVENLY SPACED ROUTES
  ========================================= */

  /* Lille → Bruxelles */
  #destinations .route-bruxelles {
    width: 20% !important;
    transform: rotate(-120deg) !important;
  }

  /* Lille → Charleroi */
  #destinations .route-charleroi {
    width: 20% !important;
    transform: rotate(-60deg) !important;
  }

  /* Lille → Lille-Lesquin */
  #destinations .route-lesquin {
    width: 31% !important;
    transform: rotate(180deg) !important;
  }

  /* Lille → Paris CDG */
  #destinations .route-cdg {
    width: 31% !important;
    transform: rotate(0deg) !important;
  }

  /* Lille → Beauvais */
  #destinations .route-beauvais {
    width:20% !important;
    transform: rotate(120deg) !important;
  }

  /* Lille → Paris Orly */
  #destinations .route-orly {
    width: 20% !important;
    transform: rotate(60deg) !important;
  }

}

/* =========================================================
   INFORMATION PAGE — MOBILE FINAL REPAIR
   Keeps desktop rules untouched (desktop.css starts at 1024px)
   ========================================================= */
@media screen and (max-width: 1023px) {

  /* Keep the Information header flush with the top of the page. */
  .information-page #mainHeader.premium-header {
    top: 0 !important;
    margin-top: 0 !important;
  }

  .information-page .information-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remove the large mobile gap before the Information title. */
  .information-page .information-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .information-page .information-hero__content {
    padding: 18px 20px 24px !important;
  }

  /* When the down arrow is tapped, leave the top of the car visible
     below the sticky mobile header. */
  .information-page #information-content {
    scroll-margin-top: 104px;
  }

  /* Matching gold circular down/up controls. */
  .information-page .information-scroll-down,
  .information-page .information-scroll-top {
    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #111111 !important;
    background: linear-gradient(135deg, #d4a62a, #f0c64f) !important;
    border: none !important;
    border-radius: 50% !important;

    font-size: 22px !important;
    text-decoration: none !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;

    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease !important;
  }

  .information-page .information-scroll-down {
    position: relative !important;
    z-index: 20 !important;

    margin: 20px auto 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* The extra hero arrow belongs to phone landscape only. */
  .information-page .information-scroll-down--landscape {
    display: none !important;
  }

  .information-page .information-scroll-down.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .information-page .information-scroll-top {
    position: fixed !important;
    right: 18px !important;
    bottom: 22px !important;
    left: auto !important;
    top: auto !important;
    z-index: 6000 !important;

    margin: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(12px) !important;
  }

  .information-page .information-scroll-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
  }

  /* The footer brand text existed in the HTML but inherited dark text,
     making it invisible on the black footer. */
  .information-page .information-footer__brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    margin: 0 auto 26px !important;
  }

  .information-page .information-footer__brand .premium-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  .information-page .information-footer__brand .premium-brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;

    text-align: left !important;
  }

  .information-page .information-footer__brand .premium-brand-text strong {
    display: block !important;

    color: #ffffff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;

    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================================
   INFORMATION PAGE — PHONE LANDSCAPE
   Single landscape specialization: centred divider, then arrow below it.
   ========================================================= */
@media screen and (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .information-page .information-hero__line-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 14px auto 18px;
  }

  .information-page .information-hero__line-row .information-hero__line {
    margin: 0 auto;
  }

  .information-page .information-scroll-down--default {
    display: none !important;
  }

  .information-page .information-scroll-down--landscape {
    display: flex !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;
    margin: 0 auto !important;
  }
}


/* =========================================================
   FINAL MOBILE LANGUAGE MENU + COMPACT CARD SPACING
   Added 2026-08-22
   Reservation form/card spacing is intentionally untouched.
   ========================================================= */

.mobile-language-switcher {
  display: none;
}

@media screen and (max-width: 768px) and (orientation: portrait) {

  /* Mobile portrait keeps the five languages inside the hamburger panel.
     Phone landscape uses the separate header language switcher defined
     in the canonical MOBILE LANDSCAPE HEADER section above. */
  #mainHeader .desktop-language-switcher {
    display: none !important;
  }

  #mainHeader nav .mobile-language-switcher {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 10px 4px 2px !important;
    border-top: 1px solid rgba(201, 154, 46, 0.24) !important;
  }

  #mainHeader nav .mobile-language-switcher .language-option {
    appearance: none !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 6px 4px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    color: #111111 !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(201, 154, 46, 0.34) !important;
    border-radius: 9px !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  #mainHeader nav .mobile-language-switcher .language-option img {
    display: block !important;
    width: 17px !important;
    height: 12px !important;
    object-fit: cover !important;
    border-radius: 1px !important;
  }

  #mainHeader nav .mobile-language-switcher .language-option.is-active {
    color: #8f6507 !important;
    background: rgba(212, 166, 42, 0.16) !important;
    border-color: #c99a2e !important;
  }
}

@media screen and (max-width: 768px) {

  /* HOME PAGE — tighten vertical gaps between card groups. */
  body:not(.reservation-page) .vehicle-experience .vehicle-info-grid {
    gap: 4px !important;
  }

  body:not(.reservation-page) .why-premium-list {
    gap: 4px !important;
  }

  body:not(.reservation-page) .tarifs-list {
    gap: 4px !important;
  }

  body:not(.reservation-page) .tarifs-layout {
    gap: 6px !important;
  }

  body:not(.reservation-page) .tarifs-payment-list {
    gap: 4px !important;
  }

  body:not(.reservation-page) .destinations-main-layout {
    gap: 6px !important;
  }

  body:not(.reservation-page) .destinations-featured-list {
    gap: 4px !important;
  }

  body:not(.reservation-page) .destinations-more-list {
    gap: 4px !important;
  }

  body:not(.reservation-page) .luxury-contact__cards {
    gap: 5px !important;
  }

  /* INFORMATION PAGE — compact every stacked card/section gap. */
  .information-page section.information-links {
    gap: 5px !important;
    padding-top: 4px !important;
    padding-bottom: 5px !important;
  }

  .information-page .information-custom-destination {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .information-page .information-footer {
    margin-top: 5px !important;
  }
}