@import url("dependencies.css");


:root {
	--black-1:				 				rgba(3, 3, 3, 1); 
	--black-2:				 				rgba(10, 10, 10, 1); 
	--black-3:				 				rgba(17, 17, 17, 1); 
	--black-4:				 				rgba(25, 25, 25, 1); 
	--black-1-50:				 			rgba(3, 3, 3, .8); 
	--black-1-0:				 			rgba(3, 3, 3, 0);
	--black-3-50:				 			rgba(17, 17, 17, .8); 

   --green-1: #1F6B3A;  /* vert principal */
--green-2: #14522C;  /* version plus foncée */
--green-3: #2E8B57;

--grey-1:				 				rgba(48, 48, 48, 1); 
--grey-2:				 				rgba(69, 69, 69, 1); 
--grey-3:				 				rgba(126, 126, 126, 1); 

--white-1:				 				rgba(255, 255, 255, 1); 
--white-2:				 				rgba(230, 230, 230, 1); 
--white-3:				 				rgba(210, 210, 210, 1); 
--white-4:				 				rgba(190, 190, 190, 1); 
--white-1-50:				 			rgba(255, 255, 255, .8); 
--white-1-0:				 			rgba(255, 255, 255, 0); 

--yellow-1:					 			rgba(254, 185, 16, 1); 
--yellow-2:					 			rgba(255, 204, 0, 1); 
--yellow-3:					 			rgba(255, 218, 68, 1); 
--yellow-4:					 			rgba(255, 232, 138, 1); 
--yellow-1-50:					 		rgba(254, 185, 16, .8); 
--yellow-1-0:					 		rgba(254, 185, 16, 0); 

--title-font:							'cat-font', sans-serif;
--main-font:							'Open Sans', sans-serif;

--title-font-size:						144px;
--huge-font-size:						48px;
--large-font-size:						32px;
--medium-font-size:						18px;
--regular-font-size:					14px;
--small-font-size:						10px;
--button-font-size:						14px;
}
.no-brand {
	--yellow-1:					 			rgba(133, 150, 158, 1); 
	--yellow-2:					 			rgba(156, 166, 175, 1); 
	--yellow-3:					 			rgba(186, 195, 202, 1); 
	--yellow-4:					 			rgba(201, 204, 209, 1); 
	--yellow-1-50:					 		rgba(133, 150, 158, .8); 
	--yellow-1-0:					 		rgba(133, 150, 158, 0); 
}
/*----------------------------------------
			2° - Structure
---------------------------------------- */
* {
	outline:								none;
}
html, body {
	margin:									0;
	padding:								0;
}
body{
	background:								var(--white-1);
	color: 									var(--green-1);
	font-family: 							var(--main-font);
	font-size: 								var(--regular-font-size);
	line-height:							1.6;
	position:								relative;
}

#main {
	position:								relative;
	display:								block;
	width:									100vw;
	height:									100%;
	padding:								140px 0 0;
	overflow:								hidden;
	z-index:								0;
	background-color:						var(--green-1);
}
.aligncenter {
	text-align:								center;
}
.alignleft {
	text-align:								left;
}
.alignright {
	text-align:								right;
}
.hidden {
	display:								none;
}
.opacity-1 {
	opacity:								1;
}
.opacity-0 {
	opacity:								0;
}
.vertical-align {
	display:								flex;
	align-items:							center;
}
.p-25 {
	padding:								25px;
}
.mt-25 {
	margin-top:								25px;
}
.mr-25 {
	margin-right:							25px;
}
.mb-25 {
	margin-bottom:							25px;
}
.ml-25 {
	margin-left:							25px;
}
.mt-50 {
	margin-top:								50px;
}
.mr-50 {
	margin-right:							50px;
}
.mb-50 {
	margin-bottom:							50px;
}
.ml-50 {
	margin-left:							50px;
}
.mobile-only {
	display: 								none;
}
.desktop-only {
	display: 								block;
}
.recaptcha-holder { 
	height: 						    	0px;
}
.grecaptcha-badge { 
	visibility: 							hidden;
}
button:disabled, button[disabled], input[type=submit]:disabled, input[type=submit][disabled] {
	opacity:								.25;
	cursor:					not-allowed;
}
input[type="checkbox"] {
	margin: 								0 15px 0 0;
}
.content-box {
	position: 								relative;
	width: 									1280px;
	margin: 								0 auto;
}
.content-box-small  {
	position: 								relative;
	width: 									1080px;
	margin: 								0 auto;
}
	.grid_6 .content-box {
		width: 								640px;
		margin: 							0 0 0 auto;
	}
		.grid_6+.grid_6 .content-box {
			margin: 						0;
		}
.content-spacer-large {
	padding:								120px 85px;
}
	.content-image.content-spacer-large {
		height:								calc(100% - 240px);
	}
.content-spacer {
	padding:								100px 50px;
}
	.content-image.content-spacer {
		height:								calc(100% - 100px);
	}
.content-spacer-small {
	padding:								25px;
}
	.content-image.content-spacer-small {
		height:								calc(100% - 50px);
	}
		.content-image div {
			height:							100%;
			background-position:			center center;
			background-repeat:				no-repeat; 
			background-size: 				cover;	
		}
			.content-image img {
				display:					none;
			}
.content-container {
	padding:								175px 0;
}
.pt-0 {
	padding-top:							0;
}
	.content-container > div {
		max-width:							1280px;
	}
.content-5 .flex-container, .content-6 .flex-container {
	align-items:							center;
}
.content-video > div {
	position:								relative;
	padding-bottom:							56.25%;
	height:									0;
}
	.content-video iframe {
		position:							absolute;
		top:								0;
		left:								0;
		width:								100%;
		height:								100%;
	}
.text-2columns {
	text-align: 							justify;
	padding:								25px 0 50px;
	column-count: 							2;
	column-gap: 							100px;
	column-rule: 							1px solid var(--color-1);
}
.listing {
	justify-content:						space-between;
	color: var(--green-1);
}
.listing-center {
	justify-content:						center;
}
.item-2 {
	width:									45%;
}
.item-3 {
	width:									30%;
}
.item-4 {
	width:									20%;
}
.item-8 {
	width:									10%;
}
.item-3 img, .item-4 img, .item-8 img {
	width:									100%;
	height:									auto;
}
.flex-container.domino {
	flex-wrap: 								nowrap;
	gap: 									10px;
}
	.flex-container.domino > div {
		flex: 								1;
		flex-basis: 						0;
		padding: 							25px 15px;
	}
		.flex-container.domino > div h2,
		.flex-container.domino > div h3,
		.flex-container.domino > div h4,
		.flex-container.domino > div p {
			text-align: 					center;
		}
		.flex-container.domino > div img {
			width: 							60%;
			margin: 						25px 20%;
		}
.input_form {
	width:									100%;
	display:								flex;
	flex-wrap:								wrap;
	justify-content:						space-between;
}
	input[type=text], input[type=tel], input[type=email], textarea, select {
		width:								calc(100% - 24px);
		padding:							10px;
		margin:								10px 0;
		font-family:						var(--main-font);
		font-size:							var(--medium-font-size);
	}
	select {
		width:								100%;
		border-radius:						0;
		border:								1px solid;
	}
	.input_form div {
		width:								100%;
	}
	.input_form div.form-half {
		width:								calc(50% - 12px);
	}
	textarea {
		resize:								none;
		height:								160px;
	}
ul.nested {
	padding:								25px 50px;
	margin:									25px 12.5%;
	width:									calc(75% - 100px);
}
ul.in-text {
	padding:								25px;
	margin:									25px;	
}
ul.background-black {
	background:								var(--black-1-50);
}
	ul.nested li, ul.in-text li {
		margin:								10px 0;
	}
.over-text {
	position:								absolute;
	display:								flex;
	top:									0;
	left:									0;
	z-index:								4;
	height:									100%;
	width:									100%;
	background:								var(--black-1-50);
}
	.over-text span {
		align-self:							center;
		text-align:							center;
		width:								100%;
		font-size:							var(--huge-font-size);
		font-family:						var(--title-font);
		font-weight:						600;
		text-transform:						uppercase;
		color:								var(--yellow-1);	
	}
	.over-text img {
		display:							block;
		width:								200px;
		height:								auto;
		margin:								0 auto;
	}
/*----------------------------------------
			3° - Styles couleurs
---------------------------------------- */
h1, h2, h3, h4 {
	display:								block;
	font-family:							var(--title-font);
	padding:								0 0 10px;
	margin:									0;
	text-transform:							none;
	border:									none;
	line-height:							1.25;
}
h1, h2 {
	font-size:								var(--huge-font-size);
	font-weight:							700;
	text-transform:							uppercase;
	margin:									0 0 10px;
}
	h1:after, h2:after {
	   background:							none repeat scroll 0 0;
	   bottom:								0;
	   content:								'';
	   display:								block;
	   height:								5px;
	   position:							relative;
	   width:								50px;
	}
h3 {
	font-size:								var(--large-font-size);
	font-weight:							700;
	text-transform:							uppercase;
	margin:									0 0 10px;
}
	h3:after {
	   background:							none repeat scroll 0 0;
	   bottom:								0;
	   content:								'';
	   display:								block;
	   height:								5px;
	   position:							relative;
	   width:								50px;
	}
h1.center, h2.center, h3.center, h4.center {
	text-align:								center;
}
h1.center:after, h2.center:after, h3.center:after {
		bottom:								0;
		content:							'';
		display:							block;
		margin:								0 auto;
		height:								5px;
		position:							relative;
		width:								50px;	
}
h4 {
	font-size:								var(--large-font-size);
	font-weight:							100;
	text-transform:							uppercase;
	margin:									0 0 5px;
	letter-spacing:							2px;	
}
hr {
	border:									none;
	height:									1px;
	width:									100%;
}
a {
	text-decoration:						none;
	-webkit-transition:						all 0.5s ease;
	-moz-transition: 						all 0.5s ease;
	-o-transition: 							all 0.5s ease;
	transition: 							all 0.5s ease;
}
	a.button, input[type=submit] {
		padding:							8px 23px;
		font-family:						var(--title-font);
		font-weight:						700;
		text-transform:						uppercase;
		font-size:							var(--medium-font-size);
		-webkit-transition:					all 0.5s ease;
		-moz-transition: 					all 0.5s ease;
		-o-transition: 						all 0.5s ease;
		transition: 						all 0.5s ease;	
	}
p {
	text-align:								justify;
}
.separator-line {
	margin: 								25px 0;
	width: 									60px;
	height: 								1px;
}
.separator-line.mt-50 {
	margin: 								50px 0 25px;
}
	.separator-line.center {
		margin: 							25px auto;
	}
.small {
	font-size:								var(--small-font-size);
}
.bigger {
	line-height:							38px;
	font-size:								var(--medium-font-size);
}
.color-yellow {
	background-color:						var(--yellow-1);
}
	.color-yellow h2, .color-yellow h3, .color-yellow p {
		color:								var(--green-1);
	}
	.color-yellow h4 {
		color:								var(--white-1);
	}
		.color-yellow h1:after, .color-yellow h2:after, .color-yellow h3:after {
		   background:						none repeat scroll 0 0 var(--green-1);
		}
	.color-yellow a {
		color:								var(--green-1);
	}
		.color-yellow a:hover {
			color:							var(--green-2);
		}
	.color-yellow input[type=text], .color-yellow input[type=tel], .color-yellow input[type=email], .color-yellow textarea, .color-yellow select {
		background:							var(--white-1);
		border:								1px solid var(--white-2);
		color:								var(--green-1);
	}
	.color-yellow a.button, .color-yellow input[type=submit], .color-yellow a.button.secondary:hover {
		background:							var(--green-1);
		color:								var(--white-2);
		border:								2px solid var(--green-1);
	}
		.color-yellow a.button:hover, .color-yellow input[type=submit]:hover, .color-yellow a.button.secondary {
			background:						var(--green-1);
			color:							var(--white-1);
			border:							2px solid var(--green-1);
		}
	.color-yellow .text-2columns {
		column-rule: 						1px solid var(--black-1);
	}
.color-yellow hr {
	background:								var(--black-1);
}
.content-container.color-yellow {
	background-color:						var(--yellow-2);
}
.color-white {
	background-color: var(--white-1);
    position: relative;
    z-index: 1;
}
.color-white.color-grey {
	background-color:						var(--green-1);
}
	.color-white h2, .color-white h3 {
		color:								var(--green-1);
	}
	.color-white p {
		color:								var(--green-1);
	}
	.color-white h4 {
		color:								var(--yellow-1);
	}
		.color-white h1:after, .color-white h2:after, .color-white h3:after {
		   background:						none repeat scroll 0 0 var(--yellow-1);
		}
	.color-white a {
		color:								var(--green-1);
	}
		.color-white a:hover {
			color:							var(--green-2);
		}
	.color-white input[type=text], .color-white input[type=tel], .color-white input[type=email], .color-white textarea, .color-white select {
		background:							var(--white-1);
		border:								1px solid var(--grey-2);
		color:								var(--black-4);
	}
	.color-white a.button, .color-white input[type=submit], .color-white a.button.secondary:hover {
		background:							var(--green-1);
		color:								var(--yellow-1);
		border:								2px solid var(--black-1);
	}
		.color-white a.button:hover, .color-white input[type=submit]:hover, .color-white a.button.secondary {
			background:						var(--black-1-0);
			color:							var(--black-1);
			border:							2px solid var(--black-1);
		}
	.color-white .text-2columns {
		column-rule: 						1px solid var(--black-2);
	}
