/* mobile.css */
@media (max-width: 768px) {
:root {
  --primary-color: #211D1D;
  --secondary-color: #FFFFFF;
  --opacity-color: lch(11.21% 2.05 19.9 / 0.05);
  --background-color: #F8F6F6;
  --background-color2: #e8e8e8;

  --border-radius: 3vw ;
  --shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1);
  --shadow-filter: drop-shadow(0 1vw 1vw rgba(0, 0, 0, 0.1));
}



  p {
  font-size: 2.7vw;
}

h1 {
  font-size: 8vw;
  font-weight: 500;
}
h2 {
  font-size: 1.5rem;

}

h3 {
  font-size: 4vw;
  font-weight: 500;
}
h4 {
  font-size: 3vw;
  font-weight: 500;
}
h5 {
  font-size: 2.5vw;
  margin: 0;
}
h6 {
  font-size: 2vw;
  margin: 0;
}



.title-header h3 {
  font-size: 4vw;
}

header {
  
  position: initial;
    height: 20vw;
    justify-content: center;
}
main {
  flex: 1 0 auto; 
  padding:  0vw 0 1% 0% ;  
  width: 100%;
  height: 100%;
  justify-self: flex-start;
  align-self: center;
  display: flex;
  flex-direction:column-reverse;
  align-items: flex-start;
  gap: 10vw;
  max-height: none;
  overflow: visible;
}

.logo img {
    width: 6vw ;
    height: 6vw ;
}

.icons  {
    display: none
    
}
.brick-container {
  position: relative;
  width: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
  height: 10vh;
}

.left-part {
  height: auto;
  width: 90%;
  max-height: none;
  min-height: max-content;
  align-self: center;

}
.visual-container {
  height: 50vw;
  position : relative;
  overflow: hidden;
}
.visual {
  height: 100%;
  position : relative;
  overflow: hidden;
}
.shape-Models {
  filter: drop-shadow(var(--shadow));
}


.visual.hide-svg {
    height: 10vw;
    overflow: hidden;
    transition: height 0.6s ease;
    margin:  0vw 0  1vw 0;
    padding: 1vw 0 0  0;
}
.more-models {
  gap: 2vw;
}
.more-models img {
  width: 3vw;
  height: 3vw;
  transform: rotate(-90deg);
  border-radius: 90vw;
  background-color: var(--secondary-color);
  padding: 1vw;
  filter: invert(100%);
}
.catalog {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 0;
  scroll-behavior: smooth;
  padding-top: 2vw;
  align-self: flex-end;
  padding-bottom: 4vw;
  max-height: none;
  height: 37vw;
  min-height: 3vw;
  width: 100%;
}
.card {
  height: 60%;
  margin-left: 5%;
  max-height: 17vw;
  max-width: 45vw;
  padding: 3vw 5vw;
}
.card h3{
  font-size: 4vw;
}
.card img {
  position: absolute;
  width: 65%;
  height: auto;
  object-fit: cover;
  border-radius: 1vw;
  top: -45%;
  left: 2%;
  z-index: 0;
}

.all-price {
flex-direction: column;
  gap: 0.4vw;
}
.all-price .price {
  font-size: 4vw;

}
.all-price .explanation {
  font-size: 2.2vw;
}

.left-part.expanded {
  width: 90%;
  align-self: center;
}
/* Agrandir le catalogue */
.catalog.expanded {
  width: 100%;
    height: max-content;
    max-height: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    overflow-y: visible;
    row-gap: 10vw;
    padding: 10vw 0;
    
    transition: all 0.5s ease-in-out;
}

/* Les cartes prennent 30% de largeur */
.catalog.expanded .card {
    width: 40%;
    height: 14vw;
    max-height: none;
    padding: 2vw 3vw;
    border-radius: var(--border-radius);
    aspect-ratio: 4 ;
    border-radius: 5vw;
    margin-left: 0;
}
.catalog.expanded .card .all-price .price{
    font-size: 2.5vw;
}
.catalog.expanded .card .all-price .explanation{
    font-size: 1.8vw;
}
.catalog.expanded .card img{
    width: 55%;
    top: -35%;
    left: 2%;
}

