@import url(variables.css);
@import url(font.css);
@import url(global.css);

@import url(parts/header.css);
@import url(parts/footer.css);
@import url(parts/home.css);
@import url(parts/vehicules.css);
@import url(parts/customer.css);
@import url(parts/contact.css);
@import url(parts/faq.css);
@import url(parts/cgv.css);
@import url(parts/legal.css);
@import url(parts/engagementQualite.css);
@import url(parts/charteQualite.css);
@import url(parts/sitemap.css);
@import url(parts/international.css);
@import url(parts/seo.css);


.scroll--right {
	opacity: 0;
	transform: translateX(-100px);
	transition: all 0.5s ease-in-out;
}
  
.scroll--right.visible {
	opacity: 1;
	transform: translateX(0);
}
  
.scroll--up {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.5s ease-in-out;
}

.scroll--up.visible {
	opacity: 1;
	transform: translateY(0);
}

.scroll--left {
	opacity: 0;
	transform: translateX(100px);
	transition: all 0.5s ease-in-out;
}

.scroll--left.visible {
	opacity: 1;
	transform: translateX(0);
}



/* Style spécifique au pré footer CTA contact début */
.container--pre-footer {
	width: 100%;
	background-color: var(--color-blue-1)!important;
	padding: 24px;
}

.container--pre-footer p {
	color: var(--color-white-1)!important;
	font-size: 2rem;
	font-family: 'Playfair Display', serif;
	font-weight: normal;
	width: 90%;
	margin: auto;
	margin-bottom: 24px;
}
@media (min-width: 1020px){
	.container--pre-footer p{
		width: 40%;
	}
}
/* Style spécifique au pré footer CTA contact fin */





/* Style spécifique de la page services début */
.services--container {
	overflow: hidden;
}
.service--container {
	gap: 0;
}

.service--container-left {
	flex-direction: column-reverse;
}
.service--container-right {
	flex-direction: column;
}


.service--container-text, .service--container-title {
	width: 100%;
	position: relative;
}
.service--container-text:before{
	content: '';
	position: absolute;
	width: 100%;
	height: -webkit-fill-available;
	background-color: rgba(44, 51, 63, 0.4);
	backdrop-filter: blur(15px);
	z-index: 1;
}
.service--container-text span, .service--container-text p, .service--container-text h3 {
	position: relative;
	z-index: 2;
	color: var(--color-white-1);
}

.service--container-text p{
	font-size: 1.6rem;
}

.service--container-content {
	padding: 20px;
}

@media (min-width: 1020px){
	.service--container {
		flex-direction: row;
	}
	.service--container .wp-block-cover{
		height: 60vh;
	}
	.service--container-text, .service--container-title {
		width: 50%;
	}
	.service--container-content {
		padding: 0;
		width: 60%;
		margin: auto;
	}
}



.services--others {
	padding: 0 20px;
}
.services--others .wp-block-cover__background{
	margin: 0;
}

.services--others .wp-block-cover__image-background{
	background-size: contain;
}

.services--others h3 {
	font-size: 3.2rem;
	margin-top: var(--space-l);
}

@media (min-width: 1020px){
	.services--others {
		padding: 0px;
	}
	.services--others .wp-block-cover__inner-container{
		width: 80%;
		margin: auto;
	}
}


.other-service--item {
	width: 50%;
	float: left;
	height: 200px;
	margin-bottom: 40px;
}

