/* FIX MAX WIDTH BANNER SUSPENSIONS */

#builder-top-header .builder-max-width-banner {
      max-width: 1920px;
      width: 90vw;
      column-gap: 24px;
} 

/* FIX MAX WIDTH COLONNE */

.builder-max-width-column {
      max-width: 2000px;
      width: 100%;
      padding: 0 40px;       
      margin: auto;
} 

@media screen and (max-width: 980px) {
    .builder-max-width-column {
        padding: 0; 
        width: 90%;
    }
}

/* font */

#builder-top-header .builderHeading {
    font-size: 2.5rem;
}

#builder-top-header .builderText {
    font-size: 16px;
}

#builder-bottom-banner .builderText {
    font-size: 14px;
}


/* 2 colonnes tablet  */

@media screen and (max-width: 980px) {

     .builder-column-tablet,
     .builder-column-tablet-reverse {
        flex-direction: row !important;
    }    
    
    
}

@media screen and (max-width: 600px) {

     .builder-column-tablet {
        flex-direction: column !important;
    }
    
     .builder-column-tablet-reverse {
        flex-direction: column-reverse !important;
    }
}



/* Button primary - dark BG */

.builder-btn-primary-dark a {
	color: #212121 !important;
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.builder-btn-primary-dark a:hover {
	color: #212121 !important;
	background-color: var(--color-white) !important;
	border-color: var(--color-white) !important;
}


/*  image en noir */
.builder-invert img {
    filter: invert(100%);
}




/*  tabs reglages suspension */

#builder-tabs-section .experience-commerce_assets-builderTabs {
    max-width: 100%;
    width: 100%;
}

.builderTabs {
    padding :0px;
}

.builderTabs__titles {
    justify-content: center;
    white-space: nowrap;
    overflow-x: auto;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 18px;
}

.builderTabs__titles>div {
    border: 0px !important;
    background-color: white;
    color: #333 !important;
    margin-right: 12px;
}

.builderTabs__titles>div.is-activ {
    background-color: var(--color-primary);
}


/*  tableaux reglages suspension */

.l-susp{
	display: flex;
}

.l-susp__container{
	display: flex;
	flex-direction: column;
	width: 100%;
	font-weight: 300;
}

.l-susp__title-container{
	display: flex;
	flex-direction: row;
	text-transform: uppercase;
}

.l-susp__value-container{
	display: flex;
	flex-direction: row;
	line-height: 30px;
}

.l-susp__title-container{
	border-bottom: 1px solid var(--color-primary);
}

.l-susp__value-container{
	border-bottom: 1px solid var(--color-primary);
	transition: all .2s ease-out;
}

.l-susp__title{
	font-size: 16px;
	font-family: var(--skin-header-font), sans-serif;
	letter-spacing: 0.1rem;

}

.l-susp__title-large{
	flex-grow:2 !important;
}

.l-susp__title-linebreak{
	display: block; 
	height: 1.6em;
}
.l-susp__subtitle{
	font-size: 12px;
	font-family: var(--skin-header-font), sans-serif;

}

.l-susp__value{
	font-family: var(--skin-body-font);
}

.l-susp__title--model,
.l-susp__value--title{
	flex: 2;
}

.l-susp__value, 
.l-susp__title{
	flex: 1;
	padding: 5px;
	transition: all .2s ease-out;
}

.l-susp__value, 
.l-susp__title{
	text-align: center;
}

.l-susp__title--model,
.l-susp__value--title{
	text-align: center;
}

@media (max-width: 1280px){

	.l-susp{
		overflow-x: scroll;
	}

}


@media (max-width: 1280px) {
  .l-susp__title--model,
  .l-susp__value--title {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff; /* obligatoire, sinon les colonnes se voient à travers */
  }
}


@media (max-width: 1280px) {
  .l-susp,
  .l-susp__container {
    transform: rotateX(180deg);
  }

  /* optionnel : espace entre la barre et l'en-tête */
  .l-susp {
    padding-bottom: 8px; /* à cause du retournement, ce padding apparaît en haut */
  }
}