/* MEDIA QUERIES */

@media not all and (min-width: 1536px) {
  :root {
    --wp--custom--wrapper--gap-block: 118px !important;
  }

  .div-video {
    width: 100% !important;
    left: 0 !important;
  }
}

@media not all and (min-width: 1280px) {
  .btn-contact {
    display: none !important;
  }

  .btn-contact-bottom {
    display: block !important;
  }

  .icon-burger {
    display: flex !important;
  }

  .menu-mobile {
    grid-template-rows: 0fr !important;
  }

  .menu-closed {
    grid-template-rows: 0fr !important;
  }

  .menu-opened {
    grid-template-rows: 1fr !important;
  }

  html {
    scroll-padding-top: 90px !important;
  }

  .modal-img {
    padding-top: 90px !important;
  }

}

@media not all and (min-width: 1024px) {
  :root {
    --wp--preset--font-size--56: 40px !important;
    --wp--preset--font-size--44: 32px !important;
    --wp--preset--font-size--32: 24px !important;
  }

  .btn-note-bottom,
  .btn-calculator-bottom {
    display: block !important;
  }
}

@media not all and (min-width: 768px) {
  :root {
    --wp--custom--wrapper--gap-block: 60px !important;
  }
}

@media not all and (min-width: 640px) {
  :root {
    --wp--preset--font-size--56: 32px !important;
    --wp--preset--font-size--44: 24px !important;
    --wp--preset--font-size--24: 20px !important;
  }

  .img-modal {
    object-fit: contain !important;
  }

  .piece .meuble {
    width: 100% !important;
    padding-inline: 10px !important;
  }

  .piece{
      grid-template-columns: repeat(2, minmax(0, 1fr))!important;
      padding-inline: 0 !important;
    }
}

@media not all and (min-width: 391px) {
}

/* GENERAL */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 154px;
}

p:empty {
  display: none;
}

:root {
  --black: var(--wp--preset--color--custom-black);
  --white: var(--wp--preset--color--custom-white);
  --light-blue: var(--wp--preset--color--custom-light-blue);
  --bright-blue: var(--wp--preset--color--custom-bright-blue);
  --dark-blue: var(--wp--preset--color--custom-dark-blue);
  --turquoise: var(--wp--preset--color--custom-turquoise);
  --px: var(--wp--custom--wrapper--px);
  --gap-main: var(--wp--custom--wrapper--gap-main);
  --gap-block: var(--wp--custom--wrapper--gap-block);
}

.font-marmelad {
  font-family: var(--wp--preset--font-family--marmelad) !important;
}

.font-gafata {
  font-family: var(--wp--preset--font-family--gafata) !important;
}

/* HEADER */

.div-header {
  transition: all 0.3s ease-out;
}


.div-header {
  background: var(--white);
  box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.08);
}

.div-under-header {
  -webkit-backdrop-filter: blur(15.5px);
  backdrop-filter: blur(15.5px);
  transform: translate3d(0, 0, 0);
}

html[data-scroll="0"] .div-under-header {
  background-color:  rgba(255, 255, 255, 0.10);
}

html:not([data-scroll="0"]) .div-under-header,
body.error404 .div-under-header,
body.page-id-2145 .div-under-header {
  background-color: rgba(3, 3, 10, 0.6);
}

.logo-header {
  transition: fill 0.3s ease-out;
}

.logo-header {
  fill: var(--black);
}

.logo-header:hover{
  fill: #0B79BB;
}

.nav-under-header .menu-item a {
  position: relative;
  font-family: var(--wp--preset--font-family--marmelad);
  font-size: var(--wp--preset--font-size--p);
  color: var(--white);
  transition: all 0.3s ease-out;
}

.nav-under-header .menu-item a:hover,
.nav-under-header .current-menu-item a{
  color: #CEF8FF;
}

.nav-under-header .menu-item a::after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #CEF8FF;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-out;
}

.nav-under-header .menu-item a:hover::after,
.nav-under-header .current-menu-item a::after {
  transform: scaleX(1);
  transform-origin: left;
} 

.btn-contact-bottom,
.btn-note-bottom,
.btn-calculator-bottom {
  display: none;
}

/* MENU MOBILE */

.menu-mobile {
  display: grid;
  z-index: 2;
  max-height: 100dvh;
  transition: all 0.4s ease-out;
}

.menu-closed {
  grid-template-rows: 1fr;
}

.menu-opened {
  grid-template-rows: 1fr;
}

