@charset "utf-8";


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a img {
  border: none;
}

.clear {
  clear: both;
  height: 0;
}

html {
	font-size: 62.5%;	
	}

body { 
	background-color: #d9dcde;
	font-family: Ubuntu, Helvetica, Arial, sans-serif;
	font-weight: normal;
}

strong {
	font-weight: 500
}

/* --- TYPO --- */

h1 {
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 2rem;
	letter-spacing: 1rem;
	font-weight: 300;
	line-height: 1.4;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #000;
}

h2 {
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #ac6a00;
}

h3 {
  font-size: 2.4rem;
  font-weight: 500;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #ac6a00;
  
}

h4 {
  font-size: 2.1rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #333;
}

h5 {
  font-size: 1.7rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #333;
}

p, li {
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #333;
}

ul {
  padding-left: 4rem;
}

a {
  color: #345d85;
  font-weight: 500;
  text-decoration: none;
}
a:hover, a:visited {
  color: #5d7185;
  text-decoration: none;
}

.voir-plus {
  font-size: 1.3rem;
}

.source {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
}

.bouton {
	  margin: 1rem 0;
}

.bouton a, .bouton:visited {
	font-size: 1rem;
	font-weight: 500;
	padding: 0.5rem 2rem;
	background-color: #345d85;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: background-color 0.6s ease;
	opacity: 0.8;
}
.bouton a:hover {
	color: #fff;
	text-decoration: underline;
}

.surligner {
	background-color: #ecdec9;
}

hr {
	height: 1px;
	color: #888;
	background-color: #888;
	padding: 0;
	margin: 4rem 0;
	border: none;
	display: block;
}
footer hr {
	margin: 2rem 0 0;
}

#copyright {
	padding: 2rem 0;
	margin-bottom: 0;
	font-size: 1rem;
	text-transform: uppercase;
	text-align: left;
	color: #fff;
	letter-spacing: 0.05rem;
}

#suivezmoi {
	float: right;
}
#suivezmoi img {
	display: inline; 
	height: 18px; 
	padding: 0 1rem;
}
@media screen and (max-width: 599px) {
	#suivezmoi span {
		display: none;
	}
}


/* --- STRUCTURE --- */

nav#navPages {
	width: 100%;
	background-color: #000;
	padding-top: 0.3rem;
}

#partage {
	width: 100%;
}

header, main {
	width: 100%;
}

header {
	background-color: #013566;
	background-repeat: no-repeat;
}

header .contenu {
	position: relative;
}

section {
	margin: 2rem 0;
	overflow: hidden;
}


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

	nav#navPages, header, main, footer {
		padding: 0 5%;
	}
}

@media screen and (min-width: 600px) {

	header, main, footer {
		padding: 0 10%;
	}
}

@media screen and (min-width: 900px) {

	header, main, footer {
		padding: 0 15%;
	}
}

@media screen and (min-width: 1560px) {

	header .contenu,
	#partage, 
	section,
	footer .contenu {
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	header, main, footer {
		padding: 0;
	}
}

footer {
	background-color: #444;
}

/* --- NAV PRINCIPALE --- */

nav#navPages span {
	display: none;
}

nav#navPages ul {
	list-style: none;
	width: 100%;
	padding-left: 0;
  }
nav#navPages ul li {
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
	}
nav#navPages ul li a {
	font-weight: 500;
	color: #fff;
  }
nav#navPages ul li em {
	color: #ff9d00;
	height: 100%;
	font-style: normal;
}


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

	#iconeNav {
		padding: 1rem;
	}
	nav#navPages {
		cursor: pointer;
	}
	nav#navPages ul {
		display: none;
		padding: 1rem 0;
		background-color: #000;
	  }
	nav#navPages ul li {
		font-size: 1.1rem;
		line-height: 3;
		letter-spacing: 0.25rem;
		padding: 0 1rem;
		}
	nav#navPages ul li a {
		display: block;
	  }
	nav#navPages a:hover {
		color: #fff;
		text-decoration: underline;
	}
	nav#navPages span {
		display: inline;
	}

}

