/* =========================================================
   ROYAL SIGNATURE DRIVER - STYLE PREMIUM LUXE PROFESSIONNEL
   Noir profond / doré élégant / textes blancs lisibles
   ========================================================= */

:root{
  --black:#030303;
  --black-soft:#080806;
  --black-card:#11100d;
  --black-form:#0c0c0c;

  --gold:#C9A86A;
  --gold-light:#F2D58C;
  --gold-dark:#9C7432;

  --white:#FFFFFF;
  --text:#F6F1E8;
  --muted:#D9CCB8;

  --border:rgba(201,168,106,.34);
  --border-soft:rgba(201,168,106,.18);

  --radius:28px;
  --shadow:0 30px 90px rgba(0,0,0,.55);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Montserrat,Arial,sans-serif;
  font-weight:600;
  line-height:1.6;
}

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

.topbar{
  min-height:96px;
  background:rgba(3,3,3,.96);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid rgba(201,168,106,.30);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}

.brand{
  display:flex;
  align-items:center;
  gap:15px;
  color:var(--gold-light);
  text-decoration:none;
  letter-spacing:3px;
}

.crest{
  width:72px;
  height:72px;
  border-radius:50%;
  border:1px solid rgba(242,213,140,.55);
  display:grid;
  place-items:center;
  position:relative;
  font-family:Cormorant Garamond,serif;
  color:var(--gold-light);
  background:
    radial-gradient(circle at 50% 35%,rgba(242,213,140,.22),rgba(0,0,0,.18) 55%),
    linear-gradient(145deg,rgba(201,168,106,.12),rgba(0,0,0,.35));
  box-shadow:0 0 28px rgba(201,168,106,.13);
}

.crown{
  position:absolute;
  top:7px;
  font-size:14px;
  color:var(--gold-light);
}

.crest strong{
  font-size:36px;
  line-height:1;
}

.brandText b,
.brandText em{
  display:block;
}

.brandText b{
  color:var(--gold-light);
  font-weight:900;
}

.brandText em{
  font-style:normal;
  text-align:center;
  font-size:11px;
  color:var(--gold);
  letter-spacing:5px;
  font-weight:800;
}

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

nav a{
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1.4px;
  font-weight:800;
  position:relative;
}

nav a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transition:.25s ease;
}

nav a:hover{
  color:var(--gold-light);
}

nav a:hover:after{
  width:100%;
}

/* ================= BOUTONS ================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 26px;
  min-height:48px;
  border-radius:999px;
  border:1px solid var(--gold);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:12px;
  font-weight:900;
  transition:.25s ease;
  cursor:pointer;
}

.btn.outline{
  color:var(--gold-light);
  background:transparent;
}

.btn.outline:hover{
  background:rgba(201,168,106,.12);
}

.btn.gold{
  color:#111;
  border:none;
  background:linear-gradient(135deg,#9C7432 0%,#F2D58C 52%,#B8893E 100%);
  box-shadow:0 16px 40px rgba(201,168,106,.24);
}

.btn.gold:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 52px rgba(201,168,106,.34);
}

.btn.light{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.38);
}

.btn.light:hover{
  background:rgba(255,255,255,.14);
}

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

.hero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  padding:90px 7vw;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.70) 100%),
    url('assets/hero-clean-handdrawn.png') center right/cover no-repeat;
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(201,168,106,.17),transparent 30%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.50) 100%);
  pointer-events:none;
}

.heroOverlay{
  position:absolute;
  inset:0;
  background:transparent;
}

.glassPanel{
  position:relative;
  z-index:2;
  max-width:660px;
  padding:48px;
  border-radius:32px;
  background:
    linear-gradient(145deg,rgba(18,18,18,.92),rgba(4,4,4,.82));
  border:1px solid rgba(201,168,106,.32);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}

.glassPanel:before{
  content:"";
  position:absolute;
  left:0;
  top:38px;
  bottom:38px;
  width:4px;
  border-radius:8px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-dark));
}

.overline,
.sectionLabel,
.premium-title{
  margin:0 0 14px;
  color:var(--gold-light);
  text-transform:uppercase;
  letter-spacing:5px;
  font-size:12px;
  font-weight:900;
}

.hero h1,
.about h2,
.vehicles h2,
.reservation h2,
.payment h2,
.devisHeader h2,
.contactHead h2,
.rsfc-title h2,
.rcv2-title h2,
.rs-contact-head h2{
  margin:0 0 22px;
  color:var(--gold);
  font-family:Cormorant Garamond,serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:.96;
  text-shadow:0 4px 18px rgba(0,0,0,.72);
}

.hero h1{
  font-size:clamp(46px,6vw,78px);
}

.goldLine{
  width:78px;
  height:2px;
  margin:24px 0;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-dark));
}

p,
li,
span:not(.crown):not(.stepIcon):not(.stepNumber),
td,
th,
dt,
dd,
blockquote,
small,
address{
  color:#fff;
  font-size:16px;
  line-height:1.85;
  font-weight:700;
}

.hero p{
  color:var(--white);
  font-size:17px;
  text-shadow:0 2px 8px rgba(0,0,0,.72);
}

.heroActions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:34px;
}

/* ================= FEATURES ================= */

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:42px 6vw;
  background:linear-gradient(180deg,#050505,#0b0a08);
}

