/*** fonts **/
/*** https://fonts.google.com/ 
 * télécharger la version complète variable 
 * **/
@font-face {
	font-family: "ChaneyRegular";
	src: url(/style/font/CHANEY-Regular.otf);
	font-display: swap;
}
@font-face {
	font-family: "ChaneyExtended";
	src: url(/style/font/CHANEY-Extended.otf);
	font-display: swap;
}
@font-face {
	font-family: "ChaneyUltraExtended";
	src: url(/style/font/CHANEY-UltraExtended.otf);
	font-display: swap;
}
@font-face {
	font-family: "Red Hat Display";
	src: url(/style/font/RedHatDisplay-VariableFont_wght.ttf);
	font-display: swap;
}

/*** default styles */
* {box-sizing : border-box;  padding: 0;margin: 0;}
select * {padding: 0 0.5em;}
ul, ol {list-style: none;}
a img, :link img, :visited img, object, fieldset {border: none;}
/*a:focus, a:hover {text-decoration: underline;}*/
a:active {outline: none;}
a {outline: none;}
address {font-style: normal;}
iframe {line-height : 1em; display: block;}
:link, :visited {text-decoration: none;}
legend {position: relative;left: -6px;/* ie */}
/*** font size : http://www.knacss.com/ */
html {font-size: 62.5%;}
body {background-color: #fff;color: #000;font-family: "Red Hat Display", helvetica, arial, sans-serif;font-size: 1.6em; /* equiv 14px */line-height: 1.5em; /* adapt to your design */}
input, select, textarea {font-size: 100%;}
/*** Float containers (http://www.csscreator.com/attributes/containedfloat.php) */
.clearfix:after {content: ".";display: block;height: 0;font-size:0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*** Image Replacement */
.mir {letter-spacing : -1000em;}
/*\*/
* html .mir {text-indent: -999em;overflow: hidden;}
html>body .mir {letter-spacing: normal;text-indent: -999em;overflow: hidden;}/**/
/*** generic style */
.clear {clear: both;}
div.clear {height: 0;}
.no-wrap {white-space:nowrap;}
/*** error */
.errorOutput {font-weight: bold;padding: 0.5em 20px;border-top: 2px solid #eee;border-bottom: 2px solid #eee;background: transparent url(/style/alert.gif) no-repeat left center;}
a:link, a:visited {color : #008cd9;}

*::selection { background-color: var(--orange); color: #000; }
.bg_orange *::selection { color: var(--orange); background-color: #000; }

body{ overflow-x: hidden; }

:root {
	--padding : 30px;
	--orange: #eb9a0c;
	--orange-rvb: 235,157,12;
	--bleu: #3e97be;
	--bleu-rvb: 62,151,190;
	--rouge: #eb5b4c;
	--rouge-rvb: 235,91,76;
	--perle: #eee9e7;
	--perle-rvb: 238,233,231;
	--sable: #bcad93;
	--sable-rvb: 188,173,147;
	--vert: #03904a;
	--vert-rvb: 3,144,74;
	--rotate: -3deg;
}

.page, .page_min, .page1-2 {
	width : 100%;
	max-width : 1300px;
	margin : 0 auto;
}

.page1-2 {max-width : 650px;}

.page_min {max-width : 800px;}

.col1-2,
.col1-3,
.col2-3,
.col3-4,
.col1-4,
.col1-5 {float : left;}

.col{width: 100%; }
.col3-4{width: 75%;}
.col1-2{width: 50%;}
.col1-3{width: 33.33%;}
.col2-3{width: 66.66%;}
.col1-4{width: 25%;}
.col1-5{width: 20%;}

.flexParent {
    display: flex;
    flex-wrap: wrap;
}

.flex,
.flex1-1,
.flex1-2,
.flex1-3,
.flex2-3,
.flex3-4,
.flex1-4,
.flex1-5,
.flex1-6,
.flex1-7,
.flex1-8 { 
    display: flex;
}

.flex1-1{width: 100%;}
.flex3-4{width: 75%;}
.flex1-2{width: 50%;}
.flex1-3{width: 33.33%;}
.flex2-3{width: 66.66%;}
.flex1-4{width: 25%;}
.flex1-5{width: 20%;}
.flex1-6{width: 16.66%;}
.flex1-7{width: 14.28%;}
.flex1-8{width: 12.5%;}


.flexColumn {
	flex-direction: column;
	display: flex;
}

.flex_between {
    justify-content: space-between;
}

.flex_center {
    justify-content: center;
}

.flex_start_center {
    justify-content: flex-start;
    align-items: center;
}

.flex_start_end {
    justify-content: flex-start;
    align-items: flex-end;
}

.flex_center {
    justify-content: center;
}

.flex_center_center {
    justify-content: center;
    align-items: center;
}

.flex_around_center {
    justify-content: center;
    align-items: center;
}

.flex_between_center {
    justify-content: space-between;
    align-items: center;
}

.flex_end {
    justify-content: flex-end;
}

.flex_end_center {
    justify-content: flex-end;
    align-items: center;
}

.flex_around_center {
    justify-content: space-around;
    align-items: center;
}

.align_self_center {
    align-self: center;
}

.column2 {
	-moz-column-gap: var(--padding);
	-moz-columns: 2 auto;
	-webkit-column-gap:var(--padding);
	-webkit-columns: 2 auto;
	columns: 2;
	column-gap: var(--padding);
}

.column3 {
	-moz-column-gap: var(--padding);
	-moz-columns: 3 auto;
	-webkit-column-gap: var(--padding);
	-webkit-columns: 3 auto;
	columns: 3;
	column-gap: var(--padding);
}

.padding { padding: var(--padding); }
.paddingMin { padding: calc(var(--padding) / 2); }
.paddingBig { padding: calc(2 * var(--padding)); }
.paddingExtrabig { padding: calc(3 * var(--padding)); }
.paddingMinLR {
	padding-left: calc(var(--padding) / 2);
	padding-right: calc(var(--padding) / 2);
}
.paddingBigLR, .paddingLRBig{ 
	padding-left: calc(var(--padding) * 2);
	padding-right: calc(var(--padding) * 2);
}
.paddingLR{ 
	padding-left: var(--padding);
	padding-right: var(--padding);
}
.paddingTB{ 
	padding-top: var(--padding);
	padding-bottom: var(--padding);
}
.paddingBigTB, .paddingTBBig{ 
	padding-top: calc(var(--padding) * 2);
	padding-bottom: calc(var(--padding) * 2);
}
.paddingBigLR, .paddingLRBig{ 
	padding-left: calc(var(--padding) * 2);
	padding-right: calc(var(--padding) * 2);
}
.paddingExtrabigLR, .paddingLRExtrabig{ 
	padding-left: calc(var(--padding) * 3);
	padding-right: calc(var(--padding) * 3);
}

.paddingTop { padding-top: var(--padding); }
.paddingBottom { padding-bottom: var(--padding); }

.paddingNoBottom { padding-bottom: 0 !important; }
.paddingNoTop { padding-top: 0 !important; }

.position_relative { position: relative; }

.oHidden { overflow: hidden; }

.show-1550, .show-1500, .show-1250 { display: none; }

.shadow { box-shadow: 0 0 20px rgba(0,0,0,0.2); }

/*gestion des couleurs et des fonds  */

.bg_gris_fonce {background-color : #58585a; color : #fff;}
.bg_gris_clair {background-color : #CDCDCD; color : #000;}
.bg_blanc {background-color : #fff; color : #000;}
.bg_orange {background-color : var(--orange); color : #fff;}
.bg_perle {background-color : var(--perle); color : #000;}
.bg_sable {background-color : var(--sable); color : #fff;}
.bg_bleu {background-color : var(--bleu); color : #000;}
.bg_rouge {background-color : var(--rouge); color : #000;}
.bg_vert {background-color : var(--vert); color : #fff;}
.bg_noir {background-color : #000; color : #fff;}

.gris_fonce { color: #58585a !important; }
.gris_clair { color: #CDCDCD !important; }
.blanc { color: #fff !important; }
.orange { color: var(--orange) !important; }
.perle { color: var(--perle) !important; }
.sable { color: var(--sable) !important; }
.vert { color: var(--vert) !important; }
.noir { color: #000 !important; }
 
.bg_perle a:link, .bg_perle a:visited, 
.bg_gris_clair a:link, .bg_gris_clair a:visited, 
.bg_blanc a:link, .bg_blanc a:visited {color : #000;} 

.bg_sable a:link, .bg_sable a:visited,
.bg_gris_fonce a:link, .bg_gris_fonce a:visited,
.bg_vert a:link, .bg_vert a:visited,
.bg_noir a:link, .bg_noir a:visited,
.bg_orange a:link, .bg_orange a:visited {color : #fff;} 

/*main section:not(:first-child) { margin: 20px 0; }*/
.section {padding : 80px 0; position: relative;}
.section_top {padding-top : 180px;}
.sectionLR {padding-left : 100px; padding-right : 100px;}

.margin_auto{margin: 0 auto;}
.noMargin{margin: 0;}

.relative{position : relative;}

.float_right {float : right;}
.float_left {float : left;}

.align_center {text-align : center;}
.align_right {text-align : right;}

.maj { text-transform: uppercase; }
.italic { font-style: italic; }
.noItalic { font-style: normal; }

.thin { font-weight: 100; }
.extralight { font-weight: 200; }
.light { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.extrabold { font-weight: 800; }
.black { font-weight: 900; }

.big { font-size: 120%; }
.extrabig { font-size: 140%; }
.small { font-size: 80%; }
.extrasmall { font-size: 60%; }

.block { display: block; }

.vh100 {
	height: 100vh;
}
.vw100 {
	width: calc(100dvw - 20px);
}
.vw200 {
	width: calc(200dvw - 40px);
}

.cache { display: none; }

.cursorOff { pointer-events: none; }
.cursorOn { pointer-events: initial; }

.rotate { transform: rotate(var(--rotate)); }

/*** animations ***********************************/

.zoom_container {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.zoomup { transition: 0.4s; }
.zoomup:hover {transform: scale(1.2);}

.zoomdown { transition: 0.4s; }
.zoomdown:hover {transform: scale(0.8);}

.zoomtourne { transition: 0.4s;}
.zoomtourne:hover {transform: rotate(15deg) scale(0.9);}

.zoominfini:hover {
	animation-duration: 0.8s;
	animation-name: zoominfini;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes zoominfini {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

.bg_infini.on {
	animation-duration: 4s;
	animation-name: bginfini;
	animation-iteration-count: 3;
	animation-fill-mode: forwards;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes bginfini {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.1) rotate(var(--rotate)); }
}

.fade {
	opacity: 0;
	transition: 1s;
}

.fondu_top {
	opacity: 0;
	position: relative;
	margin-top: 200px;
	transition: all 1s, width 0s;
}

.fondu_left {
	opacity: 0;
	position: relative;
	left: -1000px;
	transition: all 1s, width 0s;
}

.fondu_right {
	opacity: 0;
	position: relative;
	left: 1000px;
	transition: all 1s, width 0s;
}

.fondu_revele {
	opacity: 1;
	top: 0;
	left: 0;
	z-index: 9;
	margin-top: 0;
}

.fondu_intro {
	opacity : 0;
	overflow : hidden; 
	-webkit-animation: anim-opa-grid 3s ease-in-out forwards; /* Safari 4+ */
	-moz-animation:    anim-opa-grid 3s ease-in-out forwards; /* Fx 5+ */
	-o-animation:      anim-opa-grid 3s ease-in-out forwards; /* Opera 12+ */
	animation:         anim-opa-grid 3s ease-in-out forwards; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes anim-opa-grid {
  from { opacity: 0; }
    to { opacity: 1; }
}
@-moz-keyframes anim-opa-grid {
   from { opacity: 0; }
    to { opacity: 1; }
}
@-o-keyframes anim-opa-grid {
   from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes anim-opa-grid {
  from { opacity: 0; }
    to { opacity: 1; }
}

.duree_transition1 { transition: 0.5s; }
.duree_transition2 { transition: 1s; }
.duree_transition3 { transition: 1.5s; }
.duree_transition4 { transition: 2s; }
.duree_transition5 { transition: 2.5s; }


/*** header  *****************************************/
	header {
		position: fixed; 
		width : 100%;
		z-index : 10; 
		top : 0;
		left : 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	a#logo {
		display : block;
		width: 100%;
		max-width: 320px;
		transition: 1s;
	}

	header.header-fix a#logo {
		max-width: 0px;
		padding: 0;
	}

	nav li#nav-group a {
		color: #000;
	}
	

/*** menu *****************************************/
	
	#menuToggle	{
		display: block;
		position: absolute;
		top: var(--padding);
		left: calc(var(--padding) / 2);
		z-index: 1;
		-webkit-user-select: none;
		user-select: none;
	}

	#menuToggle a {
		text-decoration: none;
		color: #fff;
		transition: 0.3s ease;
	}

	#menuToggle a:not(.rotate):hover, #menuToggle a:not(.rotate):hover i {
		color: var(--orange);
		transform: rotate(-3deg);
	}

	#menuToggle a.rotate:hover {
		transform: none;
	}


	#menuToggle input {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px; 
		cursor: pointer;
		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */
		-webkit-touch-callout: none;
	}

	#menuToggle input ~ label { text-indent: -9999px; font-size: 1px; color: var(--orange); position: absolute; }

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span {
	  display: block;
	  width: 36px;
	  height: 3px;
	  margin-bottom: 8px;
	  position: relative;
	  background: #000;
	  z-index: 1;
	  transform-origin: 4px 0px;
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease;
	}

	#menuToggle.menu_noir span { background-color: #000; }
	#menuToggle.menu_blanc span { background-color: #fff; }

	#menuToggle span:first-child {
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2) { 
	  transform-origin: 0% 100%;
	}

	#menuToggle input:checked ~ span {
	  opacity: 1;
	  transform: rotate(45deg) translate(-1px, 0px);
	  background: #fff;
	}

	#menuToggle input:checked ~ span:nth-last-child(3) {
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	#menuToggle input:checked ~ span:nth-last-child(2) {
	  transform: rotate(-45deg) translate(0, -1px);
	}

	#menu {
		height : 100dvh;
		position: fixed;
		width: 100vw;
		top: 0;
		left: 0;
		margin: 0;
		padding: 50px; 
		background: rgba(0,0,0,0.85);
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
		transform-origin: 0% 0%;
		transform: translate(-100%, 0) scale(0) rotate(-45deg);
		transition: transform 0.8s cubic-bezier(0.77,0.2,0.05,1.0);
		text-align: center;
		font-size: 180%;
		line-height: 1.2;
		font-family: "ChaneyRegular";
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		overflow-y: scroll;
	}

	#menu li{
	  padding: 5px 0;
	}

	
	#menuToggle input:checked ~ ul {
	  transform: none;
	  opacity: 1;
	} 

	#menu li a, #menu li div {
		position: relative;
		padding: 5px 10px;
		display: inline-block;
	}

	#labelMenuCheckbox::before,
	#labelMenuCheckbox::after {
		display: none;
	}

	.lien_pro {
		position: fixed;
		top: 0;
		right: 0px;
		font-family: "ChaneyRegular";
		text-align: center;
		color: #fff !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1.2;
		padding: 20px 10px;
		font-size: 60%;
		background-color: var(--orange);
		box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
		border: 0;
		border-radius: 0 0 0 25px/25px;
		overflow: hidden;
		transition: 0.2s;
	}
	.lien_pro::before {
		content: '\f023';
		display: block;
		font-family: "Font Awesome 6 Free";
		font-weight: 700;
		font-size: 200%;
	}
	.lien_pro::after {
		content: "";
		display: block;
		position: absolute;
		width: 20px;
		height: 20px;
		background: var(--orange);
		box-shadow: 3px -2px 10px rgba(0,0,0,0.2), inset 15px -15px 15px rgba(0,0,0,0.3);
		left: 0;
		bottom: 0;
		z-index: 2;
		transform: skewX(25deg);
		transition: 0.2s;
	}
	.lien_pro:hover { border-radius: 0 0 0 40px/40px; }
	.lien_pro:hover::after {
		width: 30px;
		height: 30px;
	}


/*** accueil ****************************************************/

.sticky {
	position: sticky;
	top: 0;
	z-index: 2;
}

.masthead {
	padding-top: 111px;
	/*position: absolute;
	top: 0;
	left: 0;*/
	width: 100%;
	height: 100%;
}

/*.magnet_scroll::-webkit-scrollbar { display: none; }
.magnet_scroll {
	height: 100vh;
	scroll-snap-type: none;
	scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-width: auto;
  	scrollbar-color: var(--sable) var(--perle);
}


.magnet_scroll::-webkit-scrollbar-thumb {
    transition: 0.5s;
	background-color: var(--sable);
}
.magnet_scroll::-webkit-scrollbar-track {
	background: var(--perle);
}
.magnet_scroll::-webkit-scrollbar {
    width: 20px;
}

.magnet_scroll > * {
	scroll-snap-align: center;
}*/

/*#chiffres { position: relative; height: 500px; }*/

.chiffres_container { min-height: 300px; }

/*
.chiffres_container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 500px repeat(5,400px);
	align-items: center;
    overflow-x: hidden;
	overflow-y: auto;
    scrollbar-width: none;
	height: calc(100vw - 20px);
	width: 500px;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top right;
	transform: rotate(-90deg) translateY(-500px);
}
.chiffres_container::-webkit-scrollbar { display: none; }
.chiffres_container > * {
	transform: rotate(90deg);
}
*/

#accueil_slider {
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: transform 0.5s;
	transform-origin: center;
	overflow: hidden;
	filter: blur(1px); /* bug border firefox safari */
}
#accueil_slider.bg1 {
	-webkit-mask: url(/style/pictos/picto-calecon.svg) no-repeat center content-box;
	mask: url(/style/pictos/picto-calecon.svg) no-repeat center content-box;
	transform: scale(1.05) rotate(0deg) translateZ(1px);
}
#accueil_slider.bg2 {
	-webkit-mask: url(/style/pictos/picto-chaussettes.svg) no-repeat center content-box;
	mask: url(/style/pictos/picto-chaussettes.svg) no-repeat center content-box;
	transform: scale(1.1) rotate(3deg) translateZ(1px);
}
#accueil_slider.bg3 {
	-webkit-mask: url(/style/pictos/picto-casquette.svg) no-repeat center content-box;
	mask: url(/style/pictos/picto-casquette.svg) no-repeat center content-box;
	transform: scale(1.15) rotate(6deg) translateZ(1px);
}
#accueil_slider.bg4 {
	-webkit-mask: url(/style/pictos/picto-lingerie.svg) no-repeat center content-box;
	mask: url(/style/pictos/picto-lingerie.svg) no-repeat center content-box;
	transform: scale(1.2) rotate(9deg) translateZ(1px);
}
#accueil_slider.bg5 {
	-webkit-mask: url(/style/pictos/picto-maillot.svg) no-repeat center content-box;
	mask: url(/style/pictos/picto-maillot.svg) no-repeat center content-box;
	transform: scale(1.05) rotate(-12deg) translateZ(1px);
}
#accueil_slider.bg6 {
	-webkit-mask: url(/style/pictos/picto-t-shirt.svg) no-repeat center content-box;
	mask: url(/style/pictos/picto-t-shirt.svg) no-repeat center content-box;
	transform: scale(1.1) rotate(15deg) translateZ(1px);
}

#accueil h1 { min-height: 220px; white-space: pre; }

.listeMarques { width: 700px; max-width: 100%; }

.logos { display: flex; align-items: center; }
#marques svg { padding: 10px; max-width: 100%; max-height: 100%; }

.svg_container { height: 200px; }
.marques_cache { position: relative; }
.marques_cache .svg_container { height: 150px; }
#marques svg:not(.noFill) * { fill: #fff !important; }

.slider_ancre {
	position: absolute;
	left: 50%;
	bottom: calc(2*var(--padding));
	transform: translateX(-50%);
	transition: 0.5s;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.slider_ancre:hover {
	padding-top: calc(var(--padding) / 2);
	bottom: calc(2*var(--padding) - var(--padding) / 2);
}

#marques { transition: 0.5s; min-height: 0px; }
#marques.on { min-height: 100vh; }

.marquesClose {
	position: sticky;
	position: -webkit-sticky;
	top: calc(100dvh - 30px);
	transform: translate(calc(50vw - 100%),-100%);
	height: 32px;
}

.gridVideos {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: repeat(6,1fr);
	width: 100%;
	min-height: 80vh;
	pointer-events: none;
}
.freegun1Video {
	grid-row: 1/4;
	grid-column: 1/3;
}
.freegun2Video {
	grid-row: 4/7;
	grid-column: 1/3;
}
.capslabVideo {
	grid-row: 1/3;
	grid-column: 3/4;
}
.umbroVideo {
	grid-row: 1/3;
	grid-column: 4/5;
}
.vondutchVideo {
	grid-row: 3/5;
	grid-column: 3/4;
}
.filaVideo {
	grid-row: 3/5;
	grid-column: 4/5;
}
.freegun3Video {
	grid-row: 5/7;
	grid-column: 3/4;
}
.freegun4Video {
	grid-row: 5/7;
	grid-column: 4/5;
}

.btn_marques_detail {
	perspective: 500px;
	position: relative;
	display: inline-block;
	transform-style: preserve-3d;
}
.btn_marques_detail.on {
	transform: rotateY(180deg);
}
.btn_marques_detail.on:hover {
	transform: rotateY(180deg) rotateZ(3deg);
}
.btn_marques_detail.on .front {
	opacity: 0;
}
.btn_marques_detail .back {
	position: absolute;
    transform: translate(-50%,-50%) rotateY(180deg);
    text-align: center;
    top: 50%;
    left: 50%;
	white-space: pre;
}
.btn_marques_detail .front,
.btn_marques_detail .back { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.btn_close_marques_mobile {
	position: fixed;
	transform: rotate(720deg);
	bottom: var(--padding);
	right: calc(var(--padding) / 2);
	font-size: 200%;
	opacity: 0;
	pointer-events: none;
	transition: transform 1s, opacity 0.5s;
}
/*#marques.on .btn_close_marques_mobile {
	pointer-events: all;
	opacity: 1;
	transform: none;
}*/

.lien_vertical {
	height: 100%;
	padding: 60px;
	background-color: var(--perle);
	color: #000!important;
	font-size: 250%;
	font-family: "ChaneyRegular";
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	border-right: 1px solid #fff;
	transition: 0.5s;
}
.lien_vertical.on { background-color: #000; color: #fff!important; border-right: 1px solid transparent; }
.lien_vertical:first-child { border-right: none; }

.lien_vertical:not(.on):hover { background-color: rgba(var(--perle-rvb),0.5); }

#activites .lien_vertical.piano {
	animation-duration: 0.25s;
	animation-name: piano;
	animation-iteration-count: 2;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes piano {
  from { background-color: var(--perle); }
  to   { background-color: rgba(var(--perle-rvb),0); }
}

.detail_vertical {
	transition: width 0.8s, opacity 0.8s;
	width: 0px;
	padding: 0px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.detail_vertical.open {
	width: 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
}

.detail_vertical > div {
	display: none;
}

.detail_vertical.open > div {
	display: block;
	width: 700px;
	padding-right: 100px;
}

.accueil_pattern {
	position: relative;
	overflow: hidden;
	transition: 0.5s;
}
#produits.on .accueil_pattern {
	width: 25%;
}
.accueil_pattern .img_produits,
.accueil_pattern .img_pattern {
	height: 110%;
	width: 110%;
	object-fit: cover;
	object-position: right;
	transition: 0.5s;
}
.accueil_pattern .img_pattern {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: 0.5s;
}
.accueil_pattern .img_pattern.on { opacity: 1; }

#produits.on .accueil_pattern .img_produits,
#produits.on .accueil_pattern .img_pattern {
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
}

#produits .produits_content {
	position: relative;
	transition: 0.5s;
}
#produits.on .produits_content {
	box-shadow: 0px 0px 200px rgba(0,0,0,0.2);
	width: 75%;
}

.produits_close {
	transition: opacity 0.5s, padding-left 0.2s;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
}
#produits.on .produits_close { opacity: 1; pointer-events: all; }

.produit_detail { display: none; padding-right: 100px; }

.surtitre {
	font-family: "ChaneyRegular";
	background-color: var(--orange);
	color: #fff;
	text-transform: uppercase;
	transform: rotate(var(--rotate));
	font-weight: 400;
	display: inline-block;
	font-size: 90%;
	padding: 5px 10px;
}

.accueil_chiffre {
	position: relative;
	font-size: 140%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 280px;
}

.accueil_chiffre .cacheArc {
	position: absolute;
	z-index: 2;
	background-color: #fff;
}
.accueil_chiffre1 .cacheArc {
	top: 50%;
	transform: translateY(-100%);
	left: 0;
	width: 100%;
	padding-bottom: 50%;
}
.accueil_chiffre2 .cacheArc {
	top: 50%;
	left: 0;
	width: 50%;
	padding-bottom: 100%;
	transform: translateY(-50%);
}
.accueil_chiffre3 .cacheArc {
	top: 50%;
	left: 0;
	width: 100%;
	padding-bottom: 50%;
}

.accueil_chiffre4 .cacheArc {
	top: 50%;
	right: 0;
	width: 50%;
	padding-bottom: 100%;
	transform: translateY(-50%);
}

.accueil_chiffre .chiffre {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.accueil_chiffre b {
	font-family: "ChaneyRegular";
	font-size: 200%;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.2;
}

.accueil_chiffre b .small {
	font-size: 60%;
}

.accueil_chiffre::before {
	content: '';
	position: absolute;
	width: 100%;
	/*height: 100%;*/
	padding-bottom: 100%;
	top: 50%;
	left: 50%;
	z-index: 1;
	border-radius: 100%;
	transform: translate(-50%,-50%) rotate(180deg);
	transition: transform 1s;
}

.accueil_chiffre1::before { background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(var(--orange-rvb),1) 50%); }
.accueil_chiffre2::before { background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(var(--orange-rvb),1) 50%); }
.accueil_chiffre3::before { background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(var(--orange-rvb),1) 50%); }
.accueil_chiffre4::before { background: linear-gradient(270deg, rgba(255,255,255,1) 50%, rgba(var(--orange-rvb),1) 50%); }

.accueil_chiffre.on::before {
	transform:  translate(-50%,-50%);
}

.accueil_chiffre::after {
	content: '';
	/*aspect-ratio: 1;*/
	width: calc(100% - 30px);
	padding-bottom: calc(100% - 30px);
	border-radius: 100%;
	background-color: var(--perle);
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.pattern_lien {
	white-space: pre;
	display: flex;
	margin-bottom: calc(var(--padding) / 2) !important;
	transition: 0.5s;
}
.pattern_lien.on { color: var(--orange) !important; }
.pattern_lien i { transition: padding-right 0.5s; }
.pattern_lien:hover i {
	padding-right: 10px;
}

.content_onglet { padding-right: 180px; position: relative; }
.onglet_logos {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 120px;
	z-index: 2;
}
.onglet_logos > a { display: block; margin: calc(var(--padding) / 2) 0; }
.onglet_logos > a:first-child { margin-top: var(--padding); }

.social_lien { display: block; margin-bottom: var(--padding); transition: 0.5s; }
.social_lien.on { display: block; margin-bottom: calc(var(--padding) / 2); }
.social_detail { border-bottom: 1px solid; padding-bottom: var(--padding); }

.bg_lego {
	--x: 0px;
	--y: 0px;
	background-image: url(/style/accueil/textiss-recrute.jpg);
	background-size: 150%;
	background-repeat: no-repeat;
  	background-position: var(--x) var(--y);
	background-attachment: fixed;
  	overflow: hidden;
  	/*transition: 0.5s;*/
}
/*#recrutement.bg_lego.on {background-position: calc(-50vw + var(--x)) var(--y); }*/

.bg_lego .rond_noir {
	position: absolute;
	transition: 0.8s;
	transform: scale(0);
	transform-origin: bottom left;
	left: 0;
	bottom: 0;
}
.bg_lego .rond_noir.on { transform: scale(1); }

.rond_noir > div { position: relative; z-index: 1; }

.bg_lego .rond_noir::before {
	content: '';
	position: absolute;
	background-color: #000;
	width: 260%;
	padding-bottom: 260%;
	border-radius: 100%;
	left: 0;
	bottom: 0;
	transform: translate(-45%,25%);
	z-index: 0;
}

#recrutement, #recrutement .page, #recrutement #rh, #recrutement #offres { transition: 0.5s; }
#rh {
	position: fixed;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	z-index: 30;
}
#offres {
	position: fixed;
	top: 0;
	right: 0;
	transform: translateX(100%);
	z-index: 30;
}


.uneOffre { transition: 0.5s; }

#recrutement.on .page { transform: translateX(-100%); }
#recrutement #rh.on, #recrutement #offres.on { overflow-y: scroll; transform: translateX(0%); }


.offre_content { padding: var(--padding) 0;}

.form_offre_container { display: none; }

.form_offre #offre {
	padding: 0;
	background-color: transparent;
	color: #fff;
	border: none;
	width: 100%;
}

.form_offre blockquote p { margin-bottom: 0; }

.btn_retour {
	position: fixed;
	/*left: 50%;
	bottom: calc(2 * var(--padding));
	transform: translateX(-50%) rotate(720deg);*/
	transform: rotate(720deg);
	top: var(--padding);
	left: calc(var(--padding) / 2);
	font-size: 200%;
	opacity: 0;
	pointer-events: none;
	transition: transform 1s, opacity 0.5s;
}
.btn_retour.on {
	opacity: 1;
	pointer-events: all;
	/*transform: translateX(-50%) rotate(0deg);*/
	transform: rotate(0deg);
	z-index: 31;
}
.btn_retour.offres {
	left: calc(50% + var(--padding) / 2);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.agenda {
	position: relative;
}
.agenda::before {
	position: absolute;
	content: '';
	background-color: var(--orange);
	height: 10px;
	top: 0;
	left: 50%;
	width: calc(100% - var(--padding));
	transform: translateX(-50%);
	transition: 0.5s;
	z-index: 1;
}
.agenda_link { display: block; }
.agenda_link:hover::before {
	height: 100%;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.agenda_content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	z-index: 2;
	transition: 0.5s;
	height: 100%;
}
.agenda_img { margin: 10px auto; }
.agenda_link:hover .agenda_content,
.agenda_link a { transition: 0.5s; }
.agenda_link:hover, .agenda_link:hover a { color: #fff !important; }
.agenda_resume_container {
	overflow: hidden;
	display: block;
	max-height: 100px;
	position: relative;
	transition: max-height 0.5s;
}
.agenda_resume_container::after {
	content: '';
	background: linear-gradient(0deg, rgba(255,255,255,0.5) 25%, transparent 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background 0.5s;
}
.agenda_link:hover .agenda_resume_container { max-height: 1000px; }
.agenda_link:hover .agenda_resume_container::after { transition: background 0s; background: transparent; }
.agenda_resume { display: block; }
.agenda_titre { margin-bottom: 10px; min-height: 70px; }
.agenda_resume img { max-height: 1.2em; }
.agenda_resume p { margin-bottom: 15px; }

.accueil_couleur::before {
	content: '';
	transition: background-color 8s;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
}
.accueil_couleur.before_orange::before { background-color: rgba(var(--orange-rvb),0.2);}
.accueil_couleur.before_vert::before { background-color: rgba(var(--vert-rvb),0.2);}
.accueil_couleur.before_sable::before { background-color: rgba(var(--sable-rvb),0.2);}
.accueil_couleur.before_rouge::before { background-color: rgba(var(--rouge-rvb),0.2);}
.accueil_couleur.before_bleu::before { background-color: rgba(var(--bleu-rvb),0.2);}
.bg_blanc.accueil_couleur { color: rgba(0,0,0,0.8); }
.accueil_couleur .btn_suite, .accueil_couleur .btn_onglet.on, .accueil_couleur .btn_onglet:hover { opacity: 0.8; }
.accueil_couleur .btn_onglet { opacity: 0.5; }
.accueil_couleur .img_onglet { mix-blend-mode: multiply; }

.img_onglet {
	position: absolute;
	width: 100%;
	max-width: 700px;
	top: 90px;
	left: 50%;
	transform: translate(-50%,0%);
	object-fit: contain;
	transition: 0.5s;
	opacity: 0;
	border-radius: 100%;
}
.img_onglet.on { opacity: 1; }

.trait { position: relative; overflow: hidden; display: inline-flex; overflow: visible; }
.trait::before {
	content: '';
	position: absolute;
	bottom: 3px;
	right: 0;
	transform: translateY(100%);
	background-color: #fff;
	transition: 0.3s;
	width: 100%;
	height: 7px;
	z-index: 2;
}
.trait::after {
	position: absolute;
	bottom: 3px;
	left: 0px;
	transform: translateY(100%);
	content: '';
	background-image: url(/style/trait-orange.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 30%;
	/*aspect-ratio: 470/22;*/
	z-index: 1;
}
.trait.on::before { width: 0%; }
.bg_noir .trait::before { background-color: #000; }
.bg_sable .trait::before { background-color: var(--sable); }

.politiqueLien {
	cursor: pointer;
	position: relative;
	transition: 0.5s;
	display: flex;
	margin-bottom: var(--padding);
	line-height: 1.2;
}
.politiqueLien::before {
	content: '\f101';
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	padding-right: 20px;
	transition: 0.5s;
	color: var(--orange);
}
.politiqueLien:hover::before {
	padding-left: 10px;
	padding-right: 10px;
}
.politiqueLien.on::before { font-size: 0; padding: 0; }
.politiqueLien.on {
	-webkit-animation: politique-lien 0.5s ease-in-out; /* Safari 4+ */
	-moz-animation:    politique-lien 0.5s ease-in-out; /* Fx 5+ */
	-o-animation:      politique-lien 0.5s ease-in-out; /* Opera 12+ */
	animation:         politique-lien 0.5s ease-in-out; /* IE 10+, Fx 29+ */
	color: var(--orange) !important;
	font-size: 200%;
	/*animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;*/
}

@-webkit-keyframes politique-lien {
	0% { font-size: 120%; }
	70% { font-size: 500%; }
	100% { font-size: 200%; }
}

@-moz-keyframes politique-lien {
	0% { font-size: 120%; }
	70% { font-size: 500%; }
	100% { font-size: 200%; }
}
@-o-keyframes politique-lien {
	0% { font-size: 120%; }
	70% { font-size: 500%; }
	100% { font-size: 200%; }
}
@keyframes politique-lien {
	0% { font-size: 120%; }
	70% { font-size: 500%; }
	100% { font-size: 200%; }
}


	/*** liste + paragraphe  *****************************************/
	.offre_texte ul, ul.list{
		list-style-type : disc;
		margin-left : 20px;
	}

	ul.inline li{
		display : inline-block;
		padding : 0 10px;
	}
	
	section  p { margin-bottom : var(--padding); line-height: 1.2; }
	
	.img_100 {
		max-width : 100%;
		display : block; 
		line-height : 1; 
		width : auto;
	}

	.img_cover {
		display: block;
		width: 100%;
		height: 100%;
		object-position: center;
		object-fit: cover;
	}


/*** footer  *****************************************/ 
	.nav-mentions li, .nav_rs li{
		display : inline-block;
	}

		.nav-mentions li a, .nav_rs li a{padding : 0 5px;}

		.nav-mentions li a {font-size : 75%; border-left : 1px solid; }

			.nav-mentions li:first-child a{
				border-left : none; 
			}
			
	.titre_footer {
		display :  block; 
		text-transform : uppercase; 
		font-size : 110%;
		font-weight : 600;
		margin-bottom : 5px;
	}

/*** titre *****************************************/

h2, .like_h2 {
	font-family: "ChaneyRegular";
	font-weight: 400;
	font-size: 300%;
	line-height: 1;
	margin-bottom: var(--padding);
}

h3, .like_h3 {
	font-family: "ChaneyRegular";
	font-weight: 400;
	font-size: 250%;
	line-height: 1;
	margin-bottom: var(--padding);
}

h4, .like_h4 {
	font-size : 120%;
}

.chaney { font-family: "ChaneyRegular"; }


/*** lien *****************************************/

.btn_suite {
	display : inline-block;
	font-size: 90%;
	padding : 5px 30px;
	text-transform: uppercase;
	font-weight: 900;
	background : transparent;
	color : #000 !important;
	font-family: "Red Hat Display";
	border: 2px solid;
	appearance:none;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	transition: all 0.3s;
	cursor : pointer;
	outline: 2px solid transparent;
	transform: translateZ(0);
	will-change: transform;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	transform: rotate(var(--rotate)) translateZ(0);
}

.bg_sable .btn_suite,
.bg_orange .btn_suite,
.bg_noir .btn_suite {
	border-color: #fff;
	color: #fff !important;
}

	.btn_suite:hover,		
	.btn_suite:focus {
		background : #000;
		border-color : #000;
		color : #fff !important;
		transform: rotate(0) translateZ(0);
	}

	.bg_noir .btn_suite:hover,		
	.bg_noir .btn_suite:focus,
	.bg_orange .btn_suite:hover,		
	.bg_orange .btn_suite:focus {
		background : #fff;
		border-color : #fff;
		color : #000 !important;
	}

.btn_rse {
	position: relative;
	display: block;
	border-radius: 100%;
	font-family: "ChaneyRegular";
	background-color: #fff;
	max-width: 100px;
	width: 100%;
	/*font-weight: 900;*/
	font-size: 70%;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
}
.btn_rse::before {
	content: '';
	display: block;
	padding-bottom: 100%;
}
.btn_rse > span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
	
.btn_onglet {
	display: block;
	background: transparent;
	color: #000 !important;
	text-transform: uppercase;
	font-family: "ChaneyRegular";
	position: relative;
	font-size: 90%;
	transition: 0.5s;
}
.btn_onglet::after {
	content: '';
	background-image: url(/style/trait-orange.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: calc(100% - var(--padding));
	bottom: -2px;
	left: calc(var(--padding) / 2);
	position: absolute;
	height: 7px;
	transition: 0.5s;
	opacity: 0;
}
.btn_onglet:hover, .btn_onglet.on {
	color: #000 !important;
}
.btn_onglet:hover::after, .btn_onglet.on::after {
	opacity: 1;
}

.btn_offre_retour::before {
	transition: 0.5s;
}
.btn_offre_retour:hover::before {
	padding-right: 0px;
}

/*** actualites  *****************************************/

	.imgActu {
		display : block;
		height : 150px;
		overflow : hidden;
		position : relative;
	}	

		.imgActu img {
			max-height : 100%;
			margin : 0 auto;	
			position : absolute; 
			top : 50%; 
			left : 50%; 
			transform : translate(-50%,-50%);
		}
		
		
			.imgActu span{
				position : absolute; 
				top : 50%; 
				left : 50%; 
				transform : translate(-50%,-50%);
				text-transform : uppercase; 
				color : rgba(146,143,143,0.5);
				font-weight : 300;
				text-align : center;
				font-size : 95%;
			}
			
			.imgActu span::before{
				content : '\f030';
				font-family : "Font Awesome 5 Free"; 
				font-weight: bold;
				display : block;
				font-size : 200%;
				color : rgba(146,143,143,0.5);
			}

		.video-responsive {
			overflow:hidden;
			padding-bottom:56.25%;
			position:relative;
			height:0;
			width: 100%;
		}

		.video-responsive iframe {
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
		}

/*** icone  *****************************************/

	.ico { display: flex; }

	.ico::before{
		font-family : 'Font Awesome 5 Free'; 
		font-size : 120%; 
		padding-right : 5px;
		transition: 0.5s;
	}
	
	 p.ico span{overflow : hidden; display : inline;}
	 p.ico::before{display : inline;}
	
	.ico-eye::before { content : "\f06e"; font-weight : bold;}
	.ico-map::before { content : "\f3c5"; font-weight : bold;}
	.ico-map-marker::before { content : "\f041"; font-weight : bold;}
	.ico-mobile::before { content : "\f3cd"; font-weight : bold;}
	.ico-phone::before { content : "\f095"; font-weight : bold;}
	.ico-web::before { content : "\f0ac"; font-weight : bold;}
	.ico-mail::before { content : "\f0e0"; font-weight : bold;}
	.ico-recherche::before { content : "\f002"; font-weight : bold;}
	.ico-compte::before { content : "\f2bd"; font-weight : bold;}
	.ico-pdf::before { content : "\f1c1"; font-weight : bold;}
	.ico-print::before { content : "\f02f"; font-weight : bold;}
	.ico-streetview::before {content : "\f21d"; font-weight : bold;}
	.ico-nav::before {content : "\f0c9"; font-weight : bold;}
	.ico-clock::before {content : "\f017"; font-weight : bold;}
	.ico-star::before {content : "\f005"; font-weight : bold; }
	.ico-laptop::before {content : "\f109"; font-weight : bold; }
	.ico-store::before {content : "\f54e"; font-weight : bold; }
	.ico-exchange::before {content : "\f362"; font-weight : bold; }
	.ico-desktop::before {content : "\f108"; font-weight : bold; }
	.ico-fax::before {content : "\f1ac"; font-weight : bold; }
	.ico-back::before {content : "\f100"; font-weight : bold; }
	.ico-linkedin::before {content : "\f08c"; font-family : "Font Awesome 5 Brands"; }

	.ico-mobile:hover::before {
		-webkit-animation: anim-mobile 0.3s ease-in-out; /* Safari 4+ */
		-moz-animation:    anim-mobile 0.3s ease-in-out; /* Fx 5+ */
		-o-animation:      anim-mobile 0.3s ease-in-out; /* Opera 12+ */
		animation:         anim-mobile 0.3s ease-in-out; /* IE 10+, Fx 29+ */
	}
		
	@-webkit-keyframes anim-mobile {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(15deg); }
		75% { transform: rotate(-15deg); }
		100% { transform: rotate(0deg); }
	}

	@-moz-keyframes anim-mobile {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(15deg); }
		75% { transform: rotate(-15deg); }
		100% { transform: rotate(0deg); }
	}
	@-o-keyframes anim-mobile {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(15deg); }
		75% { transform: rotate(-15deg); }
		100% { transform: rotate(0deg); }
	}
	@keyframes anim-mobile {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(15deg); }
		75% { transform: rotate(-15deg); }
		100% { transform: rotate(0deg); }
	}

/*** masonry ****************/

.masonry {
	column-gap: 0px;
	column-count: 3;
}

.masonry > .item {
	display: block;
  	break-inside: avoid-column;
	transition : all 0.5s;
	/* margin: 0 0 1em;*/
}

/* Masonry-css on medium-sized screens */
@media only screen and (max-width: 1000px) {
	.masonry {
		column-count: 2;
	}
}

/* Masonry-css on medium-sized screens */
@media only screen and (max-width: 800px) {
	.masonry {
		column-count: 1;
	}
}


/* magnific popup */
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;filter:alpha(opacity=65);padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1;filter:alpha(opacity=100)}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px}.mfp-arrow{position:absolute;opacity:.65;filter:alpha(opacity=65);margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1;filter:alpha(opacity=100)}.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow .mfp-a,.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow .mfp-b,.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left .mfp-b,.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right .mfp-b,.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}

