/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Taille par défaut (mobile) */
.logo-des-marques {
	width: 5rem;
	height: 5rem;
  }

.logos-choice {
	width: 4rem;
	height: 4rem;
  }
  
  .image-choice {
	width: 6rem;
  }

.catchphrases {
	font-family: 'Source Sans 3'; 
	font-weight: 300; 
	text-align: center;
	color:#b3b3b3; 
	line-height: 140%;
	font-size: 2.5rem;
  }

.englishbutton {
	font-family: 'Source Sans 3'; 
	font-weight: 800; 
	text-align: center;
	color:#101010; 
	font-size: 0.9rem;
	text-transform: uppercase;
}
.presentationheader {
	font-family: 'Source Sans 3'; 
	text-align: center;
	font-weight: 500; 
	color:#ffffff; 
	line-height: 110%;
	font-size: 3rem;
  }

.bigdigits {
	font-family: 'Source Sans 3'; 
	text-align: center;
	font-weight: 100; 
	color:#ffffff; 
	line-height: 120%;
	font-size: 3rem;
 }


.gradient_fabrice {
	background: -webkit-linear-gradient(30deg, #ffb647 0%, #ff5a47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

.gradient_fabrice_Vert {
	background: -webkit-linear-gradient(30deg, #00d493 0%, #acfa70 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  .gradient_fabrice_Lancia {
	background: -webkit-linear-gradient(30deg, #6D7D70 0%, #BFDE04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  .gradient_fabrice_Brand {
	background: -webkit-linear-gradient(30deg, #ff9966 0%, #ff5e62 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  .gradient_fabrice_Mail {
	background: -webkit-linear-gradient(30deg, #ff4b1f 0%, #ff9068 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  .gradient_fabrice_VS1 {
	background: linear-gradient(to right, #ff4b1f, #ff9068);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  .gradient_fabrice_VS2 {
	background: linear-gradient(to left, #ff4b1f, #ff9068);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  .gradient_fabrice_VS3 {
	background: linear-gradient(to right, #cb2d3e, #ef473a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  .gradient_fabrice_VS4 {
	background: linear-gradient(to left, #cb2d3e, #ef473a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

.gradient_smartcar {
	background: linear-gradient(to right, #B3CEE4, #3D5E5A, #D7AB80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

.gradient_smartcar_flags {
	background: linear-gradient(to right, #da4453, #89216b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  
 

  .underlinerdark {
	--cnvs-underliner-size: 50%;
	--cnvs-underliner-color: 255,255,255;
	--cnvs-underliner-opacity: 0.05;
	--cnvs-underliner-speed: 0.5s;
	position: relative;
	opacity: 1 !important;
	background-image: linear-gradient(to bottom, transparent calc(100% - var(--cnvs-underliner-size)), rgba(var(--cnvs-underliner-color), var(--cnvs-underliner-opacity)) calc(100% - var(--cnvs-underliner-size)));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size var(--cnvs-underliner-speed) cubic-bezier(0.14, 0.15, 0.13, 0.99);
  }
  .underlinerdark:hover, .underlinerdark.is-in-viewport {
	background-size: 100% 100%;
  }

  .underlinerhead {
	--cnvs-underliner-size: 20%;
	--cnvs-underliner-color: 255, 89, 72;
	--cnvs-underliner-opacity: 1;
	--cnvs-underliner-speed: 0.5s;
	position: relative;
	opacity: 1 !important;
	background-image: linear-gradient(to bottom, transparent calc(100% - var(--cnvs-underliner-size)), rgba(var(--cnvs-underliner-color), var(--cnvs-underliner-opacity)) calc(100% - var(--cnvs-underliner-size)));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size var(--cnvs-underliner-speed) cubic-bezier(0.14, 0.15, 0.13, 0.99);
  }
  .underlinerhead:hover, .underlinerhead.is-in-viewport {
	background-size: 100% 100%;
  }

  .DSMperks {
	font-family: 'Source Sans 3'; 
	font-weight: 500; 
	text-align: center; ;
	color:#B3B3B3; 
	line-height: 110%;
	font-size: 1.8rem;
  }

  .explications {
	font-family: 'Source Sans 3'; 
	font-weight: 400; 
	text-align: center; ;
	color:#cecece; 
	line-height: 110%;
	font-size: 1.5rem;
  }

  .blurred-background {
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(6px);
}

  .messkills {
	font-family: 'Source Sans 3';
	text-align: left;
	color:#e7e7e7; 
	font-weight: 400; 
	line-height: 120%;
	font-size: 1.2rem;
	
  }
  .messkillstitle {
	font-family: 'Source Sans 3';
	text-align: center;
	color:#101010; 
	font-weight: 800; 
	line-height: 100%;
	font-size: 1.6rem;
	text-transform: uppercase;
  }

  .missiontitre {
	font-family: 'Source Sans 3';
	text-align: center;
	color:#101010; 
	font-weight: 900; 
	line-height: 120%;
	text-transform: uppercase;
	
  }

.keywords {
	font-family: 'Source Sans 3'; 
	font-weight: 800; 
	text-align: center; 
	color:#73264d50; 
	line-height: 100%;
	font-size: 2.5rem;
	mix-blend-mode:normal;
  }

.blabla {
	font-family: 'Source Sans 3'; 
	font-weight: 800; 
	color:#262626; 
	line-height: 100%;
	font-size: 1.5rem;
	z-index: 1;
	opacity: 0.8;
	text-transform: uppercase;
  }

  .designystemwords {
	font-family: 'Source Sans 3'; 
	font-weight: 800; 
	color:#ff5948; 
	line-height: 100%;
	font-size: 2rem;
	z-index: 1;
	opacity: 1;
	text-transform: uppercase;
	text-align: left;
	padding-bottom: 0;
  }

  .exemplemotclef {
	font-family: 'Source Sans 3'; 
	font-weight: 500; 
	color:#e7e7e7;
	opacity: 90%; 
	line-height: 100%;
	font-size: 1.5rem;
	z-index: 1;
	text-transform: uppercase;
	
  }

  .photocover {
	width: 10vw;
	height: 10vw;
  }
  
  /* Pour les écrans de taille sm et plus grands */
  @media (min-width: 576px) {
	.logo-des-marques {
	  width: 5rem;
	  height: 5rem;
	}
	.catchphrases {
		font-size: 1.8rem;
	}
	.flyoverwords {
		font-size: 2rem;
	  }
	.missiontitre {
		font-size: 2rem;
	  }
	.DSMperks {
		font-size: 1.2rem;
	  }
	.exemplemotclef {
		font-size: 1.2rem;
	  }
	  .presentationheader {
		font-size: 2.2rem;
	  }
	  .designystemwords {
		font-size: 1.6rem;
	  }
	  .explications {
		font-size: 1.4rem;
	  }
	  .carteespace {
		padding-left: 10%;
		padding-right: 10%;
	  }
	.bonjour {
		font-size: 2rem;
	  }
	
	.photocover {
		width: 20vw;
	}
	.flagssmart {
		width: 5vw;
	}

  }
  
  /* Pour les écrans de taille md et plus grands */
  @media (min-width: 768px) {
	.logo-des-marques {
	  width: 5rem;
	  height: 5rem;
	}
	.flyoverwords {
		font-size: 2rem;
	  }
	  .missiontitre {
		font-size: 2rem;
	  }
	.DSMperks {
		font-size: 1.2rem;
	  }
	  .catchphrases {
		font-size: 2rem;
	}
	  .exemplemotclef {
		font-size: 1.2rem;
	  }
	  .presentationheader {
		font-size: 2.2rem;
	  }
	  .designystemwords {
		font-size: 1.6rem;
	  }
	  .explications {
		font-size: 1.4rem;
	  }
	  .bonjour {
		font-size: 2rem;
	  }
	  .photocover {
		width: 20vw;
	}
	.flagssmart {
		width: 4vw;
	}
  }
  
  /* Pour les écrans de taille lg et plus grands */
  @media (min-width: 992px) {
	.logo-des-marques {
	  width: 5rem;
	  height: 5rem;
	}
	.catchphrases {
		font-size: 2.2rem;
	}
	.blabla {
		font-size: 2rem;
		font-weight: 600;
	}
	.flyoverwords {
		font-size: 2rem;
	  }
	  .missiontitre {
		font-size: 2rem;
	  }
	.DSMperks {
		font-size: 1.4rem;
	  }
	  .exemplemotclef {
		font-size: 1.2rem;
	  }
	  .presentationheader {
		font-size: 2.2rem;
	  }
	  .designystemwords {
		font-size: 1.6rem;
	  }
	  .explications {
		font-size: 1.4rem;
	  }
	  .bonjour {
		font-size: 2rem;
	  }
	  .photocover {
		width: 20vw;
	}
	.flagssmart {
		width: 4vw;
	}
  }
  
  /* Pour les écrans de taille xl et plus grands */
  @media (min-width: 1200px) {
	.logo-des-marques {
	  width: 5rem;
	  height: 5rem;
	}
	.presentationheader {
		font-size: 2.2rem;
	  }
	  .catchphrases {
		font-size: 2.5rem;
	}
	.flyoverwords {
		font-size: 3rem;
	  }
	  .missiontitre {
		font-size: 3rem;
	  }
	  .exemplemotclef {
		font-size: 1.5rem;
	  }
	  .DSMperks {
		font-size: 1.6rem;
	  }
	  .designystemwords {
		font-size: 1.8rem;
	  }
	  .carteespace {
		padding-left: 20%;
		padding-right: 20%;
	  }
	  .bonjour {
		font-size: 2rem;
	  }
	  .photocover {
		width: 10vw;
	}
	.flagssmart {
		width: 4vw;
	}
  }
  
  /* Pour les écrans de taille xxl et plus grands */
  @media (min-width: 1400px) {
	.logo-des-marques {
	  width: 6rem;
	  height: 6rem;
	}
	.presentationheader {
		font-size: 2rem;
	  }
	  .catchphrases {
		font-size: 2.5rem;
	}
	.flyoverwords {
		font-size: 2.4rem;
	  }
	  .missiontitre {
		font-size: 2rem;
	  }
	  .exemplemotclef {
		font-size: 1.5rem;
	  }
	  .DSMperks {
		font-size: 1.4rem;
	  }
	  .designystemwords {
		font-size: 1.8rem;
	  }
	  .bonjour {
		font-size: 3rem;
	  }
	  .logos-choice {
		width: 4.5rem;
		height: 4.5rem;
	  }
	  .photocover {
		width: 10vw;
	}
	.flagssmart {
		width: 4vw;
	}
  }

.vitrine {
	background-color: #ffffff;
	padding: 2rem;
	border-radius: 1rem;
} 

.ombrelegere {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
} 

.ombreforte {
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);
} 

.ohlala.hover {
    content: url(screenshots/peugeot.png); /* no need for qoutes */
    display: block;
}

.basculeX {
	animation-delay: 0s;
	transform: rotateX(calc(90deg - (var(--cnvs-scroll-start) * 90deg)));
	transform-origin: 100% 0% 0;
	perspective: 20rem;
	perspective-origin: center;
 }

 .basculeY {
	animation-delay: 0s;
	transform: rotateY(calc(-90deg + (var(--cnvs-scroll-start) * 90deg)));
	transform-origin: 0% 0% 0;
 }

 .glissadebas {
	transform: translateY(calc(-30% + calc(var(--cnvs-scroll-percent) * 0.5%)));
 }

 .glissadedroite {
	transform: translateX(calc(-10% + calc(var(--cnvs-scroll-percent) * 0.1%)));
 }
 .glissadegauche {
	transform: translateX(calc(10% - calc(var(--cnvs-scroll-percent) * 0.1%)));
 }

 .apparitionZoom {
	animation-delay: 0s;
	scale: calc(0% + calc(2.5% * var(--cnvs-scroll-percent)));
	transform-origin: center center 0;
 }
 
 .apparitionfantome {
	animation-delay: 0s;
	opacity: calc(-1.4 + 0.05 * var(--cnvs-scroll-percent, 0));
    transition: opacity 0.1s ease-out;
	transform-origin: center center 0;
 }
 .apparitionFantome2 {
	animation-delay: 0s;
	opacity: calc(-120% + calc(5% * var(--cnvs-scroll-percent)));
	transform-origin: center center 0;
 }
 .apparitionFantome3 {
	animation-delay: 0s;
	opacity: calc(-150% + calc(4% * var(--cnvs-scroll-percent)));
	transform-origin: center center 0;
 }

 .patatrac {
	transform: rotate3d(0, 1, 0, 20deg);
	transform-origin: 0% 0% 0;
  }

  @keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.AREMPLIR {
	  animation-name: wipe-enter;
	  animation-duration: 1s;
	  animation-iteration-count: 1;
	}
  }

  .parent-grille {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: auto auto auto auto auto;
	justify-content: space-evenly;

  }
  .zone1 {
	grid-column: 1/6;
	grid-row: 1;
	flex: 0 0 auto;
	
  }
  .zone2 {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zone3 {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zone4 {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zone5 {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zone6 {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zoneA {
	grid-column: 2/5;
	grid-row: 1;
	flex: auto auto auto;
  }
  .zoneB {
	grid-column: auto;
	grid-row: 1;
	flex: auto auto auto;
  }
  .zoneC {
	grid-column: auto;
	grid-row: 1;
	flex: auto auto auto;
  }
  .zoneD {
	grid-column: 2/5;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zoneE {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }
  .zoneF {
	grid-column: auto;
	grid-row: 2;
	flex: auto auto auto;
  }

  
  
  .pricing-tenure-switcher .btn-group {
    background-color: var(--cnvs-contrast-200);
    padding: 6px;
	font-family: 'Source Sans 3';
	text-transform: uppercase;
}

.pricing-tenure-switcher .btn-group .btn {
    --bs-btn-border-width: 0;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.425rem;
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-font-weight: 600;
    border-radius: var(--bs-border-radius-pill) !important;
}

.pricing-tenure-switcher .btn-check:checked + .btn {
    background-color: #ff5948;
	color: #101010;
}

.statements {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }

/* .button-change */
  .button-change {
	--height: 2.375rem;
	height: var(--height);
	line-height: calc(var(--height) - 2px) !important;
	border-bottom: 1px solid #101010 !important;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column-reverse;
	font-family: 'Source Sans 3'; 
	font-weight: 500;
}

.button-change.btn-sm { --height: 2rem; }
.button-change.btn-lg { --height: 3rem; }

.button-change span {
	position: relative;
	display: block;
	transition: transform .35s ease;
	transform: translate3d(0px, 0%, 0px);
	transform-style: preserve-3d;
}

.button-change:hover span {
	transform: translate3d(0px, 100%, 0px);

}
/* .button-change */

.heropositionwelcome {
	position: absolute;
	top: 0px;
	left: 0px;
}

/*  PERSPECTIVE  */

.isometric-container {
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 3000px;
}

.isometric-item {
	width: 100%;
	height: 250px100%;
	transform: rotateX(0deg) rotateY(30deg) rotateZ(-5deg);
	transition: transform 0.3s;
}

.isometric-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}