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

html, body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
background-image:url(img/trame.jpg);
}

/* TYPO -----------------------------------------------*/
h1{
width:100%;
background-image:url(img/puce-h1.png);
background-repeat:no-repeat;
background-position:left bottom;
padding-left:40px;
font-size:1.1em;
color:#9f0004;
display:inline;
}
.titreH1{
	width:100%;
	background-image:url(img/puce-h1.png);
	background-repeat:no-repeat;
	background-position:left bottom;
	padding-left:40px;
	font-size:1.1em;
	color:#9f0004;
	display:inline;
}

h2{
width:100%;
font-size:1em;
font-weight:bold;
display:inline-block;
margin:0;
}
	h2:first-letter{
	color:#9f0004;
	}
h2.listing{
	padding: 5px 0;
	border-top: 1px solid #9f0004;
	border-bottom: 1px solid #9f0004;
	text-align: center;
	margin: 20px 0;
	background-color: #E9E9E9;
}

h3{
font-size:1em;
color:#333333;
font-style:italic;
background-image:url(img/puce-h3.jpg);
background-position:left center;
background-repeat:no-repeat;
padding-left:14px;
margin:0;
}
	h3:first-letter{
	font-size:1.2em;
	color:#9f0004;
	}

.titreh3{
font-size:1em;
color:#333333;
font-style:italic;
background-image:url(img/puce-h3.jpg);
background-position:left center;
background-repeat:no-repeat;
padding-left:14px;
margin:0 0 15px 0;
display: inline-block;
}
	.titreh3:first-letter{
	font-size:1.2em;
	color:#9f0004;
	}

.bRetour{
background-image:url(img/puce-retour.png);
background-repeat:no-repeat;
background-position:left center;
font-size:1.1em;
padding-left:34px;
}
	.bRetour a{
	color:#9F0004;
	text-decoration:none;
	}

.titreGal{
width:100%;
border-bottom:1px solid #9f0004;
color:#9f0004;
display:block;
}

.lienR{
color:#9f0004;
text-decoration:none;
}
.lienStd{
color:inherit;
text-decoration:none;
}

.grand{ font-size: 1.2em; }
.rouge{ color: #9f0004; }

/* -------------------------------------------------------
--------------------------------------------------------- */

/* IMAGE ----------------------------------------------- */
.imgW100{
max-width:100%;
height: auto;
border:1px solid #cccccc;
display: block;
}
.imgMW{
max-width:100%;
height: auto;
display: block;
}

/* ------------------------------------------------------
--------------------------------------------------------- */

#BandeSup{
width:100%;
height:54px;
background-color:#FFFFFF;
background-image:url(img/barreRouge.jpg);
background-position:0px 40px;
background-repeat:repeat-x;
box-shadow:0px 2px 3px #666666;
position:absolute;
z-index:4;
}

#CaseLogoP{
width:280px;
height:105px;
text-align: center;
background-color:#dfdfdf;
box-shadow:0px 4px 5px #666666;
position:absolute;
float:left;
left:50%;
margin-left:-140px;
top:0;
z-index:5;
}

#BandMenu{
width:970px;
height:40px;
position:absolute;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
top:48px;
left:50%;
margin-left:-485px;
z-index:2;
}

.bMenuP{
width:auto;
height:32px;
line-height:32px;
vertical-align:middle;
font-size:0.9em;
font-weight:bold;
color:#666666;
background-color:#FFFFFF;
border:1px solid #9f0004;
border-radius:0px 0px 8px 8px;
position:relative;
float:left;
padding:0px 10px 0px 10px;
margin:0px 6px 0px 6px;
z-index:2;
}
	.bMenuP a{
	color:#666666;
	text-decoration:none;
	}
	.decoMenuP{
	width:100%;
	height:16px;
	background-image:url(img/deco-bouton.png);
	background-repeat:no-repeat;
	background-position:top center;
	position:absolute;
	float:left;
	top:25px;
	left:0px;
	z-index:3;
	}
	
.bMenuP2{
width:auto;
height:32px;
line-height:32px;
vertical-align:middle;
font-size:1em;
font-weight:bold;
color:#666666;
background-color:#FFFFFF;
border:1px solid #9f0004;
border-radius:0px 0px 8px 8px;
position:relative;
float:left;
padding:0px 10px 0px 10px;
margin:0px 6px 0px 286px;
z-index:2;
}
	.bMenuP2 a{
	color:#666666;
	text-decoration:none;
	}
	
