/* =========================================================
   SWISS RACE CUSTOMS
   PAGE BC RACING
========================================================= */

.src-bc-page {
  width: 100%;
  overflow: hidden;

  background: #f3f3f3;

  color: #111111;
}


.src-bc-container {
  width: min(calc(100% - 60px), 1450px);

  margin: 0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

.src-bc-eyebrow {
  margin: 0 0 24px;

  color: #555555;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;

  text-transform: uppercase;
}


/* =========================================================
   BOUTON
========================================================= */

.src-bc-gold-button {
  display: inline-flex;

  min-height: 48px;

  padding: 0 29px;

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

  border: 0;
  border-radius: 4px;

  background: #c9ad87;

  color: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;

  text-decoration: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


.src-bc-gold-button:hover {
  opacity: 0.88;

  transform: translateY(-1px);
}


/* =========================================================
   SECTION 1
   PROJET BMW M5 F90
========================================================= */

.src-bc-project {
  padding: 100px 0 90px;
}


.src-bc-project__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  align-items: center;

  gap: 75px;
}


/* TEXTE */

.src-bc-project__content {
  max-width: 620px;
}


.src-bc-project__title {
  margin: 0 0 23px;

  color: #111111;

  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 700;
  line-height: 1.05;

  letter-spacing: -0.035em;
}


.src-bc-project__text {
  color: #444444;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}


.src-bc-project__text p {
  margin: 0 0 25px;
}


.src-bc-project__text ul {
  margin: 4px 0 30px;

  padding-left: 23px;
}


.src-bc-project__text li {
  margin: 5px 0;
}


/* =========================================================
   IMAGE UNIQUE PROJET
========================================================= */

.src-bc-project__media {
  display: flex;

  width: 100%;
  min-width: 0;
  min-height: 670px;

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

  overflow: hidden;
}


.src-bc-project__media img {
  display: block;

  width: 100%;
  height: 670px;

  object-fit: contain;
  object-position: center;

  border: 0;
}


/* PLACEHOLDER */

.src-bc-media-placeholder {
  display: flex;

  width: 100%;
  min-height: 500px;

  padding: 40px;

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

  border: 1px dashed #aaaaaa;

  color: #777777;

  font-size: 14px;

  text-align: center;
}


/* =========================================================
   SECTION 2
   COMBINÉS FILETÉS BC RACING
========================================================= */

.src-bc-intro {
  padding: 90px 0 100px;
}


.src-bc-intro__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  align-items: center;

  gap: 85px;
}


/* =========================================================
   IMAGE UNIQUE BC
========================================================= */

.src-bc-intro__media {
  display: flex;

  width: 100%;
  min-width: 0;
  min-height: 700px;

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

  overflow: hidden;
}


.src-bc-intro__media img {
  display: block;

  width: 100%;
  height: 700px;

  object-fit: contain;
  object-position: center;

  border: 0;
}


/* TEXTE */

.src-bc-intro__content {
  max-width: 610px;
}


.src-bc-intro__title {
  margin: 0 0 24px;

  color: #111111;

  font-size: clamp(45px, 4.5vw, 67px);
  font-weight: 500;
  line-height: 1.06;

  letter-spacing: -0.035em;
}


.src-bc-intro__text {
  color: #444444;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}


.src-bc-intro__text p {
  margin: 0 0 25px;
}


.src-bc-intro__text ul {
  margin: 8px 0 28px;

  padding-left: 23px;
}


.src-bc-intro__text li {
  margin: 6px 0;
}


/* =========================================================
   PRODUITS
========================================================= */

.src-bc-products {
  padding: 85px 0 95px;
}


.src-bc-products__title {
  max-width: 1250px;

  margin: 0 0 42px;

  color: #111111;

  font-size: clamp(38px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.08;

  letter-spacing: -0.03em;
}


.src-bc-products__grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;
}


/* PRODUIT */

.src-bc-product-card {
  min-width: 0;
}


.src-bc-product-card__image {
  display: flex;

  width: 100%;

  aspect-ratio: 1 / 1;

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

  overflow: hidden;

  border-radius: 14px;

  background: #ffffff;

  text-decoration: none;
}


.src-bc-product-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition: transform 0.3s ease;
}


.src-bc-product-card:hover
.src-bc-product-card__image img {
  transform: scale(1.025);
}


.src-bc-product-card__content {
  padding-top: 16px;
}


.src-bc-product-card__title {
  margin: 0 0 7px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}


.src-bc-product-card__title a {
  color: #111111;

  text-decoration: none;
}


.src-bc-product-card__title a:hover {
  text-decoration: underline;
}


.src-bc-product-card__brand {
  margin-bottom: 8px;

  color: #666666;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}


.src-bc-product-card__price {
  color: #111111;

  font-size: 15px;
  font-weight: 700;
}


.src-bc-product-card__price del {
  margin-right: 5px;

  color: #888888;

  font-weight: 500;
}


.src-bc-product-card__price ins {
  text-decoration: none;
}


.src-bc-products__footer {
  display: flex;

  margin-top: 45px;

  justify-content: center;
}


.src-bc-products__empty {
  grid-column: 1 / -1;

  padding: 35px;

  background: #ffffff;

  text-align: center;
}


/* =========================================================
   VIDEO
========================================================= */

.src-bc-video {
  padding: 80px 0 95px;
}


.src-bc-video__title {
  margin: 0 0 35px;

  color: #111111;

  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 500;
  line-height: 1.1;

  letter-spacing: -0.03em;
}


.src-bc-video__media {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #111111;
}


.src-bc-video__media video {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.src-bc-video__placeholder {
  display: flex;

  width: 100%;

  aspect-ratio: 16 / 9;

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

  background:
    linear-gradient(
      135deg,
      #171717,
      #444444
    );
}


.src-bc-video__play {
  display: flex;

  width: 62px;
  height: 62px;

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

  border-radius: 50%;

  background: #ffffff;

  color: #111111;

  font-size: 22px;
}


/* =========================================================
   FAQ
========================================================= */

.src-bc-faq {
  padding: 70px 0 105px;
}


.src-bc-faq__container {
  width: min(calc(100% - 60px), 820px);

  margin: 0 auto;
}


.src-bc-faq__title {
  margin: 0 0 42px;

  color: #111111;

  font-size: clamp(42px, 4.8vw, 62px);
  font-weight: 500;
  line-height: 1.1;

  letter-spacing: -0.03em;

  text-align: center;
}


.src-bc-faq__list {
  border-top: 1px solid #d6d6d6;
}


.src-bc-faq__item {
  margin: 0;

  border-bottom: 1px solid #d6d6d6;
}


.src-bc-faq__item summary {
  display: flex;

  min-height: 62px;

  padding: 0 4px;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  color: #111111;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;

  list-style: none;
}


.src-bc-faq__item summary::-webkit-details-marker {
  display: none;
}


/* =========================================================
   CHEVRON FAQ
========================================================= */

.src-bc-faq__icon {
  position: relative;

  width: 14px;
  height: 14px;

  flex: 0 0 14px;
}


.src-bc-faq__icon::before,
.src-bc-faq__icon::after {
  position: absolute;

  top: 6px;

  width: 8px;
  height: 1px;

  background: #111111;

  content: "";
}


.src-bc-faq__icon::before {
  left: 0;

  transform: rotate(45deg);
}


.src-bc-faq__icon::after {
  right: 0;

  transform: rotate(-45deg);
}


.src-bc-faq__item[open]
.src-bc-faq__icon::before {
  transform: rotate(-45deg);
}


.src-bc-faq__item[open]
.src-bc-faq__icon::after {
  transform: rotate(45deg);
}


/* =========================================================
   RÉPONSE FAQ
========================================================= */

.src-bc-faq__answer {
  padding: 0 6px 22px;

  color: #494949;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}


.src-bc-faq__answer p {
  margin: 0 0 12px;
}


.src-bc-faq__answer p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   TABLETTE
========================================================= */

@media screen and (max-width: 1050px) {

  .src-bc-container {
    width: min(calc(100% - 40px), 1200px);
  }


  .src-bc-project__grid,
  .src-bc-intro__grid {
    gap: 45px;
  }


  .src-bc-project__media,
  .src-bc-intro__media {
    min-height: 560px;
  }


  .src-bc-project__media img,
  .src-bc-intro__media img {
    height: 560px;
  }


  .src-bc-products__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 30px 18px;
  }

}


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

@media screen and (max-width: 749px) {

  .src-bc-container,
  .src-bc-faq__container {
    width: calc(100% - 28px);
  }


  /* PROJET */

  .src-bc-project {
    padding: 55px 0 65px;
  }


  .src-bc-project__grid {
    display: flex;

    flex-direction: column;

    gap: 38px;
  }


  .src-bc-project__content {
    max-width: none;
  }


  .src-bc-project__title {
    font-size: 40px;
  }


  .src-bc-project__media {
    width: 100%;
    min-height: 0;
  }


  .src-bc-project__media img {
    width: 100%;
    height: auto;

    max-height: none;

    object-fit: contain;
  }


  /* INTRO */

  .src-bc-intro {
    padding: 60px 0 70px;
  }


  .src-bc-intro__grid {
    display: flex;

    flex-direction: column;

    gap: 40px;
  }


  .src-bc-intro__media {
    width: 100%;
    min-height: 0;

    order: 1;
  }


  .src-bc-intro__media img {
    width: 100%;
    height: auto;

    max-height: none;

    object-fit: contain;
  }


  .src-bc-intro__content {
    max-width: none;

    order: 2;
  }


  .src-bc-intro__title {
    font-size: 40px;
  }


  /* PRODUITS */

  .src-bc-products {
    padding: 60px 0 70px;
  }


  .src-bc-products__title {
    margin-bottom: 30px;

    font-size: 36px;
  }


  .src-bc-products__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 27px 10px;
  }


  .src-bc-product-card__image {
    border-radius: 10px;
  }


  .src-bc-product-card__title {
    font-size: 13px;
  }


  .src-bc-product-card__price {
    font-size: 13px;
  }


  /* VIDEO */

  .src-bc-video {
    padding: 55px 0 65px;
  }


  .src-bc-video__title {
    margin-bottom: 25px;

    font-size: 39px;
  }


  /* FAQ */

  .src-bc-faq {
    padding: 55px 0 70px;
  }


  .src-bc-faq__title {
    margin-bottom: 30px;

    font-size: 39px;

    text-align: left;
  }


  .src-bc-faq__item summary {
    min-height: 58px;

    font-size: 15px;
  }


  .src-bc-faq__answer {
    font-size: 14px;
  }

}


/* =========================================================
   PETITS ÉCRANS
========================================================= */

@media screen and (max-width: 420px) {

  .src-bc-project__title,
  .src-bc-intro__title,
  .src-bc-products__title,
  .src-bc-video__title,
  .src-bc-faq__title {
    font-size: 33px;
  }


  .src-bc-products__grid {
    gap: 22px 8px;
  }

}