.color-white hr {
	background:								var(--black-1);
}
.content-container.color-white {
	background-color:						var(--white-2);
}
.content-container.color-white.visionlink {
	background-color:						rgb(248,248,248);
}
.content-1.color-white.visionlink {
	background-color:						rgb(226,227,229);
}
	.color-white .flex-container.domino > div:nth-child(odd) {
		background-color: 					var(--black-1);
	}
		.color-white .flex-container.domino > div:nth-child(odd) p,
		.color-white .flex-container.domino > div:nth-child(odd) h3 {
			color: 							var(--white-1);
		}
	.color-white .flex-container.domino > div:nth-child(even) {
		background-color: 					var(--yellow-1);
	}
		.color-white .flex-container.domino > div:nth-child(even) h3:after {
		   background:						none repeat scroll 0 0 var(--black-1);
		}
		.color-white .flex-container.domino > div:nth-child(even) h4 {
			color: 							var(--black-1);
		}
.color-black {
	background-color:						var(--green-1);
}
	.color-black h2, .color-black h3 {
		color:								var(--yellow-1);
	}
	.color-black h4, .color-black p, .color-black li {
		color:								var(--white-1);
	}
		.color-black h1:after, .color-black h2:after, .color-black h3:after {
		   background:						none repeat scroll 0 0 var(--white-1);
		}
	.color-black a {
		color:								var(--white-4);
	}
		.color-black a:hover {
			color:							var(--white-2);
		}
	.contact-full.color-black .content-spacer-small {
		background:							var(--grey-1);
	}
	.color-black input[type=text], .color-black input[type=tel], .color-black input[type=email], .color-black textarea, .color-black select {
		background:							var(--grey-2);
		border:								var(--grey-3);
		color:								var(--white-4);
	}
	.color-black a.button, .color-black input[type=submit], .color-black a.button.secondary:hover {
		background:							var(--yellow-1);
		color:								var(--green-1);
		border:								2px solid var(--yellow-1);
	}
		.color-black a.button:hover, .color-black input[type=submit]:hover, .color-black a.button.secondary {
			background:						var(--yellow-1-0);
			color:							var(--yellow-1);
			border:							2px solid var(--yellow-1);
		}
	.color-black .text-2columns {
		column-rule: 						1px solid var(--white-1);
	}
.color-black hr {
	background:								var(--white-1);
}
.color-black .form-confirmation {
	color:									var(--white-1);	
}
.content-container.color-black {
	background-color:						var(--black-2);
}
.color-yellow input[type=text].error, .color-yellow input[type=tel].error, .color-yellow input[type=email].error, .color-yellow textarea.error,
.color-white input[type=text].error, .color-white input[type=tel].error, .color-white input[type=email].error, .color-white textarea.error,
.color-black input[type=text].error, .color-black input[type=tel].error, .color-black input[type=email].error, .color-black textarea.error {
	border:									1px solid #ff0000;
}
.color-yellow .text-black,
.color-white .text-black,
.color-black .text-black,
.bg-white-black .text-black {
	color:									var(--green-1);
}
/*----------------------------------------
			4° - Header
---------------------------------------- */
/*----------------------------------------
   HEADER - COMPLET & RESPONSIVE
----------------------------------------*/

/*----------------------------------------
   HEADER - RESPONSIVE FIX
----------------------------------------*/

header {
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.5s ease;
}

.top-header {
    height: 10px;
	position: fixed !important; /* Force la position fixe */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
	 z-index: 9999 !important;
    background: var(--green-1);
}

.top-sticky {
    height: 70px;
    background: var(--green-1);
}

.top-header #over-header {
    display: block;
    background: var(--yellow-1);
    height: 30px;
}

.top-sticky #over-header {
    display: none;
}

#top-menu ul,
#lang-menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
}

#top-menu a,
#lang-menu a {
    font-family: var(--title-font);
    font-weight: 400;
    color: var(--white-1);
    font-size: var(--regular-font-size);
    line-height: 30px;
    padding: 0 15px 0 0;
}

#top-menu a:hover,
#lang-menu a:hover {
    color: var(--green-1);
}

#lang-menu li:first-child a:after {
    content: '|';
    padding: 0 0 0 15px;
}

#main-header {
    background-color: var(--green-1);
    height: 100px;
    display: flex;
    align-items: center;
    position: relative;
}

#main-header .flex-container {
    align-content: flex-start;
    overflow: visible;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#header-logo,
#header-logo .logo,
#main-menu ul {
    margin: 0;
    padding: 0;
    z-index: 2147483646;
    transition: all 0.5s ease;
}

#header-logo .logo {
    display: block;
    background-image: url("../images/logo.png");
    background-position: top left;
    background-repeat: no-repeat;
}

.no-brand #header-logo .logo {
    background-image: url("../images/logo.png");
}

.top-header #header-logo {
    margin: 25px 0 0;
}

.top-header #header-logo .logo {
    display: block;
    height: 60px;
    width: 231px;
    background-size: auto 60px;
}

.top-sticky #header-logo {
    margin: 15px 0 0;
}

.top-sticky #header-logo .logo {
    display: block;
    height: 40px;
    width: 154px;
    background-size: auto 40px;
}

#main-menu ul {
    display: flex;
    list-style: none;
}

.top-header #main-menu > ul {
    margin: 30px 0 0;
}

.top-sticky #main-menu > ul {
    margin: 10px 0 0;
}

#main-menu li {
    position: relative;
}

#main-menu .bg-menu {
    background: var(--yellow-1-0);
    bottom: 50%;
    left: 50%;
    right: 50%;
    top: 50%;
    position: absolute;
    z-index: 2;
    transition: all 0.5s ease;
}

#main-menu > ul > li:hover .bg-menu {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 2px;
    background: var(--yellow-1);
}

#main-menu > ul > li > a {
    display: block;
    position: relative;
    z-index: 3;
    background: none;
    padding: 12px 25px 10px;
    margin: 0;
    font-size: var(--medium-font-size);
    line-height: 30px;
    font-family: var(--title-font);
    font-weight: 700;
    color: var(--white-1);
    text-transform: uppercase;
    white-space: nowrap;
}

#main-menu > ul > li:hover > a {
    color: var(--green-1);
}

#main-menu > ul > li:last-child > a {
    color: var(--green-1);
    border: 2px solid var(--yellow-1-0);
}

#main-menu > ul > li:last-child .bg-menu {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 2px;
    background: var(--yellow-1);
}

#main-menu > ul > li:last-child:hover > a {
    color: var(--yellow-1);
    border: 2px solid var(--yellow-1);
}

#main-menu > ul > li:last-child:hover .bg-menu {
    background: var(--yellow-1-0);
    bottom: 50%;
    left: 50%;
    right: 50%;
    top: 50%;
}

#main-menu > ul > li > a.sf-with-ul {
    padding: 12px 10px 10px 25px;
}

#main-menu > ul > li:last-child > a.sf-with-ul {
    padding: 10px 10px 10px 23px;
}

#main-menu > ul > li > a .sf-sub-indicator svg {
    fill: var(--white-1);
    width: 10px;
    height: 10px;
    margin: 0 0 0 5px;
    transition: all 0.5s ease;
}

#main-menu > ul > li:hover > a .sf-sub-indicator svg {
    fill: var(--black-1);
}

#main-menu > ul > li:last-child > a .sf-sub-indicator svg {
    fill: var(--black-1);
}

#main-menu > ul > li:last-child:hover > a .sf-sub-indicator svg {
    fill: var(--yellow-1);
}

#main-menu > ul ul {
    margin: 0;
    padding: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0 25px;
    position: absolute;
    width: 100vw;
    height: 420px;
    visibility: hidden;
}

.top-header #main-menu ul li:last-child ul {
    border-top: 26px solid var(--green-1);
}

.top-sticky #main-menu ul li:last-child ul {
    margin-top: 6px;
}

.top-header #main-menu > ul ul {
    border-top: 30px solid var(--green-1);
    background: var(--green-1);
}

.top-sticky #main-menu > ul ul {
    border-top: 1px solid var(--green-1);
    margin: 9px 0 0;
    background: var(--green-1);
}

#main-menu > ul ul li {
    border-left: 1px solid var(--grey-1);
    transition: all 0.5s ease;
}

#main-menu > ul ul li.menu-title {
    border-left: none;
    text-transform: uppercase;
}

#main-menu > ul li ul li.column-break {
    flex-basis: 100%;
    width: 0;
    border-left: none;
    margin: 0 -10px;
}

#main-menu > ul ul li span {
    display: block;
    width: 230px;
    border-bottom: 1px solid var(--grey-1);
    padding: 10px 10px 10px 25px;
    font-size: var(--medium-font-size);
    color: var(--yellow-2);
    font-family: var(--title-font);
    font-weight: 700;
}

#main-menu > ul ul > li > a {
    display: block;
    padding: 2px 25px;
    margin: 0;
    background: var(--green-1);
    font-size: var(--regular-font-size);
    line-height: 30px;
    font-family: var(--main-font);
    font-weight: 400;
    color: var(--white-1);
}

#main-menu > ul ul li:hover a {
    color: var(--yellow-1);
}

/* ========================================
   HAMBURGER BUTTON
======================================== */
#menu-trigger {
    display: none;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 5px;
    right: 5px;
    z-index: 10;
    cursor: pointer;
    border: none;
}

#menu-trigger .inner {
    position: relative;
    display: block;
    height: 60px;
    width: 60px;
}

#menu-trigger .inner div {
    position: absolute;
    height: 3px;
    background: var(--white-1);
    right: 12px;
    border-radius: 2px;
    transition: all 0.4s ease;
}

/* État FERMÉ (hamburger visible) */
#menu-trigger.closed .inner div:first-child {
    width: 32px;
    top: 20px;
    transform: rotate(0deg);
}

#menu-trigger.closed .inner div:nth-child(2) {
    width: 24px;
    top: 29px;
    opacity: 1;
}

#menu-trigger.closed .inner div:last-child {
    width: 32px;
    top: 38px;
    transform: rotate(0deg);
}

/* État OUVERT (croix) */
#menu-trigger .inner div:first-child {
    width: 32px;
    top: 29px;
    transform: rotate(45deg);
}

#menu-trigger .inner div:nth-child(2) {
    width: 0;
    opacity: 0;
}

#menu-trigger:not(.closed) .inner div {
    background: #00843D !important;
}

#menu-trigger .inner div:last-child {
    width: 32px;
    top: 29px;
    transform: rotate(-45deg);
}

/* ========================================
   MOBILE MENU
======================================== */
#mobile-menu {
    position: fixed;
    z-index: 9998;
    top: 70px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 70px);
    background: var(--white-1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.5s ease;
    transform: translateX(0);
}

#mobile-menu.closed {
    transform: translateX(100%);
}

#mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-menu > ul > li {
    background-color: var(--white-1);
    border-bottom: 1px solid var(--white-3);
}

#mobile-menu > ul > li.has-ul {
    background-image: url(https://www.tractafric-equipment.com/images/chevron-down.svg);
    background-position: right 20px center;
    background-size: 24px;
    background-repeat: no-repeat;
}

#mobile-menu > ul > li.has-ul.open {
    background-image: url(https://www.tractafric-equipment.com/images/chevron-up.svg);
}

#mobile-menu > ul > li > a,
#mobile-menu > ul > li > span {
    display: block;
    cursor: pointer;
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 56px;
    text-transform: uppercase;
    user-select: none;
    padding: 0 60px 0 20px;
}

#mobile-menu > ul > li.has-ul ul {
    display: none;
}

#mobile-menu > ul > li.has-ul.open ul {
    display: block;
    background: var(--white-2);
}

#mobile-menu > ul ul li {
    border-top: 1px solid var(--white-3);
}

#mobile-menu > ul ul a,
#mobile-menu > ul ul span {
    display: block;
    color: var(--grey-2);
    cursor: pointer;
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 46px;
    user-select: none;
    padding: 0 20px 0 35px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
======================================== */