.features article{
  padding:28px;
  border:1px solid var(--border-soft);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}

.features span{
  color:var(--gold-light);
  font-size:34px;
}

h3,
.features h3,
.devisSteps h3,
.contactInfoBox h3,
.contactFormPro h3,
.rsfc-panel h3,
.rsfc-form h3,
.rcv2-left h3,
.rcv2-form h3,
.rs-contact-card h3,
.rs-contact-form h3{
  color:var(--gold-light);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.4px;
}

.features h3{
  margin:14px 0 8px;
  font-size:14px;
}

.features p{
  color:#fff;
  font-size:13px;
  font-weight:700;
}

/* ================= SECTIONS GÉNÉRALES ================= */

.about,
.vehicles,
.reservation,
.payment{
  padding:86px 7vw;
  background:var(--black);
  color:#fff;
}

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:center;
  background:
    radial-gradient(circle at 12% 18%,rgba(201,168,106,.12),transparent 28%),
    linear-gradient(135deg,#030303,#090806);
}

.vehicles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:center;
  background:
    radial-gradient(circle at 88% 22%,rgba(201,168,106,.12),transparent 32%),
    linear-gradient(135deg,#050505,#11100d);
}

.reservation{
  background:
    radial-gradient(circle at 50% 0%,rgba(201,168,106,.10),transparent 35%),
    linear-gradient(180deg,#030303,#0b0a08);
}

.payment{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px;
  background:linear-gradient(135deg,#030303,#11100d);
}

.about h2,
.vehicles h2,
.reservation h2,
.payment h2{
  font-size:clamp(36px,4vw,52px);
}

.copyBlock p,
.vehicleCopy p,
.vehicles p,
.about p,
.reservation p,
.payment p,
.serviceList,
.serviceList li{
  color:#fff;
  font-weight:700;
}

.serviceList{
  padding-left:20px;
  line-height:2.1;
}

.imagePanel{
  position:relative;
  min-height:380px;
  border:1px solid rgba(201,168,106,.48);
  border-radius:32px;
  overflow:hidden;
  background:#111;
  box-shadow:var(--shadow);
}

.imagePanel:after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(242,213,140,.26);
  border-radius:24px;
  pointer-events:none;
}

.imageAbout{
  background:url('assets/about-clean-handdrawn.png') center/cover no-repeat;
}

.imageVehicle{
  background:url('assets/vehicle-clean-handdrawn.png') center/cover no-repeat;
}

.tags{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.tags span{
  padding:11px 16px;
  border:1px solid rgba(201,168,106,.48);
  border-radius:999px;
  color:var(--gold-light);
  background:rgba(201,168,106,.08);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px;
  font-weight:900;
}

/* ================= FORMULAIRES PREMIUM ================= */

.form,
form{
  max-width:1060px;
}

.form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin:auto;
  padding:40px;
  border-radius:34px;
  border:1px solid rgba(201,168,106,.36);
  background:
    linear-gradient(145deg,rgba(17,16,13,.98),rgba(5,5,5,.98));
  box-shadow:var(--shadow);
}

label{
  color:var(--gold-light);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.1px;
}

input,
select,
textarea{
  width:100%;
  margin-top:8px;
  padding:16px 17px;
  border-radius:17px;
  border:1px solid rgba(201,168,106,.42);
  background:#090909;
  color:#fff;
  font:inherit;
  font-weight:700;
  outline:none;
  color-scheme:dark;
  -webkit-appearance:none;
  appearance:none;
  transition:.2s ease;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.66);
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--gold-light);
  box-shadow:0 0 0 3px rgba(201,168,106,.16);
  background:#0f0f0f;
}

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