.nav-ul {
  max-height: calc(100dvh - 150px);
  padding-right: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color:  var(--white) transparent;
}

.icon-burger {
  display: none;
  position: relative;
  justify-content: flex-start;
  padding: 12px 24px;
  width: 95px;
  height: 50px;
  overflow: hidden;
  background: var(--bright-blue);
  transition: background 0.3s ease-out;
}

.icon-burger:hover {
  background: #1BA4C6;
}

.icon-burger-text-wrapper {
  position: absolute;
  left: 0;
  top: 50%;
  height: 22px;
  transform: translateY(-50%);
  transition: transform 0.3s ease-out;
}

.icon-burger.active .icon-burger-text-wrapper {
  transform: translateY(-150%);
}

.icon-burger span {
  color: var(--black);
  text-align: center;
  width: max-content;
  font-family: var(--wp--preset--font-family--marmelad);
  font-size: var(--wp--preset--font-size--p);
  transition: all 0.3s ease-out;
}

.icon-burger:hover span {
  color: var(--white);
}

/* FOOTER */

.logo-footer {
  fill: var(--black);
  transition: fill 0.3s ease-out;
}

.logo-footer:hover {
  fill: #0B79BB;
}

.link-footer {
  display: flex;
  gap: 10px;
  align-items: center;
}

.link-footer svg{
  fill: var(--black);
  transition: fill 0.3s ease-out;
}

.link-footer:hover svg {
  fill: var(--dark-blue);
}

.link-footer span {
  color: var(--black);
  transition: color 0.3s ease-out
}

.link-footer:hover span {
  color: var(--dark-blue);
}

/* CUSTOM BTN */

.btn-news a,
.btn-calculator a,
.btn-contact a,
.btn-callback{
  display: block;
  padding: 12px 24px;
  text-align: center;
  width: max-content;
  font-family: var(--wp--preset--font-family--marmelad);
  font-size: var(--wp--preset--font-size--p);
  transition: all 0.3s ease-out;
}


.btn-news a {
  color: var(--black);
  border: solid 1px var(--black);
  background: transparent;
}

.btn-news a:hover {
  background: rgba(3, 3, 10, 0.2);
}

.btn-calculator a,
.btn-callback {
  background: var(--light-blue);
}

.btn-calculator a:hover,
.btn-callback:hover {
  background: #62AFF8;
}

.btn-contact a {
  color: var(--black);
  background: var(--bright-blue);
}

.btn-contact a:hover {
  color: var(--white);
  background: #1BA4C6;
}

/* BTN CALLBACK */

.btn-callback {
  position: fixed;
  z-index: 999;
  right: 0;
  top: 174px; 
  box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.08);
}

.pop-up-callback {
  position: fixed;
  z-index: 1001;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgba(20, 19, 19, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.pop-up-callback.active {
  opacity: 1;
  pointer-events: all;
}

.icon-close-pop-up{
  align-self: flex-start;
  cursor: pointer;
  stroke: var(--black);
  transition: stroke 0.3s ease-out;
}

.icon-close-pop-up:hover {
  stroke: var(--turquoise);
}

/* HERO */

.div-video {
  position: absolute;
  overflow: hidden;
  top: 0;
  width: calc(100% - 40px);
  left: 20px;
  height: 100%;
}

.video-hero,
.video-img-hero {
  position: absolute;
  aspect-ratio: 16/9;
  left: 50% !important;
  top: 50% !important;
  transform: translatex(-50%) translateY(-50%) !important;
  height: auto !important;
  min-width: 113% !important;
  min-height: 115% !important;
}

.video-hero {
  width: auto !important;
  z-index: 2;
}

.video-img-hero  {
  z-index: 1;
  width: 100% !important;
}

.div-video::after {
  position: absolute;
  content: '';
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 19, 0.50);
}

.icon-sound {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--white);
  border-radius: 4px;
  padding: 8px;
  width: 48px;
  height: 48px;
  opacity: 0.6;
  transition: opacity 0.3s ease-out;
}

.icon-sound:hover {
  opacity: 1;
}

.btn-discover {
  background: var(--bright-blue);
  transition: background 0.3s ease-out
}

.btn-discover:hover {
  background: #1BA4C6;
}

/* CONTACT */

div.wpforms-container-full:not(:empty) {
  margin: 0 !important;
}

