/*
Theme Name: Car Syst'M
Author: Planète Communication
Author URI: https://www.planete-communication.fr
Version: 1
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}





@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/carsystm/fonts/ubuntu-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/themes/carsystm/fonts/ubuntu-v21-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/carsystm/fonts/ubuntu-v21-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/carsystm/fonts/oxanium-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/carsystm/fonts/oxanium-v21-latin-700.woff2') format('woff2');
}





* {
	border: 0px;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
body {
	background: #09090B;
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 120%;
	color: #09090B;
	-webkit-font-smoothing: antialiased;
}
button {
	font-family: 'Ubuntu';
}
img {
	max-width: 100%;
	border: 0px;
	vertical-align: bottom;
}
h1, h2, h3, h4, h5, h6, p.h2 {
	line-height: 120%;
	margin: 10px 0px;
	font-weight: bold;
	font-family: 'Oxanium';
}
h1 {
	font-size: 54px;
	margin: 0px 0px 30px 0px;
	line-height: 1;
	text-transform: uppercase;
}
h2,
p.h2 {
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0.35px;
}
h3 {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.45px;
}
h4 {
	font-size: 20px;
}
a:focus {
	outline: none;
}
a {
	color: #09090B;
  	text-decoration: underline;
}
p {
	margin: 10px 0px;
	line-height: 150%;
}
ul, ol {
	margin: 10px 0px 10px 15px;
}
ul ul, 
ol ol, 
ul ol, 
ol ul {
	margin: 0px 0px 0px 30px;
}
li {
  	line-height: 150%;
}
sup {
    font-size: smaller;
    vertical-align: text-bottom;
}
#nested {
    z-index: 2;
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
#page {
	position: relative;
	background: #FFFFFF;
	overflow: hidden;
}
header {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 2;
    transition: 0.3s;
    background: #FFFFFF;
}
header.scrolled {
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#headerInner {
	position: relative;
	width: 100%;
	height: 100%;
}
#logo {
    position: absolute;
    width: 162px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 20px;
	transition: 0.3s;
	filter: invert(1);
}
#headerBoxes {
    position: absolute;
    right: 60px;
    top: 0;
	bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 30px;
}
/* ----------------------
ZONE INTERIEURE (CONTENU)
-----------------------*/
#wrapper {
	position: relative;
	background: #FFFFFF;
	z-index: 1;
}
#wrapperInner {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0px auto;
	padding: 80px 0px 0px 0px;
}
#container {
	position: relative;
	margin: 0px 0px 100px 0px;
}
#contentsInner {
	position: relative;
}
#headerBoxes p {
	margin: 0;
	line-height: 1;
}
body.home #wrapperInner {
	padding: 0;
}
.grecaptcha-badge {
	visibility: hidden;
}
html, body {
	scroll-behavior: smooth;
}
iframe {
	max-width: 100%;
}
strong {
	font-weight: 700;
}
em {
	font-style: italic;
}
body.home #container {
    margin: 0px;
}




/* ---------------------------- STRUCTURES ET STYLES DES PAGES INTÉRIEURES ---------------------------- */

#chapterPicture {
	position: relative;
    z-index: 1;
}
.title_and_bc {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    padding: 145px 0 15px 0;
    z-index: 2;
}
.title_and_bc h1 {
	margin-bottom: 20px;
}
@media (min-width: 1601px) {
	body.small-h1 .title_and_bc h1 {
		font-size: 48px;
	}
}
@media (min-width: 1101px) {
	body.small-h1 .title_and_bc h1 {
		font-size: 44px;
	}
}
.title_and_bc > a:last-child {
    margin-top: 35px;
}
.title_and_bc > a:last-child,
.title_and_bc > p:last-child {
    margin-bottom: 160px;
}
.widget_breadcrumb a,
#wrapper .breadcrumbs a {
    text-decoration: none;
}
.widget_breadcrumb a:hover,
#wrapper .breadcrumbs a:hover {
	text-decoration: underline;
}
.widget_breadcrumb,
#wrapper .breadcrumbs {
    font-size: 14px;
}
body:not(.home) h2,
body:not(.home) h3 {
	margin-bottom: 15px;
}









