@charset "utf-8";
/* CSS Document */

.left-column
{
float:left;
width:0px;
display:none;
background-color:#9F0;
}
.right-column
{
float:right;
width:0%;
display:none;
background-color:#FF0;
}
.center-column
{
margin:auto;
width:100%;
text-align:left;
}
.left-1 {
	float:left;
	width:100%;
	padding:0px;
	text-align:left;
}

.left-2 {
	float:right;
	width:100%;
	padding:0px;
	text-align:center;
}



.left-1 img, #header .left-1 img {width:30%; float:left; margin-left:10px; margin-top:7px; margin-bottom:7px; }

.menu-header {
	margin:auto;
	max-width:1000px;
	text-align:center;
	width:90%;
}
.menu-header img {
	width:80%;	
}
.menu-header h1 {
	font-size:0.7em;
}
ul#menu ul.sub-menu {
    padding:0px;
    margin: 0;
	width:100%
	margin-left:10px;
		margin-bottom:15px;
	background-color:#333;
	z-index:9999999;
}
ul#menu li {
    list-style-type: none;
    display: inline-block;
	/*border-right:1px solid #888888;*/
	color: #FFF;
	font-size:0.5em;
	font-weight:none;
	text-transform:uppercase;
}

ul#menu li a {
    text-decoration: none;
    color: #FFF;
    padding: 7px;
	font-size:0.5em;
    display:inline-block;
	text-transform:uppercase;
	padding-top:10px;
	text-align:left;
}
ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #FFF;
	width:200px;
    padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	text-transform:uppercase;
	font-size:0.5em;
    display:block;
	border-bottom:1px solid #717171;
	background-color:#333;
}
ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
	width:200px;
	padding-left:17px;
	border-right:none;
	background-color:#333;
}
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    bottom: 20px;
    right: 0px;
    width: 100%;
}


#header { background: url("back-menu.png") repeat 50% 70px; left: 0px; vertical-align:middle; bottom: 0px; width: 100%; overflow: visible; position: fixed; z-index: 99999; height:auto; }
#header2 {background: url("back-menu.png") repeat 50% 80px;  left: 0px; vertical-align:middle; top: 0px; width: 100%; padding:5px; overflow: visible; position: fixed; z-index: 999; height:60px; padding-top:5px;  }
#header2 h1 {font-size:0.7em; margin:0px; padding:0px;}
#header2 h2 {font-size:0.6em; margin:0px; padding:0px; padding-bottom:10px;}
#header-darker { background: url("back-menu-darker.png") repeat 50% 70px; left: 0px; vertical-align:middle; bottom: 0px; width: 100%; overflow: visible; position: fixed; z-index: 9999; height:auto; }
.container_index { padding:0px; padding-bottom:10px; padding-left:7px;  position: fixed; width:100%; bottom:90px; height:auto;
}
.container { padding: 0px 0px 120px 0px; position: relative; margin-top:0; width:100%;
}
.container_inside { margin:0px; padding:3px; width:100%;  }
.container_index h1 {
	font-size:0.7em;
	color:#FFF;
	font-weight:normal;
	text-align:left;
	letter-spacing:normal;
	line-height:1.0em;
	padding-bottom:6px;
}
.container_index h2 {
	font-size:0.7em;
	font-weight:normal;
	max-width:none;
	text-align:left;
	line-height:1.0em;
	padding-left:2%;
	padding-bottom:3px;
}
.container_index h1 a{
	font-size:1.2em;
	color:#FFF;
}
.container_index h1 a:hover {
	color:#FFF;
}