/*! #######################################################################

	MeanMenu 2.0.7
	--------

	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)

####################################################################### */

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
	display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
	float: left;
	width: 100%; 
	position: fixed;
	background: transparent;
	/*padding: 4px 0;*/
	/*min-height: 42px;*/
	z-index: 999999;
}

.mean-container a.meanmenu-reveal {
	padding : 6px 10px;
	position: absolute;
	top: 0px;
	right: 0;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 60%;
	text-transform : uppercase;
	display: block;
	font-weight: 300;
	background : #71b9d6;
	z-index: 800;
	text-align : center;
}

a.meanmenu-reveal::before {
	content : "\f0c9"; 
	font-family : "Font Awesome 5 Free"; 
	font-weight : bold;
	text-align : center;
	padding-right : 5px;
	font-size : 250%; 
}

.mean-container a.meanclose::before { display : none;}

.mean-container a.meanmenu-reveal span {
	background : pink;
	position : relative;
	top : -5px;
}


.mean-container .mean-nav {
	float: left;
	width: 100%;
	background: #E9E9E9;
	/*margin-top: 44px;*/
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}

.mean-container .mean-nav ul li {
	position: relative;
	float: left;
	width: 100%;
}

.mean-container .mean-nav ul li a {
	display: block;
	float: left;
	width: 100%;
	box-sizing : border-box; 
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #000;
	border-top: 1px solid #383838;
	border-top: 1px solid rgba(255,255,255,0.5);
	text-decoration: none;
	text-transform: uppercase;
}

