/* Définition des polices personnalisées */
@font-face
{
    font-family: 'SF_Arch_Rival';
    src: url('polices/SF_Arch_Rival_Extended-webfont.eot');
    src: url('polices/SF_Arch_Rival_Extended-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/SF_Arch_Rival_Extended-webfont.woff') format('woff'),
         url('polices/SF_Arch_Rival_Extended-webfont.ttf') format('truetype'),
         url('polices/SF_Arch_Rival_Extended-webfont.svg#SF_Arch_Rival') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */
body
{
    background: url('images/fond4.jpg') fixed;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

h1, header h1, section h1, footer h1, nav a
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
	font-weight: normal;
    text-transform: uppercase;
}

h2, header h2, section h2
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
	font-weight: bold;
}

footer h2
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
	font-weight: bold;
	text-align: left;
	margin: 5px 0px 5px 0px
}

.souligne
{
    text-decoration: underline;
}

#bloc_page
{
    width: 90%;
    margin: auto;
}

/* Traitement de l'entête */
header
{
    text-align: center;
	border: 0px #888888 solid;
    border-radius: 10px 10px 10px 10px;
	background: url('images/fond_jaune.png');
 }
/* bannière */
#bandeau
{
	vertical-align: top;
	height: 150px;
	border: 3px #888888 solid;
    border-radius: 10px 10px 0px 0px;
}

#logoG, #titrepage, #logoD
{
	display: inline-block;
}

#logoG
{
    width: 16%;
	max-height: 150px;
	max-width: 150px;
    border-radius: 10px;
	float: left;
	left: 0;
}

#titrepage
{
	position: relative;
    width: 66%;
	height: 100%;
    border-radius: 10px;
	background: url('images/ban_002.png') repeat;
}

#titretexte
{
    position: absolute;
    bottom: 0;
    width: 100%;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 2em;
    font-weight: normal;
	text-transform: uppercase;
	background-color: rgb(25,25,88); /* Pour les anciens navigateurs */
    background-color: rgba(25,25,88,0.8);
    color: yellow;
	border-radius: 10px;
}

#logoD
{
    width: 16%;
	max-height: 150px;
	max-width: 150px;
    border-radius: 10px;
	float: right;
	right: 0;
}

/* Menu */
nav
{
    text-align : center;
	margin : auto;
	height : 30px;
	border-right : 3px #888888 solid;
	border-left : 3px #888888 solid;
}

nav #menu
{
	display: inline-block;
}

nav, nav ul
{
    padding : 0;
    margin : 0;
    list-style : none;
    line-height : 30px;
}

nav ul
{
    list-style-type: none;
}

nav li 
{ 
	float : left; 
	border-right : 1px solid #ffffff;
}

nav a
{
	display : block;
	padding : 0;
	background: url(images/degradeblue.jpg) repeat-x top left;        
	color : white;
	text-decoration : none;
	width : 145px;
	font-size : 0.8em;
	border-radius: 5px;
}

nav li ul
{ 
	position: absolute;
	width: 145px;
	left: -999em;
}

nav li ul li 
{
	border-top: 1px solid #ffffff;
}

nav li ul ul 
{
        margin: -31px 0 0 145px ;
        border-left: 1px solid #ffffff ;
}

nav a:hover     
{
        color: #ffffff;
        background: url(images/degradeblack.jpg) repeat-x top left;        
        
}

nav li:hover ul ul, nav li.sfhover ul ul
{
        left: -999em;
}

nav li:hover ul, nav li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul 
{
        left: auto;
        min-height: 0;
}

#accueil
{
	vertical-align: top;
	border: 3px #888888 solid;
    border-radius: 0px 0px 10px 10px;
}

@media all and (max-width: 856px)
{
    #bandeau
       {
	    height: 120px;
	}
	nav
	{
		height : 60px;
	}

	#titretexte
	{
		font-size: 1em;
	}
}

@media all and (max-width: 532px)
{
    #bandeau
       {
	    height: 75px;
	}
	nav
	{
		height : 90px;
	}
	#titretexte
	{
		font-size: 0.6em;
	}
	
}


/* Partie section */
section
{
	margin-top: 40px;
	background: url('images/fond_jaune.png');
    border: 3px #888888 solid;
    border-radius: 10px 10px 10px 10px;
}

article, aside
{
    display: inline-block;
    vertical-align: top;
	padding : 2%;
	text-align: justify;
}

article
{
    width: 58%;
    border-right: 3px #888888 solid;
	margin-right: 2%;
}

