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

/* COULEURS */
/* Mauve foncé : #3a1119 */
/* Mauve pâle : #5050af */
/* Jaune : #fed216 */
/* Noir : #000 */

.gros_logo {
	width:60%;
	height:auto;
}

.petit_logo {
	width:35%;
	min-width:100px;
	height:auto;
}

.menu_fenetre_int {  /* Interieur de page, contenant contenu, pour ajouter une bordure transparente verticalement */
	width:100%;
	height:100%;
	overflow:scroll;
}

.contenu {  /* Interieur de page */
	left:0px;
	top:0px;
	background-repeat:none;
  background-size:cover;
	background-position:center center;
  background-origin:content-box;
	-webkit-background-origin:content-box; /* Safari */
	overflow:scroll;
	word-wrap: break-word;
	text-align:left;
  z-index:2;
	position:relative;
}

.vignette {  /* Photo d'artiste ou de projet, avec click */
	left:0px;
	top:0px;
	width:40%;
	height:auto;
	overflow:hidden;
  z-index:3;
	position:relative;
	cursor:pointer;
	color:#fed216;
	background-color:#3a1119;
	box-shadow: -10px 0px 40px 10px #fed216;
	outline: 5px dotted #3a1119;
	outline-offset: 0px;
	text-align: center;
	display: inline-block; /* En ligne, mais avec width et height */
	margin: 15px;
}
	
.vignette:hover {
		color: #ffffff;
		text-decoration: underline;
		background-color:#3a1119;
		outline: 5px dotted #fff;
	}
	
.vignette_full {  /* Photo d'artiste ou de projet, avec click */
	left:10%;
	top:0px;
	width:80%;
	height:auto;
	overflow:hidden;
  z-index:3;
	position:relative;
	cursor:pointer;
	color:#fed216;
	background-color:#3a1119;
	box-shadow: -10px 0px 40px 10px #fed216;
	outline: 5px dotted #3a1119;
	outline-offset: 0px;
	text-align: center;
	display: inline-block; /* En ligne, mais avec width et height */
	margin-bottom: 15px;
}
	
.vignette_full:hover {
		color: #ffffff;
		text-decoration: underline;
		background-color:#3a1119;
		outline: 5px dotted #fff;
	}	

.etiquette {  /* Photo d'artiste ou de projet, avec click */
	left:0px;
	bottom:0px;
	width:100%;
	height:50px;
	overflow:hidden;
  z-index:4;
	position:absolute;
	color: #fed216;
	background-color: #3a1119;
	text-align: center;
	display: block; /* En ligne, mais avec width et height */
	padding-top:5px;
	opacity:.85;
	font-size:20px;
}

.photo {  /* Photo cliquable intégrée au texte */
	left:12.5%;
	top:0px;
	width:75%;
	height:auto;
	overflow:hidden;
  z-index:3;
	position:relative;
	display: block; /* En ligne, mais avec width et height */
	border-radius:10px;
	background-color:#fed216;
}

.pop,.pop_photo {  /* Fenêtre popup mauve (background) */
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	position:fixed;
	background-color:#3a1119;
	opacity:1;
}
.pop {  /* Fenêtre popup mauve (background) */
  z-index:20;
}
.pop_photo {  /* Fenêtre popup mauve (background) */
  z-index:21;
}

.page {  /* Page par dessus la fenêtre popup */
	left:5%;
	top:5%;
	width:90%;
	height:90%;
	overflow:scroll;
  z-index:3;
	position:absolute;
	border-radius:10px;
	background-color:#fed216;
	padding:50px;
	box-sizing: border-box; /* Empêche le padding d'agrandir la fenêtre */
	text-align: left;
	word-wrap: break-word;
}

.contenu_flottant,.contenu_flottant_pad,.contenu_flottant_pad_bas {  /* Interieur de page */
	height:auto;
	background-repeat:none;
  background-size:cover;
	background-position:center center;
  background-origin:content-box;
	-webkit-background-origin:content-box; /* Safari */
	overflow:visible;
	word-wrap: break-word;
	text-align:left;
  z-index:3;
  padding:10px;
}

.contenu_flottant {  /* Interieur de page */
	right:0px;
	top:-20px;
	position:absolute;
	width:50px;	
}

.contenu_flottant_pad {  /* Interieur de page */
	right:calc(5% + 35px);
	top:calc(5% + 10px);
	position:fixed;
	width:50px;
}

.contenu_flottant_pad_bas {  /* Interieur de page */
	right:calc(5% + 35px);
	bottom:calc(5% + 30px);
	position:fixed;
	width:50px;	
}

.GrosTitre {  /* Titre de l'accueil */
	left:25%;
	top:25%;
	width: 50%;
	height: 50%;
	padding:0px;
  box-sizing: border-box;
	text-align:center;
	opacity:1;
	font-size:22px;
	font-family: Georgia,Times,Times New Roman,serif; 
	font-weight: 900;
	z-index:5;
	position:absolute;
	word-wrap: none;
}