.mean-container .mean-nav ul li li a {
	width: 80%;
	padding: 1em 10%;
	border-top: 1px solid #f1f1f1;
	border-top: 1px solid rgba(255,255,255,0.25);
	opacity: 0.75;
	filter: alpha(opacity=75);
	text-shadow: none !important;
	visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
	border-bottom: none;
	margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
	width: 70%;
	padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
	background: #252525;
	background: rgba(255,255,255,0.1);
}

.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 32px;
	padding: 12px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4) !important;
	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
	background: rgba(0,0,0,0.9);
}

.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}

.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* popup gestion cookies */

body.cn-cookie-overlay {overflow: hidden; height: 100dvh;}

.cn-cookie {
	display: block;
	position: fixed;
	width: 100dvw;
	height: 100dvh;
	z-index: 99999;
	top : 0;
	left: 0;
	background : rgba(0,0,0,.5);
	
}

.cn-cookie-content {
   display: block;
   position: fixed;
   max-width: 500px;
   min-width: 320px;
   height: auto;
   z-index: 100000;
   font-size: 16px;
   line-height: 18px;
   top : 50%;
   left: 50%;
   padding : 20px; 
   color: #000;
   background : #fff;
   transform : translate(-50%,-50%);
}

.cn-cookie strong {font-size : 30px; display : block; padding-bottom : 20px; line-height: 1.2em;}

