/* --- PAGE D'ACCUEIL --- */

#accueil-top {
  padding-top: var(--LF084);
  padding-bottom: var(--LF056);
  background-color: var(--LFcol02);
}
#accueil-top .inner {
  align-items: center;
  justify-content: space-between;
}
.accueil-top-texte {
  width: 45.53%;
}
.accueil-top-texte h1 {
  margin-bottom: var(--LF016);
  color: var(--LFcol01);
}
.accueil-top-texte p {
  margin-bottom: var(--LF028);
}
.accueil-top-liens {
  gap: var(--LF020);
}
.accueil-top-image {
  width: 45.53%;
}
.accueil-top-deco {
  width: 100%;
  justify-content: center;
  gap: var(--LF007);
  margin-top: 9.1875rem;
}
.top-deco {
  width: var(--LF035);
  height: var(--LF016);
  background-color: #fff;
  border-radius: var(--LF020);
}
.top-deco.deco-1,
.top-deco.deco-5 {
  width: var(--LF083);
}
.top-deco.deco-3 {
  background-color: var(--LFcol01);
}

#accueil-bloc_2 {
  margin-top: var(--LF070);
  margin-bottom: var(--LF085)
}
#accueil-bloc_2 h2 {
  color: var(--LFcol01);
  text-align: center;
}

.accueil-bloc_2-liste {
  flex-wrap: nowrap;
  gap: var(--LF018);
  margin-top: var(--LF057);
}
.accueil-bloc_2-slide {
  width: calc(33.33333% - var(--LF012));
  justify-content: space-between;
}
.bloc_2-slide-picto {
  display: none;
  width: 20.98%;
}
.bloc_2-slide-texte {
  /*width: 73.83%;*/
  width: 100%;
  font-size: var(--LF017);
  line-height: var(--LF024);
}
.bloc_2-slide-texte h3 {
  
}

.accueil-bloc_2-blocs {
  position: relative;
  gap: var(--LF048);
  margin-top: var(--LF085);
}
.accueil-bloc_2-blocs:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--LF001);
  height: 100%;
  background-color: #000;
}
.accueil-bloc_2-blocs:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: var(--LF001);
  background-color: #000;
}
.accueil-bloc_2-bloc {
  width: calc(50% - var(--LF024));
  aspect-ratio: 2.24;
}
.accueil-bloc_2-bloc-texte {
  padding-left: var(--LF051);
  padding-right: var(--LF051);
  border-radius: var(--LF021);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.5;
}
.accueil-bloc_2-bloc-texte:first-child {
  color: #fff;
}
.accueil-bloc_2-bloc-texte p.titre {
  margin-bottom: var(--LF013);
  font-size: var(--LF040);
  line-height: var(--LF052);
}
.accueil-bloc_2-bloc-image {
  position: relative;
  max-height: 100%;
}
.accueil-bloc_2-bloc-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

#accueil-bloc_3 {
  overflow: hidden;
  padding-top: var(--LF072);
  padding-bottom: 7.5rem;
  background-color: var(--LFcol02);
}
#accueil-bloc_3 .inner {
  justify-content: space-between;
}
.accueil-bloc_3-texte {
  width: 39%;
  line-height: 1.5;
}
.accueil-bloc_3-texte h2 {
  color: var(--LFcol01);
}
.accueil-bloc_3-image {
  position: relative;
  width: 49%;
  aspect-ratio: 0.83;
}
.accueil-bloc_3-image .image {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.accueil-bloc_3-image .picto {
  display: none;
  z-index: 2;
  position: absolute;
  width: 11.4375rem;
  height: 12.0625rem;
  object-fit: cover;
  object-position: center center;
}
.accueil-bloc_3-image .picto-1 {
  top: var(--LF056);
  right: -6.3125rem;
}
.accueil-bloc_3-image .picto-2 {
  bottom: -3.5rem;
  left: -6.3125rem;
}

#accueil-plans {
  margin-top: var(--LF070);
  margin-bottom: var(--LF030);
}
#accueil-plans h2 {
  color: var(--LFcol01);
  text-align: center;
}
.plan-slider {
  align-items: center;
  justify-content: space-between;
  margin-top: var(--LF028);
}
.plan-images {
  position: relative;
  width: 74%;
  aspect-ratio: 2.48;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.plan-original {
  z-index: 2;
  opacity: 1;
  transition: all 0.2s;
}
.plan-images.hover .plan-original {
  opacity: 0;
}
.plan-liste {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transition: all 0.2s;
}
.plan-liste.visible {
  z-index: 3;
  opacity: 1;
}

.plan-boutons {
  width: 23.72%;
  flex-direction: column;
  gap: var(--LF006);
}
.plan-bouton {
  width: 100%;
  padding: var(--LF006);
  border-radius: var(--LF012);
  background-color: var(--LFcol01);
  font-size: var(--LF022);
  transition: all 0.2s;
}
.plan-bouton:hover {
  opacity: 0.8;
  color: #fff;
}

#accueil-maps {
  padding-top: var(--LF072);
  padding-bottom: var(--LF082);
  background-color: var(--LFcol02);
}
#accueil-maps h2 {
  color: var(--LFcol01);
  text-align: center;
}

