:root {
	 --font-size-base: clamp(10.56px, 1.1vw, 22px);
	  /* --font-size-base: clamp ( calc(--var(minmax-width * 0.012)), 1,2vw, 27px); */ 
 	--max-width : 1600px;
   	--min-width : 960px; 
	  --gap: 1cqw;
	  --unit:0px
	  --bleed : 0px;
}

html, body { font-size: var(--font-size-base); }
body { 
	font-size:var(--font-size-base);
	margin:0 auto; 
	padding:0; 
	box-sizing: border-box; 
	overflow-y:auto; 
	line-height: 1em;
}

header, footer, body {
	width:100%;  
 }


.innerspace {padding:2.25%;}

.innerspacebig {padding:5%;}

.spacer { padding: 2%; }

.no-margin { margin:0%!important; }

.no-left-margin { margin-left:0%!important; }

.no-right-margin { margin-right:0%!important; }

.no-top-margin { margin-top:0%!important; }

.no-bot-margin { margin-bottom:0%!important; }

.small-left-margin {margin-left:5px!important;}

.small-bot-margin {margin-bottom:5px!important;}



.container12large {width:100%; margin-left:auto; margin-right:auto;  position:relative;/* font-size:0px; 

 min-height:18px;  overflow:hidden;*/}

.widget { 
/*	overflow-x: clip; */
	overflow-x: visible;
	max-width: 100%;
	width: 100%;
}


.container12, .mfp-content{
	--ratio:1;
	--col-count: 12;
	--unit : calc( 100cqw / var(--col-count) );
	max-width: var(--max-width)!important;
	/* max-width: 1300px; */
	container-type: inline-size;
	container-name: main;
	min-width:var( --min-width );

	width:80vw;

	margin-left:auto;

	margin-right:auto;

	position:relative;
	font-size:var(--font-size-base);
	box-sizing: border-box;


}

.container12, .group,
.group_1, .group_2, .group_3, .group_4, .group_5, .group_6,
.group_7, .group_8, .group_9, .group_10, .group_11, .group_12 {
	display: flex;
	flex-wrap: wrap;
}


.no_flex_grid {
	display: block!important;	
}

.flex_grid,
 #sortable, 
 .sortable, 
 .swiper_wrapper {
	display: flex;
	flex-wrap: wrap;
}
.flex_grid.reverse {
	flex-direction: row-reverse; 
	flex-wrap: wrap-reverse;
}


.container12 .container12 { 
	width: 100%!important; 
	margin: auto; min-width: 0px; 
}

.grid_center .container12 {
	justify-content: center;
}


.center { text-align: center!important; }

/*
.container12 > div:not(.grid):not(.grid_1):not(.grid_2):not(.grid_3):not(.grid_4):not(.grid_5):not(.grid_6):not(.grid_7):not(.grid_8):not(.grid_9):not(.grid_10):not(.grid_11):not(.grid_12):not(.group_1):not(.group_2):not(.group_3):not(.group_4):not(.group_5):not(.group_6):not(.group_7):not(.group_8):not(.group_9):not(.group_10):not(.group_11):not(.group_12) {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
*/

.mfp-content .container12 { width:100%;}

.grid, .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_cinquieme { 
		/* font-size: 16px; */
  --span: 1;
  --width: min(100%, calc((100% / var(--col-count)) * var(--span) * var(--ratio) - var(--gap) * 2 ));
  width: var(--width);
  box-sizing: border-box;

  margin: var(--gap);
  box-sizing: border-box;
  display: inline-block;

 transition: all .3s ease-in;
 vertical-align:top;  
  word-wrap:normal;
  
  
}

.grid_1  { --span: 1; }
.grid_2  { --span: 2; }
.grid_3  { --span: 3; }
.grid_4  { --span: 4; }
.grid_5  { --span: 5; }
.grid_6  { --span: 6; }
.grid_7  { --span: 7; }
.grid_8  { --span: 8; }
.grid_9  { --span: 9; }
.grid_10  { --span: 10; }
.grid_11  { --span: 11; }
.grid_12 { --span: 12; }

.push_1 { padding-left: calc( var(--unit) * 1 );}
.push_2 { padding-left: calc( var(--unit) * 2 );}
.push_3 { padding-left: calc( var(--unit) * 3 );}

.pull_1 { padding-right: calc( var(--unit) * 1 );}
.pull_2 { padding-right: calc( var(--unit) * 2 );}
.pull_3 { padding-right: calc( var(--unit) * 3 );}

.middle .grid { vertical-align : middle; }
.middle {
	vertical-align : middle;
	
}
.middle .container12, 
.middle .group {
	align-items: center;

}

