/* =========================================================
   BC RACING PAGE
========================================================= */

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

  overflow: hidden;

  background: #f3f3f3;

  color: #111;
}

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

  margin:
    0
    auto;
}


/* =========================================================
   HERO BC RACING — STYLE CATALOGUE / MARQUES
========================================================= */

.src-bc-hero {
  position: relative;

  padding:
    95px
    0
    90px;

  overflow: hidden;

  background: #e6e6e6;

  border-bottom:
    1px
    solid
    #d3d3d3;

  color: #111;
}

.src-bc-hero::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 31%;
  height: 100%;

  background: #dddddd;
}

.src-bc-hero::after {
  content: "";

  position: absolute;

  right: 7%;
  bottom: -140px;

  width: 330px;
  height: 330px;

  border:
    1px
    solid
    rgba(0, 0, 0, .06);

  border-radius: 50%;

  pointer-events: none;
}

.src-bc-hero__content {
  position: relative;

  z-index: 2;

  max-width: 790px;
}

.src-bc-hero__eyebrow {
  margin-bottom: 12px;

  color: #898989;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .17em;

  text-transform: uppercase;
}

.src-bc-hero__title {
  margin:
    0
    0
    28px;

  color: #111;

  font-size:
    clamp(
      54px,
      5.5vw,
      78px
    );

  font-weight: 750;

  line-height: .98;

  letter-spacing: -3.5px;
}

.src-bc-hero__title span {
  color: #111;
}

.src-bc-hero__title strong {
  display: block;

  color: #777;

  font-weight: inherit;
}

.src-bc-hero__text {
  max-width: 620px;

  margin: 0;

  color: #585858;

  font-size: 15px;

  line-height: 1.75;
}


/* =========================================================
   TYPOGRAPHIE COMMUNE
========================================================= */

.src-bc-eyebrow {
  margin-bottom: 12px;

  color: #929292;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .17em;

  text-transform: uppercase;
}

.src-bc-title {
  margin:
    0
    0
    25px;

  color: #111;

  font-size:
    clamp(
      31px,
      3vw,
      45px
    );

  font-weight: 750;

  line-height: 1.03;

  letter-spacing: -2px;
}

.src-bc-text {
  color: #585858;

  font-size: 14px;

  line-height: 1.75;
}

.src-bc-text p {
  margin:
    0
    0
    18px;
}

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

.src-bc-section-heading {
  max-width: 690px;

  margin-bottom: 42px;
}

.src-bc-section-heading p {
  max-width: 620px;

  margin:
    -8px
    0
    0;

  color: #666;

  font-size: 14px;

  line-height: 1.7;
}


/* =========================================================
   INTRO
========================================================= */

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

.src-bc-intro__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .95fr);

  gap: 75px;

  align-items: center;
}

.src-bc-intro__media {
  overflow: hidden;

  border-radius: 2px;

  background: #e7e7e7;
}

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

  width: 100%;
  height: auto;
}

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


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

.src-bc-features {
  display: grid;

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

  gap:
    0
    30px;

  margin-top: 30px;

  border-top:
    1px
    solid
    #d8d8d8;
}

.src-bc-feature {
  display: flex;

  gap: 10px;

  align-items: center;

  padding:
    14px
    0;

  border-bottom:
    1px
    solid
    #d8d8d8;

  color: #444;

  font-size: 12px;

  line-height: 1.4;
}

.src-bc-feature__dot {
  display: block;

  width: 5px;
  height: 5px;

  flex:
    0
    0
    5px;

  border-radius: 50%;

  background: #c9ad87;
}


/* =========================================================
   GAMMES
========================================================= */

.src-bc-series {
  padding:
    90px
    0;

  background: #ebebeb;

  border-top:
    1px
    solid
    #dedede;

  border-bottom:
    1px
    solid
    #dedede;
}

.src-bc-series__grid {
  display: grid;

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

  border-top:
    1px
    solid
    #d4d4d4;

  border-left:
    1px
    solid
    #d4d4d4;
}

.src-bc-series-card {
  min-width: 0;

  padding:
    26px
    24px;

  background:
    rgba(
      255,
      255,
      255,
      .22
    );

  border-right:
    1px
    solid
    #d4d4d4;

  border-bottom:
    1px
    solid
    #d4d4d4;
}

.src-bc-series-card__subtitle {
  margin-bottom: 9px;

  color: #999;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .13em;

  text-transform: uppercase;
}

.src-bc-series-card h3 {
  margin:
    0
    0
    12px;

  color: #111;

  font-size: 20px;
  font-weight: 750;

  letter-spacing: -.5px;
}

.src-bc-series-card p {
  margin: 0;

  color: #606060;

  font-size: 12px;

  line-height: 1.65;
}

.src-bc-series__note {
  max-width: 760px;

  margin:
    22px
    0
    0;

  color: #777;

  font-size: 12px;

  line-height: 1.65;
}


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

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

.src-bc-products__grid {
  display: grid;

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

  gap: 22px;
}

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

  overflow: hidden;

  background: #fff;

  border:
    1px
    solid
    #e0e0e0;
}

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

  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #f7f7f7;
}

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

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    transform
    .35s
    ease;
}

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