/* TABLETTE - 1080px */
@media only screen and (max-width: 1080px) {
    #main-menu > ul > li > a {
        padding: 10px 12px;
        font-size: 13px;
    }

    #main-menu > ul > li > a.sf-with-ul {
        padding: 10px 8px 10px 12px;
    }

    .top-header #header-logo .logo,
    .top-sticky #header-logo .logo {
        height: 600px;
        width: 154px;
        background-size: auto 40px;
    }

    .top-header {
        height: 100px;
    }

    .top-header #header-logo {
        margin: 15px 0 0;
    }

    #main-header {
        height: 70px;
    }
}

/* MOBILE & TABLETTE PORTRAIT - 900px */
@media only screen and (max-width: 900px) {
    /* Header compact */
    .top-header,
    .top-sticky {
        height: 0px !important;
    }

    .top-header #over-header {
        display: none !important;
    }

    #main-header {
        height: 0px !important;
        padding: 0 !important;
    }

    #main-header .flex-container {
        height: 70px;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    /* Logo centré verticalement */
    .top-header #header-logo,
    .top-sticky #header-logo {
        margin: 0 !important;
        padding: 0 0 0 15px;
        display: flex;
        align-items: center;
        height: 0px;
    }

    .top-header #header-logo .logo,
    .top-sticky #header-logo .logo {
        height: 36px !important;
        width: 138px !important;
        background-size: auto 36px !important;
        margin: 0;
    }

    /* Cacher menu desktop */
    #main-menu {
        display: none !important;
    }

    /* Afficher hamburger */
    #menu-trigger {
        display: flex !important;
		margin-top: 10px;
    }
}
/* PETIT MOBILE - 480px */
@media only screen and (max-width: 480px) {
    .top-header #header-logo .logo,
    .top-sticky #header-logo .logo {
        height: 32px !important;
        width: 123px !important;
        background-size: auto 32px !important;
    }

    #menu-trigger {
        width: 50px;
        height: 50px;
        top: 10px;
    }

    #menu-trigger .inner {
        height: 50px;
        width: 50px;
    }

    #menu-trigger.closed .inner div:first-child {
        top: 16px;
        width: 28px;
    }

    #menu-trigger.closed .inner div:nth-child(2) {
        top: 24px;
        width: 22px;
    }

    #menu-trigger.closed .inner div:last-child {
        top: 32px;
        width: 28px;
    }

    #menu-trigger .inner div:first-child,
    #menu-trigger .inner div:last-child {
        top: 24px;
        width: 28px;
    }

    #mobile-menu > ul > li > a,
    #mobile-menu > ul > li > span {
        font-size: 16px;
        line-height: 30px;
        padding: 0 50px 0 15px;
    }

    #mobile-menu > ul ul a,
    #mobile-menu > ul ul span {
        font-size: 13px;
        line-height: 42px;
        padding: 0 15px 0 30px;
    }
}
/*----------------------------------------
			5° - Side content
---------------------------------------- */
/* ========================================
   SIDE SHADE
======================================== */
#side-shade {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* Si tu veux le masquer */
#side-shade.closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========================================
   SLIDESHOW
======================================== */
#slideshow-main {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../images/caroussel.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.overlay {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.content {
    text-align: center;
    color: #fff;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.content h1 {
    font-size: 150px;
    font-weight: bold;
    line-height: 1.05;
    margin-bottom: 10px;
    color: #ffffff;
}

.content p {
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
    color: #f4b400;
    font-weight: bold;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
======================================== */

/* TABLETTE - 1080px */
@media only screen and (max-width: 1080px) {
    #slideshow-main {
        min-height: 85vh;
    }

    .overlay {
        min-height: 85vh;
        padding: 40px 20px;
    }

    .content h1 {
        font-size: 110px;
    }

    .content p {
        font-size: 30px;
    }
}

/* TABLETTE / MOBILE - 900px */
@media only screen and (max-width: 900px) {
    /* Si la navbar fixe fait 70px */
    #slideshow-main {
        min-height: calc(100vh - 70px);
        background-position: center center;
    }

    .overlay {
        min-height: calc(100vh - 70px);
        padding: 90px 20px 30px;
    }

    .content {
        max-width: 100%;
    }

    .content h1 {
        font-size: 72px;
        line-height: 1.1;
    }

    .content p {
        font-size: 24px;
    }
}

/* MOBILE - 768px */
@media only screen and (max-width: 768px) {
    #slideshow-main {
        min-height: calc(100vh - 70px);
    }

    .overlay {
        min-height: calc(100vh - 70px);
        padding: 80px 16px 25px;
    }

    .content h1 {
        font-size: 54px;
        margin-bottom: 12px;
    }

    .content p {
        font-size: 20px;
        margin-bottom: 16px;
    }
}

/* PETIT MOBILE - 480px */
@media only screen and (max-width: 480px) {
    #slideshow-main {
        min-height: calc(100vh - 70px);
    }

    .overlay {
        min-height: calc(100vh - 70px);
        padding: 75px 14px 20px;
    }

    .content h1 {
        font-size: 36px;
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .content p {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 14px;
    }
}

/* BOUTON */
.btnc {
  background-color:#f4b400;
  color: #1f6f3d;
  padding: 20px 30px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  border: none;
}

.btnc:hover {
  border-color: #f4b400;
  background-color: none;
}
#side{
	background-color: var(--green-1);
}
	#side-shade.open {
		pointer-events:						visiblepainted;
		background:							var(--green-1);
	}
	#side-shade.closed {
		pointer-events:						none;
		background:							var(--black-1-0);
	}
#side-contact, #side-phone {
	position:								fixed;
	z-index:								101;
	display:								flex;
	align-items:							flex-end;
	pointer-events:							none;
	-webkit-transition:						all 0.5s ease;
	-moz-transition:						all 0.5s ease;
	-o-transition:							all 0.5s ease;
	transition:								all 0.5s ease;	
}
#side-contact, #side-phone {
    position: fixed;
    z-index: 10002; /* Le plus haut pour rester cliquable en toute circonstance */
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    transition: all 0.5s ease;	
}
#side-phone {
	bottom:									max(90px, calc((50vh - 370px) + 80px));
}
#side-contact {
	bottom:									max(10px, calc(50vh - 370px));
}
	#side-contact.closed, #side-phone.closed {
		right:								-250px;
	}
	#side-contact.out, #side-phone.out {
		right:								-320px;
	}
	#side-contact.open, #side-phone.open {
		right:								0;
	}
		.side-icon {
			width:							50px;
			height:							50px;
			padding:						10px;
			cursor:							pointer;
			pointer-events:					visiblepainted;
			border-radius:					10px 0 0 10px;
			background:						var(--yellow-2);
		}
			.side-icon img {
				width:						50px;
				height:						auto;
			}
		.side-content {
			width:							220px;
			padding:						15px;
			pointer-events:					visiblepainted;
			border-radius:					10px 0 0 0;
			background:						var(--yellow-2);
		}
			#side-phone .side-content p {
				font-family:				var(--title-font);
				text-align:					center;
				text-transform:				uppercase;
				margin:						0;
			}
				#side-phone .side-content p:first-child {
					font-weight:			700;
					font-size:				52px;
					line-height:			36px;
					padding:				5px 0 15px 0;
				}
				#side-phone .side-content p a {
					color:					var(--green-1);
					display:				block;
					font-weight:			600;
					font-size:				33px;
					line-height:			33px;
					padding:				0 0 15px;
				}
				#side-phone .side-content p:nth-child(6) {
					font-size:				14px;
					line-height:			16px;
					background:				var(--green-1);
					color:					var(--yellow-2);
					padding:				5px 0;
				}
			#side-contact h3 {
				color:						var(--green-1);
			}
				#side-contact h3:after {
				   background:				none repeat scroll 0 0 var(--green-1);
				}
			#side-contact input[type=text], #side-contact input[type=tel], #side-contact input[type=email], #side-contact textarea, #side-contact select {
				background:					var(--white-1);
				border:						1px solid var(--white-2);
				width:						calc(100% - 10px);
				padding:					5px;
				margin:						5px 0;
				font-family:				var(--main-font);
				color:						var(--green-1);
				font-size:					var(--regular-font-size);
			}
			#side-contact select {
				width:						calc(100% + 2px);
			}
			#side-contact input[type=text].error, #side-contact input[type=tel].error, #side-contact input[type=email].error, #side-contact textarea.error, #side-contact select.error {
				border:						1px solid #ff0000;
			}
			#side-contact textarea {
				resize:						none;
				height:						80px;
			}
			#side-contact input[type=submit] {
				background:					var(--green-1);
				color:						var(--white-2);
				border:						2px solid var(--green-1);
			}
				#side-contact input[type=submit]:hover {
					background:				var(--yellow-2);
					color:					var(--green-1);
				}
/*----------------------------------------
			6° - Slideshow
---------------------------------------- */
.slideshow {
	position:								relative;
	overflow:								hidden;
	height:									calc(100vh - 140px);
	padding:								0;
	margin:									0;
	background:								#000 url(../images/loading.gif) center center no-repeat; 
}
	.slideshow .container {
		display:							block;
		height:								calc(100vh - 140px);
		width:								100%;
		overflow:							hidden;
		position:							relative;
		left:								50%;
		margin-left:						-50%;	
	}
.slideshow a, .slideshow img, 
.slideshow ol, .slideshow ul, .slideshow li,
.slideshow table, .slideshow tbody, .slideshow tfoot, .slideshow thead, .slideshow tr, .slideshow th, .slideshow td {
	background: 							none;
	border: 								0;
	font: 									inherit;
	font-size: 								100%;
	margin: 								0;
	padding: 								0;
	vertical-align: 						baseline;
	list-style: 							none
}
.slideshow .container {
	display: 								none;
	float: 									left;
	position: 								relative;
	z-index: 								0;
	width: 									100%;
	margin-bottom:							0px!important;
}
.slideshow img {
	max-width: 								none!important;
}
.slideshow .camera_fakehover {
	height: 								100%;
	min-height: 							168px;
	position: 								relative;
	width: 									100%;
	z-index: 								1;
}
.slideshow .camera_src {
	display: 								none;
}
.slideshow .cameraCont, .slideshow .cameraContents {
	height: 								100%;
	position: 								relative;
	width: 									100%;
	z-index: 								1;
	background:								rgba(0,0,0.45);
	background: 							linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 90%);  
}
.slideshow .cameraSlide {
	bottom: 								0;
	left: 									0;
	position: 								absolute;
	right: 									0;
	top: 									0;
	width: 									100%;
}
.slideshow .cameraContent {
	bottom: 								0;
	display: 								none;
	left: 									0;
	position: 								absolute;
	right: 									0;
	top: 									0;
	width: 									100%;
}
.slideshow .camera_target {
	bottom: 								0;
	height: 								100%;
	left: 									0;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	text-align: 							left;
	top: 									0;
	width: 									100%;
	z-index: 								0;
}
.slideshow .camera_overlayer {
	bottom: 								0;
	height: 								100%;
	left: 									0;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	top: 									0;
	width: 									100%;
	z-index: 								0;
}
.slideshow .camera_target_content {
	bottom: 								0;
	left: 									0;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	top: 									0;
	z-index: 								2;
}
.slideshow .camera_target_content .camera_link {
   	background: 							url(../images/blank.gif);
	display: 								block;
	height: 								100%;
	text-decoration: 						none;
}
.slideshow .camera_loader {
	display:								none;
}
.slideshow .camera_bar {
	bottom:									0;
	left: 									0;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	bottom: 								0;
	z-index: 								3;
}
.slideshow .camera_caption {
	position:								absolute;
	display: 								block;
	top:									50px;
	right:									0;
	width:									100%;
	height:									calc(100vh - 215px);
}
.slideshow .camera_caption > div {
	position: 								relative;
	bottom: 								0;
  	margin: 								auto;
	overflow:								hidden;
	height:									calc(100vh - 215px);
	-webkit-transition: 					all 0.5s ease;
	-moz-transition: 						all 0.5s ease;
	-o-transition: 							all 0.5s ease;
	transition: 							all 0.5s ease;
}
	.slideshow .camera_caption > div h2 {
		color: 								var(--white-1);
		text-transform: 					uppercase;
		font-family:						var(--title-font);
		font-size:							var(--title-font-size);
		font-weight:						700;
		padding:							0;
		line-height:						0.8;
		margin:								25px 25px 45px calc((100vw - 1280px)/2);
	}
	.slideshow .camera_caption > div h2.smaller {
		font-size:							var(--huge-font-size);
		font-weight: 						400;
		letter-spacing: 					-2px;
		line-height:						1.25;
		margin:								50px 25px 0 calc((100vw - 1280px)/2);
	}
	.slideshow .camera_caption > div p {
		text-align:							left;
		color: 								var(--yellow-1);
		text-transform: 					uppercase;
		font-family:						var(--title-font);
		font-size:							var(--huge-font-size);
		font-weight: 						400;
		letter-spacing: 					-2px;
		line-height:						1.25;
		padding:							0 0 50px;
		margin:								0 0 0 calc((100vw - 1280px)/2);
		width:								960px;
	}
	.slideshow .camera_caption > div a {
		margin:								0 0 0 calc((100vw - 1280px)/2);
		padding:							8px 23px;
		color:								var(--black-1);
		background:							var(--yellow-1);
		border:								2px solid var(--yellow-1);
		font-family:						var(--title-font);
		font-weight:						700;
		text-transform:						uppercase;
		font-size:							var(--medium-font-size);
	}
		.slideshow .camera_caption > div a:hover {
			color:							var(--white-1);
			background:						var(--yellow-1-0);
			border:							2px solid var(--white-1);
		}
