@charset "utf-8"; 

.bandeauPC{width:100%; padding:10px; box-sizing:border-box; position:relative;}
.topTopBleu{ background-color:#019FE3; height:51px; width:100%; position:absolute; top:0px; left:0px;}
.bandeauCoordonnees{color:#FFF; position:relative; z-index:2;}
.bandeauPC img{height:auto}

/****************************/
/* Bandeau boutons
/****************************/
.bandeauBoutons a{ float:left; width:100px; box-sizing:border-box; height:100px;text-align:center;line-height:90px; font-family:"futura_book"; font-weight:bold; position:relative; letter-spacing:1px; }
.bandeauBoutons a span{font-size:12px; text-align:center; display: inline-block;line-height: normal;vertical-align: middle;color:#FFF; position:relative;z-index:3;}
.bandeauBoutons a .conteneur_barre_haut {position:absolute; width:100%; height:1px; top:23px; left:0px;z-index:2;}
.bandeauBoutons a .conteneur_barre_bas {position:absolute; width:100%; height:1px; bottom:20px; left:0px;z-index:2;}
.bandeauBoutons a .barre{ width:0%; height: 1px; background-color:#FFF; margin:0 auto; webkit-transition: width 0.2s ease-in;-moz-transition: width 0.2s ease-in;	transition: width 0.2s ease-in;}
.bandeauBoutons a:hover .barre{ width:90%;}

@media screen and (min-width:930px){ .bandeauBoutons{ padding-right:70px;position:absolute; right:0px; top:0px;} .bandeauBoutons a { margin:15px;}}
@media screen and (max-width:929px) and (min-width:710px){ .bandeauBoutons{ padding-right:10px;position:absolute; right:0px; top:0px;} .bandeauBoutons a { margin:15px 0px 15px 15px;}}
@media screen and (max-width:709px) and (min-width:500px){ .bandeauBoutons{ margin: 0px auto; width:100%; overflow:hidden;} .bandeauBoutons a { margin:1.5%; width:30%;}}
@media screen and (max-width:499px) { .bandeauBoutons{width:100%; overflow:hidden;} .bandeauBoutons a { float:none; width:100%; display:block;}}
/****************************/
/* Fin Bandeau boutons
/****************************/

/****************************/
/* Bandeau boutons couleurs
/****************************/
.boutonJaune{ background-color:#fec300; }
.boutonJaune .fond_bouge{ background-color:#f5bc00; width:0%; height:100%; position:absolute; top:0px; left:0px; z-index:1;webkit-transition: width 0.2s ease-in;-moz-transition: width 0.2s ease-in; transition: width 0.2s ease-in;}
.bandeauBoutons .boutonJaune:hover .fond_bouge{width:100%;}

.boutonBleu{ background-color:#0075bf; }
.boutonBleu .fond_bouge{ background-color:#0069ac; width:100%; height:0%; position:absolute; bottom:0px; left:0px; z-index:1;webkit-transition: height 0.2s ease-in;-moz-transition: height 0.2s ease-in; transition: height 0.2s ease-in;}
.bandeauBoutons .boutonBleu:hover .fond_bouge{height:100%;}

.boutonRose{ background-color:#b50064; }
.boutonRose .fond_bouge{ background-color:#a5005b; width:0%; height:100%; position:absolute; bottom:0px; right:0px; z-index:1;webkit-transition: width 0.2s ease-in;-moz-transition: width 0.2s ease-in; transition: width 0.2s ease-in;}
.bandeauBoutons .boutonRose:hover .fond_bouge{width:100%;}

@media screen and (min-width:500px){.bandeauBoutons .boutonJaune,.bandeauBoutons .boutonBleu,.bandeauBoutons .boutonRose{  border: #FFF solid 4px; }}
@media screen and (max-width:499px) {.bandeauBoutons .boutonJaune,.bandeauBoutons .boutonBleu,.bandeauBoutons .boutonRose{border-bottom: #FFF solid 10px;}}
/****************************/
/* Fin Bandeau boutons couleurs
/****************************/

.phraseH1{ font-family:"futura_book"; font-size:18px; color:#007aad; letter-spacing:5px; position:absolute;}

/****************************/
/* Bouton recherche
/****************************/
.bandeauRose{ background-color:#da0078; height:50px; position:relative;}
.bandeauRose .boutonRecherche{ width:50px; height:50px; position:absolute; right:0px; bottom:0px;}

@media screen and (min-width:710px){ .bandeauRose{position:absolute; right:10px; bottom:-25px; width:40%;}}
@media screen and (max-width:709px){ .bandeauRose{width:100%; overflow:hidden;}}

.bandeauRose .boutonRecherche:before{font-family:'FontAwesome';content:"\f002"; background-color:#b50064; color:#FFF; cursor:pointer;speak:none;font-size:22px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;display:block;-webkit-font-smoothing:antialiased;text-align:center;width:50px;line-height:50px;position:relative;z-index:888;top:0;left:0;right:0;bottom:0}

.bandeauRose:hover .boutonRecherche:before{ background-color:#A5005B;}

.bandeauRose .inputRecherche{ border-bottom:1px solid #FFF; padding:0px 0px 5px 0px; margin:13px 8px 0px 8px; width:85%; box-sizing:border-box;}
.bandeauRose input{ background-color:#DA0078; border:none; color:#FFF;font-family:"futura_book"; width:100%; }

/****************************/
/* Fin Bouton recherche
/****************************/

/****************************/
/* Bouton catégorie
/****************************/
@media screen and (min-width:975px){.bandeauBleu{ display:none;}}
	
.bandeauBleu{ background-color:#009FE3; height:50px;cursor:pointer;}
.bandeauBleu a, .bandeauBleu a:hover{ color:#FFF; text-decoration:none}
.bandeauBleu #titre_cat{ 
	width:350px;
	font-size:14px; 
	line-height:40px; 
	font-family:"futura_book"; 
	color:#FFF; 
	margin-bottom:10px;
	margin-left:10px;
	border-bottom:#FFF solid 1px;
}

@media screen and (min-width:710px){ .bandeauBleu{position:absolute; left:10px;width:40%; bottom:-25px;}}
@media screen and (max-width:709px){ .bandeauBleu{width:100%; overflow:hidden;}}

@media screen and (max-width:750px){.bandeauBleu{ margin-top:10px;}}


.bandeauBleu:before{font-family:'FontAwesome';content:"\f0c9"; background-color:#0075BF; color:#FFF; speak:none;font-size:22px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;display:block;-webkit-font-smoothing:antialiased;text-align:center;width:50px;line-height:50px; float:right;}

/****************************/
/* Fin Bouton catégorie
/****************************/

.menuHautPC #maxPC1000{display:none}
.bandeauPORTABLE{display:none}
.menuHautPORTABLE{display:none}
#menu_gauche_portable{display:none}

@media screen and (min-width:1200px){.header{width:1200px; padding:0px; margin:0 auto; background-color:#FFF;-webkit-box-shadow: 0px 6px 8px 0px rgba(207, 133, 0, 0.77);
-moz-box-shadow:    0px 6px 8px 0px rgba(207, 133, 0, 0.77);
box-shadow:         0px 6px 8px 0px rgba(207, 133, 0, 0.77);}
.bandeauPC{ height:150px;}
.bandeauPC #le_logo{width:430px; position:relative; bottom:20px; left:80px; z-index:2}
.phraseH1{ bottom:30px; left:115px;}
.logo_france{position:absolute; bottom:-30px; left:0px;}
}

@media screen and (max-width:1199px) and (min-width:770px){
.header{ background-color:#FFF;}
.bandeauPC{ height:150px;}
.bandeauPC #le_logo{width:430px; position:relative; bottom:20px; left:0px; z-index:2}
.phraseH1{ bottom:50px; left:35px;}
.logo_france{ display:none;}
}

@media screen and (max-width:769px) and (min-width:710px){
.header{ background-color:#FFF;}
.bandeauPC{ height:150px;}
.bandeauPC #le_logo{width:300px; position:relative; bottom:-10px; left:0px; z-index:2;}
.phraseH1{ bottom:50px; left:20px; font-size:13px;}
.logo_france{ display:none;}
}


@media screen and (max-width:709px){
.header{ background-color:#FFF;}
.bandeauPC{ overflow:hidden;}
.bandeauPC #le_logo{position:relative;z-index:; margin:0 auto; max-width:100%;}
.phraseH1{ display:none;}
.logo_france{ display:none;}
}

@media screen and (max-width:300px){.bandeauPC #le_logo{ margin:10px 0px;}}