label.full,
.form .full{
  grid-column:1/-1;
}

.form button{
  width:max-content;
}

/* ================= PAIEMENT ================= */

.payCards{
  display:grid;
  gap:16px;
}

.pay{
  display:block;
  padding:24px;
  border:1px solid rgba(201,168,106,.42);
  border-radius:24px;
  color:var(--gold-light);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  background:linear-gradient(145deg,rgba(201,168,106,.10),rgba(255,255,255,.025));
  font-weight:900;
}

.pay:hover{
  background:rgba(201,168,106,.18);
}

/* ================= DEVIS ================= */

.devisSection{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:96px 6%;
  background:
    radial-gradient(circle at 75% 15%,rgba(201,168,106,.15),transparent 34%),
    linear-gradient(135deg,#030303,#090806);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.devisHeader{
  max-width:900px;
  margin:0 auto 50px;
}

.devisCrown{
  width:70px;
  height:38px;
  margin:0 auto 14px;
  color:var(--gold-light);
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.devisHeader h2{
  font-size:clamp(34px,4vw,54px);
}

.devisHeader p{
  color:#fff;
  max-width:760px;
  margin:12px auto;
  line-height:1.85;
  font-weight:700;
}

.devisSteps{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border:1px solid rgba(201,168,106,.42);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:var(--shadow);
}

.devisSteps article{
  padding:46px 30px 38px;
  min-height:260px;
  border-right:1px solid rgba(201,168,106,.32);
}

.devisSteps article:last-child{
  border-right:0;
}

.stepNumber{
  width:54px;
  height:54px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#111;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
  font-weight:900;
  font-size:24px;
}

.stepIcon{
  display:block;
  margin-bottom:18px;
  color:var(--gold-light);
  font-size:42px;
}

.devisSteps h3{
  color:var(--gold-light);
  font-size:22px;
}

.devisSteps p{
  color:#fff;
  text-transform:uppercase;
  line-height:1.6;
  font-size:14px;
  font-weight:800;
}

.devisAction{
  margin-top:36px;
  display:flex;
  justify-content:center;
}

.devisAction .btn{
  min-width:min(100%,520px);
  font-size:15px;
}

/* ================= CONTACT ================= */

.contactPro,
.rs-final-contact,
.royal-contact-v2,
.rs-contact{
  padding:96px 6%;
  background:
    radial-gradient(circle at 20% 15%,rgba(201,168,106,.14),transparent 32%),
    linear-gradient(135deg,#030303,#0b0907);
  color:#fff;
  border-top:1px solid var(--border-soft);
}

.contactInner,
.rsfc-wrap,
.rcv2-container,
.rs-contact-wrap{
  width:min(1180px,100%);
  margin:auto;
}

.contactHead,
.rsfc-title,
.rcv2-title,
.rs-contact-head{
  max-width:850px;
  margin:0 auto 48px;
  text-align:center;
}

.contactHead h2,
.rsfc-title h2,
.rcv2-title h2,
.rs-contact-head h2{
  font-size:clamp(40px,5vw,66px);
}

.contactHead p,
.rsfc-title p,
.rcv2-title p,
.rs-contact-head p{
  color:#fff;
  line-height:1.85;
  font-weight:700;
}

.contactLayout,
.rsfc-layout,
.rcv2-grid,
.rs-contact-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:30px;
}

.contactInfoBox,
.contactFormPro,
.rsfc-panel,
.rsfc-form,
.rcv2-left,
.rcv2-form,
.rs-contact-card,
.rs-contact-form{
  padding:40px;
  border-radius:34px;
  border:1px solid rgba(201,168,106,.36);
  background:linear-gradient(145deg,rgba(17,16,13,.98),rgba(5,5,5,.98));
  box-shadow:var(--shadow);
}

.contactInfoBox h3,
.contactFormPro h3,
.rsfc-panel h3,
.rsfc-form h3,
.rcv2-left h3,
.rcv2-form h3,
.rs-contact-card h3,
.rs-contact-form h3{
  margin:0 0 24px;
  color:var(--gold-light);
  font-family:Cormorant Garamond,serif;
  font-size:38px;
  text-transform:none;
  letter-spacing:0;
}

.contactItem,
.rs-contact-line{
  display:flex;
  gap:16px;
  padding:17px 0;
  border-bottom:1px solid rgba(201,168,106,.16);
}

.contactItem span,
.rs-contact-line span{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,168,106,.34);
  background:rgba(201,168,106,.10);
}

.contactItem strong,
.rs-contact-line strong,
.rsfc-line b,
.rcv2-info b{
  display:block;
  margin:0 0 6px;
  color:var(--gold-light);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
  font-weight:900;
}

.contactItem a,
.contactItem p,
.rs-contact-line a,
.rs-contact-line p,
.rsfc-line span,
.rcv2-info span{
  color:#fff;
  margin:0;
  line-height:1.6;
  text-decoration:none;
  font-weight:700;
}

.socialRow,
.rs-socials,
.rsfc-socials,
.rcv2-social{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.socialRow a,
.rs-socials a,
.rsfc-socials a,
.rcv2-social a{
  padding:13px 18px;
  border-radius:999px;
  border:1px solid rgba(201,168,106,.35);
  color:var(--gold-light);
  background:rgba(0,0,0,.30);
  text-decoration:none;
  font-weight:900;
}

.contactFormPro,
.rsfc-form,
.rs-contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contactFormPro h3,
.contactFormPro .full,
.rsfc-form h3,
.rsfc-form .full,
.rs-contact-form h3,
.rs-contact-form .rs-full{
  grid-column:1/-1;
}

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

footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:36px 7vw;
  background:#030303;
  color:#fff;
  border-top:1px solid var(--border-soft);
}

footer p{
  color:#fff;
  font-weight:700;
}

.small{
  font-size:12px;
  color:#fff;
  font-weight:700;
}

/* ================= COMPATIBILITÉ BLOCS EXISTANTS ================= */

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

.payLuxury,
.checkoutBox{
  border:1px solid rgba(201,168,106,.34);
  background:linear-gradient(145deg,rgba(17,16,13,.98),rgba(5,5,5,.98));
  border-radius:30px;
  padding:28px;
  box-shadow:var(--shadow);
}

.payLuxury h3{
  color:var(--gold-light);
}

.payLuxury p,
.secureNote,
.paypalBox p{
  color:#fff;
  font-weight:700;
}

.checkoutTabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:20px;
}