.slideshow .camera_pag {
	position:								absolute;
	bottom:									0;
	left:									0;
	z-index:								17;
}
	.slideshow .camera_pag_ul {
		display:							flex;
		width:								100vw;
	}
		.slideshow .camera_pag_ul li {
			flex-grow:						1;
			background:						var(--black-1);
			height:							10px;
			cursor:							pointer;
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;	
		}
			.slideshow .camera_pag_ul li.cameracurrent {
				flex-grow:					2;
				background:					var(--yellow-1);
			}
			.slideshow .camera_pag_ul li span {
				display:					none;
			}
.slideshow .camera_prev, .slideshow .camera_next {
	display:								none;
}	
/*----------------------------------------
			7° - Fil d'Ariane
---------------------------------------- */
.ariane {
	background:								var(--black-3);
}
	.ariane ul {
		margin:								0;
		padding:							0;
		display:							flex;
	}
		.ariane a {
			font-family:					var(--title-font);
			font-weight:					500;
			color:							var(--white-4);
			font-size:						var(--regular-font-size);
			line-height:					30px;
			padding:						0 15px 0 0;
		}
		.ariane a:hover {
			color:							var(--white-1);
		}
		.ariane li a:after {
			content:						'>';
			padding:						0 0 0 15px;
		}
			.ariane li:last-child a:after {
				display:					none;
			}
/*----------------------------------------
			8° - Titre de page
---------------------------------------- */
.page-title {
	height:									calc(100vh - 180px);
	padding:								0;
	margin:									0;
	background-color:						var(--black-1);
	background-position:					center center;
	background-repeat:						no-repeat; 
	background-size: 						cover;
	border-bottom:							10px solid var(--yellow-1);
	-webkit-transition:						all 0.5s ease;
	-moz-transition:						all 0.5s ease;
	-o-transition:							all 0.5s ease;
	transition:								all 0.5s ease;
}
	.page-title:hover {
		border-bottom:						10px solid var(--yellow-4);
	}
	.page-title > div {
		width:								100vw;
		height:								calc(100vh - 140px);
		background:							rgba(0,0,0.45);
		background:							linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 90%); 
	}
	.page-title > div.group-title {
		background:							none;
	}
		.page-title .content-box {
			display:						flex;
			height:							100%;
			align-items:					center;
		}
			.page-title .content-box > div {
				width:						100%;
			}
				.page-title h1 {
					width:					100%;
					color:					var(--white-1);
					text-align:				center;
					text-transform:			uppercase;
					font-size:				var(--title-font-size);
					font-weight:			700;
				}
					.page-title h1.smaller {
						width:				60%; 
						font-size:			4.5rem;
						text-align:			left;
						padding:			0;
						margin:				0;
					}
				.page-title h4 {
					width:					100%;
					color:					var(--yellow-1);
					text-align:				center;
					font-size:				var(--large-font-size);
					font-weight:			400;
				}
				.no-brand .page-title h4 {
					color:					var(--white-2);
				}

.page-title h4.smaller, .page-title h1.smaller+h4 {
	font-size:								3rem;
	text-align:								left;
}
.group-title h1.text-black {
	color:									var(--black-1);
}
/*----------------------------------------
			9° - Toute largeur
---------------------------------------- */
.content-8 .content-video {
	margin:									25px 0 0;
}
/*----------------------------------------
			10° - Video BG
---------------------------------------- */
.content-10 {
	position:								relative;
	min-height:								100vh;
}
	.content-10 .color-yellow {
		background:							var(--yellow-1-50);
	}
	.content-10 .color-white {
		background:							var(--white-1-50);
	}
	.content-10 .color-black {
		background:							var(--black-1-50);
	}
	.video-content {
		display:							table;
		width:								100%;
		min-height:							100vh;
		z-index:							1;
		position:							relative;
	}
	.video-bg iframe {
		-webkit-transition:					opacity 500ms ease-in-out;
		-moz-transition:					opacity 500ms ease-in-out;
		-o-transition:						opacity 500ms ease-in-out;
		transition:							opacity 500ms ease-in-out;
		transition-delay:					250ms;
	}
	.content-10 h2 {
		text-align:							center;
		font-size:							var(--title-font-size);
	}
		.content-10 h2:after {
			display:						none;
		}
	.content-10 h3 {
		font-size:							var(--huge-font-size);
		font-weight:						500;
		text-align:							center;
	}
		.content-10 h3:after {
			margin:							0 auto;
		}
	.content-10 p {
		text-align:							center;
		font-size:							var(--medium-font-size);
		padding:							0 50px;
	}
/*----------------------------------------
			11° - Timeline
---------------------------------------- */
.content-11 {
	padding:								120px 0;
}
	.progressbar:before {
		bottom:								57px;
		content:							'';
		display:							block;
		height:								6px;
		position:							absolute;
		z-index:							1;
		width:								100%;
	}
	.progressbar {
		display:							flex;
		width:								100%;
		justify-content:					space-between;
		align-items:						center;
	}
		.progressbar li {
			font-family:					var(--title-font);
			font-weight:					500;
			font-size:						var(--medium-font-size);
			list-style:						none;
			z-index:						2;
			width:							120px;
			line-height:					120px;
			text-align:						center;
			border-radius:					60px;
		}
			.color-white .progressbar:before {
				background:					none repeat scroll 0 0 var(--yellow-1);
			}
			.color-white .progressbar li {
				background:					var(--yellow-1);
				color:						var(--black-1);	
			}
			.color-black .progressbar:before {
				background:					none repeat scroll 0 0 var(--grey-3);
			}
			.color-black .progressbar li {
				background:					var(--grey-3);
				color:						var(--black-1);	
			}
			.color-yellow .progressbar:before {
				background:					none repeat scroll 0 0 var(--black-1);
			}
			.color-yellow .progressbar li {
				background:					var(--black-1);
				color:						var(--white-1);	
			}
/*----------------------------------------
			12° - Parallax
---------------------------------------- */
.parallax-content {
	height:									50vh;
	background-attachment:					fixed;
	background-position:					center;
	background-repeat:						no-repeat;
	background-size:						cover;
}
	.content-12.color-white {
		background:							var(--white-1-50);
	}
	.content-12.color-black {
		background:							var(--black-1-50);
	}
	.parallax-content.color-yellow {
		background-blend-mode:				multiply;
	}
	.parallax-content > div {
		height:								100%;
		display:							flex;
		align-items:						center;
	}
	.content-12 h2 {
		text-align:							center;
	}
		.content-12 h2:after {
			display:						none;
		}
	.content-12 p {
		text-align:							center;
		font-size:							var(--medium-font-size);
		padding:							0 50px;
	}
/*----------------------------------------
			12° - Parallax
---------------------------------------- */
.parallax-content .text-white {
	color:									var(--white-1);
}
.parallax-content .text-black {
	color:									var(--black-1);
}
.parallax-content .text-yellow {
	color:									var(--yellow-1);
}
/*----------------------------------------
			13° - Quote
---------------------------------------- */
.content-13 .content-box {
	padding:								75px 0;
	text-align:								center;
}
		.content-13 h2:after {
			display:						none;
		}
	.content-13 p {
		text-align:							center;
		font-size:							var(--medium-font-size);
		padding:							0 50px;
	}
/*----------------------------------------
			14° - Encart
---------------------------------------- */
.bg-black-white {
	  background: 							linear-gradient(180deg, var(--black-1) 50%, var(--white-1) 50%);
}
.bg-black-yellow {
	  background: 							linear-gradient(180deg, var(--black-1) 50%, var(--yellow-1) 50%);
}
.bg-white-black {
	  background: 							linear-gradient(180deg, var(--white-1) 50%, var(--black-1) 50%);
}
.bg-grey-black {
	  background: 							linear-gradient(180deg, var(--white-2) 50%, var(--black-1) 50%);
}
.bg-white-yellow {
	  background: 							linear-gradient(180deg, var(--white-1) 50%, var(--yellow-1) 50%);
}
.bg-yellow-black {
	  background: 							linear-gradient(180deg, var(--yellow-1) 50%, var(--black-1) 50%);
}
.bg-yellow-white {
	  background: 							linear-gradient(180deg, var(--yellow-1) 50%, var(--white-1) 50%);
}
.encart {
	border-radius:							25px;
	justify-content:						space-around;
}
	.encart h2 {
		align-self:							flex-start;
		width:								100%;
		margin-top:							50px;
	}
	.encart-item {
		margin:								50px 0;
		flex-grow:							1;
		flex-basis:							0;
	}
		.color-yellow .encart-item {
			border-right:					1px solid var(--black-1);
		}
		.color-white .encart-item {
			border-right:					1px solid var(--black-1);
		}
		.color-black .encart-item {
			border-right:					1px solid var(--white-1);
		}
	.encart-item:last-child {
		border-right:						none;
	}
	.encart-item p {
		text-align:							center;
	}
		.encart-item p:first-child {
			margin:							0 0 10px;
			font-family:					var(--title-font);
			line-height:					30px;
			font-weight:					700;
			font-size:						var(--large-font-size);
		}
		.encart-item p:nth-child(2) {
			padding:						0 15%;
		}
/*----------------------------------------
			15° - Galerie
---------------------------------------- */
.content-14 {
	padding:								75px 0 0;
}
.flex-gallery {
	list-style:								none;
	display:								flex;
	flex-wrap:								wrap;
	justify-content:						flex-start;
}
	.flex-gallery li {
		width:								25%;
		position:							relative;
	}
		.flex-gallery li img {
			width:							100%;
			height:							auto;
			z-index:						1;
		}
		.flex-gallery li .zoom-icon {
			display:						block;
			position:						absolute;
			left:							50%;
			top:							50%;
			right:							50%;
			bottom:							50%;
			cursor:							pointer;
			opacity:						0;
			background-position:			center;
			background-repeat:				no-repeat;
			background-size:				48px 48px;
			-webkit-transition:				all .5s ease;
			-moz-transition:				all .5s ease;
			-o-transition:					all .5s ease;
			transition:						all .5s ease;
		}
			.flex-gallery li:hover .zoom-icon {
				left:						0%;
				top:						0%;
				right:						0%;
				bottom:						0%;
				opacity:					1;
			}
			.color-black .zoom-icon {
				background-color:			var(--black-1-50);
				background-image:			url(https://www.tractafric-equipment.com/images/icon-search-white.svg);
			}
			.color-white .zoom-icon {
				background-color:			var(--white-1-50);
				background-image:			url(https://www.tractafric-equipment.com/images/icon-search-yellow.svg);
			}
			.color-yellow .zoom-icon {
				background-color:			var(--yellow-1-50);
				background-image:			url(https://www.tractafric-equipment.com/images/icon-search-black.svg);
			}
/*----------------------------------------
			16° - Histoire
---------------------------------------- */
#content-history {
	background:								var(--green-1);
	padding:								80px 0;
}
#content-history .grid_12 {
	padding:								0 0 40px;
}
		#content-history h2:after {
			background:						none repeat scroll 0 0 var(--yellow-1);
		}
	#content-history img {
		display:							block;
		margin:								0 auto;
	}
	#content-history h3 {
		color:								var(--yellow-1);
	}
		#content-history h3:after {
			background:						none repeat scroll 0 0 var(--white-1);
			bottom:							-5px;
		}
	#content-history .grid_6 > p {
		color:								var(--white-1);
	}
	.history-grid {
		width:								100%;
		display:							flex;
		flex-wrap:							wrap;
		justify-content:					space-around;
	}
	.history-grid > div {
		border:								2px solid var(--white-1);
		background:							var(--white-1-0);
		width:								40%;
		margin:								25px 0;
		-webkit-transition:					all 0.5s ease;
		-moz-transition:					all 0.5s ease;
		-o-transition:						all 0.5s ease;
		transition:							all 0.5s ease;
	}
		.history-grid > div:hover {
			border:							2px solid var(--white-1);
			background:						var(--white-1);
		}
		.history-grid > div p {
			text-align:						center;
			color:							var(--white-1);
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
			.history-grid > div:hover p {
				color:						var(--black-3);
			}
			.history-grid > div p:first-child {
				margin:						0 0 -10px;
				font-family:				var(--title-font);
				font-weight:				700;
				font-size:					var(--large-font-size);
			}
			.history-grid > div p:nth-child(2) {
				padding:					0 15%;
			}
/*----------------------------------------
			17° - News
---------------------------------------- */
#news_main .grid_4 {
	background-position:					center;
	background-repeat:						no-repeat;
	background-size:						cover;
}
	#news_main .grid_4 > div {
		margin:								15px;
		padding:							25px;
		height:								calc(100% - 84px);
		border:								2px solid var(--white-4);
		background:							var(--green-1);
	}
				#news_main .grid_4 > div:hover {
		background: linear-gradient(
			180deg,
			rgba(31, 107, 58, 0.9) 0%,
			rgba(46, 139, 87, 0.85) 50%,
			rgba(20, 82, 44, 0.9) 100%
		);
}
		#news_main .grid_4 > div h3 {
			font-size:						var(--huge-font-size);
		}
		#news_main .grid_4 > div p {
			text-align:						left;
			color:							var(--white-1);
			font-size:						var(--medium-font-size);
			padding:						0 0 25px;
		}
		#news_main .grid_4 > div .button {
			color:							var(--white-1);
			border:							2px solid var(--white-1);
			background:						var(--white-1-0);	
		}
			#news_main .grid_4 > div .button:hover {
				color:						var(--black-1);
				background:					var(--white-1);		
			}