/* -------------------- BLOC REQUETE - Pour faire comme une page actu en requetant un CPT par ex. ---------------------- */

#wrapper .wp-block-query > ul {
    margin: 0;
}
#wrapper .wp-block-query > ul > li {
	margin-bottom: 80px;
}
#wrapper .wp-block-query > ul > li:before {
	display: none;
}
#wrapper .wp-block-query > ul > li a.wp-block-read-more {
    margin-top: 7px;
}
#wrapper .wp-block-query > ul > li img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}
#wrapper .wp-block-query > ul > li img[src*="logo-blanc"] {
    background: #000000;
    object-fit: contain !important;
    padding: 35px;
}
#wrapper .wp-block-query > ul > li h2 a:not(:hover) {
	text-decoration: none;
}
p.wp-block-post-excerpt__more-text {
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
}
#wrapper .wp-block-query > ul > li {
    margin-bottom: 70px;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 30px;
}
#wrapper .wpforms-uploader .modern-title {
    color: transparent;
    position: relative;
}
#wrapper .wpforms-uploader .modern-title:before {
    content: 'Cliquez ou déposez votre fichier ici.';
    color: #777777;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}



/* boutons */
#wrapper a.wp-block-button__link.has-background,
#wrapper div.wpforms-container-full button[type=submit],
a.wp-block-post-excerpt__more-link {
	border-radius: 0;
    display: flex;
    align-items: center;
    gap: 12px;
	background: #09090B;
	color: #FFFFFF;
	padding: 19px 40px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: 0.3s;
	border: none;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	height: auto;
	box-shadow: none;
	width: auto;
	position: relative;
}
#wrapper a.wp-block-button__link.has-background:hover,
#wrapper div.wpforms-container-full button[type=submit]:hover,
a.wp-block-post-excerpt__more-link:hover {
	background: #24242c !important;
	gap: 20px;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
}


#wrapper a.wp-block-button__link.has-blanc-background-color {
    color: #09090B;
}
#wrapper a.wp-block-button__link.has-blanc-background-color:hover {
	background: #F4F4F5 !important;
}


a.btn_like,
#wrapper a.wp-block-button__link:not(.has-background) {
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: #09090B;
    display: flex;
    align-items: center;
    gap: 12px;
	transition: 0.3s;
	position: relative;
	padding: 0;
    background: none;
    border-radius: 0;
}
a.btn_like:after,
#wrapper a.wp-block-button__link:not(.has-background):after {
	content: '';
	width: 0%;
	height: 1px;
	background: #09090B;
	position: absolute;
	bottom: -5px;
	left: 0;
	transition: 0.35s;
	pointer-events: none;
}
a.btn_like:hover,
#wrapper a.wp-block-button__link:not(.has-background):hover {
	gap: 20px;
}
a.btn_like:hover:after,
#wrapper a.wp-block-button__link:not(.has-background):hover:after {
	width: 100%;
}

a.btn_like.blanc,
#wrapper a.wp-block-button__link:not(.has-background).has-blanc-color,
#wrapper .has-noir-background-color a.wp-block-button__link:not(.has-background) {
	color: #FFFFFF;
}
a.btn_like.blanc:after,
#wrapper a.wp-block-button__link:not(.has-background).has-blanc-color:after,
#wrapper .has-noir-background-color a.wp-block-button__link:not(.has-background):after {
	background: #FFFFFF;
}
#wrapper .has-noir-background-color a.wp-block-button__link:not(.has-background) path {
	stroke: #FFFFFF;
}