@media screen and (min-width: 800px) {

	#iconeNav {
		display: none;
	}
	nav#navPages ul {
		display: flex;
		justify-content: center;
		align-content: center;
	  }
	nav#navPages ul li {
		flex: 0 1 auto;
		padding: 1.5rem 1rem 0.75rem;
		font-size: 1.2rem;
		line-height: 1.5;
		letter-spacing: 0.25rem;
		}
	nav#navPages ul li a {
		display: block;
		padding: 0 1rem;
		background-color: #000;
		transition: background-color 0.6s ease;
		text-decoration: none;
	  }
	nav#navPages a:hover {
		color: #fff;
		background-color: #333;
		text-decoration: none;
	}
	nav#navPages ul li em {
	}
	
}


@media screen and (min-width: 1800px) {

	nav#navPages span {
		display: inline;
	}

}

/* -- PARTAGE -- */

#iconePartage {
	display: none;
}
#partage {
	position: relative;
	margin-top: 1rem;
}
#partage ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
#partage li {
	display: inline-block;
	vertical-align: top;
	color: #fff;
}
#partage .fb-like {
	position: relative;
}
#partage .pinterest {
	position: relative;
	top: -6px;
}

@media screen and (max-width: 699px) {
	#partage {
		text-align: center;
	}
}

@media screen and (min-width: 700px) {
	#partage {
		text-align: right;
	}
}


/* --- PLAY --- */

.play {
	text-align: center;
}
.play a {
	text-transform: uppercase;
	font-size: 1rem;
}
.play a img {
	width: 40px;
	height: auto;
	margin-top: 1rem;
}
header .play a img {
	opacity: 0.6;
}


/* --- HEADER ACCUEIL --- */

#accueil header {
	background-image: url(/images/sl-entete-bouquet.webp);
	height: 42rem;
}

#accueil header .contenu {
	letter-spacing: 0.5rem;
}
#accueil header h1 span {
	font-size: 4.5rem;
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: normal;
}
	
@media screen and (max-width: 699px) {

	#accueil header {
		height: 50rem;	
		background-position: 25% 0;
	}
	#accueil header .contenu {
		top: 30rem;
	}
}

@media screen and (min-width: 700px) {

	#accueil header {
		background-size: cover;
		background-position: 10% 25%;
	}
	#accueil header .contenu {
		top: 23rem;
	}
}

@media screen and (min-width: 900px) {

	#accueil header {
	background-size: 1200px;
	background-position: 50% 20%;
	}
}

@media screen and (min-width: 1200px) {

	#accueil header {
	background-size: cover;
	}
}


/* --- HEADER SUICIDE --- */

#suicide header {
	background-image: url(/images/suicide/suicideDeesse_entete.jpg);
	}

#suicide #bedelys {
	position: absolute;
	width: 120px;
	height: auto;
	padding-top: 40px;
	transform: rotate(-10deg);
}

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

	#suicide header {
		height: 50rem;	
		background-position: 65% 50%;
		background-size: 900px;
	}
		
	#suicide header .contenu {
		top: 10rem;
	}
		
	#suicide #bedelys {
	top: 35rem
	}
}

@media screen and (min-width: 700px) {

	#suicide header {
		height: 48rem;
		background-position: center center;
		background-size: 1000px;
		}
	
	#suicide header .contenu  {
		top: 10rem;
	}
	
	#suicide #bedelys {
	top: 25rem;
	}
}

@media screen and (min-width: 1200px) {
	
	#suicide header .contenu  {
		top: 10rem;
	}
	
}


/* --- HEADER JAUGINS --- */

#jaugins header {
	height: 42rem;
	background-image: url(/images/jaugins/jaugins_entete.jpg);
	background-size: 1044px;
	}
	
#jaugins header .contenu {
	top: 34rem;
}
	

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

	#jaugins header {
		background-position: 78% 100%;
		}
}

@media screen and (min-width: 700px) {

	#jaugins header {
		background-position: 68% 100%;
		}
}

@media screen and (min-width: 1200px) {

	#jaugins header {
		background-position: 58% 100%;
		}
}


/* --- HEADER IVRESSE --- */

#ivresse header {
	height: 42rem;
	background-image: url(/images/ivresse/ivresse-entete.jpg);
	background-color: #5e1540;
	}
	
#ivresse header .contenu {
	top: 35%;
}

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

	#ivresse header {
		background-position: 30% 50%;
		background-size: 200%;
		}
}

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

	#ivresse header {
		background-position: 30% 50%;
		background-size: 250%;
		}
}

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

	#ivresse header {
		background-position: 35% 50%;
		background-size: cover;
		}
}

@media screen and (min-width: 700px) {

	#ivresse header {
		background-position: 60% 50%;
		background-size: 1200px;
		}
}