/* TEXT - ATELIER */
.container h1 {
	font-size:1.5em;
	font-weight:normal;
	padding-top:5%;
	max-width:100%;
	margin:auto;
}
.container h2 {
	font-size:1.3em;
	font-weight:normal;
	padding:3%;
	padding-left:5%;
	max-width:100%;
	margin:auto;
}
.container h1 a{
	font-size:1.1em;
	color:#FFF;
}
.container h1 a:hover {
	color:#FFF;
}
.container_inside h1 {
	font-size:0.8em;
	color:#CCC;
	font-weight:bold;
	padding:0px;
	margin:0px;
	padding-top:1%;
	padding-bottom:1%;
	text-transform:uppercase;
	max-width:1000px;
	margin:auto;
}
.container_inside h2 {
	font-size:0.8em;
	color:#CCC;
	font-weight:bold;
	padding:0px;
	margin:0px;
	padding-bottom:2px;
	text-transform:uppercase;
	max-width:1000px;
	margin:auto;
}
.message {
	line-height:1.3em;
	font-size:0.9em;
	padding:3%;
	padding-left:5%;
	z-index:100000000000000000000000;/*The nav should be visible on top of the slider.*/
	padding-bottom:120px;
}
.page_anim {/*This holds the navigation buttons which advance to a specific slide when clicked.*/
	position:fixed;/*We want the navigation to be visible regardless of what slide we're on.*/
	_position:absolute;/*IE6 hack - it doesn't recognize fixed positioning. If you want your stylesheet to validate, just put this line into a separate IE6 stylesheet via conditional comments.*/
	width:auto;
	z-index:1000000000000000000000;/*The nav should be visible on top of the slider.*/
	/*It's best not to edit the styles above - you can edit the styles below.*/
	background:transparent;
	top:6px;
	right:0px;
	color:white;
	display:block;
	height:auto;
	margin:0;
	padding:5px 5px 5px 5px;
	right:1%;
}
.page_anim .pageAnimate_trigger {/*When clicked, this will advance the user to a particular slide. The styles below are simply personal preference - change to whatever you want. Triggers can be automatically added to the HTML file by the pageAnimate jQuery script.*/
	background-color:rgba(0,0,0,.3);
	border:1px #333 solid;
	color:#333;
	display:inline-block;
	font-family:'PT Sans';
	font-size:18px;
	height:15px;
	margin:5px;
	outline:none;
	position:relative;
	width:15px;
	border:1px #666 solid;
}	

#div_gallery {
	font-size:0.6em;
	color:#FFF;
	padding:0px;
	margin:0px;
	padding-top:10px;
	padding-bottom:120px;
	text-transform:uppercase;
	max-width:1000px;
	margin:auto;
}
.div_gallery h1 {
	font-size:0.6em;
	color:#999;
	padding-top:10px;
	padding-bottom:10px;
	top:5px;
	position:fixed;
}
.div_gallery h1 a:link {
	font-size:0.7em;
	color:#999;
	padding-top:0px;
	padding-bottom:0px;
	top:5px;
	position:fixed;		}
.div_gallery h1 a:hover {
	color:#FFF;
}
.padding-bottom-120 {
	padding-bottom:70px;
}
.leftside{
	float:left;
	width:100%; /*rule of thirds 1023.9989px 100% is equal to 1536px width of inner-wrap*/
	margin:20px 3%;
	padding-left:0px;
	padding-right:10px;
	padding-top:5px;
}
.rightside{
	float:left;
	width:100%; /*rule of thirds 1023.9989px 100% is equal to 1536px width of inner-wrap*/
	margin:20px 3%;
	padding-left:0px;
	padding-right:10px;
	padding-top:5px;
}
#social
{
	position: fixed;
	/*background: #000000;*/
	width: 20px;
	margin-top: auto;
	top: 10%;
	right: -10px;
	-webkit-animation: slide_left 3s forwards;
    -webkit-animation-delay: .5s;
    animation: slide_left 3s forwards;
    animation-delay: .5s;
	color: #FFFFFF;
	font-size: 30px;
	padding: 3px 3px 3px 13px;
	z-index:9999999999999999999999;
}
#social img
{
	cursor: pointer;
	display:inline-block;
	width: 20px;
	height: 20px;
	-webkit-transition: all .3s ease-in;
   -moz-transition: all .3s ease-in;
   -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
	opacity: 0.3;
}
#social img:hover
{
	width: 20px;
	height: 20px;
	-moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   -o-transform: scale(1.3);
   transform: scale(1.2);
   margin-left: 10px;
   opacity: 0.7;
}