.cn-cookie p {padding-bottom : 20px;}
.cn-cookie a.btnDenyCookies {
	text-decoration: underline; 
	padding-bottom : 10px;	
	display: block;
	color : #8c8c8c!important;
  text-align: center;
}
.cn-cookie a.btnAcceptCookies,
.cn-cookie a.btnDetailsCookies { 
  display: block;
  width : 100%;
  margin-bottom : 10px;
  color: #fff; 
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  outline: none;
}
.cn-cookie a.btnAcceptCookies {
  background : #000;
  color : #fff!important; 
}

.cn-cookie a.btnDetailsCookies {
  border : 1px solid;
  color : #000!important; 
}


/*********************** responsive  ***************************************/

@media all and (max-width: 1600px) {

	.w16-1600 { width: 16.66%; }

}

@media all and (max-width: 1550px) {

	.w66-1550 { width: 66%; }
	.w33-1550 { width: 33%; }

	.show-1550 { display: block; }

	#activites.vh100 {
		height: auto;
		flex-wrap: wrap;
		text-align: center;
	}

	.lien_vertical {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		writing-mode: horizontal-tb;
		transform: none;
		width: 100%;
		line-height: 1.2;
		font-size: 200%;
		padding: 30px 40px;
	}

	.lien_vertical::before {
		content: '\f078';
		font-family: "Font Awesome 6 Free";
		font-weight: 700;
		display: inline-block;
		padding: 0 10px;
		transition: 0.5s;
	}
	.lien_vertical.on::before {
		transform: rotate(180deg);
	}

	.detail_vertical {
		width: 100%;
		overflow: visible;
	}

	.detail_vertical.open {
		padding: 60px;
	}

	.detail_vertical img.img_100 {
		margin: 0 auto;
	}

	.detail_vertical.open > div {
		width: 100%;
		max-width: 1000px;
		margin: auto;
		padding-right: 0;
	}

	.detail_vertical:not(.open) .activitesClose { display: none; }
	.detail_vertical.open .activitesClose {
		position: sticky;
		position: -webkit-sticky;
		top: calc(100dvh - 30px);
		transform: translate(calc(100vw - 100% - 80px),-100%);
	}

	#engagements.vh100 {
		height: auto;
		padding-top: 0;
		padding-left: calc(var(--padding) * 2);
		padding-right: calc(var(--padding) * 2);
	}

	.onglet_logos {
		position: initial;
		flex-direction: row;
		max-width: 100%;
	}

	.onglet_logos img {
		padding: 0 var(--padding);
	}

	.content_onglet { padding-right: var(--padding);}

}

