.global * {
  margin: 0;
  padding: 0;
}

.global {
  font-family: "Fira Sans", sans-serif;
  /* max-width: 1440px; */
  margin: auto;
}

.global .header {
  background-image: url(https://boulanger.scene7.com/is/image/Boulanger/verisure-2006-produits_header?scl=1);
  background-size: cover;
  background-repeat: no-repeat;
  /* max-width: 1440px; */
  /* height: 1000px; */
  margin: auto;
  display: grid;
  gap: 20px;
  color: #ffffff;
  overflow: hidden;
}

.global .header > .img {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: -1;
}

.global .header .nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
  max-height: 100px;
}

.global .nav-logo .line {
  width: 0px;
  height: 60px;
  border: 1px solid #ffffff;
}

.global > .nav-logo > img {
  position: relative;
  max-width: 100%;
}

.global > .header > .titre {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.global .titre > h2 {
  font-size: 40px;
  font-weight: 900;
  -webkit-text-stroke: 1px;
  -webkit-text-fill-color: transparent;
}

.global .titre > .bold {
  font-size: 26px;
}

.global .bold {
  font-weight: 700;
}

.global .med {
  font-weight: 500;
}

.global .bold30 {
  font-size: 30px;
  font-weight: 700;
}

.global .med30 {
  font-size: 30px;
  font-weight: 500;
}

.global .semibold {
  font-weight: 600;
}

.global > .header > .scroll {
  text-align: center;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 460px 0px 60px;
}

.global .exclu {
  background-image: url(https://boulanger.scene7.com/is/image/Boulanger/verisure-2006-bg_dark_marble?scl=1);
  background-size: cover;
  background-repeat: no-repeat;
  height: 600px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.global .offre {
  /* max-height: 550px; */
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
}

.global .offre-limite {
  background-color: #ed002f;
  padding: 10px 22px;
  border-radius: 20px;
  max-width: 420px;
}

.global h3 {
  font-size: 20px;
}

.global h4 {
  font-size: 40px;
  color: #ffffff;
  text-transform: uppercase;
  height: fit-content;
}

.global .offre > .bold {
  font-size: 26px;
}

.global sup {
  font-size: 10px;
}

.global .offre-maison {
  background: radial-gradient(
    68.73% 68.73% at 50% 50%,
    #d9d9d9 0%,
    #636466 100%
  );
  border-radius: 40px;
  width: 640px;
  height: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
}

.global .btn-offre {
  background-color: #ed002f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  width: 200px;
  height: 42px;
  border-radius: 70px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}

.global .orion {
  background-image: url(https://boulanger.scene7.com/is/image/Boulanger/verisure-2006-Orion?scl=1);
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: end;
}

.global .desc-orion {
  background: rgba(18, 18, 18, 0.25);
  backdrop-filter: blur(4px);
  border-radius: 40px;
  width: 300px;
  display: grid;
  padding: 34px 60px;
  margin: 290px;
  color: #ffffff;
  grid-gap: 10px;
}

.global .desc-orion .bold30,
.global .desc-svk .bold30,
.global .desc-produits .bold30 {
  text-transform: uppercase;
  line-height: 36px;
}

.global .desc-orion .med {
  text-transform: uppercase;
  color: #dcddde;
}

.global .desc-orion > p,
.global .desc-svk > p {
  line-height: 24px;
}

.global .svk {
  background-image: url(https://boulanger.scene7.com/is/image/Boulanger/verisure-2006-SVK?scl=1);
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.global .desc-svk {
  background: rgba(18, 18, 18, 0.25);
  backdrop-filter: blur(4px);
  border-radius: 40px;
  width: 300px;
  display: grid;
  padding: 34px 60px;
  margin: 290px;
  color: #ffffff;
  grid-gap: 10px;
}

.global .produits {
  background: linear-gradient(180deg, #343434 0%, #646464 50%, #343434 100%);
  height: 560px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0px 70px;
}

.global .desc-produits {
  width: 310px;
  height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.global .desc-produits > div:not(.img-produit) {
  background: #e4e4e4;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 40px;
  height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 16px;
  text-align: center;
  line-height: 24px;
  gap: 10px;
}

.global .desc-produits .img-produit > img {
  position: absolute;
}

.global .img-produit {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.global .engagements {
  background-color: #343434;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
  justify-content: center;
}

.global .services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0px 70px;
}

.global .service {
  background: radial-gradient(
    49.68% 49.68% at 50% 50.32%,
    #ffffff 0%,
    #e4e4e4 100%
  );
  border-radius: 20px;
  width: 310px;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-gap: 5px;
  padding: 10px 0px;
  font-size: 14px;
  font-weight: 700;
}

.global .red {
  color: #ed002f;
}

.global .gamme-maison {
  background: linear-gradient(180deg, #343434 0%, #353535 100%);
  height: 700px;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center;
}

.global .gamme-details {
  position: relative;
  width: 860px;
  height: 460px;
  background: radial-gradient(
    68.73% 68.73% at 50% 50%,
    #ed002f 0%,
    #ab192d 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 40px;
  display: grid;
  justify-items: center;
  align-items: end;
}

.global .gamme-details > ul {
  text-align: start;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  position: relative;
  bottom: 30px;
}

.global .gamme-details > img {
  position: absolute;
  width: 80%;
  top: -50px;
}

.global .mentions-legales {
  height: 400px;
  display: grid;
  background-color: #353535;
  color: #ffffff;
  height: fit-content;
  padding: 70px;
  gap: 10px;
}

.global .mentions-legales > p {
  font-size: 10px;
  font-weight: 300;
  line-height: 16px;
}

.global .footer {
  height: 170px;
  background-color: #ed002f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10px;
  gap: 12px;
}

.global .footer .nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-height: 100px;
}

/* Responsive Small Screen Laptop */

@media only screen and (max-width: 1281px) {
  .global .produits {
    height: 100%;
    grid-template-columns: 1fr 1fr;
    padding: 20px 100px;
    gap: 10px;
  }

  .global .desc-produits {
    width: 100%;
    height: 100%;
    gap: 140px;
  }

  .global .desc-produits > div:not(.img-produit) {
    height: 100%;
    padding: 8px 20px;
    justify-content: center;
  }

  .global .desc-produits .img-produit > img {
    width: 20vh;
  }

  .global .engagements {
    height: 100%;
  }

  .global .services {
    grid-template-columns: 1fr 1fr;
    padding: 0px 100px;
    gap: 10px;
  }

  .global .service {
    width: 100%;
  }
}

/* Responsive Tablet */

@media only screen and (max-width: 1025px) {
  .global .header .scroll {
    gap: 10px;
    padding: 340px 0px 60px;
  }

  .global .desc-svk,
  .global .desc-orion {
    width: 100%;
    padding: 20px 30px;
    margin: 100px;
  }

  .global .produits {
    height: 100%;
    grid-template-columns: 1fr 1fr;
    padding: 20px 100px;
    gap: 10px;
  }

  .global .desc-produits {
    width: 100%;
    height: 100%;
    gap: 140px;
  }

  .global .desc-produits > div:not(.img-produit) {
    height: 100%;
    padding: 8px 20px;
    justify-content: center;
  }

  .global .desc-produits .img-produit > img {
    width: 20vh;
  }

  .global .engagements {
    height: 100%;
    padding: 20px;
  }

  .global .services {
    grid-template-columns: 1fr 1fr;
    padding: 0px 100px;
    gap: 10px;
  }

  .global .service {
    width: 100%;
  }

  .global .gamme-maison {
    padding: 20px;
  }

  .global .gamme-details {
    width: 100%;
    height: 100%;
  }

  .global .gamme-details > img {
    width: 70vh;
  }
}

/* Responsive Iphone XR */

@media only screen and (max-width: 426px) {
  .global .exclu {
    height: 100%;
    width: 100%;
    padding: 20px 0px;
  }

  .global .offre-limite {
    padding: 20px;
    max-width: 100%;
  }

  .global .offre-maison {
    height: 100%;
    width: 85%;
    padding: 20px 10px;
  }

  .global .desc-orion,
  .global .desc-svk {
    margin: 20px;
  }

  .global .produits {
    height: 100%;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding: 20px;
  }

  .global .desc-produits {
    width: 100%;
    height: 100%;
    gap: 155px;
  }

  .global .engagements {
    height: 100%;
    padding: 20px;
  }

  .global .services {
    height: 100%;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding: 0px 0px;
    justify-content: center;
  }

  .global .gamme-maison {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
  }

  .global .gamme-details {
    width: 100%;
    height: 40vh;
  }

  .global .gamme-details > img {
    width: 80%;
    top: -20px;
  }

  .global .gamme-details > ul {
    font-size: 16px;
  }

  .global .mentions-legales {
    padding: 20px;
  }
}

/* Responsive Iphone XR */

@media only screen and (max-width: 376px) {
  .global .gamme-details {
    width: 100%;
    height: 50vh;
  }
  .global .gamme-details > img {
    width: 80%;
    top: 0px;
  }
}