@charset "utf-8";
/* CSS Document */
/* HHS */
/* Feuille de style - Styles HHP */
/* CSS 2 */
/* Es Laurent */
/* Studio HHP | ESL */
/* Màj CSS 4.1 */
/* 2025 */
/* Edition H#HSTUDIOS */
/* Tous droits réservés */
/* Copyright © H²Records */
/* 2025 */
/*---------------------------------------*/
/* -- DEBUT STYLES -- */

/* ---------------ACCUEIL-PAGE------------------- */
/* BALISES */
	/* COMMUNS-HHS-HHR-HHP */
	*{margin:0; padding:0;}
	
	/*body{background-image:url(../images/hhstudios_2015e.jpg);background-size:cover;text-align:center;font-family:"Arial Black", Gadget, sans-serif;font-size:100%;color:#fff;border-top:7px solid rgba(103,203,104,0.8);}*/
	body {background:rgba(0,0,0,0.6);text-align:center;font-family:"Arial Black", Gadget, sans-serif;font-size:100%;color:#fff;border-top:7px solid rgba(109,9,239,0.8);}
	
	h1, h2, h4, h5, h6 {padding:5px 0; font-family: 'maass';}
	h1 {font-size:2em;color:rgba(255,255,255,0.9);}
	h2 {font-size:1.5em;color:rgba(255,255,255,0.9);text-align:center;line-height:1.3em;}
	h4,
	h5 {font-size:1.4em;color:rgba(255,255,255,0.9);}
	h3 {font-size:1.3em;color:#fff;line-height:1.4em;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
	a:hover {color:rgb(102,51,153);}
	b {font-size:1.5em;}
	b.pics {color:rgb(102,51,153);}
	b.recs {color:#cb610d;}
	b.stud {color:#67cb68;}
	b.foot {font-size:1em;font-family:'maass';padding:0 5px 0 5px;}
	strong {font-family:'maass';}
	span.bouton {float:left;width:auto;color:#fff;background:rgba(109,9,239,0.6);border-radius:5px;text-align:center;font-size:1.2em;text-align:center;padding:11px;}
	span.bouton:hover {background:#000;border:1px dashed rgb(0,153,204);color:rgb(204,102,153);padding:10px;}
	span.plus {float:right;width:32px;height:32px;color:#fff;background:rgba(109,9,239,0.6);border-radius:50%;text-align:center;font-size:2em;line-height:32px;}
	span.plus:hover {background:rgba(255,255,255,0.6);border: 1px solid rgba(109,9,239,0.6);color:rgb(102,51,153);}
	span.top {float:right;width:32px;height:32px;color:#fff;background:rgba(109,9,239,0.6);border-radius:50%;text-align:center;font-size:1.3em;line-height:32px;}
	span.top:hover {background:rgba(255,255,255,0.6);border: 1px solid rgba(109,9,239,0.6);color:rgb(102,51,153);}
	span.fav-esl {display:block;width:32px;height:32px;background:url(../../images/faviconesl2.png);margin:15px auto;}
	span.fav-hhs {display:block;width:32px;height:32px;background:url(../../images/faviconhhs.png);margin:15px auto;}
	span.fav-hhp {display:block;width:32px;height:32px;background:url(../../images/faviconhhp.png);margin:15px auto;}
	span.fav-hhr {display:block;width:32px;height:32px;background:url(../../images/faviconhhr.png);margin:15px auto;}
	p.links {display:block;padding:15px 0;}
	p.links span {padding:5px;}	
	.right {display:block;float:right;}
	.left {display:block;float:left;}
	.auto {display:block;margin:auto;}
	.cache {visibility:hidden;}
	.hhs {color:#67cb68;}
	.hhr {color:#cb610d;}
	.hhp {color:rgb(102,51,153);}
	.esl {color:rgb(16,157,232);}
	.fm {color:#ee0002;}
	.shop {color:#ffff00;}
	.familymixes {color:#b21f21;}
	.prods {color:#ffb210;}
	.ph {color:#0102fd;}
	.print {color:rgb(0,153,204);}
	.black {color:rgba(0,0,0,0.8);}
	.web {color:rgb(204,102,153);}
	.current {border-top:2px solid grey;text-decoration:underline;}
	.both {clear:both;}
	.pad-bot {display:block;margin:10px;padding:20px;}
	.vignette {display:block;background:url(../images/bg/texture_cielgris.jpg) repeat;padding:10px 0;border-radius:15px;}
	.mainContent {width:90%;border-top:2px solid grey;margin:10px auto;display:block;overflow:hidden;border-bottom:2px solid grey;}
	.box {width:115px;height:115px;margin-left:3px;display:block;float:left;opacity:0.4;transition: 0.3s linear;border:solid 1px #fff;margin-top:10px;}
	.box:hover {  opacity:1;cursor:pointer; }
	.awesome {display:block;border:2px solid grey; padding:5px;border-radius:0 0 10px 10px;width:auto;}
	.awesome li {display:inline-block;list-style:none;padding:5px;}
/* page/container */	
	#full-hhp {background:rgba(0,0,0,0.8); margin-top:20px;overflow:hidden;border-top:7px solid rgba(102,51,153,0.6);}
/* header */
	#head-hhp {padding-bottom:30px;}
	#head-hhp a:first-child {text-align:center;}
/* date, heure et horloge */
	#date_heure_hhp {color:#fff;text-align:center;font-size:1em;font-family:'maass';}
/* ancres */
	#ancres-hhp {margin-top:10px;padding:20px 0;border-top:7px solid rgba(102,51,153,0.6);border-bottom:7px solid rgba(102,51,153,0.6);background: rgba(0,255,255,1);
background: -moz-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(255,0,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,255,255,1)), color-stop(100%, rgba(255,0,255,1)));
background: -webkit-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(255,0,255,1) 100%);
background: -o-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(255,0,255,1) 100%);
background: -ms-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(255,0,255,1) 100%);
background: linear-gradient(to right, rgba(0,255,255,1) 0%, rgba(255,0,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffff', endColorstr='#ff00ff', GradientType=1 );border-radius:0 0 20px 20px;}
	#ancres-hhp ul {border-top:2px solid grey;width:80%;margin:auto;}
	#ancres-hhp ul li {display:inline-block;list-style:none;text-align:center;background:rgba(0,0,0,0.6);padding:10px;border-radius:0 0 5px 5px;box-shadow:2px 2px 3px rgba(255,255,255,0.5);}
	#ancres-hhp ul li a {line-height:1.5em;font-family:'maass';font-size:1.2em;color:#fff;}
	.top-to-bottom {border-width: 3px;border-style: solid;
   		-webkit-border-image:-webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    	-webkit-border-image:-webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    	-moz-border-image:-moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    	-o-border-image:-o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    	border-image:linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;}
/* HHP */
	#HHPictures {margin-top:10px;}
	#HHPictures a:hover {text-decoration:underline;color:#67cb68;}
	#HHPictures section {}
	#HHPictures section article {border-top:7px solid rgba(102,51,153,0.6);padding-bottom:15px;}
	#HHPictures section article ul{}
	#HHPictures section article ul li {list-style:circle;}
	div.vignette h3 {color:#000;font-family: 'anke';font-size:1.9em;}
	#mot_hhp {border-top:7px solid rgba(102,51,153,0.6);}
	#mot_hhp p {font-size:1.3em;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:left;line-height:1.3em;}
/* studio hhp */
	#studiohhp {border-top:7px solid rgba(102,51,153,0.6);padding-bottom:15px;border-bottom:7px solid rgba(102,51,153,0.6);clear:both;}
	#studiohhp cite {font-size:1.1em;display:block;padding-bottom:10px;}
	#studiohhp div.mainContent ul li {font-size:1.2em;}
/* galerie */
	#sliderhhp {display:block;clear:both;border-bottom:7px solid rgba(102,51,153,0.6);padding-bottom:25px;}
	#slider_webd {}
	#planche div.mainContent div.box:first-child {margin-left:4px;}
	.por1{background-image:url(img/2010-12-27_c.jpg);}
	.por2{background-image:url(img/2013-06-01_c.jpg);}
	.por3{background-image:url(img/2013-08-12_c.jpg);}
	.por4{background-image:url(img/2013-09-05_c.jpg);}
	.por5{background-image:url(../images/photo/min/po5.jpg);}
	.por6{background-image:url(../images/photo/min/po6.jpg);}
	#planche div.mainContent h6 {margin-top:20px;text-align:center;line-height:2em;display:block;clear:both;}
	#planche p a {text-align:center;padding:15px;border:solid 2px grey;border-radius:0 0 10px 10px;margin:20px;}
/* galerie - page portraits */
	#alarme {display:block;width:200px;height:181px;background:#6d09ef;border-radius:20px;margin-top:3px;margin-left:3px;border:1px dashed #fff;}
	#alarme:hover {background:#fff;border:1px solid #000;color:#6d09ef;}
	#alarme table tr td p {margin-top:40%;font-family:'maass';}
/* reseaux sociaux */
	#reseaux {display:block;width:100%;overflow:auto;clear:both;}
	#reseaux div.grid_3 {border:1px dashed rgb(102,51,153);padding:5px;}
	#reseaux div.grid_6 {padding-bottom:30px;}
/* sites HHP */
	#siteshhp {display:block;border-top:7px solid rgba(102,51,153,0.6);overflow:auto;font-size:1.2em;padding-bottom:15px;}
	#sitesdemos ul li {text-align:left;}
	#sitesdemos ul li a {display:block;margin-left:5%;padding-right:5%;}
	#sitesdemos ul li span.right {margin-right:5%;}
/* agence */
	#agency {display:block;border-top:7px solid rgba(102,51,153,0.6);padding-bottom:15px;overflow:auto;}
	#postal_hhp {display:block;margin-top:5%;padding:5px;text-align:center;font-size:1.2em;font-style:italic;border:2px solid grey;border-radius:10px;}
	#horaires {}
	#horaires table {border-spacing: 0;width: 400px;margin:auto;}
	/* tableau horaires */
	.bordered 	{border-radius: 20px;box-shadow: 0 3px 3px #ccc;font-size:1.1em;}
	.bordered td {border-top: 1px solid #ccc;padding: 10px;text-align: left;}
	.bordered td:first-child {border-left: none;}
	.bordered tr:first-child td {border-top:none;}
	.bordered tr:last-child td:first-child {border-radius: 0 0 0 20px;}
	.bordered tr:last-child td:last-child 	{border-radius: 0 0 20px 0;}
	.bordered tr:hover 	{background: rgba(102,51,153,0.4);}
	/* -- */
	#map_hhp p {text-align:center;display:block;margin-top:25px;}
	#agency span.bouton {margin-right:10px;margin-top:15px;}
	#business {margin-top:15px;padding-bottom:10px;}
	#business div a.left {margin-top:17px;}
/* domaine */
	#domainehhp {display:block;border-top:7px solid rgba(102,51,153,0.6);padding-bottom:20px;}
	#menu-hhp {margin-top:20px;}
	#menu-hhp nav {width:80%;margin:auto;border:7px solid rgba(102,51,153,0.4); border-radius:0 0 10px 10px;}
	#menu-hhp nav:hover {border:7px solid rgba(102,51,153,0.8); border-radius:15px;}
	#menu-hhp nav ul {margin-bottom:0;}
	#menu-hhp nav ul li {list-style:none;display:inline-block;padding:10px 25px;font-family: 'maass'; margin-top:10px;}
	#menu-hhp nav ul li a {display:block;opacity:0.6;font-family: 'maass';font-weight:bold;}
	#menu-hhp nav ul li a:hover {opacity:1;}
/* bas de page */
	#raccourcis-hhp {display:block;clear:both;padding-bottom:30px;border-bottom:2px solid grey;margin-top:10px;border-top:solid 2px grey;}
	#raccourcis-hhp ul.grid_2 {border-top:2px solid rgba(102,51,153,0.9);}
	#raccourcis-hhp ul.grid_2 li a {color:rgba(102,51,153,0.8);font-size:1.1em;}
	#raccourcis-hhp ul {}
	#raccourcis-hhp ul li {list-style:none;display:inline-block;padding:0 10px;}
	#raccourcis-hhp ul li a {font-size:1.2em;}
	#raccourcis-hhp ul li a:hover {color:#fff;text-decoration:underline;}
	/* footer */
	#foot-hhp footer div:first-child p,
	#foot-hhp footer div:first-child cite {text-align:left;}
	#foot-hhp footer div.grid_2 span {margin-top:50px;}
		/* logo */
		#foot-hhp footer div.foot-logo {display:block;width:288px;height:46px;background:url(../images/hhp-typo_alu.png);margin:40px auto;}
		#siege-hhp {}
		/* résolution */
		#reso-hhp {font-size:1.1em;font-style:normal;color:rgba(102,51,153,0.6);}
/* copy */
	#copy,
	#copy-hhp,
	#copy-serv {background:rgba(0,0,0,0.8); margin-top:10px;padding:20px;color:rgba(255,255,255,0.4);border-top:2px solid grey;border-bottom:2px solid grey;}
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/* ------------------SERVICES--------------------------- */
	#full-serv {background:rgba(0,0,0,0.8); margin-top:20px;overflow:hidden;border-top:7px solid rgba(102,51,153,0.6);}
	#full-serv cite {font-size:1.2em;}
	#head-serv {padding-bottom:30px;}
	#list-services {display:block;overflow:auto;border-top:7px solid rgb(204,102,153);background:#808080;margin-top:15px;padding-bottom:15px;}
	#pdfs li.full {border:2px dashed rgb(204,102,153);padding:5px 0;background:rgba(0,0,0,0.6);margin-top:5px;}
	#pdfs li.grid_3 {border:2px dashed rgb(0,153,204);padding:5px 0;background:rgba(0,0,0,0.6);}
	#pdfs li.grid_3:hover,
	#pdfs li.full:hover {background:rgba(255,255,255,0.6);border:2px dashed rgb(204,102,153);color:rgb(0,153,204);}
	#pdfs li.grid_3 a,
	#pdfs li.full a {font-size:1.4em;}
	#processus table tr:nth-child(2) {font-size:1.4em;}
	#processus table tr:nth-child(2) td,
	#processus table tr:nth-child(3) td {border:1px solid rgb(0,153,204);margin-top:3px;}
	div.processus ol li {display:inline-block;}
	#reductions li {display:block;padding-bottom:15px;}
	#reductions li.done {text-decoration:line-through;}
	li.proms {text-align:left;font-size:1.2em;}
	.attention {display:block;margin-top:10px;padding:0 10px;border-bottom:2px solid rgb(204,102,153);border-left:2px solid rgb(204,102,153);border-radius:20px 50px 20px 0;box-shadow:3px -3px 3px rgba(0,0,0,0.6);}
	.attention b {text-align:left;}
	.attention p {text-align:left;font-size:1.1em;}
	.processus {display:block;margin-top:10px;padding:0 10px;padding-bottom:15px;border-bottom:2px solid rgb(204,102,153);border-left:2px solid rgb(204,102,153);border-radius:20px 50px 20px 0;box-shadow:3px -3px 3px rgba(0,0,0,0.6);}
	.processus p {text-align:right;font-size:1.1em;}
	.promotions {display:block;margin-top:10px;padding:0 10px;border-bottom:2px solid rgb(204,102,153);border-left:2px solid rgb(204,102,153);border-radius:20px 50px 20px 0;box-shadow:3px -3px 3px rgba(0,0,0,0.6);}
	.promotions b {text-align:left;}
	.promotions p {text-align:left;font-size:1.1em;}
	#foot-serv {display:block;margin-top:15px;border-top:7px solid rgb(0,153,204);}
	#foot-serv footer ul li {list-style:none;display:inline-block;margin-top:10px;}
	#foot-serv footer ul li a {font-size:1.2em;padding:5px;border:2px dashed rgb(102,51,153);background:#808080;color:#fff;}
	#foot-serv div.grid_2 a {opacity:0.7;}
	#foot-serv div.grid_2 a:hover {opacity:1;}