@media all and (max-width: 1500px) {

	.w100-1500, #produits.on .produits_content { width: 100%; }
	.w50-1500 { width: 50%; }
	.w66-1500 { width: 66%; }
	.w33-1500 { width: 33%; }

	.wrap-1500 { flex-wrap: wrap; }

	.cache-1500 { display: none; }
	.show-1500 { display: flex; }

	#produits.vh100 { height: auto; }

	#produits .accueil_pattern,
	#produits.on .accueil_pattern {
		width: 100%;
		height: 200px;
	}
	#produits.on .produits_content {
		box-shadow: none;
	}

	#produits .img_produits {
		width: 100% !important;
		height: 100% !important;
	}

	.produit_detail { padding-left: 50px; padding-right: 50px; }
	.produit_detail .like_h3 { font-size: 180%; }

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

}

@media all and (max-width: 1400px) {

	#recrutement > .vh100:first-child {
		height: auto;
	}

	.bg_lego { background-size: 200%; }

	.bg_lego .rond_noir {
		width: 100%;
		max-width: 600px;
		position: initial;
		padding: 60px;
	}
	.bg_lego .rond_noir::before {
		width: 210%;
	}

}

@media all and (max-width: 1350px) {

	.w100-1350 { width: 100%; max-width: 100%; }
	.w50-1350 { width: 50%; }
	.w75-1350 { width: 75%; }
	.hAuto-1350 { height: auto; }

	.wrap1350 { flex-wrap: wrap; }

	.gridVideos {
		display: flex;
		flex-wrap: wrap;
		min-height: 400px;
		pointer-events: all;
	}
	.w25-1350 {
		width: 25%;
	}

	.accueil_chiffre { height: 320px; }

	.btn_retour.offres { left: calc(25% + var(--padding) / 2); }

}


