@charset "utf-8";

* {box-sizing:border-box;}

body {background-color:#111; color:#fff; font-family:'Roboto', sans-serif; margin:0; padding:0;}
a {color:#fff; text-decoration:none;}
header {margin: 10px auto; width: 100%; max-width: 1308px; overflow: hidden;}
.logo { float:left; padding:10px; }
.head {float:left; padding:10px; border-left: 3px solid #555; height: 110px;}
.mobile {display:none;}
.logo img {width:100%; max-width:306px; height:auto; padding-top: 11px;}
.head-right { float:left; text-align: center; margin-top: 24px }
.one { margin-top:0;}
.etape {border-radius: 50%; text-align: center; background: #ff2b2b; width:40px; height:40px; padding:4px; font-weight:700; float:left; font-size:25px; margin-right:10px; margin-top:24px; }
.text-top {font-weight: 700;}
.numero {background: #fff; color:#a50f78; display: inline-block; padding: 5px 15px; font-weight: 900; font-size: 30px; border-radius: 10px; overflow: hidden;}
.numero img {width: 31px; height: auto; margin-left: 10px;}
.numero a { color:#a50f78;}
.text-bottom { }
h1 {background: #ff2b2b; padding:10px; font-size:28px; text-align:center;}
h2 {margin: 10px auto; font-size: 14px; font-weight: 400; color: #fff; text-align: center; max-width: 940px;}
section {width:100%; max-width:2350px; margin: auto; padding:10px; overflow:hidden;}
/*article {width: 100%; -moz-column-width:22em; -webkit-column-width:22em; column-width:22em; -moz-column-gap:0.2em; -webkit-column-gap:0.2em; column-gap:0.2em; position:relative; display: inline-block; overflow: hidden;}*/
article {width:100%; display: grid; grid-gap: 10px; grid-template-columns: repeat(5, 20%); position: relative; overflow: hidden;}

.texto {text-align: justify;}
.profil {width:100%; position:relative;}
.photo {width:100%; position:relative;}
.illu {width:100%; overflow:hidden;}
.illu img {width:100%; height:auto; }
section .hot { display:none; }
.profil:first-child .hot {display: block; position: absolute; z-index: 100; left: 10px; top: 5px; background: #ff0000; padding: 2px 7px; font-weight: 700; font-size: 12px; border-radius: 4px; }
.profil:nth-child(n+22) {opacity: 0.3;}
.pseudo {font-size: 18px; padding: 6px 12px 6px 6px; position: absolute; z-index: 100; bottom: 8px; left: 5px; background: #ff2b2b; border-radius: 6px;}
.pseudo span {display:block; font-size:0.8em; font-weight:normal; color:#fff; font-style:italic;}
.pseudo img {width: 100%; height: auto; max-width: 21px; margin-bottom: -4px;}
.lang {position: absolute; z-index: 100; top: 2px; right: 5px; text-align:right;}
.lang img {width:30%; height: auto;}
.barre {text-align:center; margin:30px auto 60px; font-size: 15px; font-weight: 400; overflow:hidden;}
.barre a {padding:10px 20px; background:#fff; color:#a50f78; text-decoration:underline; border-radius:10px; font-size: 35px; font-weight: 900; display:inline-block;}
footer {background-color: #ff2b2b; text-align:center; margin:30px 5px; padding:20px 10px; overflow:hidden;}
.footer-texte {margin-bottom: 10px;}

/*   price   */
.price {margin: auto; margin-bottom:5px; display: inline-block;}
.price-left {float:left;}
.price-right {float:right;}
.price1 {margin:auto; width:245px; height:25px; position:relative;}
.price2 {background-color:#fff; border:1px solid #d9d9d9; color:#a50f78; font-family:Arial; font-size:18px; font-weight:bold; height:24px; text-align: left; margin:2px; padding-left:5px; line-height:24px;}
.price3 {height:30px; left:125px; position:absolute; top:-2px;}
.price3 img {width:auto; height:100%;}


@media only screen and (max-width:1290px) {
	article {grid-template-columns: repeat(4, 25%);}
	.logo, .head {width:50%;}
	header {max-width: 670px; margin:0 auto;}
	.head-right {float: none;}
	.head {height:auto;}
	.mobile {display: block; width: 100%; text-align: center; border: none; }
	.second, .last, .etape {display:none;}
	.one { width:100%;}
	.numero {font-size: 34px;} 
}

@media only screen and (max-width:639px) {
	article {grid-template-columns: repeat(2, 50%);}
	.logo, .head {width:100%; float:none; text-align:center;}
	.logo { padding:0;}
	header {max-width: 100%;}
	.first {border:none;}
}

@media only screen and (max-width:480px) {
	.desk {display: none;}
	article {grid-template-columns: repeat(1, 100%);}
	h1 {font-size: 20px;}
	h2 {font-size: 12px;}
	.lang {top: 2px; right: 2px;}
	.lang img {width:30%;}
	.mobile {display: none;}
}