.wpforms-field-container label,
legend,
.modern-title {
  font-size: var(--wp--preset--font-size--p) !important;
  font-family: var(--wp--preset--font-family--roboto) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.wpforms-required-label {
  display: none !important;
}

.wpforms-field-container label:not(.wpforms-field-label-inline),
legend {
  padding-bottom: 6px !important;
}

.wpforms-container .wpforms-field {
  padding-bottom: 16px !important;
  padding-top: 0 !important;
}

.wpforms-submit::after {
  border: none !important;
  position: inherit !important;
}

.choice-1 {
  align-items: center !important;
}

.btn-envoi-form {
  display: block !important;
  padding: 12px 24px !important;
  text-align: center !important;
  width: max-content !important;
  font-family: var(--wp--preset--font-family--marmelad) !important;
  font-size: var(--wp--preset--font-size--p) !important;
  color: var(--black) !important;
  border: solid 1px var(--black) !important;
  background: transparent !important;
  transition: all 0.3s ease-out !important;
}

.btn-envoi-form:hover {
  background: rgba(3, 3, 10, 0.2) !important;
}

/* EFLSIGHT */

.es-embed-root {
  max-width: 100% !important;
}

/* MODAL IMAGE */

@keyframes fadeInModal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOutModal {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.click-img {
  overflow: hidden;
}

.click-img img {
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.4s ease-out;
}

.click-img:hover img {
  transform: scale(1.05);
}

.modal-img {
  position: fixed;
  display: none;
  flex-direction: column;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-top: 154px;
  margin-left: 0 !important;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 1001;
}

.modal-img.preview {
  display: flex;
  width: calc(100vw - 280px);
  height: calc(100vh - 64px);
  top: 64px;
}

.container-div-img {
  width: 100%;
  height: calc(100% - 48px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-img-modal {
  overflow: hidden;
  height: 100%;
}

.modal-img.preview .div-img-modal {
  width: 50%;
  background: white;
}

.img-modal {
  height: 100%;
  object-fit: cover;
  cursor: default;
}

.icon-close-modal {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}

.icon-close-modal svg {
  stroke: var(--white);
  transition: stroke 0.3s ease-out;
}

.icon-close-modal:hover svg {
  stroke: var(--bright-blue);
}

/* FURNITURE CALCULATOR */

#calculateur{
  width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 40px;
	font-family: var(--wp--preset--font-family--roboto)
}

#calculateur p{
	margin: unset
}

#meubles{
	width: 70%;
}

#pieces{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

}

#pieces > a{
	padding: 12px 24px;
	color: var(--black);
  font-family: var(--wp--preset--font-family--marmelad);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
  background-color: #DCECFD;
  transition: background-color 0.3s ease-out;
}

#pieces > a:hover, #pieces > a.selected{
	background-color: var(--light-blue)
}

.piece{
	display: grid;
	padding: 20px;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, 172px);
	justify-content: space-evenly;
}

.piece .meuble{
	padding: 20px;
	display: flex;
	flex-direction: column;
  align-items: center;
	justify-content: space-between;
	gap: 20px;
  background: #EFF7FF;
  transition: background 0.15s ease-out;
}

.piece .meuble.selected{
	background: var(--light-blue);
}

.piece .meuble img{
	width: 100%;
  max-width: 50px;
	object-fit: contain;
}

.piece .meuble-title{
	text-align: center;
}

.buttons_quantity{
	display: flex;
	flex-direction: row;
	justify-content: center;
  align-items: center;
	gap: 5px
}

.buttons_quantity button{
  display: flex;
  align-items: center;
  justify-content: center;
	height: 30px;
	width: 30px;
	border: 1px solid;
  color: var(--black);
  transition: all 0.3s ease-out;
}

.buttons_quantity button.button-minus{
  border-color: var(--black);
}

.buttons_quantity button.button-plus{
  border-color: var(--dark-blue);
	background-color: var(--dark-blue);
}

.buttons_quantity button.button-minus:hover {
  background-color: rgba(20, 19, 19, 0.50);
}

.buttons_quantity button.button-plus:hover {
  background-color: #0B79BB;
  border-color: #0B79BB;
}

.piece .quantity_badge{
  display: flex;
  justify-content: center;
  align-items: center;
	width: 20px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 100%;
	text-align: center;
  font-size: 10px;
  color: var(--white);
  background: var(--black);
  transition: all 0.15s ease-out;
}

.piece .quantity_badge.unset {
  background: transparent;
  color: var(--black);
}


.piece:not(.selected){
display: none;
}