@media all and (max-width: 1250px) {

	.w100-1250 { width: 100%; }
	.w50-1250 { width: 50%; }
	.w33-1250 { width: 33%; }
	.w25-1250 { width: 25%; }

	.carre-1250 { position: inherit; }
	.carre-1250::before {
		content: '';
		padding-bottom: 100%;
		display: block;
	}

	.cr-1250 { flex-direction: column-reverse; }
	
	.cache-1250 { display: none; }
	.show-1250 { display: block; }

	.p0-1250 { padding: 0; }

	.img_onglet {
		opacity: 1;
		transform: none;
		position: initial;
		max-width: 500px;
		margin: 0;
		padding-bottom: var(--padding);
	}

}


@media all and (max-width: 1200px) {

	.l1-1 { width: 100%; }
	.l1-2 { width: 50%; }
	.l1-3 { width: 33%; }
	.l1-4 { width: 25%; }
	.lColumnReverse { flex-direction: column-reverse; }
	.lCache { display: none; }

}

@media all and (max-width: 1100px) {

	.w100-1100 { width: 100%; }

}

@media all and (max-width: 1000px) {

	.bg_lego { background-image: none; }
	
	.m1-1 { width: 100%; }
	.m1-2 { width: 50%; }
	.m2-3 { width: 66%; }
	.m1-3 { width: 33%; }
	.m1-4 { width: 25%; }
	.mColumnReverse { flex-direction: column-reverse; }
	.mCache { display: none; }

	.btn_retour.offres { left: calc(var(--padding) / 2); }

	.cn-cookie a.btnAccept, .cn-cookie a.btnDeny {
		position : relative;
		top : inherit;
		display : block;
		right : inherit;
		margin : 10px auto 0 auto;
		max-width : 200px;
		transform : translateY(0);
	}

	.left-1000 { text-align: left !important; }
	
}