.card.selected {
  box-shadow:
    inset 0 -2vw 0 0vw var(--primary-color),
    inset 0 0 0 0.5vw var(--primary-color);
}

  
.shape-Models-mobile {
  display:initial;
  width: 100%;
  height: 100%;
  filter: var(--shadow-filter);
}

.shape-Models {
  display: none;
}
.container-visualBtn {
  width: 9%;
  left: 2vw;
  gap: 2vw;
}

.visualBtn {
  border-radius: 1vw;
}
.visualBtn.active {
  box-shadow: inset 0 -0.7vw 0 0vw rgb(0, 0, 0);
}
.visualBtn img{
  width: 4vw ;
}
.expandBtn {
  display: none;
}

.carousel-container {
  width: 60vw;
  position: absolute;
  margin: none;
  bottom: 2%;
  left: 2%;
  align-self: flex-start;
}
.slider-container {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto; 
}
.slider-container button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 15%;
  height: auto;
}


.searchBox{
  display: none;
}
.searchBox-more-models-container{
  right: 0;
  left:auto;
}

.right-part .price {
  height: 9vw !important;
}
.summary-container {
  width: 50vw;
  height: 20vh;
}


.right-part {
  width: 90%;
  height: min-content;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-column-gap: 4%;
  grid-row-gap: 4%;
  position:initial;
  align-self: center;
    max-height: 60vh;
  justify-self: flex-start;
  
}

.visual-container { grid-area: 1 / 1 / 2 / 3; }
.summary-container { grid-area: 2 / 1 / 4 / 2; }
.price{ grid-area: 2 / 2 / 3 / 3; }
.brand{ grid-area: 3 / 2 / 4 / 3; }



  .description {
    display: none;
  }
  .model , .right-part .price {
  height: 24vw;
  width: 100%;
}
.right-part .price p {
  font-size: 3vw;
}
.model {
  padding: 3vw;
  width: 47vw;

}


.part-bottom {
  display: flex;
  width: 100%;
  height: 70vw;
  min-height: 70vw;
  gap: 4vw;; 
}
.brand {
  flex: 1;
  height: 100%;
  min-width: none; 
  position: relative;
  overflow: hidden;
}
.presentation-configure {
  width: 50%;
  gap: 4vw;
}

.presentation-icons {

  gap: 2vw; 

  
}
.presentation-info {
  gap: 2vw;
  padding: 0.5vw;
  text-align: center;
  font-size: 2.5vw;
}
.presentation-info img {
    width: 10vw;
}


.configure .configureBtn {
  display: none;

}


*::-webkit-scrollbar {
  display: none;
}










.mobile-bottom-nav {
  position: fixed;
  bottom: -1vw;
  left: 0vw;
  height: auto;
  padding: 4vw 0 8vw 0;
  width: 100vw;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -1vw 1vw rgba(0, 0, 0, 0.1);
  border-radius: 4vw 4vw 0 0;
  
}

.nav-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
  height: 12vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.nav-btn img{
  width: 7vw;
  height: 7vw;
}
.nav-btn p {
  margin: 0;
  font-size: 3vw;
}

.nav-btn:active {
  transform: scale(0.95);
}
.configureBtn-Mobile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  gap: 2vw;
  border: 0.6vw solid var(--primary-color);
  padding: 2vw 4vw;
  border-radius: 5px;
  height: 12vw;
}
.configureBtn-Mobile img {
  width: 2.5vw;
  height: 2.5vw;
}
.searchBox-more-models-container {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
  padding: 2vw 0 0 1.5vw ;
  border-radius: 2vw 0 0 0;
  width: fit-content;
  height: fit-content;
}

/* Décorations visuelles */
.searchBox-more-models-container:before {
  content: "";
  position: absolute;
  top: -12vw;
  left: 19.5vw;
  height: 12vw;
  width: 4vw;
  border-bottom-left-radius: 2vw;
  background-color: transparent;
  box-shadow: 0 4vw 0 0 var(--background-color);
  transform: scaleX(-1);
}

.searchBox-more-models-container::after {
  content: "";
  position: absolute;
  bottom: -0.01vw;
  left: -4vw;
  height: 12vw;
  width: 4vw;
  border-bottom-left-radius: 2vw;
  background-color: transparent;
  box-shadow: 0 4vw 0 var(--background-color);
  transform: scaleX(-1);
}
}