/*----------------------------------------
			18° - Témoignages
---------------------------------------- */
/*----------------------------------------
            29° - Testimonials Slider
---------------------------------------- */

#content-testimonials {
    position: relative;
    width: 100%;
    background: var(--green-1); /* Fond noir comme sur l'image */
    overflow: hidden;
    z-index: var(--z-normal); /* Reste sous la navbar */
}

/* On cible le conteneur de chaque slide */
#content-testimonials .container > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 600px;
    position: relative;
    padding: 80px 0;
}

/* Simulation du background image via l'attribut data-src 
   Note : Si tu n'utilises pas de JS pour injecter le background, 
   il faudra le faire manuellement en CSS ou via inline style. */

/* La zone de contenu (Texte à gauche) */
.black-slide.camera_caption {
    width: 50%;
    padding-right: 5%;
    position: relative;
    z-index: 5;
    background: transparent !important; /* On annule les styles par défaut du plugin */
    text-align: left !important;
}

#content-testimonials h2 {
    color: var(--yellow-1);
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 30px;
}

#content-testimonials h2:after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--white-1);
    margin-top: 15px;
}

#content-testimonials p {
    color: var(--white-1);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Style du bouton "En savoir plus" */
#content-testimonials .black-slide a {
    display: inline-block;
    padding: 15px 35px;
    background: var(--yellow-1);
    color: var(--black-1);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

#content-testimonials .black-slide a:hover {
    background: var(--white-1);
    color: var(--black-1);
}

/* Simulation de l'image/vidéo à droite */
/* Si tu utilises un plugin, il gère l'image. Sinon, on crée un emplacement : */
#content-testimonials .container > div:after {
    content: '';
    display: block;
    width: 45%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-bottom: 8px solid var(--yellow-1);
    /* L'image est gérée par ton plugin via data-src normalement */
}

/*----------------------------------------
            Responsive
---------------------------------------- */

@media (max-width: 1024px) {
    .black-slide.camera_caption {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    #content-testimonials h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    #content-testimonials .container > div {
        padding: 40px 20px;
    }
    
    #content-testimonials p {
        font-size: 16px;
    }
}

.testimonials .content-box {
	display:								flex;
	justify-content:						flex-end;
}
.testimonials .container {
	position:								relative;
	height:									350px;
	padding:								0 0 75px;
	margin:									75px 0 0px!important;
	display:								block;
	width:									50%;
}
.testimonials a, .testimonials img, 
.testimonials ol, .testimonials ul, .testimonials li,
.testimonials table, .testimonials tbody, .testimonials tfoot, .testimonials thead, .testimonials tr, .testimonials th, .testimonials td {
	background: 							none;
	border: 								0;
	font: 									inherit;
	font-size: 								100%;
	margin: 								0;
	padding: 								0;
	vertical-align: 						baseline;
	list-style: 							none
}
.testimonials img {
	max-width: 								none!important;
}
.testimonials .camera_fakehover {
	height: 								100%;
	min-height: 							168px;
	position: 								relative;
	width: 									100%;
	z-index: 								1;
}
.testimonials .camera_src {
	display: 								none;
}
.testimonials .cameraCont {
	height: 								100%;
	position: 								relative;
	width: 									100%;
	z-index: 								1;
}
.testimonials .cameraContents {
	height: 								100%;
	position: 								relative;
	width: 									100%;
	z-index: 								1;
}
.testimonials .cameraSlide {
	bottom: 								0;
	position: 								absolute;
	left: 									0;
	right: 									0;
	top: 									0;
	width: 									100%;
}
.testimonials .cameraContent {
	bottom: 								0;
	display: 								none;
	left: 									-100%;
	position: 								absolute;
	top: 									0;
	width: 									100%;
}
.testimonials .camera_target {
	bottom: 								0;
	height: 								100%;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	left: 									0;
	text-align: 							left;
	top: 									0;
	width: 									100%;
	z-index: 								0;
}
.testimonials .camera_overlayer {
	bottom: 								0;
	height: 								100%;
	left: 									0;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	top: 									0;
	width: 									100%;
	z-index: 								0;
}
.testimonials .camera_target_content {
	bottom: 								0;
	left: 									0;
	position: 								absolute;
	right: 									0;
	top: 									0;
	z-index: 								2;
}
.testimonials .camera_target_content .camera_link {
   	background: 							url(../images/blank.gif);
	display: 								block;
	height: 								100%;
	text-decoration: 						none;
}
.testimonials .camera_loader {
	display:								none;
}
.testimonials .camera_bar {
	bottom:									0;
	left: 									0;
	overflow: 								hidden;
	position: 								absolute;
	right: 									0;
	bottom: 								0;
	z-index: 								3;
}
.testimonials .camera_caption {
	position:								absolute;
	display: 								block;
	top:									0;
	right:									0;
	width:									100%;
	height:									100%;
}
.testimonials .camera_caption > div {
	position: 								relative;
	top: 									0;
}
	.testimonials .camera_caption > div h2 {
		color: 								var(--yellow-1);
		text-transform: 					uppercase;
		font-weight:						700;
		padding:							0 50px 10px 0;
	}
	.testimonials .camera_caption > div h2:after {
		   background:						none repeat scroll 0 0 var(--white-1);
	}
	.testimonials .camera_caption > div p {
		text-align:							justify;
		color: 								var(--white-1);
		font-weight: 						400;
		padding:							0 100px 25px 0;
	}
	.testimonials .camera_caption > div a {
		padding:							8px 23px;
		color:								var(--black-1);
		background:							var(--yellow-1);
		border:								2px solid var(--yellow-1);
		font-family:						var(--title-font);
		font-weight:						700;
		text-transform:						uppercase;
		font-size:							var(--medium-font-size);
	}
		.testimonials .camera_caption > div a:hover {
			color:							var(--white-1);
			background:						var(--yellow-1-0);
			border:							2px solid var(--white-1);
		}
.testimonials .camera_pag {
	position:								absolute;
	bottom:									35px;
	left:									-100%;
	width:									200%;
	z-index:								17;
}
	.testimonials .camera_pag_ul {
		display:							flex;
		margin:								0 auto;
		width:								10%;
	}
		.testimonials .camera_pag_ul li {
			flex-grow:						1;
			margin:							0 10px;
			background:						var(--white-1);
			height:							5px;
			cursor:							pointer;
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;	
		}
			.testimonials .camera_pag_ul li.cameracurrent {
				flex-grow:					2;
				background:					var(--yellow-1);
			}
			.testimonials .camera_pag_ul li span {
				display:					none;
			}
.testimonials .camera_prev, .testimonials .camera_next {
	display:								none;
}	
/*----------------------------------------
			19° - Maps
---------------------------------------- */
.google-map {
	width:									100vw;
	height:									50vh;
	background:								var(--black-4);
}
/*----------------------------------------
			20° - Contact forms
---------------------------------------- */
.contact-short p.small {
	text-align:								left;
}
.contact-full {
	padding:								80px 0;
}
.contact-full.color-yellow .content-spacer-small {
	padding:								0;
}
/*----------------------------------------
			21° - my.cat.com
---------------------------------------- */
#mycat-header {
	height:									445px;
	display:								flex;
}
#mycat-connect {
	background:								var(--white-1);
	width:									445px;
	height:									100%;
}
#mycat-banner {
	background-image:						url(../images/mycat-01.jpg);
	background-position:					top center;
	background-repeat:						no-repeat;
	background-size:						cover;
}
	#mycat-banner h1 {
		padding:							0;
		margin:								0;
		font-size:							var(--title-font-size);
		text-transform:						none;
		color:								var(--white-1);
	}
	#mycat-banner h4 {
		margin:								-30px 0 0;
		font-size:							var(--huge-font-size);
		color:								var(--white-1);
	}
	#mycat-banner p {
		width:								40%;
		color:								var(--white-1);
	}
.mycat-insert {
	background:								var(--white-2);
}
	.mycat-insert .encart-item {
		margin:								50px 15px;
		display:							flex;
		justify-content:					center;
		flex-wrap:							wrap;
	}
		.mycat-insert .encart-item img {
			display:						block;
			margin:							0 0 10px;
			height:							50px;
			width:							auto;
		}
			.mycat-insert .encart-item p:first-of-type {
				font-weight:				bold;
				width:						100%;
			}
	.visionlink-content p {
		text-align:							center;
		font-size:							var(--medium-font-size);
		padding:							0 50px;
	}
	.visionlink-content h2 {
		text-align:							center;
		font-size:							var(--huge-font-size);
		text-transform:                     none;
	}
		.visionlink-content h2:after {
			display:						none;
		}
/*----------------------------------------
			22° - Filtres
---------------------------------------- */
.filters {
	display:								flex;
	gap:									50px;
	padding-top:							50px;
}
	.filters > div {
		flex-basis:							30%;
		flex-grow:							1;
		padding:							25px;
	}
		.filters-number {
			display:						flex;
		}
			.filters-number h2 {
				font-size:					156px;
				line-height:				130px;
				padding-right:				25px;
			}
				.filters-number h2:after,
				.filters-number h3:after {
					display:				none;
				}

/*----------------------------------------
			23° - Groupe
---------------------------------------- */
.pillars {
	width:									20%;
}
	.pillars img {
		width:								70%;
		margin:								50px 15% 25px;
	}
.group-rse {
	background-size:						cover;
	background-image:						url(../images/infos-groupe-06.jpg);
	background-position:					center;
}
	.group-rse .content-box {
		width:								960px;
	}
		.group-rse .flex-container {
			justify-content:				center;
		}
			.group-rse .flex-container h4 {
				width:						calc(30% - 50px);
				padding:					25px;
				color:						var(--black-01);
				text-align:					center;
				font-weight:				700;
				font-size:					var(--medium-font-size);
			}
.group-key-figures {
	background:								var(--black-01);
}
	.group-key-figures .history-grid > div {
		border:								2px solid var(--black-1);
		background:							var(--black-1-0);
		width:								20%;
	}
		.group-key-figures .history-grid > div:hover {
			border:							2px solid var(--black-1);
			background:						var(--black-1);
		}
		.group-key-figures .history-grid > div p {
			color:							var(--black-1);
		}
			.group-key-figures .history-grid > div:hover p {
				color:						var(--white-3);
			}
.group-network .flex-container .flex-container {
	padding:								25px 0;
	border:									1px solid var(--yellow-1);
	box-shadow:								0 14px 18px 0 rgba(0, 0, 0, 0.1), 0 16px 30px 0 rgba(0, 0, 0, 0.1);
	justify-content:						space-around;
}
	.group-network .flex-container .flex-container h3 {
		width:								100%;
	}
		.group-network .flex-container .flex-container h3:after {
			display:						none;
		}
