@charset "UTF-8";

/*************************
*                        *
*        BLACKMEAL       *
*                        *
*      © DMSX - 2024     *
*                        *
*************************/

@font-face{
	font-family:'Sharp Grotesk Bold';
	font-display: swap;
	src:
		local('Sharp Grotesk Bold'),
		url('../fonts/SharpGrotesk-Bold22.otf') format('otf'),
		url('../fonts/SharpGrotesk-Bold22.woff2') format('woff2'),
		url('../fonts/SharpGrotesk-Bold22.woff') format('woff')
}

@font-face{
	font-family:'Sharp Grotesk Book';
	font-display: swap;
	src:
		local('Sharp Grotesk Book'),
		url('../fonts/SharpGrotesk-Book13.otf') format('otf')
}


/*==============================================================================
======>> GENERAL <<=============================================================
==============================================================================*/
:root {
  --main-wrap: 1200px;
}


*, *:before, *:after {box-sizing: border-box; outline:none; scrollbar-color: #666 #000; scrollbar-width: thin;}
html {font-size: 62.5%;}
body {background: #000; margin: 0; padding: 0; font-family: Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; font-size: 1.6rem; line-height: 1.4; color:#fff;}
body:not(.home) {padding:130px 0 0 0;}
body.error404 {padding:0;}
#global {}
.wrap {width:var(--main-wrap, 1200px); margin: 0 auto 0 auto;}
h1, h2, h3, h4, h5, h6 {font-family:'Sharp Grotesk Bold', Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; font-weight:500; margin: 0; padding: 0 0 20px 0;}
h3, h4, h5, h6 {font-family: Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";}
/* scrollbar */
::-webkit-scrollbar {background:#000; width:7px;}
::-webkit-scrollbar-thumb {background:#666;}
/* placeholder */
::-webkit-input-placeholder {color: #000; opacity:1; font-size:1em;} /* Chrome/Opera/Safari */
::-moz-placeholder {color: #000; opacity:1; font-size:1em;} /* Firefox 19+ */
:-ms-input-placeholder {color: #000; opacity:1; font-size:1em;} /* IE 10+ */
:-moz-placeholder {color: #000; opacity:1; font-size:1em;} /* Firefox 18- */
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
.dualCol {display: flex;}
.rwd-player {overflow:hidden; padding-bottom:56.25%; position:relative; height:0;}
.rwd-player iframe {left:0; top:0; height:100%; width:100%; position:absolute;}

/*********** PAGINATION ******************************/
.pagimore {margin:30px 0 0 0; text-align:center;}
.pagimore a, .pagimore .current, .pagimore .dots {display: inline-block; margin: 0 5px 0 5px; padding: 10px 20px 10px 20px; text-decoration: none; text-transform: uppercase; font-size: 0.8em; background: #ffffff; color: #000; border: 1px solid #000; font-weight:normal;}
.pagimore .dots {padding: 10px 15px 10px 15px;}
.pagimore a:hover, .pagimore .current {background: #000; color: #fff; }
.prevmore {}
.nextmore {}
/* page taxo */
#postPagi {}
.nav-links {margin:30px 0 0 0; text-align:center;}
.nav-links .current, .nav-links a {display: inline-block; margin: 0 5px 0 5px; padding: 10px 20px 10px 20px; text-decoration: none; text-transform: uppercase; font-size: 0.8em; background: #ffffff; color: #000; border: 1px solid #000; font-weight:normal;}
.nav-links .current, .nav-links a:hover {background: #332EEA; color: #fff; border-color:#332EEA;}
.nav-links a.next {border-radius: 10px 0 10px 0; transition:all 0.3s ease-in-out;}
.nav-links a.next:hover {border-radius: 0 10px 0 10px;}
.nav-links a.prev {border-radius: 0 10px 0 10px; transition:all 0.3s ease-in-out;}
.nav-links a.prev:hover {border-radius: 10px 0 10px 0;}

/*********** BOUTON RETOUR ******************************/
#backBtn, #retBtn {padding:50px 0 50px 0; text-align:center;}
/***** back *****/
#backBtn a {display: inline-block; margin: 0 5px 0 5px; padding: 10px 20px 10px 20px; text-decoration: none; text-transform: uppercase; font-size: 0.8em; background: #ffffff; color: #000; border: 1px solid #000; font-weight:normal;}
#backBtn a:hover {background: #000; color: #ffffff;}
/***** ret *****/
#retBtn .blocLink {}
#retBtn .blocLink a {min-width: 250px;}
#retBtn .blocLink .btnChev:after {filter: invert(1);}

/*********** BLOC BOUTON ******************************/
.blocLink {text-align: center;}
.btnPlus, .btnChev {display:inline-block; background: #332EEA; border:1px solid #332EEA; color:#fff; text-decoration:none; padding:15px 30px 15px 30px; border-radius: 15px 15px 15px 0; position:relative; text-transform:uppercase; font-family:'Sharp Grotesk Book', Arial, Helvetica, "Gill Sans", "Gill Sans MT", "sans-serif"; transition: all 0.1s ease-in-out;}
.btnPlus:after, .btnChev:after {content:''; position: absolute; top: -17px; right: -37px; height: 55px; width: 55px; background: url("../img/picto-bull-plus-noir.svg") center no-repeat; background-size: 100% auto; transition: all 0.2s ease-in-out;}
.btnPlus:hover, .btnChev:hover {/*background: #fff; color:#332EEA;*/ border-radius: 0 15px 15px 15px;}
.btnPlus:hover:after, .btnChev:hover:after {transform:scale(1.1);}
.btnChev:after {background: url("../img/picto-chev-noir.svg") center no-repeat; background-size:100% auto;}
/*********** RESET ******************************/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
figure {margin: 0; padding: 0; line-height:0;}
img {width: 100%; height: auto;}

/*==============================================================================
======>> ENTETE <<==============================================================
==============================================================================*/
header {position: fixed; top:0; width: 100%; z-index:3000;}
#headerInner {display:flex; justify-content:space-between; align-items: center; padding:0;}
#headerInner.wrap {width:100%; padding: 15px 50px 15px 50px;}
/* si connection admin */
.admin-bar {padding-top:20px;}
.admin-bar header {top: 32px;}
/* si scroll */
.scrollMenu {background:#000; transition: all 0.5s ease-out;}
/*************** logo ***************/
#head { width: 20%; font-size: 0;}
.home #head { width: 0%;}
#head a {font-size: 0;}
#head a img {transition: all 0.3s ease-out; max-width: 230px; font-size: 0;}
#head a img {filter: invert(1);}
#head a:hover img {transform:scale(1.02);}
/* si scroll */
.scrollMenu #head a:not(.htl a) img {filter: invert(1);}
.scrollMenu #head {width: 20%;}

.htl {
  position:relative;
  z-index:1000;
}
#head .htl {
	position:absolute;
	display: block;
	z-index:1000;
	top:0;
	left:20% ;
	width: 60%;
	height: auto;
	transform:translate3d(0,50vh,0);
	transition:all 0.4s ease-in-out;
}
#head .htl img {
	width: 100%; 
	height: auto;
	max-width: unset;
	filter: drop-shadow( 1px 3px 5px rgba(0, 0, 0, .5));
}
#head.scrollPlayerInit .htl, .scrollMenu #head .htl {
	top:15px;
	left: calc((100% - 1200px)/2);
	width: 220px;
	transform:translate3d(0,0vh,0);
}


/*************** navigation ***************/
#topnav {z-index:5; display: flex; justify-content: center;  width: 60%; transition:all 0.4s ease-in-out;}
.home #topnav {width: 80%; justify-content: flex-start;}
.scrollMenu #topnav {width: 60%; justify-content: center;}
/*** principale ***/
#topnav nav {display: block; text-align:center;}
.home #topnav nav {text-align: left;}
.scrollMenu #topnav nav {text-align:center;}
#topnav nav ul {margin: 0; padding:0; list-style:none; color:#fff;}
#topnav nav ul li {display:inline-block; padding: 0 0 0 25px; position:relative;}
#topnav nav ul li a {text-decoration:none; color:#fff; font-family:Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; text-transform:uppercase;}
#topnav nav ul li a:after {content: ''; display: block; width:0%; margin: 3px 0 0 0; height:2px; background: #fff; transition: all 0.3s ease-out;}
#topnav nav ul li a:hover {/*color:#B00600;*/}
#topnav nav ul li a:hover:after {width: 100%;}
#topnav nav ul.menuHeader {}
#topnav nav ul li.current_page_item {}
#topnav nav ul li.current_page_item a:after {width: 100%;}
#topnav nav ul li.current-page-ancestor {}
#topnav nav ul li.current-page-ancestor a:after {width:100%;}
#topnav nav ul li.current-menu-item {}
#topnav nav ul li.current-menu-item a:after {width:100%;}
/* var */
.home #topnav nav ul, .home #topnav nav ul li a, .scrollMenu #topnav nav ul, .scrollMenu #topnav nav ul li a {color: #fff;}
.home #topnav nav ul li a:after, .scrollMenu #topnav nav ul li a:after {background-color: #fff;}

/*** reseaux ***/
#socialnav {width: 20%; min-width: 250px; text-align: right;}
#socialnav ul {margin: 0; padding: 0; list-style: none;}
#socialnav ul li {display: inline-block; margin:5px 0 0 5px;}
#socialnav ul li img {height:25px; max-height: 25px; width: auto; filter: invert(1);}
#socialnav ul li a:hover img {opacity: 0.7;}


/*==============================================================================
======>> CONTENU <<=============================================================
==============================================================================*/

/*/////////////// GENERIQUE ////////////////////////////////////////*/

/*************** commun *******************/
.contentGen {padding:0 0 30px 0;}
.zoneContentGen {padding: 20px 0 0 0;}
.zoneContentGen p:last-child {margin: 0; padding: 0 0 10px 0;}
.contentGen h2 {margin: 0; padding: 0; font-size:1.6em;}
.contentGen h2 + p, .contentGen h2 + ul, .contentGen h2 + ol {margin-top:10px;}
.contentGen h3 {font-size:1.1em; font-weight: bold; margin: 0; padding: 0;}
.contentGen h3 + p, .contentGen h3 + ul, .contentGen h3 + ol {margin-top:0px;}
.contentGen p {margin:0 0 10px 0; padding:0;}
.contentGen p + h2 {margin-top:60px;}
.contentGen p + h3 {margin-top: 30px}
.contentGen ul, .contentGen ol {margin:0; padding:0 0 0 25px;}
.contentGen ul + p, .contentGen ol + p {margin-top: 10px;}
.contentGen ul + h2, .contentGen ol + h2 {margin-top: 60px;}
.contentGen ul + h3, .contentGen ol + h3 {margin-top: 30px;}
.contentGen a {color:#000;}
.contentGen a:hover {color:#999; text-decoration: none;}
.contentGen p iframe[src*="google.com/maps"] {width: 100% !important;}

#pageContent {min-height: 100vh; background:center no-repeat; background-size:cover;}
#pageContentInner {/*padding:150px 0 50px 0;**/}
.zoneTitre h1 { font-size:2.5em; margin: 0; padding: 0 0 10px 0; text-align:center; color:#fff;}



/*/////////////// ACCUEIL //////////////////////////////////////////*/
.home {/*background-color: #E8E8E8;*/}

/*************** player video *******************/
#homePlayer {min-height: 92vh; position:relative;}
#homePlayer video {height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all 1s ease-out;}
/***** LOGO *****/
/*
.logoPlayer {height: 100%; width: 100%; position: absolute; top: 0; display: flex; justify-content: center; align-items: center; z-index:1000; background: rgba(0,0,0,0.1); transition: all 0.5s ease-out;}
.logoPlayerInner {height:100%;}
.logoPlayer img {margin: 0 auto 0 auto; height: 14%; width: auto; filter: drop-shadow( 1px 3px 5px rgba(0, 0, 0, .5));}
* si scroll *
.scrollPlayer .logoPlayer {background: red; height: 55px; position: fixed; z-index: 9999; justify-content: flex-start;}
.scrollPlayer .logoPlayer img {height: 40%; margin: 0;*/

/*************** navigation catégories *******************/
#homeNavCat {background:#000;}
#homeNavCatInner {padding:30px 0 30px 0;}
ul.menuCat {margin:0; padding: 0; list-style: none; display: flex; justify-content:center;}
ul.menuCat li {margin:0 30px 0 30px;}
ul.menuCat li a {text-decoration:none; color:#fff; text-transform:uppercase; font-size:0.9em;}
ul.menuCat li a:after {content: ''; display: block; width:0; margin: 3px auto 0 auto; height:1px; background: #fff; transition: all 0.3s ease-out;}
ul.menuCat li a:hover {}
ul.menuCat li a:hover:after {width:70px;}

/*************** home folio *******************/
#homeFolio {background:#000;}
#homeFolioInner {}
.listeWorks {
	margin: 0;
	padding: 0; 
	list-style: none;
	display: grid;
	grid-template-columns:repeat(12, 1fr);
	column-gap: 15px;
  	row-gap: 15px;
}
.resumWork {
	aspect-ratio:50 / 33;
	position:relative;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
}
.resumWorkContent {position: absolute; top:0; left: 0; z-index: 10; display: block; width: 100%; height: 100%; padding: 10px; background:rgba(214,207,21, 0.8); transition: all 0.3s ease-out; opacity:0;}
.resumWork:hover .resumWorkContent {opacity: 1;}
.resumWorkContentInner {}
.resumWorkContentInner a {text-decoration: none; color:#000;}
.resumWorkTitre {display: inline-block; text-transform:uppercase; font-family:'Sharp Grotesk Bold', Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; font-size:0.9em; border-bottom:1px solid #707070; margin: 0 0 5px 10px; position:relative; transition:all 0.3s ease-in-out; opacity: 0.4;}
.resumWork:hover .resumWorkTitre {margin: 0 0 5px 20px; opacity: 1;}
.resumWorkTitre:before {content:''; position:absolute; top:2px; left: -22px; height: 15px; width: 15px; background: url("../img/picto-bull-plus.svg") center no-repeat; background-size: 100% 100%;}
.resumWorkClient {display: block; position:relative; margin: 0 0 5px 10px; font-size:1em; transition:all 0.3s ease-in-out; opacity: 0.4;}
.resumWork:hover .resumWorkClient {margin: 0 0 5px 20px; opacity: 1;}
.resumWorkClient:before {content:''; position:absolute; top:2px; left: -22px; height: 15px; width: 15px; background: url("../img/picto-bull-chev.svg") center no-repeat; background-size: 100% 100%;}
.resumWorkCat {display: block; text-transform:uppercase; font-size:0.8em; margin-left: -10px; transition:all 0.3s ease-in-out; opacity: 0.4;}
.resumWork:hover .resumWorkCat {margin-left: 0; opacity: 1;}
.resumWorkImg { font-size:0; display:block; height:100%; width:100%;}
.resumWorkImg img {width: 100%; height: 100%; object-fit: cover;}
/* var */
.resumWork:nth-child(1) {/*background:red;*/ grid-column: 1 / span 6; grid-row: 1 / span 2; aspect-ratio:6 / 4;}
.resumWork:nth-child(2) {/*background:blue;*/ grid-column: 7 / span 3;}
.resumWork:nth-child(3) {/*background:pink;*/ grid-column: 10 / span 3;}
.resumWork:nth-child(4) {/*background:yellow;*/ grid-column: 7 / span 3;}
.resumWork:nth-child(5) {/*background:green;*/ grid-column: 10 / span 3;}
.resumWork:nth-child(6) {/*background:brown;*/ grid-column: 1 / span 3;}
.resumWork:nth-child(7) {/*background:purple;*/ grid-column: 1 / span 3;}
.resumWork:nth-child(8) {/*background:firebrick;*/ grid-column: 4 / span 6; grid-row: 3 / span 2; aspect-ratio:6 / 4;}
.resumWork:nth-child(9) {/*background:violet;*/ grid-column: 10 / span 3; grid-row: 3 / span 1;}
.resumWork:nth-child(10) {/*background:white;*/ grid-column: 10 / span 3;}
.resumWork:nth-child(11) {/*background:orange;*/ grid-column: 1 / span 4;}
.resumWork:nth-child(12) {/*background:red;*/ grid-column: 5 / span 4;}
.resumWork:nth-child(13) {/*background:blue;*/ grid-column: 9 / span 4;}
.resumWork:nth-child(1) .resumWorkContent, .resumWork:nth-child(8) .resumWorkContent {padding: 20px;}
.resumWork:nth-child(1) .resumWorkTitre, .resumWork:nth-child(8) .resumWorkTitre {font-size:1.6em;}
.resumWork:nth-child(1) .resumWorkTitre:before, .resumWork:nth-child(8) .resumWorkTitre:before {top:10px; left: -27px;}
.resumWork:nth-child(1) .resumWorkClient:before, .resumWork:nth-child(8) .resumWorkClient:before {top:4px; left: -27px;}

#homeFolio .blocLink {padding: 60px 0 60px 0;}
#homeFolio .btnPlus:after {filter:invert(1);}

/*************** home sticky presentation *******************/
#homeSticky {background-color: #000; padding:30px 0 10px 0;}
.stickyBloc {
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	/*top: var(--sg0-space-md);*/
	top:150px;
	border-radius: 15px;
	height: calc(100vh - 250px);
	padding: 10px;
	background: #fff;
	overflow:hidden;
	margin:0 auto 20px auto;
	/*padding-bottom: calc(100%/(var(--stack-cards-item-ratio)));*/
	-webkit-transform-origin: center top;
		  transform-origin: center top;
}
.stickyBloc:not(:first-of-type) {margin-top: 15vh;}
.stickyBlocInner {height: 100%;}

/*************** home presentation *******************/
#homePres, .ffc {padding: 50px 0 60px 0;}
.homePres {}
.homePres .stickyBlocInner {display: flex; align-items:center; justify-content: space-between; height: inherit;}
.bicolPres {height: calc(100% - 20px);}
.bcp1 {width: 45%; padding: 0 30px 0 50px;display: flex; flex-direction: column; justify-content: center;}
.bcp1 h2 {text-align:left; text-transform:uppercase; font-size:2.3em; color:#332EEA; font-weight: 300; font-family:'Sharp Grotesk Bold', Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";}
.homePresContent { font-size:1.1em; padding: 20px 0 60px 0;}
.bcp1 .blocLink {text-align: left;}
.bcp1 .blocLink .btnPlus {min-width: 80%; text-align: center;}
.bcp2 {width: 55%;}
.homePresVisu {margin:0; padding: 0 10px 0 0; list-style: none; position: relative; height: inherit; display: flex; justify-content: end; width: 100%;}
.homePresVisu li {border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.15);}
.homePresVisu li img {object-fit:cover; height:100%; width:100%;}
.homePresVisu li:nth-child(1) {height: 100%; aspect-ratio: 9/16; z-index:0;}
.homePresVisu li:nth-child(2) {aspect-ratio: 1/1; height:45%; position: absolute; top:5%; left: 0%; z-index:1;}
.homePresVisu li:nth-child(3) {aspect-ratio: 1/1; height:35% ; position: absolute; bottom:7%; left: 15%; z-index: 2;}
.homePresVisu img {}

/*************** home interfiche *******************/
.homeInterFiche {}
/***** player *****/
.stickyplay {}
.homeInterFiche {/*position: relative;*/ padding:0;}
.homeInterFiche .zoneplayer {}
.homeInterFiche .zoneplayer video {height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all 1s ease-out;}
/***** visu *****/
.stickypic {}
.homeInterFiche .zonevisu {height: 100%;}
.homeInterFiche .zonevisu img {height: 100%; width: 100%; object-fit: cover; object-position: 50% 50%;}

/*************** home ref clients *******************/
.homeRef {}
.homeRef .stickyBlocInner {height: inherit;display: flex; flex-direction: column; justify-content: center;  align-items: center;}
.homeref {}
.hr01 {}
.hr01 h2 {text-transform:uppercase; font-size:2.2em; text-align: center; color:#332EEA;}
.hr02 {}
ul.refclients {margin:0; padding:0 10% 0 10%; list-style:none; display: grid; grid-template-columns:repeat(5, 1fr); gap: 20px;}
ul.refclients li {font-size:0;}
ul.refclients li img {height:100%; width:100%; object-fit:contain; filter: grayscale(1); opacity: 0.5; transition:all 0.2s ease-in-out;}
ul.refclients li img:hover {filter: grayscale(0); opacity: 1; transform: scale(1.1);}



/*************** home RS *******************/
#homeBlocRS {}
.bigLineRS {background-color: #000; display:flex; justify-content:center; align-items: center; padding: 50px 0 70px 0;}
.bigLineRS .linkMailBlocRS {text-decoration:none; font-size:2.5em; font-weight:bold; padding:0 20px 0 0; color:#fff;}
.bigLineRS .linkMailBlocRS:hover {color:#666;}
.bigLineRS ul {margin: 0; padding: 0; list-style: none;}
.bigLineRS ul li {display:inline-block; margin:0 10px 0 10px; transition:all 0.2s ease-in-out;}
.bigLineRS ul li:hover {}
.bigLineRS ul li a {transition:all 0.2s ease-in-out;}
.bigLineRS ul li a img {height: 40px;}
.bigLineRS ul li a:hover img {filter: invert(40%);}

/*************** home contact *******************
#homecontact {background:#000; padding:50px 0 50px 0;}
#homecontactInner {}
#homecontactInner h2, .ffc h2 {color: #fff; text-align:center; text-transform:uppercase; font-size:1.6em; font-weight: 600; margin:0 0 20px 0;}
*/

/*/////////////// REALISATIONS ////////////////////////////////////////////*/

/*************** liste *******************/
#pageReas, #pageCatWorks {padding: 0 0 30px 0;}
#pageReasInner, #pageCatWorksInner {}
/***** nav cat *****/
#taxoNavCat {}
#taxoNavCatInner {padding:30px 0 30px 0; text-align: center;}
#taxoNavCat select {width: 400px; margin:0 auto 0 auto; max-width: 90%; background: none; border:1px solid #332EEA; padding: 10px; border-radius: 15px; color:#332EEA; font-weight:bold;}
/***** reas *****/
/*
#allReas, #taxoWorks {}
#taxoWorks .resumWork:nth-child(1), #allReas .resumWork:nth-child(1) {grid-column: 1 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(2), #allReas .resumWork:nth-child(2) {grid-column: 5 / span 4; grid-row: auto; aspect-ratio:6 / 4; }
#taxoWorks .resumWork:nth-child(3), #allReas .resumWork:nth-child(3) { grid-column: 9 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(4), #allReas .resumWork:nth-child(4) {grid-column: 1 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(5), #allReas .resumWork:nth-child(5) {grid-column: 5 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(6), #allReas .resumWork:nth-child(6) { grid-column: 9 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(7), #allReas .resumWork:nth-child(7) {grid-column: 1 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(8), #allReas .resumWork:nth-child(8) {grid-column: 5 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(9), #allReas .resumWork:nth-child(9) { grid-column: 9 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(10), #allReas .resumWork:nth-child(10) {grid-column: 1 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(11), #allReas .resumWork:nth-child(11) {grid-column: 5 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(12), #allReas .resumWork:nth-child(12) { grid-column: 9 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(13), #allReas .resumWork:nth-child(13) {grid-column: 1 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(14), #allReas .resumWork:nth-child(14) {grid-column: 5 / span 4; grid-row: auto; aspect-ratio:6 / 4;}
#taxoWorks .resumWork:nth-child(15), #allReas .resumWork:nth-child(15) { grid-column: 9 / span 4; grid-row: auto; aspect-ratio:6 / 4;}

#allReas .resumWork:nth-child(1) .resumWorkContent, #allReas .resumWork:nth-child(8) .resumWorkContent, #taxoWorks .resumWork:nth-child(1) .resumWorkContent, #taxoWorks .resumWork:nth-child(8) .resumWorkContent {padding: 10px;}
#allReas .resumWork:nth-child(1) .resumWorkTitre, #allReas .resumWork:nth-child(8) .resumWorkTitre, #taxoWorks .resumWork:nth-child(1) .resumWorkTitre, #taxoWorks .resumWork:nth-child(8) .resumWorkTitre {font-size:0.9em;}
#allReas .resumWork:nth-child(1) .resumWorkTitre:before, #allReas .resumWork:nth-child(8) .resumWorkTitre:before, #taxoWorks .resumWork:nth-child(1) .resumWorkTitre:before, #taxoWorks .resumWork:nth-child(8) .resumWorkTitre:before {top:2px; left: -22px;}
#allReas .resumWork:nth-child(1) .resumWorkClient:before, #allReas.resumWork:nth-child(8) .resumWorkClient:before, #taxoWorks .resumWork:nth-child(1) .resumWorkClient:before, #taxoWorks .resumWork:nth-child(8) .resumWorkClient:before {top:2px; left: -22px;}
**/

/*************** page detail *******************/
.single-works {}
#ficheWork {}
#contentFicheWork {}
#contentFicheWork.wrap {max-width: 1000px;}
#reaContent {padding: 10px 0 20px 0;}
#reaContent > div:first-child {margin-top: 0;}
/*** player ***/
#fichePlayer {margin: 0 0 40px 0;}
.zoneplayer {}
.zoneplayer video {width: 100%;}
/*** bloc text ***/
.blocReaEdit {margin:40px 0 40px 0;}
.blocReaEdit a {color:#000;}
.blocReaEdit a:hover {text-decoration: none; color:#332EEA;}
/*** bloc visus ***/
.blocReaVisu {margin:5px 0 5px 0;}
.blocReaVisu ul {padding: 0; margin: 0; list-style: none;}
.blocReaVisu ul img {}
.imgrea {display: grid; gap: 10px;}
/* var */
.imgx1 {grid-template-columns:repeat(1, 1fr);}
.imgx2 {grid-template-columns:repeat(2, 1fr);}
.imgx3 {grid-template-columns:repeat(3, 1fr);}
/*** bloc titre ****/
.blocReaTitre {margin:40px 0 40px 0;}
.blocReaTitre h2 {text-align: center;}
/*** bloc rea video ***/
.blocReaVid {margin:40px 0 40px 0;}
/*** credits ***/
#reaCredits {margin: 10px auto 30px auto;}
.ligneCredits {display: flex; justify-content: center; margin: 10px 0 10px 0;}
.lgnCrd {}
.lgnFN {font-weight: bold; padding: 0 15px 0 0;  width:50%; text-align:right;}
.lgnMBR {width:50%; padding:0 0 0 15px;}

/*** proj sup ***/
#reaProjSup {margin: 80px 0 40px 0;}
#reaProjSupInner {}
#reaProjSupInner h2 {text-transform: uppercase; text-align: center; color:#fff;}
.listeProjSup {margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; grid-template-columns:repeat(4, 1fr);}
.resumProjSup {transition: all 0.3s ease-out;}
.resumProjSup a {color:#fff; text-decoration:none; font-family:'Sharp Grotesk Bold', Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; font-size:0.8em; text-transform:uppercase;}
.resumProjSup a:hover {}
.resumProjSupImg {overflow: hidden; display: block; height: 100%; font-size:0;}
.resumProjSupImg img {transition: all 0.3s ease-out; height: 100%; width: 100%; object-fit: cover;}
.resumProjSupTitre {transition: all 0.3s ease-out;}
.resumProjSup:hover img {transform: scale(1.1);}
.resumProjSup:hover .resumProjSupTitre {padding: 0 0 0 5px;}

/*/////////////// ABOUT ////////////////////////////////////////////*/
#pageAbout {}
#pageAboutInner.wrap {max-width:1000px;}
#aboutPlayer {margin:20px 0 30px 0;}
#aboutPlayer video {width: 100%;}
.infoAbout {}
.infoAbout h2 {margin: 0 0 20px 0; color:#fff;}
.infoAbout h3 {}
#aboutref {margin: 80px 0 0 0;}
#aboutref h2 {text-transform:uppercase; font-size:2.2em; text-align: center; color:#fff;}
#aboutref .refclients {margin: 20px 0 0 0;}
#aboutref ul.refclients li img {filter: grayscale(100%) invert(1);}
#pageAbout .bigLineRS {background: none; margin: 50px 0 0 0;}

/*/////////////// CONTACT ////////////////////////////////////////////*/
#pageContact {}
#pageContactInner {}
.infocontact {margin: 30px 0 30px 0;}



/* recaptacha
body div.grecaptcha-badge:not(body.page-template-contact div.grecaptcha-badge)  {display:none !important; box-shadow:none !important;}
*/

/*/////////////// PAGE 404 ////////////////////////////////////////////*/
#page404 {height:100vh; background:center no-repeat; background-size:cover;}
#erreur404 {display: flex; width: 100%; height: 100%; justify-content: center; flex-direction: column; align-items: center;}
#erreur404 p {color:#fff; margin: 0; padding: 0; text-transform: uppercase; }
#erreur404 p strong {font-size:4vw; text-shadow:0 0 4px rgba(0,0,0,0.4);} 
#erreur404 p a {display: inline-block; margin: 30px; background: #fff; border:2px solid #000; color:#000; text-decoration: none; padding: 10px 20px 10px 20px; font-size:1em;}
#erreur404 p a:hover {color:#fff; background: #000;}

/*==============================================================================
======>> FOOTER <<==============================================================
==============================================================================*/
footer { }
#footer {padding: 30px 0 10px 0;}
/***** contact *****/
#footerFormContact {background:#fff;}
#footerFormContact .wrap {}
.ffc {}
.ffc h2 {text-align: center; margin: 0 0 30px 0; text-transform: uppercase; /*color:#332EEA;*/ color:#000; font-size:1.8em;}
/***** logo *****/
#logoFooter {text-align: center; padding: 0 0 20px 0;}
#logoFooter a {display: inline-block; width: 100px}
#logoFooter img {filter: invert(1);}
/***** colonnes *****/
#colFooter {display:flex; justify-content:space-between; align-items:flex-start;}
.colfoot {color:#fff; text-transform:uppercase;}
.colfoot a {color:#fff; text-decoration: none;}
.colfoot a:hover {color:#999;}
#navFooter {}
#navFooter ul {padding: 0; margin: 0; list-style: none;}
#navFooter ul li {padding:2px 0 2px 0; }
#navFooter ul li a {text-transform:uppercase; font-size:0.9em; display: flex; justify-content: flex-start; align-items:center; padding:0 10px 0 0; transition: all 0.5s ease-out;}
#navFooter ul li a:before {content:''; display:block; height: 1px; width: 0px; margin: 0 2px 0 0; background-color: #000; transition: all 0.5s ease-out;}
.colfoot #navFooter ul li a:hover {padding: 0; color: #fff;}
#navFooter ul li a:hover:before {width: 10px;}
.titreAdresse, .cf04titre {font-weight: bold;}
.contentAdresse {}
.contentAdresse p {margin: 0; padding: 5px 0 5px 0;}
.colfoot a.linkMailFooter {text-transform: initial; font-weight: bold; font-size:1.2em;}
#navRS {margin:5px 0 0 0;}
#navRS ul {margin: 0; padding: 0; list-style: none;}
#navRS ul li {display: inline-block; margin:5px 8px 0 0;}
#navRS ul li:last-child {margin-right: 0;}
#navRS ul li img {height:20px; max-height: 18px; width: auto; filter: invert(1);}
#navRS ul li a:hover img {opacity: 0.7;}
/* var */
.cf01 {}
.cf02 {text-align:center;}
.cf03 {text-align:center;}
.cf04 {}
.cf04titre {display: block; margin:0 0 5px 0;}
/***** contact job *****/
#mailJob {padding:50px 0 20px 0; color:#fff; text-align: center;}
.mailJobTitre {display: block; padding: 0 0 10px 0; text-transform:uppercase; font-weight: bold; font-size:1.2em;}
a.jobMailFooter {color:#fff; text-decoration: none; font-weight: bold; font-size:1.2em;}
a.jobMailFooter:hover {color:#999;}
/***** menu mentions *****/
#footMentions {}
#footMentions nav {}
.menuFooter {margin:0; padding: 10px 0 10px 0; list-style: none; text-align: center;}
.menuFooter li {display: inline-block; margin:0 10px 0 10px;}
.menuFooter li a {color:#666; text-decoration:none; font-size:0.75em;}
.menuFooter li a:hover {text-decoration: underline;}

/*===== pour home page =====*/
.homeFooter {background: #000;}
.homeFooter .colfoot, .homeFooter .colfoot a, .homeFooter .colfoot #navFooter ul li a:hover, .homeFooter #mailJob, .homeFooter a.jobMailFooter {color: #fff;}
.homeFooter .colfoot a:hover, .homeFooter a.jobMailFooter:hover {color: #999;}
.homeFooter #navFooter ul li a:before {background-color: #fff;}

/*/////////////// FORM CONTACT ////////////////////////////////////////////*/
.formContact {}
.formContact form {color:#000;}
.formContact form label {color:#000; text-align: center; width: 100%; margin: 20px 0 10px 0; font-weight: 300;}
.formContact .row {margin:0 0 40px 0 ;}
.formContact .row p {margin: 0; padding: 0;}
.formContact .trirow {display:flex; justify-content: flex-start;}
.formContact .tr01 {margin:0 30px 0 0; width: 100%; max-width: 380px;}
.formContact .tr02 {margin:0; max-width: 380px;}
.formContact .tr03 {margin:0 0 0 30px; width: 100%; max-width: 380px;}
.formContact input[type="text"], .formContact input[type="email"], .formContact textarea, .formContact select {border: none; border-bottom:1px solid #000; margin: 0; background:none; padding:5px; width: 100%;  font-size:1em; font-family:Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; color:#fff;}
.formContact input[type="text"]:focus, .formContact input[type="email"]:focus, .formContact textarea:focus, .formContact select:focus {border-color:#999}
.formContact textarea {margin:20px 0 0 0; padding:10px; max-height: 120px; width:100%; resize: none; font-family: Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; border:1px solid #000;}
.formContact .submitForm {text-align: center; margin:30px 0 0 0;}
.formContact input[type="submit"] {background: none; padding:10px; width: 120px; border:1px solid #000; font-weight:500; text-transform: uppercase; cursor: pointer; display: block; margin: 0 auto 0 auto; font-family:Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; color:#000;}
.formContact input[type="submit"]:hover {background: #000; color:#fff;}
/* post valid */
.formContact span.wpcf7-not-valid-tip {color: red;}
.formContact form.sent div.wpcf7-response-output {background: rgba(255,255,255,0.9); color:#000; padding:10px; border:none;}
.formContact form.invalid div.wpcf7-response-output {border:2px solid red; padding:10px;}
.formContact span input.wpcf7-not-valid {border-color:red;}


/*==============================================================================
======>> IFRAME CONTENT <<======================================================
==============================================================================*/
#iframeContent {background:rgba(0,0,0,0.75); width:100vw; height:100vh; position:fixed; top:0; z-index:9999; display:flex; justify-content:center; align-items:center; transition: all 0.5s ease-out;}
#iframeContent.hideIframe {display:none;}
#iframeContentInner {background:#000; position: relative; width:calc(100vw - 10%); height:calc(100vh - 80px);  border:1px solid #666; z-index: 10;}
#closeOverlay {position: absolute; width: 100%; height: 100%; z-index: 1; cursor: pointer;}
#contentIframe {width: 100%; height: 100%; overflow-y:scroll; scrollbar-color: #666 #000; scrollbar-width: thin;}
#contentIframe .wrap {max-width: 96%;}
#closeIframe {position: absolute; top:-15px; right: -15px; display: flex; align-items: center; z-index: 5000; cursor:pointer;}
#closeIframe span {color:#fff; font-size:0.8em; text-transform: uppercase; font-family:'Oswald', Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif"; display: block; padding: 15px 0 0 0;}
#closeIframe:after {content:''; display: block; width: 40px; height: 40px; margin: 0 0 0 10px; background:#000 url("../img/close-blanc.svg") no-repeat center; background-size: 50%; border-radius:200px; border:1px solid #666;}
	



/*==============================================================================
======>> RESPONSIVE <<==========================================================
==============================================================================*/

/********* MENU *******************************************************************/
#smart-toggle, #rwdTopMenu {display:none;}

@media(max-width:979px)
{
	#headerInner.wrap {width:calc(100% - 50px);}
	#smart-toggle {display:inline-block; cursor:pointer; margin:0; background: url("../img/burger-menu-noir.png") left no-repeat; padding:0 0 0 40px;}
	.scrollMenu #smart-toggle {background-image: url("../img/burger-menu.png");}
	/*#smart-toggle:hover {background-image: url("../img/burger-menu-hover.png");}*/
	#smart-toggle img {width: 40px; display: none;}
	#rwdTopMenu {display: inline-block;}
	#smart-toggle:after {content:'menu'; color:#000; text-transform:uppercase; font-size:1.2em; display:inline-block; vertical-align:top; padding: 3px 0 0 0;}
	.scrollMenu #smart-toggle:after {color: #fff;}
	/*#smart-toggle:hover:after {color:#ffffff;}*/
	#rwdTopMenu {background:#CB3E49; position:fixed; top:0; left:0; width:100%; z-index:9999; height:40px; box-shadow: 0 0 2px rgba(0,0,0,1);}
	.mm-menu {background-color:#000; z-index: 6000;}
	.mm-menu > .mm-panel {padding:0 20px 0 0;}
	.mm-menu li.menu-item {padding:0 0 0 20px; color:#fff;}
	.mm-menu .mm-listview > li::after, .mm-menu .mm-listview > li .mm-prev::after, .mm-menu .mm-listview > li .mm-next::before, .mm-menu .mm-listview > li .mm-prev:before,
 	.mm-menu .mm-listview > li .mm-next:after,
 	.mm-menu .mm-listview > li .mm-arrow:after, .mm-menu .mm-navbar, .mm-menu .mm-navbar .mm-btn::before {border-color:#fff;}
	.mm-listview > li > a:hover {background: #ffffff; color:#000;}
	.mm-menu .mm-navbar > a {color:#fff; text-transform: uppercase;}
	/* nav rs */
	ol.mmRS {padding: 20px 10% 0 10%; margin: 0; list-style: none; text-align: center; display: grid; gap:20px; grid-template-columns:repeat(4, 1fr);}
	ol.mmRS li {/*display: inline-block; margin: 15px; width: 12%; max-width: 40px;*/ max-height:40px;}
	ol.mmRS li img {width:100%; height: 100%; aspect-ratio: auto; object-fit: contain;}
	ol.mmRS li:hover img {opacity:0.8;}
	.mmRShide {opacity:0;}
	/* close */
	.closeMenu {display:block; margin:0; position:absolute; bottom:0; left:0; z-index:5001;}
	.closeMenu span {display:none;}
	.closeMenu:after {content: ''; width: 50px; height: 50px; position:absolute; top:-50px; left:0; display:block; cursor: pointer; z-index:9999; background: url("../img/close-blanc.svg") center no-repeat; background-size: 70% 70%; transition: all 0.3s ease-out;}
	.closeMenu:hover:after {transform: rotate(360deg);}
}

/********* > 1400 *******************************************************************/
@media(min-width:1400px)
{
	/* header */ 
	#headerInner.wrap {max-width:1500px; padding: 15px 50px 15px 50px;}
	.scrollMenu #head .htl {left: calc((100% - 1400px)/2);}
}

/********* 1200 > 1400 *******************************************************************/
@media(min-width:1200px) and (max-width:1399px)
{
	body:not(.home) {padding:110px 0 0 0;}
	.wrap {width:1150px;}
	#head.scrollPlayerInit .htl, .scrollMenu #head .htl {left: calc((100% - (100% - 100px))/2);}
	.scrollMenu #topnav {width: 55%;}
	#socialnav ul li img {max-height: 20px;}
	/*  footer */
	.formContact .tr01, .formContact .tr02, .formContact .tr03 {max-width: 365px;}
}

/********* 980 > 1200 *******************************************************************/
@media(min-width:980px) and (max-width:1199px)
{
	body:not(.home) {padding:100px 0 0 0;}
	.wrap {width:950px;}
	/* header */
	#head.scrollPlayerInit .htl, .scrollMenu #head .htl {left: calc((100% - (100% - 100px))/2);}
	#head.scrollPlayerInit, .scrollMenu #head {width: 15%;}
	#head.scrollPlayerInit .htl, .scrollMenu #head .htl {width: 13%; top:20px;}
	.scrollMenu #head img {width: 100%;}
	.scrollMenu #topnav {width: 60%;}
	#socialnav {width: 25%}
	#socialnav ul li img {max-height: 20px;}
	/* footer */
	#homecontactInner h2, .ffc h2 {font-size:1.4em;}
	.mailJobTitre {font-size:1em;}
	a.jobMailFooter {font-size:1.1em;}
	.formContact .tr01, .formContact .tr02, .formContact .tr03 {max-width: 295px;}
	/* gen */
	.zoneTitre h1 { font-size:2em;}
	.contentGen h2 {font-size:1.3em;}
	.contentGen h3 {font-size:1.1em;}
	.contentGen p + h2 {margin-top:50px;}
	.contentGen p + h3 {margin-top: 20px}
	.contentGen ul, .contentGen ol {padding:0 0 0 20px;}
	.contentGen ul + h2, .contentGen ol + h2 {margin-top: 50px;}
	.contentGen ul + h3, .contentGen ol + h3 {margin-top: 20px;}
	/* home */
	.resumWorkTitre {font-size:0.8em;}
	.resumWorkClient {font-size:0.9em;}
	.resumWorkCat {font-size:0.7em;}
	.resumWork:nth-child(1) .resumWorkTitre, .resumWork:nth-child(10) .resumWorkTitre, .resumWork:nth-child(12) .resumWorkTitre {font-size:1.2em;}
	.bcp1 h2 {font-size:1.8em;}
	.homePresContent { font-size:1em; padding: 20px 0 40px 0;}
	.homePresVisu li:nth-child(2) {height:39%;  top:10%; left: 0%; }
	.homePresVisu li:nth-child(3) {height:27%; bottom:10%; left: 10%;}
	.homePresVisu img {}
	.hr01 h2 {font-size:1.8em;}
	/* works */
	/* about */
	/* iframe */
	#iframeContentInner {width:calc(100vw - 5%);}
	/* 404 */
	.erreur404 p strong {font-size:5vw;}
}


/********* 768 > 980 ********************************************************************/
@media(min-width:768px) and (max-width:979px)
{
	body:not(.home) {padding:90px 0 0 0;}
	.wrap {width:760px;}
	/* header */
	#headerInner.wrap {padding: 10px 30px 10px 30px; width: 100%;}
	#head {text-align: right;}
	#head a img {max-width: 130px;}
	#head .htl {transform:translate3d(0,35vh,0);}
	#head.scrollPlayerInit .htl, .scrollMenu #head .htl {left:unset;right: calc(50% - 65px); width: 130px;}
	#socialnav {width: 40%;}
	#socialnav ul li img {max-height: 20px;}
	/* footer */
	#homecontactInner h2, .ffc h2 {font-size:1.3em;}
	.formContact .tr01, .formContact .tr02, .formContact .tr03 {max-width: 235px;}
	#footer {padding: 20px 0 10px 0;}
	#logoFooter a {width: 80px;}
	.colfoot {font-size:0.8em;}
	#mailJob {padding:40px 0 20px 0;}
	.mailJobTitre {font-size:1em;}
	a.jobMailFooter {font-size:1em;}
	/* gen */
	.zoneTitre h1 { font-size:1.8em;}
	.contentGen h2 {font-size:1.2em;}
	.contentGen h3 {font-size:1.1em;}
	.contentGen p + h2 {margin-top:40px;}
	.contentGen p + h3 {margin-top: 20px}
	.contentGen ul, .contentGen ol {padding:0 0 0 20px;}
	.contentGen ul + h2, .contentGen ol + h2 {margin-top: 40px;}
	.contentGen ul + h3, .contentGen ol + h3 {margin-top: 20px;}
	/* home */
	#homePlayer {min-height: 70vh;}
	ul.menuCat li {margin:0 20px 0 20px;}
	ul.menuCat li a {font-size:0.8em;}
	ul.menuCat li a:hover:after {width:50px;}	
	.listeWorks {grid-template-columns:repeat(2, 1fr);}
	.resumWork {grid-column: auto; grid-row: auto; aspect-ratio:6 / 4;}
	.resumWorkClient {font-size:0.9em;}
	.resumWork:nth-child(1) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(2) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(3) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(4) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(5) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(6) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(7) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(8) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(9) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(10) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(11) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(12) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(13) {display:none;}
	.resumWork:nth-child(1) .resumWorkContent, .resumWork:nth-child(8) .resumWorkContent {padding: 10px;}
	.resumWork:nth-child(1) .resumWorkTitre, .resumWork:nth-child(8) .resumWorkTitre {font-size:0.9em;}
	.resumWork:nth-child(1) .resumWorkTitre:before, .resumWork:nth-child(8) .resumWorkTitre:before {top:2px; left: -22px;}
	.resumWork:nth-child(1) .resumWorkClient:before, .resumWork:nth-child(8) .resumWorkClient:before {top:2px; left: -22px;}
	.bcp1 h2 {font-size:1.6em; }
	.homePresContent { font-size:1em; padding: 10px 0 30px 0;}
	.homePresVisu li:nth-child(1) {aspect-ratio: 7/16;}
	.homePresVisu li:nth-child(2) {height:35%; top:12%; left: 0%;}
	.homePresVisu li:nth-child(3) {height:25% ; bottom:12%; left: 10%;}
	.hr01 h2 {font-size:1.6em;}
	ul.refclients {grid-template-columns:repeat(4, 1fr); padding: 15px 16% 0 16%}
	.bigLineRS {padding: 30px 0 50px 0;}
	.bigLineRS .linkMailBlocRS {font-size:1.8em;}
	.bigLineRS ul li {width:30px; margin: 0 5px 0 5px;}
	/* works */
		#taxoWorks .resumWork:nth-child(1), #allReas .resumWork:nth-child(1) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(2), #allReas .resumWork:nth-child(2) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(3), #allReas .resumWork:nth-child(3) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(4), #allReas .resumWork:nth-child(4) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(5), #allReas .resumWork:nth-child(5) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(6), #allReas .resumWork:nth-child(6) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(7), #allReas .resumWork:nth-child(7) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(8), #allReas .resumWork:nth-child(8) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(9), #allReas .resumWork:nth-child(9) { grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(10), #allReas .resumWork:nth-child(10) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(11), #allReas .resumWork:nth-child(11) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(12), #allReas .resumWork:nth-child(12) { grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(13), #allReas .resumWork:nth-child(13) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(14), #allReas .resumWork:nth-child(14) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(15), #allReas .resumWork:nth-child(15) { grid-column: auto; grid-row: auto;}
	#ficheWork .zoneTitre h1 { font-size:1.6em;}
	#reaContent {padding: 0;}
	#fichePlayer {margin: 0 0 30px 0;}
	.blocReaEdit {margin:30px 0 30px 0;}
	.blocReaTitre {margin:30px 0 30px 0;}
	.blocReaTitre h2 {font-size:1.4em;}
	.blocReaVid {margin:30px 0 30px 0;}
	#reaCredits {margin: 10px auto 20px auto;}
	.ligneCredits {font-size:0.95em;}
	#reaProjSup {margin: 50px 0 0px 0;}
	#reaProjSupInner h2 {center;font-size:1.2em;}
	.listeProjSup {display: grid; gap: 10px;}
	.resumProjSup a {font-size:0.7em;}
	/* about */
	/* iframe */
	#iframeContentInner {width:calc(100vw - 5%);}
	/* 404 */
	.erreur404 p strong {font-size:5vw;}
}

/********* 768 < ************************************************************************/
@media(max-width:767px)
{
	body:not(.home) {padding:90px 0 0 0;}
	.wrap {width:490px;}
	/* header */
	#headerInner.wrap {padding: 10px 20px 10px 20px; width: 100%;}
	#head {text-align: right;}
	#head a img {max-width: 130px;}
	#head a img {max-width: 130px;}
	#head .htl {transform:translate3d(0,35vh,0);}
	#head.scrollPlayerInit .htl, .scrollMenu #head .htl {left:unset;right: calc((100% - (100% - 50px))/2); width: 130px;}
	#socialnav {display:none;}
	#socialnav ul li img {max-height: 20px;}
	/* footer */
	#homecontact {padding:30px 0 10px 0;}
	#homecontactInner h2, .ffc h2 {font-size:1.2em;}
	.formContact .row {margin:0 0 30px 0 ;}
	.formContact .trirow {flex-wrap: wrap;}
	.formContact .tr01 {margin:0 20px 0 0; width: calc(50% - 20px); max-width:unset;}
	.formContact .tr02 {margin:0 0 0 20px; width: calc(50% - 20px); max-width: unset;}
	.formContact .tr03 {margin:30px 0 0 0; width: 100%; max-width: unset;}
	.formContact .submitForm {margin:0;}
	#footer {padding: 20px 0 10px 0;}
	#logoFooter a {width: 70px;}
	#colFooter {flex-wrap: wrap;}
	.colfoot {font-size:0.9em;}
	#navRS ul li {margin:5px 6px 0 6px;}
	#navRS ul li:last-child {margin-right: 6px;}
	#navRS ul li img {height:30px; max-height: 25px; }
	.cf01 {display:none; order: 4;}
	.cf02 {width:50%; order: 2;}
	.cf03 {width:50%; order: 3;}
	.cf04 {width:100%; margin: 0 0 50px 0; text-align: center; order: 1;}
	.mailJobTitre {font-size:1em;}
	a.jobMailFooter {font-size:1em;}
	/* gen */
	.zoneTitre h1 { font-size:1.6em;}
	.contentGen h2 {font-size:1.15em;}
	.contentGen h3 {font-size:1.05em;}
	.contentGen p + h2 {margin-top:35px;}
	.contentGen p + h3 {margin-top: 15px}
	.contentGen ul, .contentGen ol {padding:0 0 0 20px;}
	.contentGen ul + h2, .contentGen ol + h2 {margin-top: 35px;}
	.contentGen ul + h3, .contentGen ol + h3 {margin-top: 15px;}
	/* home */
	#homePlayer {min-height: 70vh;}
	#homeNavCat {}
	#homeNavCatInner {text-align:center; width: 100%; max-width: 400px; margin: 0 auto 0 auto;}
	#homeNavCatInner select {display:none; width: 100%; background: none; border:1px solid #332EEA; padding: 10px; border-radius: 15px; color:#332EEA; font-weight:bold;}
	#homeNavCatInner select option {color:#332EEA;}
	#homeFolio {margin:0;}
	.listeWorks {grid-template-columns:repeat(2, 1fr); gap:10px;}
	.resumWork {grid-column: auto; grid-row: auto; aspect-ratio:6 / 4;}
	.resumWorkClient {font-size:0.8em;}
	.resumWork:nth-child(1) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(2) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(3) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(4) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(5) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(6) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(7) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(8) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(9) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(10) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(11) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(12) {grid-column: auto; grid-row: auto;}
	.resumWork:nth-child(13) {display:none;}
	.resumWork:nth-child(1) .resumWorkContent, .resumWork:nth-child(8) .resumWorkContent {padding: 10px;}
	.resumWork:nth-child(1) .resumWorkTitre, .resumWork:nth-child(8) .resumWorkTitre {font-size:0.8em;}
	.resumWork:nth-child(1) .resumWorkTitre:before, .resumWork:nth-child(8) .resumWorkTitre:before {top:2px; left: -22px;}
	.resumWork:nth-child(1) .resumWorkClient:before, .resumWork:nth-child(8) .resumWorkClient:before {top:2px; left: -22px;}
	#homeSticky {padding:60px 0 10px 0;}
	.stickyBloc {top:100px;height: calc(100vh - 150px);}
	.homePres .stickyBlocInner {align-items:center; justify-content: center; flex-direction:column;}
	.bicolPres {}
	.bcp1 {width: 100%;  padding: 0 20px 0 20px;display: block; height: calc(60% - 20px); text-align:center; }
	.bcp1 h2 { font-size:1.6em; text-align:center; }
	.homePresContent { font-size:1.1em; padding: 10px 0 10px 0; min-height: 40%;}
	.bcp1 .blocLink {text-align:center; }
	.bcp2 {width: 100%; height: calc(40% - 20px);}
	.homePresVisu {padding: 0; height: 100%; display: grid;grid-template-columns:repeat(2, 1fr);column-gap: 10px;row-gap: 10px; width: 100%;}
	.homePresVisu li:nth-child(1) {height: auto; width:100%; aspect-ratio: unset; z-index:0; grid-column: auto; grid-row: 1 / span 2;}
	.homePresVisu li:nth-child(2) {aspect-ratio: unset; height:100%; position:relative; top:unset; left: unset;}
	.homePresVisu li:nth-child(3) {aspect-ratio: unset; height:100% ; position: relative; bottom:unset; left: unset;}
	.homePresVisu img {}
	.hr01 h2 {font-size:1.6em; }
	ul.refclients {grid-template-columns:repeat(3, 1fr); gap: 15px;}
	.bigLineRS {padding: 10px 0 30px 0; flex-direction: column;}
	.bigLineRS .linkMailBlocRS {font-size:1.8em; padding: 0;}
	.bigLineRS ul {margin: 10px 0 0 0;}
	.bigLineRS ul li {width:30px; margin: 0 5px 0 5px;}
	/* works */
	#taxoNavCat ul.menuCat {opacity: 0; height: 20px; overflow: none;}
	#taxoWorks .resumWork:nth-child(1), #allReas .resumWork:nth-child(1) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(2), #allReas .resumWork:nth-child(2) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(3), #allReas .resumWork:nth-child(3) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(4), #allReas .resumWork:nth-child(4) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(5), #allReas .resumWork:nth-child(5) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(6), #allReas .resumWork:nth-child(6) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(7), #allReas .resumWork:nth-child(7) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(8), #allReas .resumWork:nth-child(8) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(9), #allReas .resumWork:nth-child(9) { grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(10), #allReas .resumWork:nth-child(10) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(11), #allReas .resumWork:nth-child(11) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(12), #allReas .resumWork:nth-child(12) { grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(13), #allReas .resumWork:nth-child(13) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(14), #allReas .resumWork:nth-child(14) {grid-column: auto; grid-row: auto;}
	#taxoWorks .resumWork:nth-child(15), #allReas .resumWork:nth-child(15) { grid-column: auto; grid-row: auto;}
	#ficheWork .zoneTitre h1 { font-size:1.4em; line-height: auto; padding: 0;}
	#reaContent {padding: 0;}
	#fichePlayer {margin: 0 0 20px 0;}
	.blocReaEdit {margin:10px 0 20px 0;}
	.blocReaTitre {margin:20px 0 20px 0;}
	.blocReaTitre h2 {font-size:1.2em;}
	.blocReaVid {margin:20px 0 20px 0;}
	.imgx3 {grid-template-columns:repeat(2, 1fr);}
	.imgx3 li:first-child {grid-column: 1 / 3; font-size:0;}
	#reaCredits {margin: 10px auto 20px auto;}
	.ligneCredits {font-size:0.95em;}
	#reaProjSup {margin: 50px 0 0px 0;}
	#reaProjSupInner h2 {center;font-size:1.2em;}
	.listeProjSup {display: grid; gap: 20px; grid-template-columns:repeat(2, 1fr);}
	.resumProjSup:nth-child(n + 3) {display:none;}
	.resumProjSup a {font-size:0.7em;}
	.resumProjSupImg {height: auto;}
	/* about */
	/* cookies */
	#tarteaucitronRoot div#tarteaucitron {width: 95% !important; left: 2.5% !important; background: none;}
	/* iframe */
	#iframeContentInner {width:calc(100dvw - 5%); height:calc(100dvh - 80px);}
	#closeIframe {position: absolute; top:-35px; right: 0px;}
	#closeIframe:after {width: 30px; height: 30px;}
	#closeIframe span {padding: 0;}
	/* 404 */
	.erreur404 p strong {font-size:7vw;}
}

/********* 500 < ************************************************************************/
@media(max-width:500px)
{
	body:not(.home) {padding:80px 0 0 0;}
	.wrap {width:94%;}
	/* header */
	#headerInner.wrap {padding: 5px 10px 5px 10px;}	
	#head .htl {transform:translate3d(0,30vh,0);}
	#head.scrollPlayerInit .htl, .scrollMenu #head .htl {left:unset;right: calc((100% - (100% - 20px))/2); width: 110px; transform:translate3d(0,-3px,0);}
	/* footer */
	#homecontactInner h2, .ffc h2 {font-size:1.1em;}
	.formContact .row {margin:0 0 20px 0 ;}
	.formContact .trirow {flex-wrap: wrap;}
	.formContact .tr01 {margin:0; width: 100%; max-width:unset;}
	.formContact .tr02, .formContact .tr03 {margin:20px 0 0 0; width: 100%; max-width: unset;}
	.formContact .submitForm {margin:0;}
	#footer {padding: 10px 0 10px 0;}
	#logoFooter {padding:0 0 10px 0;}
	#logoFooter a {width: 50px;}
	#navRS ul li img {height:25px; max-height: 20px; }
	.cf02 {width:100%; margin: 0 0 30px 0;}
	.cf03 {width:100%;}
	.cf04 {width:100%; margin: 0 0 40px 0; text-align: center; order: 1;}
	#mailJob {padding: 40px 0 20px 0;}
	.mailJobTitre {font-size:0.85em; padding: 0 0 5px 0;}
	a.jobMailFooter {font-size:1em;}
	/* gen */
	.zoneTitre h1 { font-size:1.35em;}
	.contentGen p {font-size:0.9em;}
	.contentGen h2 {font-size:1.1em;}
	.contentGen h3 {font-size:1em;}
	.contentGen p + h2 {margin-top:30px;}
	.contentGen p + h3 {margin-top: 15px}
	.contentGen ul, .contentGen ol {padding:0 0 0 20px;}
	.contentGen ul + h2, .contentGen ol + h2 {margin-top: 30px;}
	.contentGen ul + h3, .contentGen ol + h3 {margin-top: 15px;}
	/* home */
	#homePlayer {min-height: 60dvh;}
	#head a.htl img {top:5dvh;}
	.listeWorks {grid-template-columns:repeat(1, 1fr); gap: 10px;}
	.home .resumWork:nth-child(n + 5) {display:none;}
	.resumWorkContentInner {display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center;}
	.resumWorkTitre, .resumWork:nth-child(1) .resumWorkTitre, .resumWork:nth-child(10) .resumWorkTitre, .resumWork:nth-child(12) .resumWorkTitre { font-size:1em;}
	.resumWorkClient {font-size:1em; text-align:left;}
	.resumWorkCat {text-transform:lowercase; font-size:1em;}
	#homeFolio .blocLink {max-width: 70%; margin: 0 auto 0 auto; font-size:0.9em;}
	.bcp1 {height: calc(70% - 20px);}
	.bcp1 h2 { font-size:1.2em;}
	.bcp1 .blocLink {ax-width: 70%; margin: 0 auto 0 auto; font-size:0.9em;}
	.bcp2 {height: calc(30% - 20px);}
	.hr01 h2 {font-size:1.2em; }
	ul.refclients li:nth-child(n + 16) {display:none;}
	/* works */
	#ficheWork .zoneTitre h1 { font-size:1.2em;}
	.blocReaTitre h2 {font-size:1.1em;}
	.blocReaVisu {margin: 10px 0 10px 0;}
	.blocReaVisu + .blocReaVisu {margin-top: 0;}
	.imgrea {grid-template-columns:repeat(1, 1fr);}
	.imgrea li { font-size:0;}
	.imgx3 li:first-child {grid-column:unset;}
	#reaCredits {margin: 10px auto 20px auto;}
	.ligneCredits {font-size:0.9em;}
	#reaProjSup {margin: 50px 0 0px 0;}
	#reaProjSupInner h2 {center;font-size:1.1em;}
	.listeProjSup {display: grid; gap: 20px; grid-template-columns:repeat(2, 1fr);}
	.resumProjSup:nth-child(n + 3) {display:none;}
	.resumProjSup a {font-size:0.8em; text-transform: unset; font-weight: bold; font-family: Arial, Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";}
	.resumProjSupImg {height: auto;}
	/* about */
	/* iframe */
	#iframeContent {align-items: start; z-index:999999999999;}
	#iframeContentInner {height:calc(100dvh - 60px); margin:10px 0 0 0;}
	#closeIframe {top:auto; bottom:-45px; right: 0px; width:100%; background:#000; border:1px solid #666; height: 40px; padding: 10px; justify-content:center;}
	/* 404 */
	.erreur404 p strong {font-size:8vw;}
}