/*
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/**********/
/* HEADER */
/**********/
.header {
  position: relative;
  background-color: var(--primary-4);
  width: 100vw;
  z-index: 50;
}
.header .link:hover {
  text-decoration: underline;
}
.header-content {
  background-color: inherit;
  padding: 2.4rem 0;
}
.header-left .flex {
  color: var(--primary-1);
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
}
.header-right {
  align-items: flex-end;
  flex-direction: column;
  gap: 0;
}
.header-right--top,
.header-right--top .link:link,
.header-right--top .link:visited {
  color: var(--primary-1);
  gap: 4rem;
}
.header-right--bottom,
.header-right--bottom .link:link,
.header-right--bottom .link:visited,
.nav-item .link {
  color: var(--white);
}
.container--nav {
  background-color: var(--primary-3);
  width: 100vw;
}
.nav-menu {
  background-color: inherit;
}
.nav-item {
  font-size: 2rem;
  text-align: center;
  padding: 1.8rem 0 3.6rem 0;
  flex: 1;
}
.nav-item .flex {
  flex-direction: column;
  gap: 0;
}
.nav-item .icon {
  color: var(--primary-4);
}
.nav-selected,
.nav-selected .icon {
  color: var(--white);
  background-color: var(--primary-4);
}

.nav-item:hover .icon {
  color: var(--white);
}

/********/
/* MAIN */
/********/
.container--content {
  /* position: relative; */
  /* background: transparent url('/img/BG - Hexagones main.jpg') repeat-x left top; */
  background-image: url('/img/BG - Hexagones main.jpg');
  background-repeat: repeat-x !important;
  background-position: left top;
  background-color: transparent;
  width: 100vw;
  /* height: 100%; */
}
.content {
  /* position: absolute;
  left: 50%;
  top: -1.8rem; */
  background-color: var(--white);
  width: 100%;
  padding: 1.6rem 2rem 10.8rem;
  /* margin-top: -1.8rem; */
  /* transform: translateX(-50%); */
}
.breadcrumbs {
  margin-bottom: 4rem;
}
.content-title {
  text-align: center;
  margin-bottom: 3.2rem;
}
.container--main section {
  background-color: var(--white);
}
.container-grid {
  max-width: 776px;
  margin: 0 auto;
}

/***************/
/* MAIN - HOME */
/***************/
.carousel-slide {
  display: none;
  height: 100%;
  max-height: 47rem;
  transition: 0.4s;
}
.carousel-caption {
  background: url(/img/CAROUSEL\ -\ Home\ right\ part.png) no-repeat;
  padding: 6.4rem;
}
.carousel-caption-title {
  font-size: 5rem;
  line-height: 1;
  /* margin-bottom: 2.4rem; */
}
.carousel-caption-content {
  line-height: 1.2;
  margin-bottom: 2.4rem;
}
.carousel-nav {
  margin-bottom: 6.4rem;
}
.carousel-list {
  background-color: var(--primary-6);
  text-align: center;
}
.carousel-list-item {
  color: var(--primary-3);
  font-size: 2rem;
  line-height: 1;
  border-left: 1px solid var(--primary-4);
  cursor: pointer;
  padding: 1.4rem 0;
  transition: 0.4s;
}
.carousel-list-item:hover {
  color: var(--primary-2);
}
.carousel-list-item:nth-child(1) {
  border: none;
}
.carousel-selected {
  color: var(--primary-2);
  font-weight: 600;
}

.slide-fauteuils {
  background: url(/img/CAROUSEL\ -\ Home\ fauteuils.jpg) no-repeat;
}
.slide-quadriporteurs {
  background: url(/img/CAROUSEL\ -\ Home\ quadriporteurs.jpg) no-repeat;
}
.slide-posture {
  background: url(/img/CAROUSEL\ -\ Home\ posture.jpg) no-repeat;
}
.slide-domicile {
  background: url(/img/CAROUSEL\ -\ Home\ domicile.jpg) no-repeat;
}

