@charset "UTF-8";
/* BrownPro font faces */
@font-face {
  font-family: "BrownPro";
  src: url("../fonts/BrownPro_Regular-fgRjgDW.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BrownPro";
  src: url("../fonts/BrownPro_Medium-N7SEz5t.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BrownPro";
  src: url("../fonts/BrownPro_SemiBold-8Pjj3lv.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BrownPro";
  src: url("../fonts/BrownPro_Bold-MP-WoHo.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.navbar {
  font-weight: 500;
}
.navbar .navbar-brand {
  line-height: 58px;
  padding: 0;
  color: #fff !important;
}
.navbar .nav-link {
  line-height: 58px;
  padding: 0 20px !important;
  font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #fff !important;
}
.navbar .nav-link:hover {
  background-color: rgba(48, 38, 82, 0.08);
}
.navbar .navbar-nav {
  flex-wrap: wrap;
}

/* White header (menu) style */
.navbar-white {
  background-color: #fff !important;
  border-bottom: 1px solid #dee2e6; /* light grey bottom border only */
}
.navbar-white .navbar-brand {
  color: #bc00cc !important;
}
.navbar-white .nav-link {
  color: #302652 !important;
}
.navbar-white .nav-link:hover, .navbar-white .nav-link:focus {
  color: #1f1a40 !important; /* slightly darker on hover */
}

/* Mobile-only: bottom border for nav links */
@media (max-width: 992px) {
  .navbar .navbar-nav .nav-link {
    border-bottom: 1px solid #dee2e6;
  }
  .navbar .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: 0;
  }
}
.btn {
  text-transform: uppercase;
  font-weight: 700;
}

.btn-ga {
  background-color: #bc00cc;
  border-color: #bc00cc;
  color: #fff;
}
.btn-ga:hover, .btn-ga:focus {
  background-color: #8f0099;
  border-color: #8f0099;
  color: #fff;
}

/* "Voir les prix" button style */
.btn-prix {
  background-color: #1772A1;
  border-color: #1772A1;
  color: #fff;
}
.btn-prix:hover, .btn-prix:focus {
  background-color: #01446a;
  border-color: #01446a;
  color: #fff;
}

:root {
  font-size: 12px;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  color: #1f1f1f;
  font-family: BrownPro, BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.brand-accent {
  color: #bc00cc;
}

.badge-ga {
  background-color: #bc00cc;
}

section {
  scroll-margin-top: 90px;
}

.hero {
  background-color: #111;
  color: #fff;
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
}
.hero .content {
  position: relative;
  z-index: 2;
}

.hero-text {
  background: rgba(17, 17, 17, 0.7);
}

.shadow-soft {
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06);
}

.card-img-top {
  object-fit: contain;
  aspect-ratio: 152/83;
}

.vehicle-card .card-img-top {
  object-fit: cover;
  aspect-ratio: 16/9;
}

.availability {
  font-weight: 700;
}
.availability.soon {
  color: #6c757d;
}
.availability.open {
  color: #198754;
}

footer {
  background-color: #bc00cc;
}
footer a, footer .a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
footer a:hover, footer .a:hover {
  text-decoration: underline;
}

/* Non-hero typography and links in brand blue */
section:not(#accueil) {
  /* Do not override button text colors */
}
section:not(#accueil) h1,
section:not(#accueil) h2,
section:not(#accueil) h3,
section:not(#accueil) h4,
section:not(#accueil) h5,
section:not(#accueil) h6 {
  color: #1772A1;
  #text-transform: uppercase;
}
section:not(#accueil) strong {
  color: #1772A1;
}
section:not(#accueil) a:not(.btn) {
  color: #1772A1;
}
section:not(#accueil) a:not(.btn):hover {
  color: #01446a;
}

/* Grey veil on cards marked "Bientôt disponible" */
/* Mobile-only: horizontal layout for price cards so the image is on the left and content on the right */
@media (max-width: 576px) {
  #prix .card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  #prix .card .card-img-top {
    height: auto;
    border-radius: 0.375rem 0 0 0.375rem;
    object-fit: contain;
  }
  #prix .card .card-body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  :root {
    font-size: 14px;
  }
}
@media (min-width: 1200px) {
  :root {
    font-size: 16px;
  }
  .hero {
    min-height: 70vh;
  }
}
/* Subtle purple hover overlay on all cards */
.card {
  overflow: hidden; /* keep overlay within rounded corners */
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(188, 0, 204, 0); /* invisible by default */
  transition: background 160ms ease-in-out;
  pointer-events: none; /* purely visual */
}

.card:hover::after {
  background: rgba(188, 0, 204, 0.06); /* very light purple veil */
}

/* Make vehicle cards feel clickable */
.vehicle-card {
  cursor: pointer;
}

/* Hero background image element fills and covers the section */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/*# sourceMappingURL=app.output.css.map */