/* CSS Document */

body {
	background-color: #25180F;
	margin: 0;
	line-height:140%;
	font-family: Verdana, Tahoma, "Lucida Sans", sans-serif;
	font-size: small;
	color: #1C0F06;
	text-align:justify;
}

#fond_gauche {
	width:183px;
	height:837px;
	z-index:2;
}

#francoise_masset {
	width:700px;
	height:74px;
	z-index:3;
	height:145px;
}
#francoise_masset img {
    position: absolute;
    top: 73px;
    left: 279px;
}
#contact {
	width:141px;
	height:850px;
	z-index:2;
}
#liste_cd {
	position:relative;
	clear:left;
	width:684px;
	background-color:#D78C44;
	 margin: -180px auto 0 auto;
}

/* CAROUSEL */

div#carousel1 * {
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
div#carousel1 {
	position:absolute;
	left:180px;
}
#carousel {
	width: 700px;
	height: 550px;
	position: absolute;
	top: 150px;
	left: 220px;
	background: url(../images/disco/fleches.png) 0 350px no-repeat;
}
#carousel a {
	position: absolute;
	width: 110px;
}
/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	width:0;
	height:0;
	opacity:0;

	/** Position and style */
	position: fixed;
	top: 0px;
	left:0px;
	z-index: 999;
	height: 100%;
	background: rgba(37,24,15,0.9);
	-webkit-transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out;
    -moz-transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out;
    -o-transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out;
    transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out;
	outline: none;
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin: 94px 36px 400px 300px; /* pour positionner l'élément de la lightbox --> top et left à recopier ci-dessous pour le h3 et le p */
	float:left;
	-webkit-box-shadow: 0px 12px 18px 7px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 12px 18px 7px rgba(0,0,0,0.57);
	box-shadow: 0px 12px 18px 7px rgba(0,0,0,0.57);
}
_:-moz-tree-row(hover), .lightbox img {	/* HACK CSS pour Firefox */
	margin: 113px 36px 400px 300px;
}

a.lightbox h3 {
	color:#D78C44;
	text-shadow: 0px 0px 8px #DEDEDE;
	margin-top:53px;
}
_::-webkit-:not(:root:root), a.lightbox h3 { }	/* HACK CSS pour Safari */

_:-moz-tree-row(hover), a.lightbox h3 {	/* HACK CSS pour Firefox */
	margin:53px 0 30px 0;
	}
a.lightbox h4 {
	color:#D78C44;
}
a.lightbox h4 {
    width: 93%;
    max-width: 1000px
}
a.lightbox p {
	height: 477px;
	width:32%;
	overflow:auto;
	/* position:absolute;  Indispensable pour compenser le overflow, qui sinon annulerait le width */
	/* left:537px; */
	padding-right:10px;
	margin:0;
}

a.lightbox, a.lightbox:hover, a.lightbox:visited {
	text-decoration:none;
	color:#FFF;
}
.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	width:100%;
	height:100%;
	opacity:1;
}
.picto-item:hover:after,
.picto-item:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  color: #D78C44;
  font-size: 1rem;
  text-shadow: 1px 2px 3px #DEDEDE;
  background:rgba(37,24,15,0.7) top;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
  content: url(../images/disco/bordure.png);
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #413219;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}