*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#f5f2eb;
  color:#171714;
  font-family:"DM Sans",Arial,sans-serif;
}

a{
  text-decoration:none;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

/* =========================
   HEADER
========================= */

header{
  height:82px;
  padding:0 7vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:1000;
  background:#f5f2eb;
  border-bottom:1px solid #ddd8ce;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
}

.brand b{
  width:43px;
  height:43px;
  border:1px solid #b09250;
  display:grid;
  place-items:center;
  color:#a38242;
  font-weight:600;
}

.brand span{
  font:600 22px "Playfair Display",serif;
}

.brand small{
  display:block;
  text-align:center;
  font:9px "DM Sans",Arial,sans-serif;
  letter-spacing:4px;
}

nav{
  display:flex;
  gap:26px;
  align-items:center;
}

nav>a{
  color:inherit;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
}

nav>a:hover{
  color:#a38242;
}

.cta{
  background:#b09250;
  color:#fff!important;
  padding:13px 21px;
}

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

.menu{
  display:none;
  border:0;
  background:none;
  color:#171714;
  font-size:29px;
  line-height:1;
  cursor:pointer;
  padding:5px;
}

/* =========================
   LANGUAGE
========================= */

.language-selector{
  position:relative;
  margin-left:4px;
}

.language-button{
  border:1px solid #c9c3b8;
  background:transparent;
  color:#171714;
  padding:10px 12px;
  font-size:12px;
  cursor:pointer;
  letter-spacing:.5px;
}

.language-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:175px;
  display:none;
  flex-direction:column;
  padding:7px;
  background:#f5f2eb;
  border:1px solid #d8d2c7;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  z-index:2000;
}

.language-menu.open{
  display:flex;
}

.language-menu button{
  width:100%;
  border:0;
  background:transparent;
  padding:10px 12px;
  text-align:left;
  color:#171714;
  font-size:13px;
  cursor:pointer;
}

.language-menu button:hover{
  background:#e9e5dc;
}

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

.hero{
  position:relative;
  min-height:calc(100vh - 82px);
  padding:9vh 8vw;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#fff;

  background-image:
    linear-gradient(rgba(10,10,8,.55),rgba(10,10,8,.55)),
    url("./images/royanor-hero.jpg");

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

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(5,5,5,.82) 0%,
    rgba(5,5,5,.58) 45%,
    rgba(5,5,5,.28) 100%
  );
  z-index:1;
}

.hero>div{
  position:relative;
  z-index:2;
  max-width:780px;
}

.hero label,
.section label,
.copy label,
.booking-label{
  display:block;
  margin-bottom:22px;
  font-size:11px;
  letter-spacing:4px;
  color:#d3b774;
  font-weight:600;
}

.hero h1{
  font:500 clamp(46px,6vw,82px)/1.02 "Playfair Display",serif;
  margin:0 0 24px;
  letter-spacing:-1.5px;
}

.hero h1 i{
  color:#d3b774;
  font-style:normal;
}

.hero p{
  max-width:650px;
  margin:0 0 34px;
  font-size:18px;
  line-height:1.7;
  color:rgba(255,255,255,.88);
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.hero .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 25px;
  border-radius:2px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  transition:all .25s ease;
}

.button{
  background:#b09250;
  color:#fff!important;
}

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

.outline{
  background:transparent!important;
  border:1px solid #fff;
}

.hero .trust{
  display:block;
  margin-top:28px;
  font-size:11px;
  letter-spacing:2px;
  color:rgba(255,255,255,.65);
}

/* =========================
   SECTIONS
========================= */

.section{
  padding:105px 7vw;
}

.section h2,
.about h2{
  font:500 clamp(38px,5vw,65px)/1.08 "Playfair Display",serif;
  margin:18px 0;
}

.intro{
  max-width:650px;
  color:#68665f;
  line-height:1.7;
}

/* =========================
   SERVICES
========================= */

.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #d5d0c6;
  margin-top:45px;
}

.services article{
  padding:28px 20px 20px 0;
  border-bottom:1px solid #d5d0c6;
}