#BandCentrale{
width:100%;
height:350px;
background-image:url(img/traitFond.png);
background-position:center;
background-repeat:repeat-x;
text-align:center;
position:absolute;
float:left;
top:130px;
z-index:5;
}
	#LotVisuel{
	width:auto;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	position:relative;
	float:left;
	}
	.photoP{
	width:475px;
	height:326px;
	background-image:url(img/fondPhotoPrincipale.png);
	background-repeat:no-repeat;
	background-position:center;
	position:relative;
	float:left;
	}
		.photoP .visuel{
		width:420px;
		height:270px;
		overflow:hidden;
		position:relative;
		left:28px;
		top:24px;
		}
		.photoP .visuel img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}
		.photoP .marqueAV{
		width:100px;
		height:35px;
		background-image:url(img/marqueAvant.png);
		background-repeat:no-repeat;
		position:absolute;
		top:230px;
		left:27px;
		z-index:10;
		}
		.photoP .marqueAP{
		width:100px;
		height:35px;
		background-image:url(img/marqueApres.png);
		background-repeat:no-repeat;
		position:absolute;
		top:40px;
		right:27px;
		z-index:10;
		}
	.miniphotoP{
	width:250px;
	height:172px;
	background-image:url(img/fondPhotoMini.png);
	background-repeat:no-repeat;
	background-position:center;
	position:relative;
	float:left;
	top:90px;
	}
		.miniphotoP .minivisuel{
		width:212px;
		height:136px;
		overflow:hidden;
		position:relative;
		left:20px;
		top:17px;
		}
		.miniphotoP .minivisuel img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}

#Contenu{
width:1000px;
position:absolute;
float:left;
top:500px;
left:50%;
margin-left:-500px;
z-index:5;
}

	#Entete{
	width:100%;
	height:20px;
	background-image:url(img/pageFond.png);
	background-repeat:no-repeat;
	background-position:bottom center;
	z-index:5;
	position:relative;
	float:left;
	}
	#Entetebas{
	width:100%;
	height:10px;
	background-color:#9f0004;
	position:relative;
	float:left;
	z-index:5;
	}
	#Page{
	width:982px;
	min-height:200px;
	background-color:#FFFFFF;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	position:relative;
	float:left;
	padding-top:20px;
	padding-left:8px;
	padding-right:8px;
	padding-bottom:20px;
	z-index:5;
	}
	#Copyr{
	width:500px;
	position:relative;
	float:right;
	color:#9f0004;
	font-size:0.8em;
	text-align:right;
	z-index:5;
	}
		#Copyr a{
		text-decoration:none;
		color:#9f0004;
		}
.zone{
width:100%;
position:relative;
float:left;
}

.col100.ssdebord{ overflow: hidden;}
.photoAnim{
    position: relative;
    float: left;
    animation-name: pubACC;
    animation-duration: 10s;
	animation-timing-function: linear;
    animation-delay: 0s;
	animation-iteration-count: infinite;
}
	
.col100{
width:100%;
position:relative;
float:left;
}
.col2{
width:47%;
margin:1%;
position:relative;
float:left;
}	
.col3{
width:31%;
margin:1%;
position:relative;
float:left;
}
.col60{
width:65%;
margin:1%;
position:relative;
float:left;
}	

.sep{
width:100%;
height:12px;
position:relative;
float:left;
clear:both;
}

.devis{
width:94%;
padding:3%;
text-align:center;
background-color:#999999;
color:#FFFFFF;
border-radius:8px;
font-size:1em;
}

.blocActu{
width:180px;
height:180px;
border-right:1px dashed #999999;
margin:6px;
position:relative;
float:left;
}
	.photoActu{
	width:176px;
	height:120px;
	border:1px solid #9f0004;
	display:block;
	position:relative;
	overflow:hidden;
	}
		.photoActu img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}
	.dateActu{
	font-size:0.8em;
	color:#9f0004;
	}
	.titreActu{
	width:100%;
	text-align:center;
	}
	.lienActu{
	width:95%;
	text-align:right;
	font-size:0.8em;
	color:#9f0004;
	text-decoration:none;
	}
		.lienActu a{
		color:#9f0004;
		text-decoration:none;
		}
		
.blocRea{
width:486px;
height:250px;
position:relative;
float:left;
margin:2px;
}
	.blocRea a{
	text-decoration:none;
	}
	.cadreRea{
	width:480px;
	height:220px;
	border:1px solid #999999;
	position:relative;
	float:left;
	padding:2px;
	}
	.cadreRea .photoR{
	width:49%;
	height:170px;
	position:relative;
	float:left;
	overflow:hidden;
	margin:0.5%;
	}
		.cadreRea .photoR img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}
	.flecheRea{
	width:60px;
	height:45px;
	background-image:url(img/flecheRea.png);
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	top:70px;
	left:calc(50% - 30px);
	}
	.nomRea{
	width:100%;
	height:20px;
	line-height:20px;
	vertical-align:middle;
	text-align:center;
	color:#9f0004;
	position:relative;
	float:left;
	}
	.bDetailRea{
	width:100%;
	height:20px;
	line-height:20px;
	vertical-align:middle;
	position:relative;
	float:left;
	background-color:#666666;
	color:#FFFFFF;
	text-align:center;
	}

.colMenuFiche{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:10px;
	position: relative;
	margin:20px 0;
}
.boutFiche{
	border: 1px solid #9f0004;
	border-radius: 4px;
	background-color: #ffffff;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	color: #9f0004;
	display: block;
	transition: all 0.4s;
}
.boutFiche:hover{
	background-color: #dfdfdf;
}