.has-noir-color { color: #09090B !important; }
.has-noir-background-color { background-color: #09090B !important; }

.has-blanc-color { color: #FFFFFF !important; }
.has-blanc-background-color { background-color: #FFFFFF !important; }

.has-gris-color { color: #F4F4F5 !important; }
.has-gris-background-color { background-color: #F4F4F5 !important; }

.has-gris-fonce-color { color: #6A7282 !important; }
.has-gris-fonce-background-color { background-color: #6A7282 !important; }

.has-gris-moyen-color { color: #99A1AF !important; }
.has-gris-moyen-background-color { background-color: #99A1AF !important; }





#headerBoxes a {
    color: #19191F;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
	position: relative;
	top: 1px;
}
#headerBoxes a.tel {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    top: 0;
}
#headerBoxes a.contact:after {
    content: '';
    width: 0%;
    height: 2px;
    background: #19191F;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.3s;
    bottom: -2px;
}
#headerBoxes a.contact:hover:after {
	width: 100%;
}
header .rs {
    gap: 15px;
    display: flex;
    align-items: center;
}
header .rs a {
    display: flex;
    transition: 0.3s;
}
header .rs a:hover {
	opacity: 0.6;
}














#nested .container_span {
    height: 20px;
    overflow: hidden;
	position: relative;
	top: 1px;
}
#nested .container_span span {
    color: #19191F;
    font-weight: 500;
    transition: 0.3s;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.31px;
}
#nested .contentSmart .container span {
    height: 2px;
	width: 100%;
	border-radius: 2px;
    display: block;
    background: #19191F;
	transition: 0.3s;
	position: relative;
	top: 0px;
}
#nested .contentSmart {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
    height: 20px;
    flex-direction: row-reverse;
    gap: 15px;
}
#nested .contentSmart .container {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	justify-content: space-between;
	width: 14px;
	height: 12px;
}



#nested .menu-menu-principal-container {
	position: fixed;
    top: 0;
    width: 480px;
    left: -480px;
    bottom: 0;
    background: #09090B;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	transition: 0.4s ease-in-out;
}
#nested ul.firstLevel li a {
    font-size: 24px;
    line-height: 1.2em;
    font-weight: 400;
    color: #D1D5DC;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: 0.2s;
    padding: 15px 0;
    display: block;
    font-family: 'Oxanium';
}
#nested #menu-menu-principal {
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 85px 60px 60px 60px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
	overflow-y: scroll;
	list-style-type: none;
}
#nested .menu-menu-principal-container:after {
    content: '';
    width: 20px;
    background: #09090B;
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}
#nested #menu-menu-principal > li {
	line-height: 1;
	transition: 0.35s;
}
#nested #menu-menu-principal:has(li:hover) > li:not(:hover) {
    opacity: 0.45;
}


#nested .ombre {
    width: 100vw;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 5;
    opacity: 0;
	pointer-events: none;
    transition: 0.4s ease-in-out;
}
body.menu_open #nested .ombre {
    opacity: 1;
	pointer-events: initial;
}
body.menu_open #nested .menu-menu-principal-container {
    left: 0;
    border-right: 1px solid #b7b7b7;
}
body.menu_open #nested .contentSmart .container > span:nth-child(2) {
	opacity: 0;
}
body.menu_open #nested .contentSmart .container > span:nth-child(1) {
    width: 17px;
    transform: rotate(45deg);
    border-radius: 2px;
    top: 5px;
    left: 2px;
}
body.menu_open #nested .contentSmart .container > span:nth-child(3) {
    transform: rotate(-45deg);
    top: -5px;
    border-radius: 2px;
    width: 17px;
    left: 2px;
}
body.menu_open #nested .container_span > span {
    transform: translateY(-100%);
	color: #FFFFFF;
}
body.menu_open #nested .contentSmart .container span {
    background: #FFFFFF;
}
#nested ul.firstLevel li ul li a {
    font-weight: 500;
    font-size: 18px;
	transition: 0.3s;
	position: relative;
    display: block;
    padding: 3px 0;
}
#nested ul.firstLevel li ul li a:before {
    content: '';
    height: 5px;
    width: 5px;
    position: absolute;
    transition: 0.2s;
    top: 9px;
    left: -10px;
    background: #D1D5DC;
    border-radius: 50%;
    opacity: 0;
}