.services article+article{
  border-left:1px solid #d5d0c6;
  padding-left:20px;
}

.services em,
.fleet em{
  color:#a68749;
  font-style:normal;
  font-size:11px;
  letter-spacing:2px;
}

.services h3,
.fleet h3{
  font:500 25px/1.2 "Playfair Display",serif;
}

.services p,
.fleet span{
  color:#777;
  font-size:14px;
  line-height:1.6;
}

/* =========================
   FLOTTE
========================= */

.dark{
  background:#11110f;
  color:#f7f3eb;
}

.fleet{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:45px;
}

.fleet article{
  background:#1b1b18;
  overflow:hidden;
}

.car{
  height:300px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ANCIENNES PHOTOS CONSERVÉES */

.e{
  background-image:url("./images/classe-e.webp");
}

.s{
  background-image:url("./images/classe-s.webp");
}

.v{
  background-image:url("./images/classe-v.webp");
}

.std{
  background-image:url("./images/berline-confort.webp");
}

.fleet article>div:last-child{
  padding:22px;
}

.fleet h3{
  margin:6px 0;
  color:#f7f3eb;
}

.fleet span{
  color:#aaa;
}

/* =========================
   ABOUT
========================= */

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.riviera{
  min-height:650px;

  background-image:url("https://images.myguide-cdn.com/cdn-cgi/image/width%3D700%2Cformat%3Dauto%2Cquality%3D85/frenchriviera/activities/the-riviera-from-nice-to-menton-between-pearls-and-palm-trees/large/the-riviera-from-nice-to-menton-between-pearls-and-palm-trees-7292191.jpg");

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

.copy{
  padding:9vw;
  align-self:center;
}

.copy p{
  color:#666;
  max-width:570px;
  line-height:1.7;
}

.values{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:30px;
  border-top:1px solid #d5d0c6;
}

.values b{
  padding:18px 0;
  border-bottom:1px solid #d5d0c6;
  font-size:14px;
}

.values b:nth-child(even){
  padding-left:18px;
  border-left:1px solid #d5d0c6;
}

.values small{
  display:block;
  color:#777;
  font-weight:400;
  margin-top:4px;
}

/* =========================
   AVIS
========================= */

.testimonials{
  background:#e9e5dc;
}

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

.quotes blockquote{
  margin:0;
  border-top:2px solid #b09250;
  padding-top:22px;
  font:20px/1.5 "Playfair Display",serif;
}

.quotes small{
  display:block;
  margin-top:20px;
  font:12px "DM Sans",Arial,sans-serif;
  color:#777;
}

/* =========================
   RÉSERVATION
========================= */

#reservation.booking{
  padding:90px 6vw;
  background:#171714;
  color:#f7f3eb;
  display:block;
}

#reservation .booking-intro{
  max-width:850px;
  margin:0 auto 55px;
  text-align:center;
}

#reservation .booking-label{
  margin-bottom:14px;
  color:#c5a45d;
  font-size:12px;
  letter-spacing:5px;
}

#reservation .booking-intro h2{
  margin:0 0 16px;
  color:#f7f3eb;
  font:500 clamp(32px,5vw,54px)/1.1 "Playfair Display",serif;
}

#reservation .booking-intro p{
  margin:0;
  color:#aaa79f;
  font-size:16px;
  line-height:1.7;
}

#reservation .reservation-form{
  width:100%;
  max-width:1050px;
  margin:0 auto;
}

#reservation .form-section{
  margin-bottom:28px;
  padding:32px;
  background:#1d1d1a;
  border:1px solid #35352f;
  border-radius:12px;
}

#reservation .form-section h3{
  margin:0 0 28px;
  color:#f7f3eb;
  font-size:21px;
  font-weight:600;
}

#reservation .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-bottom:22px;
}

#reservation .form-grid:last-child{
  margin-bottom:0;
}

#reservation .form-field{
  width:100%;
}

#reservation .form-field>label{
  display:block;
  margin-bottom:9px;
  color:#c5a45d;
  font-size:12px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
}