.tab{
  border:1px solid rgba(201,168,106,.35);
  background:#0b0b0b;
  color:var(--gold-light);
  border-radius:16px;
  padding:14px;
  font-weight:900;
  cursor:pointer;
}

.tab.active{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#111;
}

.cardPayment{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.cardPayment .full{
  grid-column:1/-1;
}

.paypalButton{
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px;
  background:#ffc439;
  color:#111;
  font-weight:900;
  cursor:pointer;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1050px){
  nav{
    display:none;
  }

  .hero{
    min-height:620px;
    background-position:center;
  }

  .features,
  .about,
  .vehicles,
  .payment,
  .contactLayout,
  .rsfc-layout,
  .rcv2-grid,
  .rs-contact-grid{
    grid-template-columns:1fr;
  }

  .form,
  .contactFormPro,
  .rsfc-form,
  .rs-contact-form,
  .cardPayment{
    grid-template-columns:1fr;
  }

  .glassPanel{
    padding:36px;
  }

  footer{
    display:block;
  }
}

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

  .devisSteps article{
    border-right:0;
    border-bottom:1px solid rgba(201,168,106,.32);
  }

  .devisSteps article:last-child{
    border-bottom:0;
  }

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

@media(max-width:600px){
  .topbar{
    padding:12px 5vw;
    min-height:78px;
  }

  .crest{
    width:54px;
    height:54px;
  }

  .crest strong{
    font-size:28px;
  }

  .brandText b{
    font-size:13px;
  }

  .hero{
    padding:58px 5vw;
  }

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

  .heroActions .btn{
    width:100%;
  }

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

  .about,
  .vehicles,
  .reservation,
  .payment,
  .devisSection,
  .contactPro,
  .rs-final-contact,
  .royal-contact-v2,
  .rs-contact{
    padding:60px 5vw;
  }

  .form,
  .contactInfoBox,
  .contactFormPro,
  .rsfc-panel,
  .rsfc-form,
  .rcv2-left,
  .rcv2-form,
  .rs-contact-card,
  .rs-contact-form{
    padding:26px;
  }
}