.network {
	width:									20%;
	padding:								20px 45px;
}
	.network p {
		text-align:							center;
		font-family:						var(--title-font);
		font-size:							var(--medium-font-size);
	}
		.network img {
			display:						block;
			width:							50%;
			height:							auto;
			margin:							0 auto;
			padding:						25px;
			border:							1px solid var(--white-3);
			background:						var(--white-1);
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
			.network img:hover {
				border:						1px solid var(--yellow-1);
				background:					var(--white-2);
			}
/*----------------------------------------
			24° - Groupe
---------------------------------------- */
.compliance-alert p {
	text-align:								center;
}
a.big-link {
	font-size:								var(--huge-font-size);
	padding:								10px;
	font-weight:							700;
	text-transform:							uppercase;
	letter-spacing:							.75rem;
}
.color-yellow a.big-link {
	color:									var(--white-1);
	background:								var(--black-1);	
}
.color-yellow a.big-link:hover {
	color:									var(--yellow-1);
}
/*----------------------------------------
			25° - Network
---------------------------------------- */
#addresses-listing .item-3 {
	margin:									15px;
	background:								var(--black-4);
}
	#addresses-listing .item-3 h4 {
		color:								var(--yellow-1);
		font-weight:						400;
		font-size:							var(--medium-font-size);
	}
	.contact-address {
		padding:							0 0 0 35px;
		background-image:					url(https://www.tractafric-equipment.com/images/icon-map.svg);
		background-position:				top left;
		background-repeat:					no-repeat;
		background-size:					25px;
	}
	.contact-phone {
		line-height:						25px;
		padding:							0 0 0 35px;
		background-image:					url(https://www.tractafric-equipment.com/images/icon-phone.svg);
		background-position:				top left;
		background-repeat:					no-repeat;
		background-size:					25px;
	}
/*----------------------------------------
			26° - Listing machines
---------------------------------------- */
.machines-listing {
	padding:								120px 0 95px;
}
	.machines-listing.color-white {
		border-bottom:						10px solid var(--yellow-1);
	}
	.machines-listing.color-black {
		border-bottom:						10px solid var(--yellow-1);
	}
	.machines-listing.color-yellow {
		border-bottom:						10px solid var(--black-1);
	}
.machines-full-listing {
	display:								grid;
	grid-template-columns:					repeat(4, 1fr);
	grid-auto-rows:							1fr;
	grid-column-gap:						15px;
	grid-row-gap:							15px;
	padding:								0 0 75px;
}
	.machines-listing .grid_12 h1 {
		font-size:							58px;
		font-weight:						700;
		line-height:						58px;
		margin:								0;
		padding:							0 0 25px;
		text-transform:						uppercase;
	}
	.machines-listing p.epigraph {
		font-size:							18px;
		line-height:						26px;
	}
	.machines-listing p.listing-count {
		border-top:							1px solid var(--white-4);
		font-family:						var(--title-font);
		font-size:							18px;
		font-weight: 						700;
		letter-spacing:						1px;
		text-transform:						uppercase;
		margin:								25px 0;
		padding:							10px 0 0;
	}
	.grid-item {
		display:							flex;
		flex-wrap:							wrap;
		position:							relative;
		padding:							20px;
		border:								1px solid var(--white-2);
		border-radius:						4px;
		box-shadow:							0 14px 18px 0 rgba(0, 0, 0, 0), 0 16px 30px 0 rgba(0, 0, 0, 0);
		-webkit-transition:					all 0.5s ease;
		-moz-transition:					all 0.5s ease;
		-o-transition:						all 0.5s ease;
		transition:							all 0.5s ease;
	}
				.machines-listing.color-white .grid-item {
					border:					1px solid var(--white-2);
				}
				.machines-listing.color-black .grid-item {
					border:					1px solid var(--grey-2);
				}
				.machines-listing.color-yellow .grid-item {
					background:				var(--white-1);
					border:					1px solid var(--white-2);
				}
		.grid-item:hover {
			box-shadow:						0 14px 18px 0 rgba(0, 0, 0, 0.1), 0 16px 30px 0 rgba(0, 0, 0, 0.15);
		}
			.grid-item h3 {
				width:						100%;
				font-family:				var(--main-font);
				font-size:					12px;
				font-weight:				700;
			}
				.grid-item h3:after {
					display:				none;
				}
			.grid-item h4 {
				width:						100%;
				font-size:					20px;
				font-weight:				500;
				letter-spacing:				0;
				text-transform:				none;
			}
			.grid-item img {
				margin:						0 0 25px;
				width:						100%;
			}
			.grid-item p {
				width:						100%;
			}
			.grid-item p.spec {
				color:						var(--grey-3);
				font-size:					12px;
				margin:						0;
			}
			.grid-item a.button {
				width:						100%;
				align-self:					flex-end;
				display:					block;
				text-align:					center;
				background-color:			var(--yellow-1);
				border-color:				var(--yellow-1);
				color:						var(--black-1);
			}
			.machines-listing.color-yellow .grid-item a.button {
				background-color:			var(--black-1);
				border-color:				var(--black-1);
				color:						var(--yellow-1);
			}
			.machines-listing.color-yellow .grid-item a.button:hover {
				background-color:			var(--white-1);
				border-color:				var(--black-1);
				color:						var(--black-1);
			}
					.machines-listing.color-white .grid-item h4 {
							color: 			var(--black-3);
					}
					.machines-listing.color-black .grid-item h4 {
							color: 			var(--white-3);
					}
					.machines-listing.color-yellow .grid-item h4 {
							color: 			var(--black-3);
					}
/*----------------------------------------
			27° - Listing catégories
---------------------------------------- */
#categories-listing {
	position: relative;
	z-index: 1;
	padding:								120px 0 95px;
	border-bottom:							10px solid var(--yellow-1);
}
#categories-listing h2 {
	margin:									0 0 75px;
}
	#categories-listing .listing {
		justify-content:						space-evenly;
	}
	#categories-listing .item-3 {
		width:								27%;
		padding:							20px 0 0;
		margin:								0 0 50px;
		box-shadow:							0 14px 18px 0 rgba(0, 0, 0, 0), 0 16px 30px 0 rgba(0, 0, 0, 0);
		-webkit-transition:					all 0.5s ease;
		-moz-transition:					all 0.5s ease;
		-o-transition:						all 0.5s ease;
		transition:							all 0.5s ease;
	}
		#categories-listing .item-3:hover {
				box-shadow:					0 14px 18px 0 rgba(0, 0, 0, 0.01), 0 16px 30px 0 rgba(0, 0, 0, 0.05);
				z-index: 0;
		}
		#categories-listing .item-3 h4 {
			width:							calc(100% - 30px);
			margin:							0;
			padding:						15px;
			background:						var(--yellow-1);
			font-weight:					700;
			line-height:					1;
			font-size:						var(--medium-font-size);
			text-align:						center;
			color: 							var(--green-1);
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
			#categories-listing .item-3:hover h4 {
				background:					var(--green-1);
				color: 						var(--yellow-1);
			}
/*----------------------------------------
			28° - Listing news
---------------------------------------- */
#news-listing {
	padding:								120px 0;
}
	#news-listing.color-white {
		background:							var(--white-2);
	}
	#news-listing.color-black {
		background:							var(--black-2);
	}
	#news-listing.color-yellow {
		background:							var(--yellow-2);
	}
	.limit-3 .item-3:nth-child(n+5) {
		display: none;
	}
	#news-listing .item-3, #news-listing .item-2 {
		background:							var(--white-1);
		position:							relative;
		margin:								0 0 50px;
		box-shadow:							0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
		-webkit-transition:					all 0.5s ease;
		-moz-transition:					all 0.5s ease;
		-o-transition:						all 0.5s ease;
		transition:							all 0.5s ease;
	}
		#news-listing .item-3:hover, #news-listing .item-2:hover {
			box-shadow:						0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		#news-listing .item-3 img, #news-listing .item-2 img {
			width:							100%;
			border-bottom:					3px solid var(--yellow-1);
		}
		#news-listing .item-3 h4, #news-listing .item-2 h4 {
			padding:						0 0 25px;
			font-weight:					700;
			line-height:					1;
			text-align:						left;
			color: 							var(--black-3);
		}
		#news-listing .item-3 p, #news-listing .item-2 p {
			margin-bottom:					50px;
			color:							var(--black-1);
		}
		#news-listing .item-3 .button, #news-listing .item-2 .button {
			position:						absolute;
			bottom:							0;
			left:							0;
			width:							calc(100% - 50px);
			color:							var(--black-1);
			background:						var(--white-1);
			border-color:					var(--white-1);
		}
			#news-listing .item-3:hover .button, #news-listing .item-2:hover .button {
				color:						var(--yellow-1);
			}
/*----------------------------------------
			29° - Machine page
---------------------------------------- */
.machine-1 h1 {
	font-size:								42px;
	font-weight:							700;
	line-height:							38px;
}
	.machine-1 h1 span {
		display:							block;
		font-size:							56px;
		font-weight:						400;
		line-height:						50px;
		margin:								25px 0;
	}
.machine-1 a.button {
	display:								block;
	margin-bottom:							25px;
	text-align:								center;
	background-color:						var(--yellow-1);
	border-color:							var(--yellow-1);
	color:									var(--black-1);
}
	.machine-1 a.button:hover {
		background:							var(--black-1);
		color:								var(--yellow-1);
		border:								2px solid var(--black-1);
	}
.machine-1 h3 {
	margin:									25px 0;
	font-size:								18px;
}
	.machine-1 h3:after {
		display:							none;
	}
.machine-main-specs h4 {
	font-family:							var(--main-font);
	color:									var(--grey-3);
	font-size:								14px;
	text-transform:							none;
	letter-spacing:							0;
	margin:									0;
	padding:								0;
}
.machine-main-specs p {
	font-size:								28px;
	line-height:							32px;
	margin:									0 0 15px;
}
.machine-2 h3 {
	color:									var(--white-1);
	font-size:								28px;
	font-weight:							400;
	line-height:							32px;
	text-transform:							none;
}
	.machine-2 h3:after {
		display:							none;
	}
.machine-2 h4 {
	color:									var(--white-1);
	font-size:								42px;
	font-weight:							600;
	letter-spacing:							0;
	line-height:							44px;
	text-transform:							none;	
}
.machine-2 h5 {
	color:									var(--white-1);
	font-family:							var(--title-font);
	font-size:								28px;
	font-weight:							600;
	letter-spacing:							0;
	line-height:							32px;
	text-transform:							none;	
}
	.machine-3 .specs-select {
		list-style:							none;
		margin-bottom:						75px;
	}
		.machine-3 .specs-select li {
			background-color:				var(--black-1);
			border-bottom:					1px solid var(--grey-2);
			border-left:					5px solid var(--black-1);
			cursor:							pointer;
			color:							var(--white-1);
			font-family:					var(--title-font);
			font-size:						18px;
			font-weight:					600;
			line-height:					54px;
			padding:						0 0 0 15px;
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
			.machine-3 .specs-select li:hover {
				background-color:			var(--black-2);
				border-left:				5px solid var(--white-2);
			}
			.machine-3 .specs-select li.active {
				background-color:			var(--black-4);
				border-left:				5px solid var(--yellow-1);
			}
			.machine-3 .spec-content {
				display:					none;
			}
				.machine-3 .spec-content.open {
					display:				block;
					margin-bottom:			75px;
				}
				.machine-3 .spec-content img {
					display:				block;
					margin:					0 auto 25px;
					width:					100%;
					height:					auto;
				}
.phone-contact h2 {
	border-bottom:							1px solid var(--black-1);
	font-size:								30px;
	font-weight:							400;
	font-weight:							38px;
	padding:								0 0 10px;
	margin:									0 auto;
	width:									fit-content;
}
	.phone-contact h2:after {
		display:							none;
	}
	.phone-contact > div > .grid_6 {
		width:								calc(50% - 1px);
	}
		.phone-contact > div > div:first-child {
			border-right:					1px solid var(--black-1);
		}
	.phone-contact p {
			text-align:						center;
	}
		.phone-contact a {
			font-family:					var(--title-font);
			font-size:						96px;
			font-weight:					700;
			line-height:					72px;
		}
		.phone-contact > p {
			color:							var(--yellow-1);
			display:						inline-block;
			font-size:						24px;
			background:						var(--black-1);
			line-height:					24px;
			margin:							25px 0 0;
			padding:						4px 12px;
		}
.machine-4 {
	padding-bottom:							75px;
}
	.machine-4 .grid_12 h2 {
		margin-top:							50px;
	}
			.machine-4 ul {
				list-style:					none;
			}
				.machine-data li div {
					background-image:		url(https://www.tractafric-equipment.com/images/chevron-down.svg);
					background-position:	center right;
					background-size:		32px 32px;
					background-repeat:		no-repeat;
					border-top:				1px solid var(--white-3);
					cursor:					pointer;
					font-family:			var(--title-font);
					font-size:				16px;
					font-weight:			600;
					line-height:			52px;
					text-transform:			uppercase;
					-webkit-touch-callout:	none;
					-webkit-user-select:	none;
					-khtml-user-select:		none;
					-moz-user-select:		none;
					-ms-user-select:		none;
					user-select:			none;
				}
				.machine-data li.open div {
					background-image:		url(https://www.tractafric-equipment.com/images/chevron-up.svg);
				}
					.machine-data li ul {
						display:			none;
					}
					.machine-data li.open ul {
						display:			block;
						margin-bottom:		25px;
					}
					.machine-data ul li {
						display:			flex;
						background-color:	var(--white-2);
					}
					.machine-data ul li:nth-child(even) {
						background-color:	var(--white-1);
					}
						.machine-data ul li span {
							line-height:	18px;
							padding:		15px 0 15px 10px;
							width:			calc(50% - 10px);
						}
						.machine-data ul li span:first-child {
							font-weight:	700;
						}
						.machine-data.single-list ul li span {
							line-height:	18px;
							padding:		15px 0 15px 10px;
							width:			calc(100% - 10px);
							font-weight:	300;
						}
/*----------------------------------------
			30° - Réseaux sociaux
---------------------------------------- */
.social {
	background:								var(--green-1);
	padding:								25px 0;
}
	.social ul {
		display:							flex;
		justify-content:					center;
		list-style:							none;
	}
		.social li a svg {
			fill:							var(--yellow-2);
			width:							45px;
			height:							45px;
			margin:							0 25px;
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
			.social li a:hover svg {
				fill:						var(--white-1);
			}
/*----------------------------------------
			31° - Footer
---------------------------------------- */
footer {
	background:								var(--green-1);
	 position: relative;
    z-index: 1;
}
	footer .logo {
		display:							block;
		width:								220px;
		height:								58px;
		margin:								0 0 25px;
		background-image:					url(../images/logo.png);
		background-position:				top left;
		background-repeat:					no-repeat;
		background-size:					220px auto;
	}
.no-brand footer .logo {
		background-image:					url(../images/logo.png);
}
	footer p {
		font-size:							var(--small-font-size);
		text-align:							left;
	}
		footer li a:before {
			content:						'>';
			padding:						0 10px 0 0;
		}
			footer .color-black a:hover {
				color:						var(--yellow-1);
			}
#copyright {
	background:								var(--green-3);
	padding:								25px 50px 100px;
}
	#copyright ul {
		display:							flex;
	}
		#copyright ul:last-child {
			justify-content:				flex-end
		}
		#copyright li {
			list-style:						none;
			font-family:					var(--title-font);
			font-weight:					400;
			color:							var(--white-4);
			font-size:						var(--regular-font-size);
			line-height:					30px;
			padding:						0 15px 0 0;
		}
			#copyright a {
				font-family:				var(--title-font);
				font-weight:				400;
				color:						var(--white-4);
				font-size:					var(--regular-font-size);
				line-height:				30px;
			}
				#copyright a:hover {
					color:					var(--white-1);
				}
			#copyright li:after {
				content:					'|';
				padding:					0 0 0 15px;
			}
				#copyright li:last-child:after {
					display:				none;
				}