.group,
.group_1, .group_2, .group_3, .group_4, .group_5, .group_6,
.group_7, .group_8, .group_9, .group_10, .group_11, .group_12 {
  --span: 1;
  --ratio: max(1,calc(var(--col-count) / var(--span))); 
    --width: min(100%, calc((100% / var(--col-count)) * var(--span) * var(--ratio) ));

    --width: min(100%, calc((100% / var(--col-count)) * var(--span) ));
	width : var(--width);
  /* display: inline-block; */
  vertical-align: top;
  box-sizing: border-box;
}


.group_1  { --span: 1; }
.group_2  { --span: 2; }
.group_3  { --span: 3; }
.group_4  { --span: 4; }
.group_5  { --span: 5; }
.group_6  { --span: 6; }
.group_7  { --span: 7; }
.group_8  { --span: 8; }
.group_9  { --span: 9; }
.group_10  { --span: 10; }
.group_11  { --span: 11; }
.group_12 { --span: 12; }




/* `Clear Floated Elements




/* GUIDELINE */
  /*  Cet section sert a l'overlay sur le CMS lors du DEV; */
	.guideline_overlay {
	  display: none;	
	  position: fixed;
	  width: 100vw;
	  height: 100vh;
	  top:0px;
  }
  .guideline_overlay .container12,
  .guideline_overlay .grid {
	  background: none;
	  border-left:1px dashed magenta;
	  border-right: 1px dashed magenta;
	  height: 100vh;
	  top:0px;
	  margin-top: 0px;
	  margin-bottom: 0px;	
  }






figure img {max-width: 100%;}




@media screen and (min-width: 640px){
	
	.mobile-only {
		display: none!important;
	}


	
}



@media screen and (max-width: 640px) {

	:root {
		--min-width: unset;
	 --max-width : 1600px;
	
		
	}
	.container12 { 
		/* background: red; */
		width: 90%;
		--col-count : 4;

	}

.grid_1  { --span: 2; }
.grid_2  { --span: 2; }
.grid_3  { --span: 2; }
.grid_4  { --span: 2; }
.grid_5  { --span: 4; }
.grid_6  { --span: 4; }
.grid_7  { --span: 4; }
.grid_8  { --span: 4; }
.grid_9  { --span: 4; }
.grid_10  { --span: 4; }
.grid_11  { --span: 4; }
.grid_12 { --span: 4; }


	.no-mobile{

		display:none!important;

	}
	.toolbardcomm {
		display: none!important;
	}
	.mobile-only {
		display: block;
	}


	.container12, .mfp-content, header, footer, body {
		min-width:inherit!important; 
		/* width:100%; */
	}



}






.grid.bleed_left {
	--bleed: calc((100vw - 100cqw)/2);
	margin-left: calc(0px - var(--bleed));
	width: calc( var(--width) + var(--bleed) + var(--gap));
}


.grid.bleed_right {
	--bleed: calc((100vw - 100cqw)/2);
	margin-right: calc(0px - var(--bleed));
	width: calc( var(--width) + var(--bleed) + var(--gap));

}

.group.bleed_left {
	--bleed: calc((100vw - 100cqw)/2);
	margin-left: calc(0px - var(--bleed));
	width: calc( var(--width) + var(--bleed) );
}


.group.bleed_right {
	--bleed: calc((100vw - 100cqw)/2);
	margin-right: calc(0px - var(--bleed));
	width: calc( var(--width) + var(--bleed) );

}




@media screen and (max-width: 1201px){
/*	1200 étant la valeur 960\80%*/
}

/*===FLEX LAYOUT===*/
@media screen and (max-width: 640px){
	
	
	
    .bleed_left {
		margin: 0px;
		padding: 0px;	
    }   
    .bleed_right {
		margin: 0px;
		padding: 0px;
    }   
	
	.push_1, .push_2, .push_3 { padding-left: 0px!important;
	
	
	}
	.pull_1, .pull_2, .pull_3 { padding-right: 0px!important; }

	
	.flex-layout{

		flex-flow:column;

	}

	.flex-flow-center,.flex-flow-end{

		justify-content:flex-start!important;

	}
    
.container12.flex { display: flex; flex-flow: column; }
  
}

@media screen and (max-width: 1280px){

	body, .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_cinquieme { 
/*		font-size: 16px;*/
		position: relative;
	}
}
.full_height img {height: 100%;}

.container12.flex { display: flex; }




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

.flex-layout{

	display:flex;

	/*font-size:1em;*/

	flex-wrap:wrap;

}

.flex-layout.flex-column{

	flex-direction:column;

}

.flex-layout>*{

	display:block;

	text-align:initial;



	align-self:flex-start;

}

/*.flex-layout>*:not([class^=group_]){

	font-size:1em;

}*/

.even-height>*{

	align-self:auto!important;

}

.flex-self-center>*{

	align-self:center;

}

.flex-self-end>*{

	align-self:flex-end;

}

.flex-flow-center{

	justify-content:center;

}

.flex-flow-end{

	justify-content:flex-end;

}