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

*, *:before, *:after {box-sizing:  border-box !important;}
* {box-sizing:border-box;}

body {margin:0; padding:0; background:#000; font-size:13px; font-family: 'arial', helvetica, sans-serif; color:#fff;}
a {text-decoration: none; color:#fff;}

/*   header   */
header {width:100%; overflow:hidden;}
.top {max-width:1300px; margin:auto; border-bottom: 2px solid #a50f78; overflow:hidden;}
.logo {float: left; width: 30%; max-width: 385px; padding: 10px 10px 10px 5px; overflow: hidden;}
.logo img {width: 100%; height: auto;}
.accroche {float: right; text-align: right; font-size: 20px; padding: 10px 10px 0 0;}
.accroche span {display: block; font-size: 1.6em; font-weight: bold; color: #FF0084;}

.gradient {background: url(../img/gradient.png) repeat-x; width: 100%; height: 200px; position: absolute; z-index: -100;}

/*   contener   */
#wrapper {width:100%; max-width:1300px; margin:0 auto 30px; padding:0 10px; overflow: hidden;}
h1 {text-align:center;}
h1 span {white-space: nowrap;}
h2 {font-size:1.4em; text-align:center; color:#ccc; font-weight: normal;}
h3 {text-align:center; font-size:20px; font-weight:700;}
h3 span {font-size:30px; text-decoration:underline;}
h3 a {color:#FF0084;}
h3 p {font-size:0.5em;}

article {
	-webkit-column-width:225px; /* Chrome, Safari, Opera */
	-moz-column-width:225px; /* Firefox */
	column-width:225px;
	-moz-column-gap: 3em; -webkit-column-gap: 3em; column-gap: 3em;
	overflow:hidden;
}

article.block-profil-plus-article {
	-webkit-column-width:110px; /* Chrome, Safari, Opera */
	-moz-column-width:110px; /* Firefox */
	column-width:110px;
	-moz-column-gap: 0.5em; -webkit-column-gap: 0.5em; column-gap: 0.5em;
	overflow:hidden;
}

section {padding:0; display:block; overflow:hidden;}
.profil-block {width:100%; margin-bottom:20px; display: inline-block; overflow:hidden;}
.profil-photo {background: url(../img/gradient-photo.png) repeat-x bottom; border-radius:10px; position: relative; overflow:hidden;}
.profil-photo img {z-index: -1; position: relative; margin-bottom: -3px; width: 100%; height: auto;}
.profil-photo-bottom {position:absolute; bottom:0; padding:10px; width:100%; z-index:1000;}
.profil-photo-peudo {font-size:30px; font-weight:bold;}
.profil-photo-dispo {}
.profil-photo-dispo img {width:100%; height:auto; max-width:100px;}
.profil-desc {padding:10px 0; font-style:italic; text-align:justify;}
.profil-bouton {background-color:#008C00; border-radius: 10px; width:100%; text-align:center; padding:1px 1px 5px; margin: 5px 0 20px;}
.tarif {font-size:8px; text-align:center;}

.bouton-t1 {font-size:16px; line-height:26px;}
.bouton-t1 span {display: block; font-size: 1.6em; font-weight:bold; text-transform: uppercase;}
.bouton-t2 {font-size:16px; line-height:26px;}
.bouton-t2 span {display: block; font-size: 1.5em; font-weight:bold; text-transform: uppercase;}
.bouton-t3 {font-size:18px; line-height:32px; font-style: italic;}
.bouton-t3 span {display: block; font-size:2em; font-weight:bold; font-style: normal;}

.profil-page-block-photo {float:left; width:33%; padding-right:30px;}
.profil-page-block-texte {float:left; width:33%; padding-right:30px;}
.profil-page-desc {font-size:15px; font-style:italic; font-weight:normal; margin:15px 0 30px; text-align:justify;}
.profil-page-peudo {font-size:30px; font-weight:bold; margin-right:20px;}
.profil-page-dispo {margin-top: 10px;}
.profil-page-dispo img {width:100%; height:auto; max-width:100px;}
.block-profil-plus {float:left; width:33%;}
.profil-liste {display: inline-block;}
.profil-liste-block-plus {padding-bottom: 3px;}
.profil-liste-block-plus img {width:100%; height:auto;}

.barre {background:#ff6868; text-align:center; padding:20px 10px; margin:10px auto; font-size:18px; font-weight:bold; border-radius:10px; text-transform:uppercase;}
.barre-autre {background:#222; text-align:center; padding: 15px 10px; margin: 0px auto 5px; font-size: 15px; font-weight: bold; color:#fff;}

/*    footer    */
footer {text-align:center; border-top:2px solid #a50f78; padding:10px; max-width: 1300px; margin: auto; overflow:hidden;}
.cgv {}
.cgv img {max-width:120px; height:auto; margin-bottom:10px;}
.cgv a {font-size:13px;}
#cgv-open, #mentions-open {height:0; overflow:hidden; transition:height 1.0s; margin:0; text-align:left; padding-top:10px;} 
#cgv-open span, #mentions-open span {font-size: 1.3em; font-weight: bold; display: block;} 
#cgv-open:target, #mentions-open:target {height:100%;}
.copy {text-align:center; padding:10px;}

/*   Price   */
.price-block {margin:0 auto 15px; width:270px; position:relative;}
.price-num {background-color: #fff; border: 1px solid #d9d9d9; color: #a50f78; font-family: Arial; font-size: 19px; font-weight: bold; height: 32px; margin: 2px; padding-left: 5px; line-height:33px; text-align: left;}
.price-img {left: 130px; position: absolute; top: -2px;}
.price-img img {width: 100%; height: auto;} 



/*   responsive   */

.desktop {display:block;}
.mobile {display:none;}

@media only screen and (max-width:1075px) {
	.profil-page-block-photo  {width: 50%;}
	.profil-page-block-texte {width: 50%; padding:0;}
	.block-profil-plus {margin-top: 20px; width: 100%; overflow: hidden;}
	article.block-profil-plus-article {
		-webkit-column-width:150px; /* Chrome, Safari, Opera */
		-moz-column-width:150px; /* Firefox */
		column-width:150px;}
}


@media only screen and (max-width:900px) {
	.accroche {font-size: 15px;}
}

@media only screen and (max-width:650px) {
	.profil-page-block-photo  {width: 100%; padding:0;}
	.profil-page-block-texte {width: 100%; padding:0; margin-top: 15px;}
}

@media only screen and (max-width:600px) {
	.logo {width:100%; padding: 5px 5px 5px 20px;}
	.accroche {display:none;}
}

@media only screen and (max-width:520px) {
	.desktop {display:none;}
	.mobile {display:block;}
	h1 {font-size: 1.5em;}
	h2 {font-size: 1.1em;}
	h3 {font-size: 1.1em;}
	h3 span {font-size: 1.5em;}
	.profil-bouton { margin-bottom: 0;}
}

.tarif-block {
    margin: auto;
    width: 280px;
    position: relative;
}
	
.tarif-num {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    color: #a50f78;
    font-family: Arial;
    font-size: 19px;
    font-weight: bold;
    height: 32px;
    margin: 2px;
    padding-left: 5px;
    line-height: 33px;
    text-align: left;
}
	
.tarif-img {
    left: 135px;
    position: absolute;
    top: -2px;
}