header img
{
    border-right: 3px #888888 solid;
    border-bottom: 3px #888888 solid;
    border-radius: 10px 10px 10px 10px;
}

article img, aside img
{
    border-right: 3px #888888 solid;
    border-bottom: 3px #888888 solid;
    border-radius: 10px 10px 10px 10px;
	margin-right: 10px;
}

aside
{
    position: relative;
    width: 29%;
}

.labelg
{
	display: block;
	width: 20%;
	float: left;
	text-align: left;
	overflow:auto;
}

.labeld
{
	display: block;
	width: 20%;
	float: left;
	text-align: right;
	overflow:auto;
}

.inputf, .textareaf
 {
    font-family: 'Trebuchet MS', Arial, sans-serif;
	width: 75%;
}

table
{
	border-collapse: collapse;
	margin: 20px;
}

td, th
{
	border: 3px #888888 solid;
	padding: 5px;
}

.lgent
{
	/*background: #7ffffd;*/
	background: url(images/blue.jpg) repeat-x top left; 
	color : white;
}

.lgpai
{
	/*background: #ffff00;background: url(images/deg128jaune.jpg) repeat-x top left; */
	background: url(images/degradejaune92.png) repeat-x top left;   
}
	 
.artseul
{
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	overflow:auto;
}

.bordure
{
    border-top: 3px #888888 solid;
    border-left: 3px #888888 solid;
    border-right: 6px #888888 solid;
    border-bottom: 6px #888888 solid;
    border-radius: 10px 10px 10px 10px;
}

.bbloc1
{
	display: inline-block;
	vertical-align: top;
	width:22%;
	overflow-wrap: break-word;
	margin-bottom: 5px;
}
.bbloc1 img
{
	width:100%;
	max-height:90px;
	max-width:90px;
}

.bbloc2
{
	display: inline-block;
	vertical-align: top;
	width:45%;
	overflow-wrap: break-word;
}
.bbloc2 img
{
	width:100%;
	max-height:58px;
	max-width:185px;
}

.bbloc3
{
	display: inline-block;
	vertical-align: top;
	width:30%;
	overflow-wrap: break-word;
}
.bbloc3 img
{
	float: right;
}


@media all and (max-width: 682px)
{
	article, aside
	{
		display: block;
	}

	article
	{
		width: auto;
		margin-right: 0px;
		border-right: none;
	}

	aside
	{
		width: auto;
		float : none;
	}
}

.centre
{
	text-align: center;
}

.imgcentre
{
    width: 75%;
	text-align: center;
}

.imgaside300
{
    width: 100%;
	max-width: 300px;
	text-align: center;
}

.imgaside200
{
    width: 100%;
	max-width: 200px;
	text-align: center;
}

.bouton_rouge
{
    height: 25px;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img
{
    border: 0;
}


/* Partie footer */
footer
{
	margin-top: 40px;
	padding-left: 20px;
    border: 3px #888888 solid;
    border-radius: 10px 10px 10px 10px;
	background: url('images/fond_jaune.png');
	text-align: center;
 }
 
footer p
 {
	text-align: left;
}

footer img
{
    margin: 5px 15px 5px 15px;
	border: 3px #888888 solid;
    border-radius: 10px 10px 10px 10px;
}

#bloc1, #bloc2, #bloc3
{
	display: inline-block;
	vertical-align: bottom;
}

#sponsor1, #sponsor2, #sponsor3, #sponsor4
{
	display: inline-block;
	vertical-align: bottom;
}


#copyright
{
	margin-top: 5px;
	margin-right: 10px;
	text-align: center;
	font-size: 0.75em;
}

/* Correctifs pour les vieilles versions d'Internet Explorer */

/* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */

.old_ie #titrepage, .old_ie #titretexte, .old_ie #logoG, .old_ie #logoD, .old_ie nav #menu, .old_ie nav li, .old_ie nav ul li, .old_ie article, .old_ie aside, .old_ie #bloc1, .old_ie #bloc2, .old_ie #bloc3, .old_ie .bbloc1, .old_ie .bbloc2, .old_ie .bbloc3
{
    display: inline;
}

/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie #titrepage
{
	position: relative;
	margin-left: 0px;
	margin-right: 0px;
	left: 0px;
    width: 75%;
}

.old_ie #titretexte
{
	position: relative;
	background: navy;
}

.old_ie #logoD
{
	display: none;
}

.old_ie section h2, .ie8 section h2
{
    font-size: 1.1em;
}