#inventaire{
	width: 30%;
	border: solid 2px var(--e-global-color-primary);
	border-radius: 5px;
}

#inventaire-top{
  display: flex;
  flex-direction: column;
  border: solid 1px var(--light-blue);
}

#inventaire-bottom {
  display: flex;
  width: 100%;
}

#inventaire-bottom button {
  width: 50%;
}

#inventaire-title {
  display: flex;
  align-items: center;
  padding: 20px 40px;
  background: var(--light-blue);
}

#inventaire .list{
	padding: 20px 40px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

#inventaire .meuble{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 5px
}

#inventaire .meuble-count{
  display: flex;
  align-items: center;
  justify-content: center;
	width: 20px;
  aspect-ratio: 1;
  height: auto;
  border-radius: 100%;
	text-align: center;
	color: var(--white);
  font-size: 10px;
  background: var(--black);
}

#inventaire .meuble-title{
	width: calc(100% - 85px);
}

#inventaire .reset-button, #inventaire .send-button{
	display: flex;
	padding: 12px 24px;
	justify-content: center;
  align-items: center;
  font-family: var(--wp--preset--font-family--marmelad);
  transition: background 0.3s ease-out;
}

#inventaire .reset-button{
	background: transparent;
  border: solid 1px var(--black); 
	color: var(--black);
}

#inventaire .reset-button:hover {
  background: rgba(20, 19, 19, 0.50);
}

#inventaire .send-button{
	color: var(--black);
	background: var(--bright-blue);
}

#inventaire .send-button:hover {
  background: #1BA4C6;
}

#inventaire a.unset{
	display: none !important
}

#wpforms-562 {
  width: 100% !important;
}

#wpforms-562-field_2 {
  display: none !important;
}

.wpforms-field-container table {
  width: 100%;
}

.wpforms-field-container thead th{
  padding: 12px 24px;
  background: var(--dark-blue);
  font-weight: 700;
  text-align: start;
  font-family: var(--wp--preset--font-family--roboto);
  border-right: solid 1px var(--white);
}

.wpforms-field-container thead th:last-child {
  border-right: none !important;
}

.wpforms-field-container tbody td {
  padding: 12px 24px;
  background: var(--white);
  font-family: var(--wp--preset--font-family--roboto);
  border-right: solid 1px var(--light-blue);
}

.wpforms-field-container tbody td:last-child {
  border-right: none !important;
}

.table-recap {
  min-width: 640px;
}

.table-presta {
  min-width: 1024px;
}

.table-presta tbody img{
  margin-inline: auto !important;
}

.table-recap th, td {
  width: 33.33%;
}

.table-presta th, td {
  width: 16.66%;
}

#wpforms-562-field_2-container .total {
  width: fit-content;
  margin-left: auto !important;
  padding-top: 20px;
}

#wpforms-562-field_60, 
#wpforms-562-field_2-container {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bright-blue) transparent ;
  padding-bottom: 20px !important;
}

.wpforms-field-divider {
  margin-top: 0 !important;
}

#wpforms-submit-562 {
  display: block !important;
  padding: 12px 24px !important;
  text-align: center !important;
  width: max-content !important;
  font-family: var(--wp--preset--font-family--marmelad) !important;
  font-size: var(--wp--preset--font-size--p) !important;
  color: var(--black) !important;
  background: var(--bright-blue) !important;
  border: none !important;
  transition: all 0.3s ease-out !important;
}

#wpforms-submit-562:hover {
  color: var(--white) !important;
  background: #1BA4C6 !important;
}

@media screen and (min-width: 1025px){
	#inventaire{
		position: sticky;
		top: 170px;
	}
}
@media screen and (max-width: 1024px){
	#calculateur{
		flex-direction: column !important
	}
	#meubles, #inventaire{
		width: 100%
	}
}

@media screen and (max-width: 767px){
	#pieces{
		flex-wrap: wrap;
	}
	#pieces a{
		width: 50%
	}
}

/* MENTIONS LEGALES */

.netdev-mentions-legales {
  width: 100%;
}

.netdev-mentions-legales h2 {
  padding-top: 40px;
  padding-bottom: 20px;
  color: var(--dark-blue);
}

.netdev-mentions-legales a {
  font-weight: 700;
  color: var(--black);
  word-break: break-all;
  transition: color 0.3s ease-out;
}

.netdev-mentions-legales a:hover {
  color: var(--bright-blue);
}