.menu,.menu2,.menu3,.menu4,.menuMobile,.menu2Mobile,.menu3Mobile,.menu4Mobile  {   /* Tous les menus */
  overflow:hidden;
	position:fixed;
	text-align: left;
	font-family: Georgia,Times,Times New Roman,serif; 
	background-color:#fed216;
	box-shadow: -10px 0px 40px 10px #fed216;
	outline: 5px dotted #3a1119;
	outline-offset: 0px;
	z-index:15;
}

.halo {
	-webkit-filter: drop-shadow(0 0 5px #fed216);
  filter: drop-shadow(0 0 5px #fed216);
}

.menu
 {  /* Menu haut */
	left:calc(50% - 50px);
	top:calc(5% - 10px);
	height:auto;
	font-weight: 600;
	font-size: 18px;
}

.menu2 {  /* Menu droite */
	right:calc(5% - 8px);
	top:calc(50% - 10px);
	font-weight: 600;
	font-size: 18px;
}

.menu3 {  /* Menu bas */
	left:calc(50% - 60px);
	bottom:calc(5% - 15px);
	height:auto;
	font-weight: 600;
	font-size: 18px;
}

.menu4 {  /* Menu gauche */
	left:calc(5% - 8px);
	top:calc(50% - 10px);
	font-weight: 600;
	font-size: 18px;
}

.menu_fenetre,.menu2_fenetre,.menu3_fenetre,.menu4_fenetre {  /* Toutes les fenêtres */
	margin-top:0px;
	margin-bottom:0px;
	width:calc(80% - 100px);
	height:80%;
	opacity:1;
	outline: 10px dotted #3a1119;
	outline-offset: -5px;
	
	box-sizing: border-box;
	text-align : left;
	line-height : 1.25;
	
	overflow:scroll;
	position:absolute;
	z-index:11;
	
	padding:50px 50px 0px 50px;
	box-sizing: border-box; /* Empêche le padding d'agrandir la fenêtre */
}

.menu_fenetre {  /* Fenêtre Menu haut */
	left:calc(10% + 50px);
	top:-70%;
}

.menu2_fenetre {  /* Fenêtre Menu droite */
	left:calc(90% - 50px);
	top:10%;
}

.menu3_fenetre {  /* Fenêtre Menu bas */
	left:calc(10% + 50px);
	top:90%;
}

.menu4_fenetre {  /* Fenêtre Menu gauche */
	left:calc(-70% + 150px);
	top:10%;
}

.fond,.fond_transparent {  /* Fond invisible à cliquer */
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	opacity:1;
	background-origin:content-box;
	overflow:hidden;
	-webkit-background-origin:content-box; /* Safari */
	position:fixed;
}

.fond {  /* Fond invisible à cliquer */
	background-color:#fed216;
	z-index:9;
}

.fond_transparent {  /* Fond invisible à cliquer */
	background-color:none;
	z-index:2;
}

.heading {
	color: #fed216;
	cursor: pointer;
	background-color:#3a1119;
  margin: 0px;
  position: relative;
	left:0px;
	overflow:hidden;
	text-decoration:none;
	text-align:left;
	vertical-align:top;
  font-family: Georgia,Times,Times New Roman,serif; 
  font-weight: normal;
  font-style: normal;
	outline: 5px dotted #3a1119;
}

.content {
	text-align: left;
	vertical-align: top;
	font-family: Georgia,Times,Times New Roman,serif; 
	outline: 5px dotted #3a1119;
	padding:5px;
}

.TextWrap {
  float:left;
  margin: 10px;
}
	
#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; }

.container { /*Enlever les scrollbars d'un div */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.container::-webkit-scrollbar {  /*Enlever les scrollbars d'un div */
    display: none;  /* Safari and Chrome */
}

<style type="text/css">

	html, body, .container{
		height: 0px;
		margin:0;
		padding:0;
	}
	
	body,td,th {
		font-family: Georgia,Times,Times New Roman,serif; 
		font-weight: 300;
		font-size: 22px;
		color: #3a1119;
	}
		
	body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		background-color:#fed216;
		background-position:center;
		background-size:cover;
		background-repeat:repeat;
		background-attachment:fixed;
		background-position:center top;
		background-origin:content-box;
		-webkit-background-origin:content-box; /* Safari */
	}
	
	h1,h2,h3,h4,h5 {font-family: Georgia,Times,Times New Roman,serif; font-weight: 800;}
	
	h1 { font-size:30px; }
	h2 { font-size:28px; }
	h3 { font-size:26px; }
	h4 { font-size:24px; }
	h5 { font-size:22px; }	
	
	a:link {
		color: #fed216;
		cursor: pointer;
		text-decoration:none;
		background-color:#3a1119;
	}
	a:visited {
		color: #fed216;
		cursor: pointer;
		text-decoration: underline;
		background-color:#3a1119;
	}
	a:active {
		color: #ffffff;
		text-decoration: none;
		background-color:#3a1119;
	}
	a:hover {
		color: #ffffff;
		text-decoration: underline;
		background-color:#3a1119;
	}
	
	p:hover {
		color: #ffffff;
		text-decoration: underline;
		background-color:#3a1119;
		outline: 5px dotted #fff;
	}

</style>

div.ext-box { display: table; width:80%; align:left; overflow:hidden; box-shadow: inset -10px 0px 30px -20px #fed216;}
div.int-box { display: table-cell; width: 125px; padding:30px; align:left; vertical-align: middle; }