@media screen and (min-width: 900px) {

	#ivresse header {
		background-position: 50% 50%;
		background-size: 1200px;
		}
}


/* --- HEADER LO-FI --- */

#lofi header {
	background-color: #1a5ee6;
	background-image: url(/images/lofi/lofi-entete.webp);
	}
		

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

	#lofi header {
		height: 50rem;
		background-size: cover;
		background-position: 70% 50%;
		}
		
	#lofi header .contenu {
		top: 34rem;
	}
		
}

@media screen and (min-width: 700px) {

	#lofi header {
		height: 42rem;
		background-size: 1100px;
		background-position: 50% 50%;
		}
	#lofi header .contenu {
		top: 23rem;
		letter-spacing: 2rem;
	}
}


/* --- HEADER PLUS --- */

#plus header {
	background-image: url(/images/plus/plus-entete.jpg);
	background-position: center bottom;
	}
		

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

	#plus header {
		height: 50rem;
		background-size: cover;
		}
		
	#plus .contenu {
		top: 25rem;
	}
		
}

@media screen and (min-width: 700px) {

	#plus header {
		height: 42rem;
		background-size: 1100px;
		}
	#plus .contenu {
		top: 20rem;
		letter-spacing: 2rem;
	}
}



/* --- HEADER LAURENCE --- */

#laurence header {
	background-image: url(/images/laurence/laurence-entete.webp);
	}
		

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

	#laurence header {
		height: 50rem;
		background-size: cover;
		background-position: 85% 100%;
		}
		
	#laurence .contenu {
		top: 23rem;
	}
		
}

@media screen and (min-width: 700px) {

	#laurence header {
		height: 42rem;
		background-size: 1100px;
		background-position: 50% 100%;
		}
	#laurence .contenu {
		top: 24rem;
		letter-spacing: 2rem;
	}
}



/* --- MAIN --- */

#suicide main {
	background: url(/images/suicide/tourbillonGris.gif) no-repeat;
	background-attachment: fixed;
}

@media screen and (max-width: 699px) {
#suicide main {
	background-position: 50% 35%;
	}
}
@media screen and (min-width: 700px) {
#suicide main {
	background-position: 40% 50%;
	}
}

/* --- SECTIONS --- */

#reactions p span,
#synopsis p span {
  font-size: 2.4rem;
}

.teaseur p {
  font-size: 1.8rem;
  line-height: 1.4;
  font-style: italic;
  padding-left: 3rem;
  margin: 1rem 0;
}


/* --- sections accueil -- */


.prixbedelys {
	width: 30% !important; 
	position: absolute; 
	right: 7%;
	bottom: 7%;
	transform: rotate(10deg);
}

@media screen and (max-width: 999px) {
	#accueil .module3 h2 {
	  font-size: 2.4rem;
	}
}

/* --- sections suicide --- */

.extrait {
	text-align: center;
}


/* --- sections ivresse --- */

#synopsis .couverture {
	float: left; 
	width: 33.33%; 
	margin-right: 5%;
}
#synopsis .couverture img {
	width: 100%; 
	height: auto;
}
#synopsis .contenu {
	margin-left: 38.33%;
}

@media screen and (max-width: 699px) {
	#synopsis .couverture {
		float: none; 
		width: 50%; 
	}
	#synopsis .contenu {
		margin-left: 0;
	}
}


#infoTechnique .couverture {
	float: left; 
	width: 25%; 
	margin-right: 5%;
}
#infoTechnique .couverture img {
	width: 100%; 
	height: auto;
}
#infoTechnique .contenu {
	margin-left: 30%;
}

@media screen and (max-width: 699px) {
	#infoTechnique .couverture {
		float: none; 
		width: 50%; 
	}
	#infoTechnique .contenu {
		margin-left: 0;
	}
}

.calq {
	margin-top: 1rem;
}
.calq .logo-calq {
	width: 250px;
	height: auto;
	margin-bottom: 1rem;
}
.logo-glenat {
	width: 100px;
	height: auto;
}

@media screen and (max-width: 699px) {
	#options-couverture .module2 .exhibit {
		width: 97.5%;
	}
}
  


/* GALERIE */


.module1, 
.module2, 
.module3, 
.module4, 
.module5 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 105%;
}

.exhibit {
	flex: 0 1 auto;
  	margin-bottom: 2rem;
	margin-right: 5%;
}
.exhibit img { 
	width: 100%;
	height: auto;
	margin: 0.5rem 0;
}