.src-bc-product-card__content {
  padding:
    18px
    18px
    20px;
}

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

  color: #999;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .14em;
}

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

  font-size: 14px;
  font-weight: 650;

  line-height: 1.4;
}

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

  text-decoration: none;
}

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

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

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

  padding:
    40px
    0;

  color: #777;

  font-size: 13px;
}

.src-bc-products__footer {
  display: flex;

  justify-content: center;

  margin-top: 35px;
}


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

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

  min-height: 46px;

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

  padding:
    0
    24px;

  background: #c9ad87;

  color: #111 !important;

  border:
    1px
    solid
    #c9ad87;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .03em;

  text-decoration: none !important;

  transition:
    background
    .2s
    ease,
    border-color
    .2s
    ease,
    transform
    .2s
    ease;
}

.src-bc-button:hover {
  background: #d3b995;

  border-color: #d3b995;

  transform: translateY(-1px);
}


/* =========================================================
   PROJET M5
========================================================= */

.src-bc-project {
  padding:
    95px
    0;

  background: #e9e9e9;

  border-top:
    1px
    solid
    #d9d9d9;

  border-bottom:
    1px
    solid
    #d9d9d9;
}

.src-bc-project__grid {
  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  gap: 75px;

  align-items: center;
}

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

.src-bc-project__content
.src-bc-button {
  margin-top: 27px;
}

.src-bc-project__media {
  overflow: hidden;

  background: #ddd;
}

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

  width: 100%;
  height: auto;
}


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

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

.src-bc-video__media {
  width: 100%;

  overflow: hidden;

  background: #e5e5e5;
}

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

  width: 100%;
  height: auto;

  max-height: 680px;

  background: #e5e5e5;
}


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

.src-bc-faq {
  padding:
    95px
    0
    110px;

  background: #eeeeee;

  border-top:
    1px
    solid
    #dddddd;
}

.src-bc-faq__list {
  max-width: 850px;

  border-top:
    1px
    solid
    #d2d2d2;
}

.src-bc-faq__item {
  border-bottom:
    1px
    solid
    #d2d2d2;
}

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

  min-height: 72px;

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

  gap: 30px;

  padding:
    0
    4px;

  cursor: pointer;

  list-style: none;

  color: #222;

  font-size: 14px;
  font-weight: 600;
}

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

.src-bc-faq__icon {
  position: relative;

  display: block;

  width: 16px;
  height: 16px;

  flex:
    0
    0
    16px;
}

.src-bc-faq__icon::before,
.src-bc-faq__icon::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  background: #777;

  transform:
    translate(
      -50%,
      -50%
    );

  transition:
    transform
    .2s
    ease;
}

.src-bc-faq__icon::before {
  width: 14px;
  height: 1px;
}

.src-bc-faq__icon::after {
  width: 1px;
  height: 14px;
}

.src-bc-faq__item[open]
.src-bc-faq__icon::after {
  transform:
    translate(
      -50%,
      -50%
    )
    rotate(90deg);
}

.src-bc-faq__answer {
  max-width: 720px;

  padding:
    0
    4px
    24px;
}

.src-bc-faq__answer p {
  margin: 0;

  color: #666;

  font-size: 13px;

  line-height: 1.75;
}


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

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

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

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

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

}


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

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

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


  /* HERO */

  .src-bc-hero {
    padding:
      65px
      0
      60px;
  }

  .src-bc-hero::before {
    width: 22%;
  }

  .src-bc-hero::after {
    right: -70px;
    bottom: -110px;

    width: 240px;
    height: 240px;
  }

  .src-bc-hero__title {
    margin-bottom: 22px;

    font-size:
      clamp(
        42px,
        11vw,
        58px
      );

    line-height: .98;

    letter-spacing: -2.2px;
  }

  .src-bc-hero__text {
    max-width: 90%;

    font-size: 13px;

    line-height: 1.65;
  }


  /* SECTIONS */

  .src-bc-intro,
  .src-bc-series,
  .src-bc-products,
  .src-bc-project,
  .src-bc-video,
  .src-bc-faq {
    padding:
      65px
      0;
  }


  /* INTRO */

  .src-bc-intro__grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .src-bc-intro__media {
    order: 1;
  }

  .src-bc-intro__content {
    order: 2;

    max-width: none;
  }


  /* TITRES */

  .src-bc-title {
    font-size:
      clamp(
        29px,
        8vw,
        38px
      );

    letter-spacing: -1.5px;
  }

  .src-bc-section-heading {
    margin-bottom: 32px;
  }


  /* FEATURES */

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


  /* GAMMES */

  .src-bc-series__grid {
    grid-template-columns: 1fr;
  }

  .src-bc-series-card {
    padding:
      24px
      20px;
  }


  /* PRODUITS */

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

    gap: 12px;
  }

  .src-bc-product-card__content {
    padding:
      13px
      12px
      15px;
  }

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

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


  /* PROJET */

  .src-bc-project__grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

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


  /* FAQ */

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

    gap: 20px;

    font-size: 13px;
  }

}


/* =========================================================
   PETITS MOBILES
========================================================= */

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

  .src-bc-products__grid {
    grid-template-columns: 1fr;
  }

}