.accueil-maps-map {
  margin-top: var(--LF028);
  justify-content: space-between;
}
#map-f {
  width: 57.64%;
  height: 21.75rem;
}
.map-liste {
  width: 40.68%;
  height: 21.75rem;
  padding: var(--LF016);
  background-color: #fff;
}
.map-liste-inner {
  height: 100%;
  overflow-y: auto;
  transition: all 0.2s;
}
.map-liste-inner.hidden {
  opacity: 0;
}
.map-list-element {
  margin-top: var(--LF012);
  padding-bottom: var(--LF012);
  border-bottom: var(--LF001) solid rgba(0, 0, 0, 0.36);
  font-size: var(--LF020);
}
.map-list-element:first-child {
  margin-top: 0;
}
.map-list-element-name {
  margin-bottom: 0;
  font-weight: 700;
}
.map-list-element-address {

}

.accueil-maps-boutons {
  align-items: center;
  justify-content: space-between;
  margin-top: var(--LF028);
}
.accueil-maps-bouton {
  width: 15.28%;
  height: var(--LF058);
  align-items: center;
  background-color: #fff;
  border-radius: var(--LF018);
  justify-content: center;
  font-size: var(--LF020);
  color: #000;
  text-align: center;
  transition: all 0.2s;
}
.accueil-maps-bouton.active,
.accueil-maps-bouton:hover {
  background-color: var(--LFcol01);
  color: #fff;
}

#accueil-bloc_6 {
  margin-top: var(--LF070);
  margin-bottom: var(--LF085);
}
#accueil-bloc_6 h2 {
  color: var(--LFcol01);
  text-align: center;
}
.accueil-bloc_6-blocs {
  position: relative;
  gap: var(--LF048);
  margin-top: var(--LF085);
}
.accueil-bloc_6-blocs:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--LF001);
  height: 100%;
  background-color: #000;
}
.accueil-bloc_6-blocs:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: var(--LF001);
  background-color: #000;
}
.accueil-bloc_6-bloc {
  width: calc(50% - var(--LF024));
  aspect-ratio: 2.24;
  padding-left: var(--LF045);
  padding-right: var(--LF045);
  border-radius: var(--LF021);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--LF017);
  line-height: var(--LF024);
  text-align: center;
}
.accueil-bloc_6-bloc:nth-child(2),
.accueil-bloc_6-bloc:nth-child(3) {
  border-radius: 0;
}
.accueil-bloc_6-bloc.bloc-logo {
  position: relative;
  padding-top: var(--LF056);
}
.accueil-bloc_6-bloc.bloc-logo:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--LF056);
  background-color: #0E323C;
}
.accueil-bloc_6-bloc.bloc-logo:after {
  content: '';
  position: absolute;
  top: -0.8125rem;
  left: 0.25rem;
  width: 7.625rem;
  height: var(--LF052);
  background-image: url(../img/beausite-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

#accueil-questions {
  padding-top: var(--LF072);
  padding-bottom: var(--LF082);
  background-color: var(--LFcol02);
  background-repeat: no-repeat;
  background-position: bottom left;
}
#accueil-questions h2 {
  color: var(--LFcol01);
  text-align: center;
}
.accueil-questions-questions {
  width: 57.56%;
  flex-direction: column;
  gap: var(--LF010);
  margin-left: auto;
  margin-right: 0;
  margin-top: var(--LF076);
}
.accueil-questions-question {
  padding-top: var(--LF013);
  padding-bottom: var(--LF010);
  padding-left: var(--LF021);
  padding-right: var(--LF021);
  border-radius: var(--LF031);
  background-color: #fff;
  cursor: pointer;
  transition:background-color 0.2s linear, color 0.2s linear;
}
.accueil-questions-question:hover {
  background-color: var(--LFcol01);
  color: #fff;
}
.accueil-questions-question .question {
  align-items: center;
  justify-content: space-between;
}
.accueil-questions-question .question svg {
  stroke: #000;
}
.accueil-questions-question:hover .question svg {
  stroke: #fff;
}
.accueil-questions-question.active .question {
  font-weight: 700;
}
.accueil-questions-question.active .question svg {
  transform: rotateX(180deg);
}
.accueil-questions-question .reponse {
  display: none;
  margin-top: var(--LF030);
  margin-bottom: var(--LF030);
}