@media all and (max-width: 900px) {

	.w100-900 { width: 100%; }
	.w50-900 { width: 50%; }
	.w33-900 { width: 33%; }

	.gridVideos {
		min-height: 800px;
	}

	.cache-900 { display: none; }

	.p60-900 { padding: 60px; }
	.pb0-900 { padding-bottom: 0 !important; }
	.pt0-900 { padding-top: 0 !important; }

	.produit_detail {
		padding-left: 0;
		padding-right: 0;
	}

}

@media all and (max-width: 800px) {

	.w100-800 { width: 100%; }
	.w50-800 { width: 50%; }
	.agenda_link .agenda_resume_container { max-height: 1000px; }
	.agenda_link .agenda_resume_container::after { transition: background 0s; background: transparent; }

	.sectionLR { padding-left: 30px !important; padding-right: 30px !important; }
	.slider_ancre { display: none; }

	.img_onglet { width: 400px; max-width: 100%; }

}

@media all and (max-width: 700px) {

	#chiffres { padding: 20px 0;}
	.chiffres_container { padding: 0px; }

	.accueil_chiffre {
		width: 180px;
		height: 250px;
	}
	.accueil_chiffre b { font-size: 120%; }

	.accueil_chiffre::before {
		width: 95%;
		padding-bottom: 95%;
	}

	.w100-700 { width: 100%; }
	.w50-700 { width: 50%; }

	#accueil h1 { min-height: 128px; }
	h2, .like_h2, .lien_vertical { font-size: 180%; }
	h3, .like_h3 { font-size: 150%; }
	.politiqueLien.on { font-size: 180%; }

	.pLR-700 { padding: 0 var(--padding) !important;}

	.produit_detail .like_h3 { font-size: 130%; margin-bottom: 20px; }

	.btn_onglet { margin-bottom: 15px; }

	#menu {font-size: 130%;}

}