.other-service--item div{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.other-service--item div figure, .other-service--item div p {
	margin: 0;
}

.other-service--item div p {
	font-size: 1.6rem !important;
}

.container--services-titles{
	padding: 20px;
	margin-top: 40px;
}

.container--services-titles h2{
	font-family: 'Open Sans', sans-serif;
	margin: 20px 0;
}

.label--section{
	padding: 0 20px;
	margin: 60px 0;
}

.label--content figure {
	width: 50%;
	margin: auto;
}

.label--content p {
	font-size: 1.6rem;
}

.label--section h2 {
	margin: 20px 0;
}


@media (min-width: 1020px) {
	.services--others .wp-block-cover__image-background{
		background-size: 50%;
	}

	.container--services-titles {
		padding: 0;
		width: 80%;
		margin: 80px auto;
	}

	.other-service--item {
		width: auto;
		float: none;
	}
	.other-service--items div{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.services--others h3 {
		text-align: center;
	}

	.label--section{
		width: 80%;
		margin: auto;
		padding: 80px 0;
	}

	.label--content div {
		display: flex;
		align-items: center;
		justify-content: center;
        gap: 80px;
	}
	.label--content .label--textes div{
		flex-direction: column;
		align-items:flex-start;
		gap: 0;
	}
	.label--content figure {
		max-width: 220px;
		width: 90%;
		margin: 0;
	}
	.label--content p {
		max-width: 100%;
	}
}

/* Style spécifique de la page services fin */


/* Style spécifique à la page Histoire début  */
/* section intro  */

.intro-story--container {
	padding: 20px;
	margin-top: 80px;
}
.intro-story--container h2 {
	margin-top: 24px;
}

@media (min-width: 1020px) {
	.intro-story--container {
		padding: 0;
		width: 50%;
		margin: 80px auto;
		margin-bottom: 0;
		max-width: 735px;
	}
}

/* section agence début */
.agences--container{
	overflow: hidden;
}
.agence--container {
	display: flex;
	gap: 0;
}
.agence--container-right{
	flex-direction: column;
}
.agence--container-left{
	flex-direction: column-reverse;
}
.agence--container-text:before{
	content: '';
	position: absolute;
	width: 100%;
	height: -webkit-fill-available;
	background-color: rgba(44, 51, 63, 0.4);
	backdrop-filter: blur(15px);
	z-index: 1;
}
.agence--container-content{
	position: relative;
	z-index: 2;
}

.agence--container-content h4{
	margin-bottom: 24px;
}
.agence--container-content p {
	margin-bottom: 16px;
}

.agence--container-text {
	padding: 20px;
}

.agence--title {
	padding: 20px;
	font-size: 3.2rem;
}
@media (min-width: 1020px){
	.agence--title {
		padding: 0;
		width: 80%;
		margin: 80px auto;
	}
}

.agence--container-text h4 {
	font-size: 3.2rem;
}
.agence--container-text p {
	font-size: 1.6rem!important;
}

.agence--container div{
	width: 100%;
}
@media (min-width: 1020px) {
	.agence--container{
		flex-direction: row;
	}
	.agence--container-content {
		width: 60%!important;
		margin: auto;
	}
	.agence--container .wp-block-cover{
		padding: 0;
		height: 60vh;
	}
}
@media screen and (min-width: 1020px) and (max-width: 1600px) and (min-height: 768px) and (max-height: 900px){
	.agence--container .wp-block-cover {
		height: 100vh;
	}
}

/* section agence fin */

/* section valeurs début */
.values--container{
	padding: 0;
	height: 60vh;
}
.values--content{
	padding: 20px;
}
@media (min-width: 1020px) {
	.values--container{
		padding: 0 10%;
	}
	.values--content{
		padding: 0;
	}
	.values--container h3 {
		text-align: center;
		margin-bottom: 24px;
	}
	.values--container p{
		max-width: 550px;
		margin: auto;
	}
}
.values--container:before {
	content: '';
	position: absolute;
	width: 100%;
	height: -webkit-fill-available;
	background-color: rgba(44, 51, 63, 0.4);
	backdrop-filter: blur(15px);
	z-index: 1;
}
.values--content,  .values--content-2{
	position: relative;
	z-index: 2;
}
.values--content .gutena-tabs-tab{
	overflow-y: hidden!important;
}
.values--content .wp-block-gutena-tabs{
	margin-top: 40px!important;
}
.values--content .wp-block-gutena-tab, .values--content-2 .wp-block-gutena-tab{
	background: none!important;
	color: var(--color-white-1)!important;
	padding: 0!important;
	margin-top: 16px!important;
	display: flex;
	justify-content: center;
	align-items: center;
}
.values--content .gutena-tabs-tab .gutena-tab-title{
	font-size: 2rem;
	font-family: 'Open Sans', sans-serif;
	background: none!important;
	transition: var(--animation-basic);
}
.values--content .gutena-tabs-tab .gutena-tab-title:hover{
	cursor: pointer;
}
.values--content .gutena-tabs-tab .gutena-tab-title:hover .gutena-tab-title-text{
	color: var(--color-white-1)!important;
}
.values--content .gutena-tabs-tab .gutena-tab-title .gutena-tab-title-text:after{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 0%;
	content: '.';
	color: transparent;
	background: var(--color-white-1);
	height: 1px;
	transition: var(--animation-basic);
}
.values--content .gutena-tabs-tab .gutena-tab-title:hover .gutena-tab-title-text:after{
	width: 100%;
}

.values--content .gutena-tabs-tab .active{
	color: var(--color-white-1)!important;
}
.values--content .gutena-tabs-tab .active .gutena-tab-title-text:after{
	width: 100%;
}
.values--content .gutena-tabs-tab .inactive{
	color: var(--color-grey-2)!important;
}

/* section valeurs fin */

/* Style spécifique à la timeline de la page histoire début */

.timeline--section {
	padding: 80px 20px;
	height: 120vh;
}
.timeline--section h3 {
	margin-bottom: 24px;
}

@media (min-width: 1020px){
	.timeline--section {
		padding: 80px 0;
		width: 80%;
		margin: auto;
		height: 100vh;
	}
}
    
  .timeline-numbers ul {
    list-style: none;
    padding: 0;
    position: relative;
  }

  .timeline-numbers ul:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 1px;
	background: var(--color-white-1);
	z-index: 3;
  }
  
  .timeline-numbers li {
    font-size: 20px;
    cursor: pointer;
    margin-bottom: 16px;
    position: relative;
    transition: all .3s;
  }
  .timeline-numbers li.active {
	padding: 20px 0;
  }

.timeline-numbers li.active p{
	content: '';
	position: absolute;
	width: 100%;
	background-color: rgba(44, 51, 63, 0.4);
	backdrop-filter: blur(15px);
	z-index: 1;
	padding-top: 20px;
	padding-bottom: 20px;

}
@media (min-width: 1020px){
	.timeline-numbers li.active p{
		padding-right: 40px;
	}
}

.timeline-numbers li.active p, .timeline-numbers li.active span {
	position: relative;
	z-index: 2;
}


  .timeline-numbers .timeline-date {
    padding-left: 40px;
    position: relative;
  }

  .timeline-numbers .timeline-date:before {
    position: absolute;
    content: '';
    height: 1px;
    width: 30px;
    background: var(--color-white-1);
    left: 0;
    top: 50%;
    transition: all .3s;
  }
  
  .timeline-numbers li.active .timeline-date:before{
    width: 52px;
  }
  .timeline-numbers li.active .timeline-date {
    padding-left: 60px;
  }

  .timeline-numbers li span {
	color: var(--color-white-1);
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	transition: var(--animation-basic);
  }
  .timeline-numbers li:hover span {
	  font-size: 3.2rem;
  }
  .timeline-numbers li.active span {
	font-size: 3.2rem;
	font-weight: bolder;
  }

  .timeline-text {
    display: none;
    transition: all .3s;
    max-width: 500px;
    font-weight: normal;
    font-size: 16px;
    padding-left: 40px;
}
@media (min-width: 1020px){
	.timeline-text {
		padding-left: 120px;
	}
	.timeline--bg {
		padding: 0;
		height: fit-content;
	}
	.timeline--bg .wp-block-cover__image-background{
		transform: rotate(90deg) translate(-10px, 0px);
		height: 100vw;
		background-size: contain;
        background-position: initial!important;
	}
  }

  .timeline-text.active {
    display: block;
  } 



/* Style spécifique à la timeline de la page histoire fin */



.agence--container-today {
	padding: 80px 20px;
}
.agence--container--today h3 {
	font-size: 3.2rem;
}

.today--items .wp-block-group__inner-container{
	display: flex;
	flex-direction: column;
}

.today--item {
	margin-top: 40px;
	gap: 16px;
}

.today--item p{
	text-align: center;
	margin: auto;
}

.today--item-number{
	font-size: 3.2rem;
	font-family: 'Playfair Display', serif;
}

.today--item-text{
	font-size: 2rem;
}

.agence--container-today .wp-block-cover__image-background{
	background-size: contain;
}

@media (min-width: 1020px) {
	.today--items .wp-block-group__inner-container {
		flex-direction: row;
		justify-content: space-between;
	}

	.agence--container-today .wp-block-cover__image-background{
		background-size: 50%;
	}
	.agence--container-today {
		padding: 80px 10%;
	}
}

/* Style spécifique à la page histoire fin */


/* Style spécifiques aux hero images début */

@media (min-width: 1020px){
	.hero--banner{
		height: 50vh;
	}
}

/* Style spécifiques aux hero images fin */


/* Style spécifiques page international début */
.inter-city--container img {
	width: 100%;
}
.inter-city--container h3{
	padding: 0 20px;
	margin: 40px 0;
}
.city--list {
	padding: 0 20px;
	margin: 40px 0;
}

.city--list h4 {
	margin-bottom: 16px;
}
.city--list  .wp-block-group {
	margin-bottom: 8px;
}
.city--list  .wp-block-group p:not(:last-child){
	width: 50%;
}


@media (min-width: 1020px) {
	.inter-city--container h3{
		padding: 0;
		width: 80%;
		margin: 40px auto;
	}
	.city--list {
		padding: 0;
		width: 80%;
		margin: 40px auto;
	}
}
/* Style spécifiques page international fin */


/* Style spécifiques pages SEO début */

.subtitle--seo{
	font-size: 2rem;
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 16px;
}

/* Style spécifiques pages SEO fin */