#nested ul.firstLevel li ul li a:hover:before {
	opacity: 1;
	left: 0;
}
#nested ul.firstLevel li ul li a:hover {
    padding-left: 10px;
}
#nested #menu-menu-principal > li ul {
    margin: 5px 0 25px 0px;
    border-left: 3px solid #D1D5DC;
    padding: 5px 0 0 20px;
}
#nested #menu-menu-principal > li ul > li:not(:last-child) {
    margin-bottom: 10px;
}










body.home header:not(.scrolled) #logo {
	opacity: 0;
}







#top {
    height: 100vh;
    overflow: hidden;
    position: relative;
}
#top video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: black 1.5s ease;
	animation-delay: 0.35s;
	animation-fill-mode: both;
}
@keyframes black {
	0% {
		filter: brightness(0);
	}
	100% {
		filter: brightness(1);
	}
}
#top:after {
    content: '';
    background: linear-gradient(180deg, transparent, rgba(9, 9, 11, 0) 72%, #09090B 100%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
#top:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(9, 9, 11, 0.9), rgba(9, 9, 11, 0.5) 50%, rgba(9, 9, 11, 0.5) 100%);
    z-index: 2;
	pointer-events: none;
}
#top .logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
#top .contact {
    position: absolute;
    bottom: 40px;
    z-index: 3;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}
#top .contact a {
    font-size: 18px;
    letter-spacing: 0.7px;
}
#top .logo .inner {
    width: 501px;
	height: 62px;
	position: relative;
}
#top .logo .inner > img:nth-child(1) {
	position: absolute;
	left: 0;
	top: 10px;
	animation: animationLogo1 2s ease;
	animation-fill-mode: both;
	animation-delay: 0.6s;
}
#top .logo .inner > img:nth-child(2) {
	position: absolute;
	right: 0;
	top: 0;
	animation: animationLogo2 1.2s ease;
	animation-fill-mode: both;
	animation-delay: 1.6s;
	opacity: 0;
}
@keyframes animationLogo1 {
	0% {
		height: 90px;
		left: 100px;
		top: -12px;
	}
	50% {
		height: 42px;
		left: 170px;
		top: 10px;
	}
	100% {
		height: 42px;
		left: 0px;
		top: 10px;
	}
}
@keyframes animationLogo2 {
	0% {
		right: 40px;
		opacity: 0;
	}
	100% {
		right: 0px;
		opacity: 1;
	}
}



body.home h1 {
    text-align: center;
    margin: 85px 6.5% 60px 6.5%;
}
#wrapper p, #wrapper li, .title_and_bc p {
    letter-spacing: -0.45px;
}
.wp-block-buttons {
    gap: 40px;
}





.alternative-typo {
    font-family: 'Oxanium' !important;
}
body:not(.home) #wrapper *[style*="font-size"] {
	line-height: 1.2em;
}

body:not(.home) #wrapper iframe[src*="youtube"],
body:not(.home) #wrapper iframe[data-src*="youtube"] {
    width: 100%;
    max-height: 700px;
    height: 55vw;
}
body:not(.home) #wrapper p:not(.read_more).h2 {
    letter-spacing: 0.35px;
    margin: 0 0 10px 0;
}
body:not(.home) h2.has-medium-font-size {
    font-size: 32px !important;
}



@media (max-width: 1600px) {
	h1 {
		font-size: 46px;
	}
	h2, p.h2 {
		font-size: 36px;
	}
	div #blocs .bloc img {
		height: 520px;
	}
	body {
		font-size: 16px;
	}
	body:not(.home) #wrapper p[style*="font-size:40px"] {
		font-size: 36px !important;
	}
	body:not(.home) #wrapper p[style*="font-size:28px"] {
		font-size: 24px !important;
	}
}



@media (min-width: 1101px) {
	div#text > .wp-block-columns:first-child > .wp-block-column:first-child:nth-last-child(2):not(.no-anim),
	div#text > .wp-block-columns:first-child > .wp-block-column:last-child:nth-child(2):not(.no-anim) {
		visibility: hidden;
	}
}