@media all and (max-width: 620px) {

	.btn_suite {
		font-size: 80%;
		padding: 3px 20px;
	}

	a#logo { max-width: 250px; }

	.agenda_link:hover, .agenda_link:hover a {
		color: #000 !important;
	}
	.agenda_link:hover::before {
		height: 10px;
	}

	/*.lien_vertical {
		min-height: 130px;
	}*/

	#menu { font-size: 160%; }

	.lien_pro {
		/*max-width: 60px;
		padding: 10px;*/
		display: none;
	}

	.xf input[type=file], .xf input[type=file]:focus {
		width: 100%;
		padding: 0;
	}

	.logos > * { width: 50%; }
	#agenda.sectionLR { padding-left: 20px; padding-right: 20px; }

	.btn_offre_retour { padding-top: 20px; }

	#slider { height: auto; padding-top: 111px; }
	.sColumnReverse { flex-direction: column-reverse; }
	.sCache { display: none; }

	.p70-620 { padding: 40px; }

	html, body { overflow-x: clip; }

	.col1-2, .col1-3, .col2-3, .col1-4, .col3-4, .col1-5  {float : none; width : 100%; }
	
	.flex1-2, .flex1-3, .flex1-5, .flex1-6, .flex1-7, .flex1-8, .flex2-3, .flex1-4, .flex3-4  {width : 100%;}	

	.s1-1 { width: 100%; }
	.s1-2 { width: 50% !important; }
	.s2-3 { width: 66%; }
	.s1-3 { width: 33%; }
	.s1-4 { width: 25%; }

	.cr-620 { flex-direction: column-reverse; }
	
}

@media all and (max-width: 500px) {

	h2, .like_h2, .lien_vertical { font-size: 150%; }
	#accueil h1 {
		min-height: 96px;
	}

	#menu {
		padding: 30px;
		font-size: 140%;
	}

	#chiffres { display: none; }

}