#st-cmp-v2 .st-cmp-app {
	display:								none;
}
/*----------------------------------------
			32° - Mobile menu
---------------------------------------- */
#mobile-menu {
	position:								fixed;
	z-index:								999;
	top:									0px;
	left:									0;
	width:									100vw;
	height:									calc(100vh - 70px);
	background:								var(--white-1);
	overflow-y:								scroll;
	-webkit-transition:						all 0.5s ease;
	-moz-transition:						all 0.5s ease;
	-o-transition:							all 0.5s ease;
	transition:								all 0.5s ease;
}
	#mobile-menu.closed {
		left:								100vw;
	}
	#mobile-menu ul {
		position:							relative;
	}
		#mobile-menu > ul > li {
			background-color:				var(--white-1);
			border-top:						1px solid var(--white-3);
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
				#mobile-menu > ul > li.has-ul {
					background-image:		url(https://www.tractafric-equipment.com/images/chevron-down.svg);
					background-position:	right 20px top 10px;
					background-size:		32px 32px;
					background-repeat:		no-repeat;
					border-top:				1px solid var(--white-3);
				}
				#mobile-menu > ul > li.has-ul.open {
					background-image:		url(https://www.tractafric-equipment.com/images/chevron-up.svg);
				}
			#mobile-menu > ul > li:first-child {
				border-top:					none;
			}
			#mobile-menu > ul > li:hover {
				background-color:			var(--white-3);
			}
				#mobile-menu > ul > li > a, #mobile-menu > ul > li > span {
					display:				block;
					color:					var(--black-3);
					cursor:					pointer;
					font-family:			var(--title-font);
					font-size:				22px;
					font-weight:			400;
					line-height:			52px;
					text-transform:			uppercase;
					-webkit-touch-callout:	none;
					-webkit-user-select:	none;
					-khtml-user-select:		none;
					-moz-user-select:		none;
					-ms-user-select:		none;
					user-select:			none;
					padding:				0 25px;
				}
					#mobile-menu > ul > li.has-ul ul {
						display:			none;
					}
					#mobile-menu > ul > li.has-ul.open ul {
						display:			block;
					}
		#mobile-menu > ul ul li {
			background-color:				var(--white-1);
			border-top:						1px solid var(--white-3);
			-webkit-transition:				all 0.5s ease;
			-moz-transition:				all 0.5s ease;
			-o-transition:					all 0.5s ease;
			transition:						all 0.5s ease;
		}
			#mobile-menu > ul ul li:hover {
				background-color:			var(--white-2);
			}
				#mobile-menu > ul ul a, #mobile-menu > ul ul span {
					display:				block;
					color:					var(--grey-3);
					cursor:					pointer;
					font-family:			var(--title-font);
					font-size:				18px;
					font-weight:			400;
					line-height:			52px;
					-webkit-touch-callout:	none;
					-webkit-user-select:	none;
					-khtml-user-select:		none;
					-moz-user-select:		none;
					-ms-user-select:		none;
					user-select:			none;
					padding:				0 50px;
				}
#menu-trigger {
	display:								none;
	position:								fixed;
	width:									70px;
	height:									70px;
	top:									-15px;
	right:									-5px;
	z-index:								999;
	cursor:									pointer;
	-webkit-transition:						all .5s ease;
	-moz-transition:						all .5s ease;
	-o-transition:							all .5s ease;
	transition:								all .5s ease
}
	#menu-trigger .inner {
		position:							relative;
		display:							block;
		height:								70px;
		width:								70px;
	}
		#menu-trigger .inner div {
			position:						absolute;
			width:							26px;
			height:							3px;
			background:						var(--white-1);
			right:							30px;
			-webkit-transition:				all .5s ease;
			-moz-transition:				all .5s ease;
			-o-transition:					all .5s ease;
			transition:						all .5s ease
		}
			#menu-trigger .inner div:first-child {
				width:						36px;
				top:						40px
			}
			#menu-trigger .inner div:nth-child(2) {
				width:						18px;
				top:						48px
			}
			#menu-trigger.closed .inner:hover div:nth-child(2) {
				width:						36px;
				top:						48px
			}
			#menu-trigger .inner div:last-child {
				width:						36px;
				top:						56px
			}
	#menu-trigger .inner div:first-child {
		top:								46px;
		-moz-transform:						rotate(-45deg);
		-webkit-transform:					rotate(-45deg);
		-o-transform:						rotate(-45deg);
		-ms-transform:						rotate(-45deg);
		transform:							rotate(-45deg)
	}
	#menu-trigger .inner div:nth-child(2) {
		width:								0;
	}
	#menu-trigger .inner div:last-child {
		top:								46px;
		-moz-transform:						rotate(45deg);
		-webkit-transform:					rotate(45deg);
		-o-transform:						rotate(45deg);
		-ms-transform:						rotate(45deg);
		transform:							rotate(45deg)
	}
	#menu-trigger.closed .inner div:first-child {
		top:								40px;
		-moz-transform:						rotate(0deg);
		-webkit-transform:					rotate(0deg);
		-o-transform:						rotate(0deg);
		-ms-transform:						rotate(0deg);
		transform:							rotate(0deg)
	}
	#menu-trigger.closed .inner div:nth-child(2) {
		width:								18px;
	}
	#menu-trigger.closed .inner div:last-child {
		top:								56px;
		-moz-transform:						rotate(0deg);
		-webkit-transform:					rotate(0deg);
		-o-transform:						rotate(0deg);
		-ms-transform:						rotate(0deg);
		transform:							rotate(0deg)
	}