.container--main .section-cta {
  background-color: var(--cta-2);
  color: var(--cta-1);
  width: 100%;
  padding: 1.2rem 2.4rem;
  margin-bottom: 6.4rem;
}
.cta-banner {
  font-size: 2.4rem;
  font-weight: 600;
  justify-content: center;
  gap: 3.2rem;
}

.why-cols {
  padding-left: 2rem;
}
.why-col-left {
  padding-right: 2rem;
}
.why-title {
  line-height: 1;
  /* margin-bottom: 2rem; */
}
.why-content {
  margin-bottom: 1.2rem;
}
.why-col-left .link {
  margin-bottom: 2rem;
}
.why-col-right {
  background-color: var(--extra-light-grey);
  text-align: center;
  justify-content: flex-start;
  gap: 0;
  padding-top: 3.6rem;
}
.why-contact {
  line-height: 1.5;
  justify-content: flex-start;
  gap: 0;
}
.why-phone-icon {
  color: var(--primary-4);
  width: 6.2rem;
  height: 6.2rem;
  margin-bottom: 1rem;
}
.why-col-right .heading-tertiary {
  margin-bottom: 0.5rem;
}
.why-address {
  gap: 0;
}
.why-address .btn {
  margin-top: 2.4rem;
}

.section-conseils {
  padding: 2rem 2rem 9.8rem;
}
.conseils-list {
  align-items: flex-start;
  margin-bottom: 3.2rem;
}
.heading-conseils {
  font-size: 3rem;
  font-weight: 400;
}
.conseils-item {
  align-items: flex-start;
  gap: 0;
}
.conseils-item-title {
  margin-bottom: 1.2rem;
}
.conseils-item-description {
  margin-bottom: 1.2rem;
}
.conseils-tag.link:link,
.conseils-tag.link:visited {
  background-color: var(--extra-light-grey);
  color: var(--medium-grey);
  font-size: 1.4rem;
  padding: 0.4rem 0.8rem;
}
.conseils-tag.link:hover,
.conseils-tag.link:active {
  background-color: var(--primary-6);
  color: var(--primary-1);
}
.conseils .btn {
  align-self: flex-end;
}

/******************/
/* MAIN - PRODUCT */
/******************/
.product {
  position: relative;
  width: 388px;
  height: 388px;
  transition: 0.4s;
}
.product-first-row {
  text-align: center;
  grid-column: 1 / -1;
  margin: 0 auto;
}
.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 0.4s;
}
.img-product {
  display: block;
  margin: 0;
  width: 388px;
  height: 388px;
  transition: 0.4s;
}

.product:hover {
  transform: scale(1.025);
}
.overlay:hover {
  background-color: rgba(0, 151, 172, 0.2);
}

/**********/
/* FOOTER */
/**********/
.footer {
  color: var(--white);
}
.footer-nav {
  background: url(/img/BG\ -\ Hexagones\ footer.png) no-repeat 82% center var(--primary-2);
  width: 100vw;
}
.container--footer {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3.2rem;
  max-width: 100rem;
  padding: 2rem 0;
  margin: 0 auto;
}
.footer-list {
  line-height: 2;
  align-items: flex-start;
  gap: 0;
}
.footer-list .link:link,
.footer-list .link:visited {
  color: var(--white);
}
.footer-list .link:hover,
.footer-list .link:active {
  color: var(--primary-4);
}
.footer-sublist {
  margin-bottom: 0.8rem;
}
.footer-sublist-item {
  line-height: 1.2;
  padding-left: 0.8rem;
}
.footer .icon {
  color: var(--white);
  transition: 0.4s;
}
.footer .icon:hover {
  color: var(--primary-5);
}
.footer-copyright {
  background-color: var(--primary-1);
  font-size: 1.2rem;
  padding: 0;
}
.container--copyright {
  max-width: 100rem;
  padding: 1.2rem 0;
  margin: 0 auto;
}