@media (max-width: 1200px) {
	header:not(.scrolled) #logo {
		opacity: 1;
	}
	#nested {
		right: 25px;
		left: auto;
	}
	#logo {
		width: auto;
		right: auto;
		left: 30px;
	}
	#headerBoxes a {
		top: 0;
	}
	#headerBoxes {
		right: 150px;
	}

	body.menu_open #nested .menu-menu-principal-container {
		left: auto;
		right: 0;
		border-right: none;
		border-left: 1px solid #b7b7b7;
	}
	#nested .menu-menu-principal-container {
		left: auto;
		right: -480px;
	}
	#nested .ombre {
		left: auto;
		right: 100%;
	}
}
@media (max-width: 750px) {
	#headerBoxes a.contact {
		display: none;
	}
}
@media (max-width: 650px) {
	#headerBoxes a.tel {
		display: none;
	}

	#top .logo .inner {
		width: 87vw;
		height: auto;
	}
	#top .logo .inner > img:nth-child(1) {
		left: 0;
		right: 0;
		margin: auto;
		top: -21px;
		animation: animationLogo1_vm 2s ease;
		animation-delay: 0.3s;
		animation-fill-mode: both;
	}
	#top .logo .inner > img:nth-child(2) {
		height: 38px;
		left: 0;
		right: 0;
		margin: auto;
		top: -12px;
		opacity: 0;
		animation: animationLogo2_vm 0.8s ease;
		animation-delay: 1.5s;
		animation-fill-mode: both;
	}
	@keyframes animationLogo1_vm {
		0% {
			height: 60px;
			top: -30px;
		}
		50% {
			height: 40px;
			top: -20px;
		}
		100% {
			top: -60px;
			height: 40px;
		}
	}
	@keyframes animationLogo2_vm {
		0% {
			top: -12px;
			opacity: 0;
		}
		100% {
			top: 2px;
			opacity: 1;
		}
	}
}










@media (max-width: 500px) {
	h1 {
		font-size: 34px;
	}
	.widget_breadcrumb {
		font-size: 13px;
	}
	#headerBoxes {
		display: none;
	}

	a.btn_like,
	#wrapper a.wp-block-button__link:not(.has-background),
	#top .contact a {
		font-size: 12px;
	}
	a.btn_like svg {
		height: 9px;
		width: auto;
	}
	#nested .menu-menu-principal-container {
		width: 93.5vw;
		right: -93.5vw;
	}
	#nested ul.firstLevel li a {
		font-size: 20px;
	}
	#nested ul.firstLevel li ul li a {
		font-size: 14px;
	}
	#nested #menu-menu-principal {
		padding: 40px 35px 35px 35px;
	}
	#nested .menu-menu-principal-container:after {
		display: none;
	}
	#nested #menu-menu-principal:after {
		content: '';
		width: 93.5%;
		height: 55px;
		position: fixed;
		bottom: 0;
		right: 0;
		background: linear-gradient(0deg, #000000, transparent);
		z-index: 2;
		opacity: 0;
		pointer-events: none;
		transition: 0.4s;
		transition-delay: 0.05s;
	}
	body.menu_open #nested #menu-menu-principal:after {
		opacity: 1;
		transition-delay: 0.35s;
	}
	#logo {
		left: 6.5vw;
	}
	#nested {
		right: 6.5vw;
		margin-right: -12px;
	}
	h1 br {
		display: none;
	}
	body.home h1 {
		margin-top: 65px;
		font-size: 9vw;
	}
	h2, p.h2 {
		font-size: 28px;
	}
	#blocs .bloc .titre {
		font-size: 22px;
	}
	#nested #menu-menu-principal > li ul > li:not(:last-child) {
		margin-bottom: 5px;
	}
	#top {
		height: 100svh;
	}
	#wrapperInner {
		padding-top: 50px;
	}
	.title_and_bc {
		padding: 110px 0 15px 0;
		width: 87%;
	}
	#wrapper a.wp-block-button__link.has-background,
	#wrapper div.wpforms-container-full button[type=submit],
	a.wp-block-post-excerpt__more-link {
		padding: 14px 24px;
		transition: 0.15s;
	}
	#nested ul.firstLevel li ul li a:before {
		top: 8px;
	}
}