/* Mobile hamburger menu (replaces the crowded inline nav row below 780px) */
#header {
	height: 64px;
}
.nav-toggle {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	width: 28px;
	height: 28px;
	padding: 8px;
	box-sizing: content-box;
	background: none;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	margin: 6px 0;
}
.left-1, .left-2 {
	display: none;
}
#header.nav-open {
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	height: auto !important;
	overflow-y: auto;
	padding-bottom: 10px;
	background: #141414;
	z-index: 999999999999999999999999 !important;
}
#header.nav-open .nav-toggle {
	top: 30px;
	transform: translateX(-50%);
}
#header.nav-open .left-2 {
	display: block;
	float: none;
	width: 100%;
	padding-top: 70px;
}
#header.nav-open ul#menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
}
#header.nav-open ul#menu li {
	display: block;
	width: 100%;
	margin-left: 0;
	padding-left: 0;
	font-size: 1em;
	text-align: center;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
#header.nav-open ul#menu li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 10px;
	min-height: 44px;
	font-size: 1em;
	text-align: center;
}
#header.nav-open ul#menu ul.sub-menu {
	display: block !important;
	position: static;
	width: 100%;
	margin-left: 0;
	padding: 0;
}
#header.nav-open ul#menu ul.sub-menu li {
	display: block;
	width: 100%;
	margin-left: 0;
	padding-left: 0;
	text-align: center;
}
#header.nav-open ul#menu ul.sub-menu li a {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	box-sizing: border-box;
	padding: 12px 10px;
	min-height: 44px;
	font-size: 0.95em;
}
.lang-sep,
#header.nav-open ul#menu li.lang-sep,
.menu-spacer,
#header.nav-open ul#menu li.menu-spacer {
	display: none;
}

/* Homepage hero slider: in mobile landscape (short viewport height) the slide-position
   dots overlap the H1 title, since they're pinned to a fixed offset from the slider's
   top regardless of how little vertical room is available. Hide them in that one case. */
@media (orientation: landscape) and (max-height: 500px) {
	.bottomNav {
		display: none !important;
	}
}

/* Allow normal vertical page scrolling to pass through the hero slider. The slider's
   touch-to-swipe library (jquery.ui.touch-punch) otherwise blocks the browser's default
   scroll gesture anywhere over the slider, leaving only the footer nav as a scrollable
   zone on mobile. */
#bannerscollection_zoominout_opportune,
#bannerscollection_zoominout_opportune * {
	touch-action: pan-y;
}

/* The slider's plugin sets its own height inline via JS to match the full viewport
   (100vh), which puts its bottom edge directly behind the fixed footer nav (64px tall
   here), hiding the last bit of slide content and making the boundary between slider
   and page content unclear. Pull the slider's visible height in by the nav's height so
   it ends cleanly above the nav instead of running underneath it. */
.bannerscollection_zoominout.opportune,
.contentHolderVisibleWrapper {
	height: calc(100vh - 64px) !important;
	height: calc(100dvh - 64px) !important;
}

/* Press/Presse pages, portrait mobile only: center the category tabs
   (Evenements/Journaux/Livres/etc.), which otherwise left-align and wrap raggedly, while
   keeping the article listing itself left-aligned. The tabs also inherit a sitewide
   h2 rule meant for other headings (line-height:60px), which turns the gap between
   wrapped rows of tabs into a huge empty band — tighten it back down for these
   specifically. The page title's own centering/spacing now comes from the standard
   .page-h1 pattern in the page source, matching every other page on the site. */
@media (orientation: portrait) {
	.presse-header-block {
		text-align: center;
	}
	.presse-header-block [class^="presse_container"] {
		text-align: left;
	}
	.presse-header-block h2 {
		line-height: 1.4;
	}
	.presse-header-block h2:last-of-type {
		margin-bottom: 30px;
	}
}