/* Définition des polices personnalisées */

@font-face
{
    font-family: 'alexbrush-regular';
    src: url('polices/alexbrush-regular.eot');
    src: url('polices/alexbrush-regular.eot?#iefix') format('embedded-opentype'),
         url('polices/alexbrush-regular.woff') format('woff'),
         url('polices/alexbrush-regular.ttf') format('truetype'),
         url('polices/alexbrush-regular.svg#alexbrush-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

 
/* Eléments principaux de la page */
 

/* Header */

body
{
    /*background: url('images/fond_bleu.png');*/
	color: #181818;
    font-family: Arial, sans-serif;
    
}

#bloc_page
 {
    width: 900px; /* Largeur du bloc */
    margin: auto;
}

@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}


section h1, footer h1, nav a
{
    font-family: arial, serif;				/* Type de police */
    font-weight: normal;					/* Taille de police */
    text-transform: uppercase;				/* Toujours écrits en majuscules */
}


a,a:link,a:visited
{
text-decoration:none;
color:#646671;
}
a:hover
{
transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
-o-transition:background-color .2s linear;
-webkit-transition:background-color .2s linear;
color:#000;
transition:color .2s linear;
-moz-transition:color .2s linear;
-o-transition:bcolor .2s linear;
-webkit-transition:color .2s linear
}

/* Header */

#titre_principal
{
    display: inline-block;
}
 
header h1
{
    font-family: alexbrush-regular, serif;
    font-size: 3.5em;
    font-weight: normal;
}
 
#logo1, header h1
{
    display: inline-block;
	vertical-align: middle;
    margin-bottom: 0px;
}

header h2
{
    font-family: arial, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Bar de navigation inutilisé */
/* xxxxxxxxxxxxxxxxxx Navigation xxxxxxxxxxxxxxxxxxxxxxxxxx */
nav
{
    display: inline-block;
    width: 900px;
    text-align: center;
}
 
nav ul
{
    list-style-type: none;
}
 
nav li
{
    display: inline-block;
    margin-right: 15px;
}
 
nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}
 
nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

@media all and (max-width: 1024px)
{
    nav
    {
        width: auto;
        text-align: left;
    }
     
    nav li
    {
        display: block;
        padding-left: 4px;
    }
     
    nav a
    {
        font-size: 1.1em;
    }
     
    nav a:hover
    {
        border-bottom: 0;
    }
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* Menu coloré au passage de la souris */
#top-menu-main-savoir
{
background:url("images/menu_top2.png") no-repeat 0 -180px;
width:114px;
}
#top-menu-main-savoir:hover
{
background:transparent url("images/menu_top2.png") no-repeat 0 -90px;
}
#top-menu-main-savoir_faire
{
background:url("images/menu_top2.png") no-repeat -114px -180px;
width:114px;
}
#top-menu-main-savoir_faire:hover
{background:transparent url("images/menu_top2.png") no-repeat -114px -90px;
}
#top-menu-main-savoir_etre
{
background:url("images/menu_top2.png") no-repeat -228px -180px;
width:114px;
}
#top-menu-main-savoir_etre:hover
{
background:transparent url("images/menu_top2.png") no-repeat -228px -90px;
}
#top-menu-main-realisation
{
background:url("images/menu_top2.png") no-repeat -342px -180px;
width:160px;
}
#top-menu-main-realisation:hover
{
background:transparent url("images/menu_top2.png") no-repeat -342px -90px;
}
#top
{
height:120px;
margin:0;
padding:0;
width:900px;
margin:auto
}
#top-logo
{
background:transparent url(images/logo.png) no-repeat left top;
display:block;
float:left;
height:120px;
margin:0;
padding:0;
width:120px
}
#top-logo span
{
display:none
}
#top-menu
{
float:left;
height:120px;
width:710px
}
#top-menu-nav
{
border-bottom:1px solid #bebebe;
float:left;
height:32px;
list-style:none;
margin:0;
padding:0;
width:100%;
background:#fff
}
#top-menu-nav li
{
display:inline;
font-size:13px;
font-weight:bold;
text-align:center;
vertical-align:middle;
padding:18px 10px 10px 15px
}
#top-menu-nav li.f1
{
padding-right:0
}
#top-menu-nav li a
{
color:#CCC;
text-decoration:none
}
#top-menu-nav li a:hover
{
color:#666;
text-decoration:none
}
#top-menu-main
{
float:left;
list-style:none;
margin:0;
margin-top:32px;
padding:0;
width:100%
}
#top-menu-main li
{
display:inline
}
#top-menu-main li a
{
display:block;
float:left;
height:90px;
margin-left:1px;
margin-right:1px;
padding:0;
text-decoration:none
}
#top-menu-main li a span
{
display:none
}
/* Lien Menu */

li
 {
padding: 0 0 8px;
vertical-align: middle;
list-style-type: none;
}

/* Bannière */
 
#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/banniere.png') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
}


@media all and (max-width: 1024px)
{
    #banniere_image
    {
        display: none;
    }
}

/* Corps */

 
article, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

article
{
    width: 625px;
    margin-right: 15px;
}

article p
{

}
 
article h2
{
	font-weight: bold;
	text-align: left;
	font-size: 1.5em;
}

article h1
{
	font-weight: bold;
	text-align: left;
}

table
{
border-collapse: collapse;
}

.rotation90
{
	white-space: nowrap;
	-moz-transform: rotate(-90deg) translate(-20px, 0px);  /* FF3.5+ */
	-o-transform: rotate(-90deg) translate(-20px, 0px);  /* Opera 10.5 */
	-webkit-transform: rotate(-90deg) translate(-20px, 0px);  /* Saf3.1+, Chrome */
	-ms-transform : rotate(-90deg) translate(-20px, 0px); /* IE */
}

.hauteur90
{
	height:105px;

}

.largeur135
{
	width: 135px;
}

.largeur180
{
	width: 180px;
}

.largeur30
{
	width: 30px;
}

td, th /* Mettre une bordure sur les td ET les th et aligner le texte */
{
	border: 1px solid black;
    text-align: center;
}
#fournisseur a
{
	color: white;
}
#retour a
{
	color: white;
}
.bouton_rouge2
{
    position: fixed;
	height: 25px;
    left: 5px;
    top: 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_rouge2 img
{
    border: 0;
}

aside
{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}
a p
{
    color: white;
}
aside p, h1, a
{
	text-align: center;
}
 
.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}
 
#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}
 
#eboutier img
{
    border: 1px solid #181818;
}
 
aside img
{
    margin-right: 5px;
}

@media all and (max-width: 1024px)
{
    article, figure, aside, iframe
	{
        width: auto;
        display: block;
        margin-bottom: 15px;
    }
     
    #fleche_bulle
    {
        display: none;
    }
     
    aside p:last-child
    {
        text-align: center;
    }
}

/* Footer */
footer	/* Présentation du haut de la partie pied de page */
{
    background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
    padding-top: 35px;
}
 
footer p, footer ul 	/* Taille des caractéres p et ul utilisés dans la partie pied de page */
{
    font-size: 0.6em;
}
/* Taille des Titres h2 utilisés dans la partie pied de page */ 
footer h2{
font-size: 0.8em;
text-align: left;}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#liens-bas{width: 100%; position: absolute; height: 120px;
        z-index: 2;line-height: 10px;
        text-align: center;}
#liens-bas .premier  /* On définie pour le premier block du pied de page */
{
background-image: none; /* pas d'image de fond */
float: left; /* position gauche */
padding: 5px 10px 10px 10px; /* sa position gauche, haut, bas, droite */
}
#liens-bas div  /* On définie pour les bocks <div> du pied de page */
{
display: inline-block; /* l'alignement des blocks */
background: transparent url('images/separator.png') repeat-y 0 15px; /* l'image de fond */
float: left; /* la position des blocks */
height: 120px; /* la hauteur des blocks */
}
.autres /* on définie pour les listes ul des blocks de pied de page */
{
width: 80px; /* Largeur */
margin: 5px; /* Marge */
padding: 0;	/* Position */
}
.autres li /* on définie pour les lignes il des listes de pied de pages */ 
{
    text-align: left;
    margin: 0; /* Marge */
    padding: 0; /* Position */
}
h2
{
margin: 10px 10px 10px 10px;
font-size: 14px;
text-transform: uppercase; /* transforme le texte en majuscules */
}
#myVideo div /* On définie pour le Bloc sa hauteur */
{
display: inline-block; /* l'alignement des blocks */
float: left; /* la position des blocks */
height: 10px; /* la hauteur des blocks */
}