#reservation input,
#reservation textarea,
#reservation select{
  width:100%;
  min-height:56px;
  padding:15px 17px;
  border:1px solid #41413b;
  border-radius:7px;
  background:#24241f;
  color:#f7f3eb;
  font-size:16px;
  outline:none;
  transition:border-color .2s ease,
             background .2s ease,
             box-shadow .2s ease;
}

#reservation input::placeholder,
#reservation textarea::placeholder{
  color:#8f8e89;
}

#reservation input:focus,
#reservation textarea:focus,
#reservation select:focus{
  border-color:#c5a45d;
  background:#292922;
  box-shadow:0 0 0 3px rgba(197,164,93,.10);
}

#reservation input[type="date"],
#reservation input[type="time"]{
  color-scheme:dark;
}

#reservation textarea{
  min-height:125px;
  resize:vertical;
}

/* =========================
   VÉHICULES RÉSERVATION
========================= */

#reservation .vehicle-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

#reservation .vehicle-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:15px;
  min-height:82px;
  padding:18px 20px;
  border:1px solid #3d3d37;
  border-radius:9px;
  background:#24241f;
  cursor:pointer;
  transition:all .2s ease;
}

#reservation .vehicle-card:hover{
  border-color:#8f7843;
}

#reservation .vehicle-card input{
  width:20px;
  min-width:20px;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0;
  accent-color:#c5a45d;
  box-shadow:none;
}

#reservation .vehicle-card span{
  display:flex;
  flex-direction:column;
  gap:5px;
}

#reservation .vehicle-card strong{
  color:#f7f3eb;
  font-size:16px;
  font-weight:600;
}

#reservation .vehicle-card small{
  color:#9f9d96;
  font-size:13px;
}

#reservation .vehicle-card:has(input:checked){
  border-color:#c5a45d;
  background:#29271f;
  box-shadow:inset 0 0 0 1px rgba(197,164,93,.25);
}

/* =========================
   BOUTON RÉSERVATION
========================= */

#reservation .reservation-submit{
  margin-top:35px;
  text-align:center;
}

#reservation .reservation-submit .button{
  width:100%;
  max-width:430px;
  min-height:60px;
  padding:16px 28px;
  border:0;
  border-radius:7px;
  background:#c5a45d;
  color:#171714!important;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}

#reservation .reservation-submit .button:hover{
  background:#d3b66f;
  transform:translateY(-1px);
}

#reservation .booking-note{
  margin:14px 0 0;
  color:#85847e;
  font-size:12px;
}

/* =========================
   CLICKCHAUFFEUR
========================= */