.decalPage{
	padding: 0 0 0 10px;
	margin: 0;
}
.decalPage li{ margin: 4px 0; }

.galerie{
width:100%;
position:relative;
text-align:center;
}
	.galerie img{
	max-width:100%;
	}	

.photoDeco{
	width:220px;
	height:145px;
	border:1px solid #9f0004;
	display:block;
	position:relative;
	overflow:hidden;
	float:left;
	margin:2px;
	}
		.photoDeco img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}
.photoDecoRea{
	width:400px;
	height:320px;
	display:block;
	position:relative;
	overflow:hidden;
	float:left;
	margin:2px;
	left:50%;
	transform:translateX(-50%);
	}
		.photoDecoRea img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}		
.photoPro{
	width:350px;
	height:235px;
	border:1px solid #9f0004;
	display:block;
	position:relative;
	overflow:hidden;
	float:left;
	margin:2px;
	left:50%;
	transform:translateX(-50%);
	}
		.photoPro img{
		max-width:100%;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		}			
		
#Message{
width:400px;
height:100px;
background-color:#333333;
border:1px solid #fe9b00;
color:#FFFFFF;
font-size:1em;
text-align:center;
position:fixed;
float:left;
left:50%;
margin-left:-200px;
top:50%;
margin-top:-50px;
padding:4px;
z-index:50;
}

#Legal{
width:600px;
height:400px;
background-color:#ffffff;
border:1px solid #9f0004;
color:#000000;
font-size:1em;
position:fixed;
float:left;
left:50%;
margin-left:-300px;
top:50%;
margin-top:-250px;
padding:4px;
z-index:50;
overflow:auto;
}

.trame{
	width:100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	position: fixed;
	z-index: 9;
}
.popPub{
	width:500px;
	height: 750px;
	background-color: #ffffff;
	border: 1px solid #9f0004;
	text-align: center;
	position: absolute;
	float: left;
	top: 100px;
	left: 50%;
	transform:translateX(-50%);
	z-index: 10;
}
.popPub img{
	max-width: 100%;
}

.infoPub{
	width:200px;
	height: 40px;
	border: 1px solid #ffffff;
	border-radius:8px;
	box-shadow: 0 0 5px #000000;
	background-color: #DFAD00;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	color: #9f0004;
	position: absolute;
	float: left;
	z-index: 8;
	animation-name: bigdown;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	top: 470px;
	left: 50%;
	transform:translateX(-50%);
}
.infoPub p{
	width: 100%;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}

.imageMess{
	height: calc(100% - 80px);
	background-color: #ffffff;
	border: 1px solid #999999;
	box-shadow: 0 0 5px #666666;
	position: fixed;
	float: left;
	padding: 20px;
	margin: 10px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	animation-name: afficheACC;
  	animation-duration: 2s;
  	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}
.imageMess img{
	max-height: calc(100% - 30px);
	position: relative;
	float: left;
	clear: both;
}

.close{
	width:80px;
	height: 30px;
	position: relative;
	float: right;
	background-color: #cccccc;
	clear: both;
	top: -20px;
	right: -20px;
}
.close p{
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	position: relative;
	float: left;
	top: 50%;
	transform: translateY(-50%);
	color: #000000;
	font-weight: bold;
	font-size: 1em;
}

.blocCoord{
	width: calc(100% - 22px);
	border-top: 3px solid #9f0004;
	border-bottom: 3px solid #9f0004;
	padding: 10px;
	position: relative;
}

.blocAvis{
	width: calc(100% - 22px);
	border-radius: 8px;
	border: 1px solid #9f0004;
	padding: 10px;
	position: relative;
}


/* ANIMATION ---------------------- */
@keyframes bigdown{
	from{
		transform:translateX(-50%) scale(1,1);
	}
	45%{
		transform:translateX(-50%) scale(1.2,1.2);
	}
	45%,55%{
		transform:translateX(-50%) scale(1.2,1.2);
	}
	90%{
		transform:translateX(-50%) scale(1,1);
	}
}

/* ANIMATION ---------------------- */
/* ACCUEIL ----------------------- */
@keyframes pubACC{
    from, 10%{
		opacity:0;
        left: 0;
	}
	18%{
		opacity:1;
        left: 50%;
        transform:translateX(-49%);
	}
    20%,90%{
        opacity:1;
        left: 50%;
        transform:translateX(-50%);
    }
    93%{
        opacity:1;
        left: 50%;
       transform:translateX(-51%); 
    }
    100%{
        opacity: 0;
        left: 100%;
        transform:translateX(-50%);
    }
}


@keyframes afficheACC{
    from, 5%{
		opacity:0;
        left: 0;
		transform:translate(0, -50%);
	}
	90%{
		opacity: 1;
        left: 50%;
        transform:translate(-40%, -50%);
	}
	100%{
        opacity: 1;
        left: 50%;
        transform:translate(-50%, -50%);
    }
}