/*----------------------------------------
			33° - Responsive
---------------------------------------- */
@media only screen and (max-width:1280px) {
	:root {	
		--title-font-size:					114px;
		--huge-font-size:					38px;
	}
	.content-box {
		width: 								calc(100% - 50px);
		margin: 							0 25px;
	}
	.page-title .content-box {
		width: 								100%;
		margin: 							0;
	}
	.content-box-small  {
		width: 								calc(100% - 100px);
	}
	.grid_6 .content-box {
		width: 								100%;
	}
	.content-container > .content-box {
		margin:								0 auto;
	}
	.content-box.content-spacer-large {
		width: 								calc(100% - 240px);
	}
	#main-header .content-box {
		width: 								calc(100% - 25px);
		margin: 							0 0 0 25px;		
	}
	#main-menu ul li:last-child ul {
		margin-left:						-200px;
	}
	#main-menu > ul ul {
		gap:								0 15px;
		z-index: 10000;
		margin: 0;
    padding: 0;
    z-index: 10000; /* Doit être supérieur au header et aux sections de contenu */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0 25px;
    position: absolute;
    width: 100vw;
    height: 420px;
    visibility: hidden;
	}
	#main-menu > ul ul li span {
		width:								170px;
	}
	#side-phone {
		bottom:								max(65px, calc((50vh - 315px) + 55px));
	}
	.side-icon {
		width:								30px;
		height:								30px;
		padding:							8px;
		cursor:								pointer;
		pointer-events:						visiblepainted;
		border-radius:						10px 0 0 10px;
		background:							var(--yellow-2);
	}
	.side-icon img {
		width:								30px;
		height:								auto;
	}
	.slideshow .camera_caption {
		top:								35px;
	}
	.slideshow .camera_caption > div {
		margin: 							auto 25px;
	}
	.slideshow .camera_caption > div h2 {
		margin:								20px 25px 45px 0;
	}
	.slideshow .camera_caption > div h2.smaller {
		margin:								50px 25px 0 0;
	}
	.slideshow .camera_caption > div p {
		margin:								0;
	}
	.slideshow .camera_caption > div a {
		margin:								0;
	}
	.content-container > div {
		max-width:							100%;
	}
	.group-rse .content-box {
		width:								calc(100% - 50px);
	}
	.item-2 a img {
		width:								100%;
		height:								auto;
	}
	.content-3 .grid_4 {
		overflow:							hidden;
	}
	.content-3 .grid_4 img {
		width:								100%;
	}
	.parallax-content {
		height:								75vh;
	}
	#news-listing .item-3 h4, #news-listing .item-2 h4 {
		padding:							10px 0 35px 15px;
	}
}
@media only screen and (max-width:1080px) {
	.slideshow, .slideshow .container {
		height:								calc(100vh - 100px);
	}
	#main {
		padding:							100px 0 0;
	}
	.top-header {
		position: relative;
		height:								100px;
		z-index: 1000;
	}
	.top-header #main-menu > ul {
		margin:								10px 0 0;
	}
	.top-header #header-logo {
		margin:								15px 0 0;
	}
	.top-header #header-logo .logo {
		height:								40px;
		width:								154px;
		background-size:					auto 40px;
	}
	.top-header #main-menu ul li:last-child ul {
		border-top:							none;
		margin-top:							6px;
	}
	.top-header #main-menu > ul ul {
		border-top:							none;
		margin-top:							10px;
	}
	#main-menu > ul > li > a {
		padding:							10px;	
	}
	#main-menu > ul > li > a.sf-with-ul {
		padding:							10px 10px 10px 15px;	
	}
	#main-menu > ul ul {
		gap:								0 10px;
	}
	#main-menu > ul ul li span {
		width:								160px;
	}
	#main-menu ul li:first-child ul {
		margin-left:						-200px;
		padding:							0 200px 0 0;
	}
	#main-menu > ul li:nth-child(2) ul li.column-break {
		flex-basis:							0;
	}
	.page-title {
		height:								calc(100vh - 100px);
	}
	.flex-container{
		justify-content:					space-around;
	}
	#over-header .flex-container, #copyright .flex-container {
		justify-content:					space-between;
	}
	.content-container {
		padding:							125px 0;
	}
	.content-spacer-large {
		padding:							50px 25px;
	}
	.content-image.content-spacer-large {
		height:								calc(100% - 100px);
	}
	.content-spacer {
		padding:							50px 25px;
	}
	.content-image.content-spacer {
		height:								calc(100% - 100px);
	}
	.content-spacer-small {
		padding:							10px;
	}
	.content-image.content-spacer-small {
		height:								calc(100% - 20px);
	}
	.content-box.content-spacer-large {
		width: 								calc(100% - 100px);
	}
	.testimonials .camera_pag_ul {
		width:								20%;
	}
	.item-8 {
		width:								15%;
	}
	.item-8 img {
		width:								80%;
		margin:								0 10%;
	}
	.content-10 h2 img {
		width:								100%;
		height:								auto;
	}
	.encart-item p:first-child, .encart-item p:nth-child(2) {
		padding:							0 10%;
	}
	.grid-item p.spec {
		text-align:							left;
	}
	.machine-3 .spec-content img {
		width:								100%;
		height:								auto;
		margin:								0 0 25px;
	}
	.phone-contact a {
		font-size:							72px;
		line-height:						48px;
	}
	.filters {
		display:							flex;
		gap:								25px;
		padding-top:						25px;
	}
	.filters > div {
		padding:							10px;
	}
	.filters > div > p {
		text-align:							left;
	}
}
@media only screen and (max-width:880px) {
	:root {	
		--title-font-size:					96px;
		--huge-font-size:					36px;
		--large-font-size:					24px;
		--medium-font-size:					16px;
		--regular-font-size:				12px;
		--small-font-size:					9px;
		--button-font-size:					12px;
	}
	.slideshow, .slideshow .container {
		height:								calc(100vh - 160px);
	}
	#main {
		padding:							160px 0 0;
	}
	.top-header {
		height:								154px;
	}
	.top-sticky {
		height:								124px;
	}
	.page-title, .page-title > div {
		height:								calc(100vh - 200px); 
	}
	.flex-container .grid_3, .flex-container .grid_4, .flex-container .grid_5 {
		width:								50%
	}
	#main-header .content-box {
		width: 								100vw;
		margin: 							0;	
		z-index: 1000;	
	}
	#header-logo, #main-menu, #main-menu > ul {
		width:								100vw;
	}
	#header-logo .logo {
		margin:								0 0 0 25px;
	}
	#main-menu > ul {
		display:							flex;
		flex-wrap:							nowrap;
	}
	#main-menu > ul > li {
		flex-grow:							1;
	}
	#main-menu > ul > li > a {
		padding:							10px;	
	}
	#main-menu > ul > li > a.sf-with-ul {
		padding:							10px 10px 10px 25px;	
	}
	#main-menu ul li:first-child ul {
		margin-left:						0;
		padding:							0;
	}
	#main-menu > ul li:nth-child(2) ul li.column-break {
		flex-basis:							100%;
	}
	footer .flex-container > .grid_3 {
		width:								33.333333333333333%;
	}
	footer .flex-container > .grid_3:first-child {
		width:								100%;
	}
	footer .flex-container > .grid_3:first-child > .content-spacer {
		display:							flex;
	}
	footer .logo {
		width:								260px;
	}
	footer .flex-container > .grid_3:first-child > .content-spacer > p {
		width:								calc(100% - 260px);
	}
	.content-container {
		padding:							75px 0;
	}
	.content-spacer-large, .content-spacer {
		padding:							25px;
	}
	.content-spacer-small {
		padding:							10px;
	}
	.content-image.content-spacer-large, .content-image.content-spacer, .content-image.content-spacer-small {
		height:								calc(100% - 50px);
	}
	.content-box.content-spacer-large {
		width: 								calc(100% - 100px);
	}
	.item-3, .item-4, #categories-listing .item-3 {
		width:								45%;
	}
	.item-8 {
		width:								30%;
	}
	#news-listing {
		padding:							50px 0 20px;
	}
	#categories-listing, .machines-listing {
		padding:							70px 0 45px;
	}
	.machines-full-listing {
		grid-template-columns:				repeat(3, 1fr);
	}
	.machine-1 .grid_8, .machine-1 .grid_4 {
		width:								50%;
	}
	.machine-1 .grid_4 .content-spacer-large {
		padding:							50px;
	}
	.machine-3 .grid_4, .machine-3 .grid_8 {
		width:								100%
	}
	.machine-3 .specs-select {
		margin-bottom:						25px;
	}
	.phone-contact a {
		font-size:							52px;
		line-height:						36px;
	}
	#news_main .grid_4:last-child {
		width:								100%;
	}
	
	.slideshow .camera_caption > div p {
		width:								calc(100vw - 50px);
	}
	.item-8 img {
		width:								60%;
		margin:								0 20%;
	}
	.content-3 .flex-container .grid_4, .content-3 .flex-container .grid_8 {
		width:								50%;
	}
	.page-title h1.smaller, .page-title h4.smaller, .page-title h1.smaller+h4 {
		padding:							0 0 0 25px;
		text-align:							left;
	}
	.contact-short .grid_8, .contact-short .grid_8+.grid_4 {
		width:								70%;
	}
	.contact-short .grid_8+.grid_4 {
		border-top:							1px solid var(--green-1);
		margin:								10px 0 0;
	}
	#news_main > div:last-child {
		height:								75vh;
	}
	#content-history .grid_6 {
		width:								100%;
	}
	#content-history .grid_6+.grid_6 {
		position:							absolute;
		left:								0;
		top:								100px;
		width:								60%;
		height:								calc(100% - 100px);
		background:							var(--black-3-50);
		padding:							50px 20% 0;
	}
	#addresses-listing .item-3 {
		margin:								15px 0;
	}
}
@media only screen and (max-width:680px) {
	:root {	
		--title-font-size:					82px;
		--huge-font-size:					32px;
		--large-font-size:					22px;
		--medium-font-size:					14px;
		--regular-font-size:				12px;
		--small-font-size:					9px;
		--button-font-size:					11px;
	}
	p, ul.in-text li, h3 {
		text-align:							left;
	}
	.desktop-only {
		display:							none;
	}
	.mobile-only {
		display:							block;
	}
	#menu-trigger {
		display:							block;
	}
	#main {
		padding:							70px 0 0;
	}
	.slideshow, .slideshow .container {
		height:								calc(100vh - 70px);
	}
	.page-title, .page-title > div {
		height:								calc(100vh - 110px); 
	}
	.top-header, .top-sticky {
		height:								70px;
		background:							var(--black-1);
	}
	.top-header #over-header, #main-menu {
		display:							none;
	}
	footer .flex-container > .grid_3 {
		width:								50%;
	}
	footer .flex-container > .grid_3:last-child {
		width:								100%;
	}	
	.machines-full-listing {
		grid-template-columns:				repeat(2, 1fr);
	}
	.content-container {
		padding:							50px 0;
	}
	.content-3 .flex-container .grid_4, .content-3 .flex-container .grid_8 {
		width:								100%;
	}
	.machine-3 .spec-content, .machine-3 .spec-content.open {
		display:							block;
		margin-bottom:						25px;
		padding-bottom:						15px;
		border-bottom:						1px solid var(--grey-1);
	}
	#news_main .grid_4, #news_main > div:last-child {
		width:								100%;
		height:								50vh;
	}
	#content-history .grid_6+.grid_6 {
		top:								50px;
		width:								80%;
		height:								calc(100% - 50px);
		padding:							50px 10% 0;
		z-index:							1;
	}
	#news-listing .item-3 {
		width:								100%;
	}
	.item-2 {
		min-width:							220px;
		flex-grow:							1;
	}
	.item-8 {
		width:								30%;
	}
	.contact-short .grid_8, .contact-short .grid_8+.grid_4 {
		width:								100%;
	}
	.group-key-figures .history-grid > div, .pillars {
		width:								40%;
	}
	.group-rse .flex-container h4 {
		width:								calc(100% - 50px);
	}
	.group-network {
		padding:							50px 0;
	}
	.network {
		width:								45%;
		padding:							20px 0;
	}
	.encart {
		gap:								20px 0;
		padding:							20px 0;
	}
	.encart-item {
		margin:								0;
		flex-grow:							1;
		min-width:							180px;
	}
	.encart-item p:first-child {
		line-height:						42px;
		font-size:							48px;
	}
	a.big-link {
		font-size:							var(--large-font-size);
		letter-spacing:						4px;
	}
	.crc .parallax-content {
		min-height:							710px;
	}
	.grid_6 {
		order:								2;
	}
	.content-image {
		order:								1;
	}
	.content-image img {
		display:							block;
		width:								100%;
		height:								auto;
	}
	.phone-contact h2 {
		width:								100%;
	}
	.phone-contact > div > .grid_6 {
		width:								100%;
		padding:							20px 0 10px;
	}
	.phone-contact > div > div:first-child {
		border-right:						none;
		border-bottom:						1px solid var(--black-1);
	}
	.phone-contact > p {
		font-size:							22px;
		margin:								5px 0 0;
	}
	.text-2columns {
		column-count: 						2;
		column-gap: 						50px;
	}
	.machine-1 .grid_8, .machine-1 .grid_4 {
		width:								100%;
	}
	.filters {
		flex-wrap:							wrap
	}
	.filters > div {
		min-width:							calc(100% - 50px);
		flex-grow:							1;
		padding:							25px;
	}
	.page-title h4.smaller, .page-title h1.smaller+h4 {
		font-size:							2rem;
	}
	.page-title h1.smaller {
		font-size:							3rem;
	}
	.ariane li {
		white-space:						nowrap;
	}
	.machines-listing p.epigraph {
		font-size:							var(--regular-font-size);
		line-height:						20px;
	}
	footer .logo {
		display:							block;
		width:								180px;
		height:								80px;
		margin:								0 0 25px;
		background-position:				center left;
		background-size:					160px auto;
	}
	footer .flex-container > .grid_3:first-child > .content-spacer > p {
		width:								calc(100% - 200px);
	}
	footer .grid_3:last-child p {
		font-size:							var(--regular-font-size);
	}
	#copyright {
		padding:							25px;
	}
	#copyright nav {
		width:								100%;
	}
	#copyright ul {
		display:							block;
	}
	#copyright li:after, #copyright li:last-child:after {
		display:							none;
	}
	.testimonials .container {
		height:								calc((100vw - 50px) * .5625);
		padding:							0 0 340px;
		width:								100%;
	}
	.testimonials .cameraContent {
		left: 								0;
		width: 								100%;
	}
	.testimonials .camera_target {
		height: 							calc((100vw - 50px) * .5625);
	}
	.testimonials .camera_caption {
		top:								calc(((100vw - 50px) * .5625) + 25px);
	}
	.testimonials .camera_caption > div h2 {
		padding:							0 0 10px;
	}
	.testimonials .camera_caption > div p {
		padding:							0 0 10px;
	}
	.testimonials .camera_pag {
		left:								0%;
		width:								100%;
	}
	.testimonials .camera_pag_ul {
		width:								20%;
	}
	.flex-gallery li {
		width:								50%;
	}
}
@media only screen and (max-width:480px) {
	.content-10 {
		display:							none;
	}
	.testimonials .container {
		padding:							0 0 460px;
	}
	.testimonials .camera_pag_ul {
		width:								50%;
	}
	.text-2columns {
		column-count: 						1;
	}	
	.machines-full-listing {
		grid-template-columns:				repeat(1, 1fr);
	}
	.input_form div.form-half {
		width:								100%;
	}
	.parallax-content {
		background-attachment:				scroll;
	}
	.item-3, .item-4, #categories-listing .item-3 {
		width:								80%;
	}vis
	.item-8 {
		width:								45%;
	}
	ul.in-text {
		padding:							10px;
		margin:								10px;	
	}
	.machine-data ul li {
		display:							block;
		padding:							15px 0;
	}
	.machine-data ul li span {
		display:							block;
		width:								calc(100% - 10px);
		padding:							0 0 0 10px;
	}
	#content-history .grid_6+.grid_6 {
		width:								calc(100vw - 50px);
		padding:							50px 25px 0 0;
	}
	#mobile-menu > ul > li > a, #mobile-menu > ul > li > span {
		padding:							0 10px;
	}
	#mobile-menu > ul ul a, #mobile-menu > ul ul span {
		padding:							0 20px;
	}
	.social li a svg {
		margin:								0 15px;
	}
	footer .flex-container > .grid_3 {
		width:								100%;
	}
	footer .flex-container > .grid_3:first-child > .content-spacer {
		display:							block;
	}
	footer .flex-container > .grid_3:first-child > .content-spacer > p {
		width:								100%;
	}


	/*chariot elevateur*/

	/* ===== CONTAINER ===== */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* ===== HERO SECTION ===== */
.page-hero {
    background-color: #e5e5e5;
    padding: 80px 0 100px;
    position: relative;
    z-index: 1;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
    background-color: #000;
    padding: 12px 0;
    font-size: 14px;
}

.breadcrumb .container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.breadcrumb a {
    color: #aaa;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #fff;
}

.breadcrumb span {
    color: #666;
}

.breadcrumb .current {
    color: #fff;
}

/* ===== TITLE ===== */
.hero-content h1 {
    font-family: 'cat-font', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* ===== UNDERLINE ===== */
.title-underline {
    width: 60px;
    height: 4px;
    background-color: #1F6B3A;
    margin-bottom: 30px;
}

/* ===== TEXT ===== */
.hero-content p {
    font-size: 20px;
    line-height: 1.8;
    color: #111;
    max-width: 1000px;
}
}