@media screen and (max-width: 699px) {
	#galerie .module5 .exhibit {
	width: 45%;
	}
}
  
@media screen and (min-width: 700px) {
	#galerie .module1 .exhibit {
	width: 95%;
	}
	#galerie .module2 .exhibit {
	width: 45%;
	}
	#galerie .module3 .exhibit {
	width: 45%;
	}
	#galerie .module4 .exhibit {
	width: 45%;
	}
	#galerie .module5 .exhibit {
	width: 45%;
	}
}
  
@media screen and (min-width: 900px) {
	#galerie .module1 .exhibit {
	width: 95%;
	}
	#galerie .module2 .exhibit {
	width: 45%;
	}
	#galerie .module3 .exhibit {
	width: 28.33%;
	}
	#galerie .module4 .exhibit {
	width: 45%;
	}
	#galerie .module5 .exhibit {
	width: 28.33%;
	}
}
  
@media screen and (min-width: 1200px) {
	#galerie .module5 .exhibit {
	width: 15%;
	}
}
  


/* --- FOOTER --- */

footer h2 {
	color: #fff;
	font-size: 1.8rem;
	padding-top: 3rem;
}
footer li, footer p {
	color: #fff;
	font-size: 1.2rem;
}
footer h5 {
	color: #fff;
	font-size: 1.4rem;
	margin-top: 0.1rem;
}
footer a {
	color: #fff;
}
footer a:hover {
	color: #fff;
	text-decoration: underline;
}
footer a:visited {
	color: #d9dcde;
}
.libraires {
  	column-gap: 2rem;
}

@media screen and (max-width: 699px) {
	.libraires {
	  	column-count: 3;
	}
}
@media screen and (max-width: 399px) {
	.libraires {
	  	column-count: 2;
	}
}
@media screen and (min-width: 700px) {
	.libraires {
	  	column-count: 3;
	}
}
@media screen and (min-width: 850px) {
	.libraires {
	  	column-count: 4;
	}
}
@media screen and (min-width: 1000px) {
	.libraires {
	  	column-count: 5;
	}
}
@media screen and (min-width: 1200px) {
	.libraires {
	  	column-count: 6;
	}
}




/* --- STYLES POUR JAVASCRIPT --- */

/* MESSAGE COOKIES */

#messageCookies {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #ac6a00;
}

/* EFFET ZONECLIC */

.zoneClic {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.zoneClicHover {
  background-color: #e6e8eb;
  background: rgba(230, 232, 235, 0.5);
}


/* EFFET MODAL BOX */

#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: #000;
  opacity: 0.7;
  cursor: pointer;
}

.noScroll {  /* Ajouté au body par jQuery; Retire les barres de défilement quand la modalBox apparaît */
  overflow: hidden;
}

#modalBox #fermer {
  position: absolute;
  top: 10px;
  right: -5px;
  z-index: 500;
  display: block;
  width: 30px;
  height: 30px;
  background: url(/images/btClose.gif) no-repeat;
  text-decoration: none;
}
#modalBox #fermer span {
  visibility: hidden;
}

#modalBox {
  position: fixed;
  left: 10%;
  z-index: 210;
  box-shadow: 0 0 4rem #00acec;
  overflow: visible;
} 

.modalExtrait #modalBox {
  width: 396px;
  height: 514px;
  padding-bottom: 15px;
} 

.modalBandeAnnonce #modalBox {
  width: 80%;
} 


.modalBandeAnnonce .modalVideoWrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.modalBandeAnnonce iframe, 
.modalBandeAnnonce object, 
.modalBandeAnnonce embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#modalBox #merciDigibidi {
  font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  color: #888;
  text-align: center;
  padding-top: 2.5rem;
}
#merciDigibidi a {
  color: #888;
  text-decoration: underline;
}
#merciDigibidi a:hover {
  color: #ff9d00;
}


/* BANDEAU COOKIE */

#bandeau-cookies {
	position: fixed;
	bottom: 0;
	z-index: 1000;
	width: 100%;
	padding: 1rem 5%;
	text-align: center;
	background-color: #e0a752;
}

#bandeau-cookies p {
	font-size: 1.4rem;
}


/* PAGE COOKIE */

#message {
	padding-bottom: 15rem;
}

#message header {
	padding: 1rem 5%;
	margin-bottom: 4rem;
}

body.message-cookies #lien-cookies {
	display: none;
}