.clickchauffeur-booking{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

.clickchauffeur-booking iframe{
  display:block;
  width:100%;
  max-width:100%;
  min-height:1100px;
  border:0;
  border-radius:12px;
  background:#fff;
}

/* =========================
   FOOTER
========================= */

footer{
  background:#0e0e0c;
  color:#aaa;
  padding:55px 7vw 85px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:40px;
}

footer strong{
  display:block;
  color:#ddd;
  font-size:11px;
  letter-spacing:2px;
  margin-bottom:12px;
}

footer a,
footer span{
  display:block;
  color:#888;
  text-decoration:none;
  font-size:12px;
  margin:7px 0;
}

footer a:hover{
  color:#d3b774;
}

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

.mobile{
  display:none;
}

/* =========================
   GOOGLE PLACES
========================= */

.royanor-suggestions{
  font-family:"DM Sans",Arial,sans-serif;
}

.royanor-suggestions button:hover{
  background:#f5f5f5!important;
}

/* =========================
   TABLET
========================= */

@media(max-width:1000px){

  header{
    padding:0 5vw;
  }

  nav{
    gap:17px;
  }

  nav>a{
    font-size:13px;
  }

  .language-button{
    padding:9px 10px;
  }

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

  .services article:nth-child(3){
    border-left:0;
    padding-left:0;
  }
}

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

@media(max-width:850px){

  header{
    height:72px;
    padding:0 18px;
    position:sticky!important;
    z-index:99999!important;
  }

  .menu{
    display:block!important;
    position:relative!important;
    z-index:100001!important;
    cursor:pointer!important;
  }

  nav{
    display:none!important;
    position:absolute!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    padding:20px 5vw!important;
    background:#f5f2eb!important;
    border-bottom:1px solid #d8d2c7;
    box-shadow:0 12px 25px rgba(0,0,0,.10);
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    z-index:100000!important;
  }

  nav.open{
    display:flex!important;
  }

  nav>a{
    display:block;
    width:100%;
    padding:15px 5px;
    border-bottom:1px solid #ded9cf;
    font-size:15px;
  }

  nav>a.cta{
    margin-top:12px;
    padding:14px;
    text-align:center;
    border:0;
  }

  .language-selector{
    width:100%;
    margin:12px 0 0;
  }

  .language-button{
    width:100%;
    text-align:left;
    padding:13px;
  }

  .language-menu{
    position:static;
    width:100%;
    box-shadow:none;
    margin-top:6px;
  }

  .hero{
    min-height:calc(100vh - 72px);
    padding:80px 28px 70px;
    align-items:flex-start;

    background-image:
      linear-gradient(rgba(10,10,8,.55),rgba(10,10,8,.55)),
      url("./images/royanor-hero.jpg");

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

  .hero h1{
    font-size:clamp(42px,12vw,58px);
  }

  .hero p{
    font-size:17px;
  }

  .hero-buttons{
    display:block;
  }

  .hero .button{
    width:100%;
    margin:0 0 12px;
  }

  .section{
    padding:75px 6vw;
  }

  .services,
  .fleet,
  .about,
  .quotes{
    grid-template-columns:1fr;
  }

  .services article+article{
    padding-left:0;
    border-left:0;
  }

  .car{
    height:240px;
  }

  .riviera{
    min-height:400px;
  }

  .copy{
    padding:70px 6vw;
  }

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

  #reservation.booking{
    padding:55px 18px 100px;
  }

  #reservation .booking-intro{
    margin-bottom:35px;
  }

  #reservation .booking-intro h2{
    font-size:32px;
  }

  #reservation .booking-intro p{
    font-size:14px;
  }

  #reservation .form-section{
    padding:22px 17px;
    border-radius:10px;
  }

  #reservation .form-section h3{
    margin-bottom:22px;
    font-size:19px;
  }

  #reservation .form-grid{
    grid-template-columns:1fr;
    gap:17px;
    margin-bottom:17px;
  }

  #reservation .form-field>label{
    font-size:10px;
    letter-spacing:2.5px;
  }

  #reservation input,
  #reservation textarea,
  #reservation select{
    min-height:56px;
    padding:14px;
    font-size:16px;
  }

  #reservation .vehicle-options{
    grid-template-columns:1fr;
    gap:10px;
  }

  #reservation .vehicle-card{
    min-height:74px;
    padding:14px 16px;
  }

  #reservation .reservation-submit{
    margin-top:25px;
  }

  #reservation .reservation-submit .button{
    max-width:none;
    min-height:58px;
  }

  .clickchauffeur-booking iframe{
    min-height:1100px;
  }

  footer{
    grid-template-columns:1fr;
    padding:50px 7vw 100px;
  }

  .mobile{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:1500;
    background:#111;
    border-top:1px solid #444;
  }

  .mobile a{
    padding:15px 3px;
    text-align:center;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    border-right:1px solid #333;
  }

  .mobile a:last-child{
    background:#b09250;
  }
}

/* =========================
   PETITS TÉLÉPHONES
========================= */

@media(max-width:400px){

  .brand{
    gap:9px;
  }

  .brand b{
    width:39px;
    height:39px;
  }

  .brand span{
    font-size:20px;
  }

  .hero{
    padding-left:22px;
    padding-right:22px;
  }

  .hero h1{
    font-size:42px;
  }

  .section{
    padding-left:22px;
    padding-right:22px;
  }

  #reservation.booking{
    padding-left:14px;
    padding-right:14px;
  }

  #reservation .form-section{
    padding:20px 14px;
  }
}