:root {
	--primary-color: #2A6FE8;	/* Bleu intense */
	--secondary-color: #FF8A00;	/* Orange */
	--main-background: #3790F3;
	--secondary-background: #F2F4F8;
	--texte-principal: rgba(0,0,0,.78);
	--texte-secondaire: #3F4754;
	--metadonnees: #8A94A6;
	--texte-entete: #FFF7EE;
	--texte-edito: #4f5f6f;
	--taille-menu: 240px;
	--cinema-dark: #253048;
}
html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, b, i, ol, ul, li, input, fieldset, form, label, legend, embed, audio, video, button {margin:0;padding:0;border:0;}
html, body {
	height: 100%;
}
body {
	background: var(--main-background) url(images/bg.svg) center no-repeat fixed;
	background-size: cover;
	display: flex;
	flex-direction: column;
}
body, input, textarea {font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14.5px; font-weight: 400; line-height: 1.5; color:var(--texte-principal);}
textarea, input, select {outline: none;}
a {color:var(--primary-color); text-decoration:none;}
a:hover {color:var(--secondary-color);}
iframe {width:100%;height:100%;overflow:hidden;}
ul {text-align:left;list-style-type:none;}
li {font-weight:700;height:20px;}
p {margin: 15px 0;}
button{cursor:pointer;user-select:none;outline:none;border:none;font-family:inherit;font-size:100%;text-transform:none;background:none}

#header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
    position:fixed;
	top: 0;
	left: 0;
	z-index: 11000;
    width:100%;
	height: 60px;
	background: linear-gradient(#009DE0,var(--primary-color));
	border-bottom: 1px solid #245fcc;
	box-sizing: border-box;
}
.logo {
	height: 60px;
	margin-left: 60px;
	margin-bottom: 1px;
	display: flex;
	align-items: center;
}
#global {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	overflow: visible;
	position:relative;
	justify-content: center;
	align-content: flex-start;
	margin-top: 60px;
	align-self: center;
	max-width: 1500px;
	flex: 1;
}
.textbox
{
	width:100%;
	margin: 0;
	display: flex;
	justify-content: center;
	padding: 15px;
}
.footer
{
	display: flex;
	align-items: center;
	width:100%;
	background-color: #2B2F36;
	margin: 0;
	color:#C9D1D9;
	font-size:12px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.footer a {
	display: flex;
	align-items: center;
	color:#C9D1D9;
	padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.08);
	text-align: center;
	height: 38px;
}
.footer a:hover{color:var(--secondary-color);}
.textfoot {display: flex; align-items: center; flex-grow: 1; padding: 0 15px;}
.colonne_droite {
	margin: 15px 0 15px 15px;
	width: 367px;
}
.content, .content_wide {
	margin: 15px 0 15px 0;
	width:100%;
	box-sizing: border-box;
}
.Lside {width:100%;max-width:922px;}
.content_wide, .Gside {max-width:1054px;}
.Gside {width:100%;}
.content, .colonne_droite, .content_wide {
	padding: 15px;
	background-color: #fff;
	border-radius: 16px;
}
.content, .colonne_droite, #content_game, .content_wide {box-shadow: 0 8px 22px rgba(0, 0, 0, 0.11);}
.cons_head
{	
	display: flex;
	align-items: center;
	height: 40px;
	padding-left: 15px;
	border-radius: 8px 8px 0 0;
}
.cons_head{text-shadow: 0 0.5px 0 rgba(0,0,0,0.12); background: var(--secondary-color); border-bottom: 1px solid rgba(0,0,0,0.12);}
.cons_content
{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
	background-color:var(--secondary-background);
	padding: 15px 0 0 15px;
	text-align:left;
	border-radius: 0 0 8px 8px;
	border: solid 1px #D7DDE7;
	border-top: 0;
}
.fil 
{
	width: 100%;
	margin: -5px 15px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
}
.fil a {
	font-weight: 500;
}
.edito
{
	width: calc(922px + 412px);
	display: flex;
	flex-direction: column;
	padding: 0;
	text-align:left;
	color:var(--texte-edito);
}
.edito a {color:var(--texte-edito);}
.edito h1, .edito h2 {font-weight:700; font-size:15px; color:var(--texte-edito);}
.edito-box {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  border-top: 3px solid var(--secondary-color);
  border-radius: 16px;
  padding: 20px 22px;
  margin-top: -15px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.entete, .popTitle {color:var(--texte-entete); font-weight:700; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.entete {font-size:19px;font-weight: 500;letter-spacing: -0.2px;}
h1.entete, h2.entete {margin-top:0; padding:0;}
.title_misc {font-size:15px;color:var(--primary-color);}
.gray {color:var(--metadonnees);font-size:13px;}

.plug_single
{
	width: 100%;
	margin:0 15px 0 0;
	padding:0 0 10px 0;
}
.plug_image
{
	width: 160px;
	height:120px;
	position:relative;
	padding:0;
	margin:0 15px 15px 0;
}
.plug_image img
{
	width:160px;
	height:120px;
	margin:0;
	padding:0;
	border-radius:8px;
}
.thumbwrap
{
	height: 100%;
	transition: filter 0.12s ease;
}
.thumbwrap:hover
{
	transform: scale(0.97);
	filter: brightness(1.15);
}
.game_title
{
	position:absolute;
	bottom:0;
	left:0px;
	width:152px;
	height:16px;
	line-height:15px;
	padding:0 4px 0 4px;
	color:#FFF;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 0 0 8px 8px;
	font-size:12px;
	font-weight:500;
	text-align:center;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#content_game {
	margin-top: 15px;
	overflow: hidden;
	border-radius: 0 0 16px 16px;
}
#game_container
{
	background-color:var(--cinema-dark);
	padding: 15px;
}
.jeu
{
	position: relative;
	margin: 0 auto;
	padding:0;
	text-align:center;
	background: #000;
}
.rubrique
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight:700;
	font-size:14px;
	color: rgba(0,0,0,.78);
	margin: 16px 0 10px;
	padding: 6px 0;
	line-height:18px;
}
.rubrique img
{
	display: block;
	flex:0 0 auto;
	opacity: .7;
}
.rubrique span {
  display:block;
  line-height:18px;
  margin-top:-3px;
}
.rubrique::after
{
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(0,0,0,.12);
	margin-left: 10px;
	align-self:center;
}
.gametags{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 8px;
}
.gametags a, .envoimes{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	color: rgba(0,0,0,.75);
	background: rgba(0,0,0,.04);
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 999px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}
.gametags a:hover, .envoimes:hover{
	background: rgba(0,0,0,.08);
	border-color: rgba(0,0,0,.18);
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.gametags a:active, .envoimes:active{
	background: rgba(0,0,0,.12);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.mailform {width: 100%;border: 0;margin: 0;border-collapse: collapse;}
.mailform td {padding: 4px;}
.formcontact {width: 100%; border: solid 1px #CCDBE4;padding: 5px 10px; box-sizing: border-box; border-radius: 5px;}
.divider{
  height: 1px;
  width: 100%;
  margin: 10px 0;
  background-color: #ddd;
  box-shadow: 0 1px 0 #fff;
}
.delete{background:transparent url(images/favorite-x.png) no-repeat;height:7px;width:8px;cursor:pointer;position:relative;float:right;margin:0 -8px 0 0;}
.slot_header {
	height: 90px;
	margin-top: 15px;
	width: 100%;
	display: flex;
	justify-content: center;
}
.slotRight {
	height: 250px;
	margin: 15px 0 0 15px;
	text-align: center;
}
.slotGside {margin: 15px 0 0 112px;}
.slot_header, .slotRight, .slotGside {
	border-radius: 16px;
	background: rgba(255,255,255,.20);
	box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.30);
}
.grayfilter img{filter: grayscale(1);opacity: 0.6;}
#simGames_top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 15px 0 0 15px;
	text-align: left;
	margin-bottom: -15px;
}
/* NAVIGATION */
#menuToggle{display:flex;flex-direction:column;position:fixed;top: 3px;left:15px;height:60px;justify-content:center;z-index:11001;-webkit-user-select:none;user-select:none}
#menuToggle input{display:flex;width:26px;height:20px;position:absolute;cursor:pointer;opacity:0;z-index:9;margin-bottom: 5px;}
#menuToggle > span{display:flex;position:relative;width:26px;height:3px;margin-bottom:5px;background:#f6f6f6;border-radius:3px;z-index:5;transform-origin:2px 0;
  transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease}
#menuToggle > span:first-child{transform-origin:0% 0%}
#menuToggle > span:nth-last-child(2){transform-origin:0% 100%}
#menuToggle input:checked ~ span{opacity:1;transform: rotate(45deg) translate(0, 0);background:#999}
#menuToggle input:checked ~ span:nth-last-child(3){opacity:0;transform:rotate(0deg) scale(0.2, 0.2)}
#menuToggle input:checked ~ span:nth-last-child(2){transform:rotate(-45deg) translate(0, 0)}
#menuToggle input:checked ~ ul{transform:none}
#menu{position:fixed;top: 0;left: -19px;overflow:hidden;width:var(--taille-menu);height:100vh;box-shadow: 3px 0 12px rgba(0, 0, 0, 0.08);background-color:var(--secondary-background);transform-origin:0 0;transform:translate(-100%, 0);transition: transform 0.5s cubic-bezier(0.80,0.2,0.05,1.0), width .15s ease-in-out;scrollbar-width: thin;}
#menu:hover {overflow-y: auto;}
@media (hover: none) {#menu{overflow-y: auto;}}
#menu li{display:flex;justify-content:flex-start;align-items:center;transition-delay:2s;margin-left:20px;border-top:solid 1px #fff;border-bottom:solid 1px #E1E6EF}
.navover a{
	flex:1;
	padding:0 10px 0 10px;
	white-space:nowrap;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	height: 100%;
	transition: color .2s ease, background-color .2s ease;
}
.navover a:hover{
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)), rgba(255, 165, 0, 0.12);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06);
}
.navover a .navicon, .navover a div{
	transition: transform .2s ease;
}
.navover a:hover .navicon, .navover a:hover div{
	transform: translateX(4px);
}
.navicon{
  display:inline-block;
  width:30px;
  height:36px;
  margin-right:10px;
  background:url('/images/icons/icons-sprite.png') no-repeat;
}
.navhash{
    font-size: 22px;
    font-weight: 700;
    color: #6b7c93;
    display: flex;
    align-items: center;
    justify-content: center;
}
.navicon.navhash{
	background:none;
}
.categ-1{ background-position:0 0px; }
.categ-2{ background-position:0 -36px; }
.categ-3{ background-position:0 -72px; }
.categ-4{ background-position:0 -108px; }
.categ-5{ background-position:0 -144px; }
.categ-6{ background-position:0 -180px; }
.categ-7{ background-position:0 -216px; }
.categ-8{ background-position:0 -252px; }
.tag-1{ background-position:0 -288px; }
.tag-2{ background-position:0 -324px; }
.tag-3{ background-position:0 -360px; }
.tag-4{ background-position:0 -396px; }
.tag-5{ background-position:0 -432px; }
.tag-6{ background-position:0 -468px; }
.tag-7{ background-position:0 -504px; }
.tag-8{ background-position:0 -540px; }
.tag-10{ background-position:0 -576px; }
.tag-11{ background-position:0 -612px; }
.tag-12{ background-position:0 -648px; }
.tag-13{ background-position:0 -684px; }
.tag-14{ background-position:0 -720px; }
.tag-15{ background-position:0 -756px; }
.tag-16{ background-position:0 -792px; }
.tag-17{ background-position:0 -828px; }
.tag-18{ background-position:0 -864px; }
.tag-19{ background-position:0 -900px; }
.tag-20{ background-position:0 -936px; }
.tag-21{ background-position:0 -972px; }
.tag-22{ background-position:0 -1008px; }
.tag-23{ background-position:0 -1044px; }
.tag-24{ background-position:0 -1080px; }
.navhome{height:60px;border-bottom:solid 1px #d5d5d5}
.navhome a{padding: 0 8px;}
.navhome svg {width: 26px;height: 18px;}
.navclose{width:45px;height:60px;background:#e5e5e5;border-right:solid 1px #ccc}
.navover{white-space:nowrap; height: 48px}
.navover .border0{border-left:solid 8px var(--secondary-color)}
.navover .border1{border-left:solid 8px var(--primary-color)}
.navover .border2{border-left: 8px solid #6b7c93;}
/* ICONS */
@font-face {font-family:'icons';src:url('images/fonts/icons.eot');src:url('images/fonts/icons.eot?5zga90#iefix') format('embedded-opentype'),url('images/fonts/icons.ttf') format('truetype'),
  url('images/fonts/icons.woff') format('woff'),url('images/fonts/icons.svg?5zga90#icons') format('svg');font-weight:normal;font-style:normal;font-display:block}
[class^="icon-"]{font-family:'icons' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none}
.icon-search:before, .icon-search2:before{content:"\e901"}
.icon-fav:before{content:"\e906"}
.icon-close::before {content: "\e903";}
.icon-search {position: absolute;top: 8px;right: 10px;font-size: 17px;color: #f6f6f6;}
.icon-search2 {display:none; position: static; font-size: 20px; margin-right: 15px;color: #f6f6f6;}
.icon-close {position: absolute;top: 23px;right: 20px;font-size: 13px;color: #f6f6f6;}
/* SEARCH */
.headwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
	flex-grow: 1;
}
.search{position:relative}
.search input, .search2 input{border-radius: 8px;}
#search{width:400px;height: 36px;padding:0 40px 0 15px;border:solid 1px #D6DCE6;background-color:#F4A340;color:#fff;}
#search:hover{background-color: #F5AE55;}
#search:focus {background-color:#F39A2B; border:1px solid #E88B12;}
.search2 {
	opacity: 0;
	height: 0;
	position: absolute;
	z-index: 10;
	top: 60px;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	overflow: hidden;
	transition: opacity 200ms ease, height 300ms ease;
}
.search2.visible {
	opacity: 1;
	height: 100vh;
}
#search2 {
    width: calc(100vw - 65px);
    margin: 14px;
    padding: 8px 15px;
    background-color: #fc8906;
    color: #fff;
}
.search2 form {background-color: var(--primary-color);}
/* FLAGS */
.flag svg {
    width: 32px;
    height: 22px;
	border-radius: 4px;
}
.flag {
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.15);
	height: 60px;
	display: flex;
	align-items: center;
}
.flag:hover {
    opacity: 1;
	filter: brightness(1.08) saturate(1.05);
}
.favHead {
	font-size: 22px;
	color: #E9EEF3;
	padding: 0 20px;
}
.favHead:hover {
	color: #FFFFFF;
}
/**********************************************
RATING STARS
**********************************************/
.ratingstars{width:100%;height:14px;background:url(images/stars.svg) no-repeat top left;font-size:1px !important}
.stars-0{background-position:0 -1px}
.stars-1{background-position:0 -15px}
.stars-2{background-position:0 -29px}
.stars-3{background-position:0 -43px}
.stars-4{background-position:0 -57px}
.stars-5{background-position:0 -71px}
.stars-6{background-position:0 -85px}
.stars-7{background-position:0 -99px}
.stars-8{background-position:0 -113px}
.stars-9{background-position:0 -127px}
.stars-10{background-position:0 -141px}
.ratingstars span {font-size:13px;color:var(--metadonnees);margin-left:90px;display:inline-flex;height:100%;align-items:center;}
/**********************************************
MENU DE TRI
**********************************************/
.sortMenu {
	float: right;
	position:relative;
	margin: -41px 0 0 0;
	text-align: left;
}
.sortMenu, .sortMenu a, .sortMenu li {font-size:14px; color:var(--texte-entete); font-weight:normal;}
.sortMenu a, .sortMenu span {padding:0 7px;}
.sortMenu .actif {cursor: pointer; font-weight:500;}
.sortMenu li {display:inline-block; height: 40px; line-height:40px; vertical-align: middle;}
.sortMenu li.actif, #tri_menu li {overflow:hidden; width:165px;}
.sortMenu li.actif {border-left: 1px solid rgba(255,255,255,0.25); border-top-right-radius: 8px;}
.sortMenu img {float: right; padding-right: 5px;margin-top: 3px;}
.sortMenu a {display:block;}
#tri:hover {background: rgba(255,255,255,0.12);}
#tri_menu {position:absolute; z-index:9999; background: var(--secondary-color); height: 0; overflow: hidden; transition: height 240ms ease;}
#tri_menu li {border-top: 1px solid rgba(255,255,255,0.25);}
#tri_menu li:hover {background: rgba(255,255,255,0.12);}

.moreGames {
	float: right;
	position:relative;
	margin: -41px 0 0 0;
	border-left: 1px solid rgba(255,255,255,0.25);
	height: 40px;
}
.moreGames a {display:inline-block; width:41px; height: 41px;}
.moreGames a:hover {background: rgba(255,255,255,0.12);}
.moreGames img {margin-top: 3px;}
/**********************************************
FIL SINGLE
**********************************************/
.fil_single {
	font-size: 13px;
	color: rgba(255,255,255,0.75);
	margin: 0 15px;
	display: flex;
	gap: 6px;
	align-items: center;
	text-shadow: none;
	white-space: nowrap;
}
.fil_single a {
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	transition: color .15s ease;
}
.fil_single a:hover {
	color: #fff;
	text-decoration: underline;
}

/**********************************************
PAGINATION
**********************************************/
div.pagination {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 14px;
	margin: 10px 10px 20px 0;
}

div.pagination a {
	border: 1px solid #b7d4e6;
	margin: 5px;
	padding: 3px 13px;
	border-radius: 5px;
	font-weight: 600;
}
div.pagination a:hover, div.pagination a:active {
	background-color:var(--primary-color);
	color: #fff;
}
div.pagination span.current {
	padding:2px 6px;
	font-weight: 700;
}
/**********************************************
INFOBULLE
**********************************************/
.plug_image:hover .popup{
    opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 45ms ease-out, transform 45ms ease-out;
}
.popup {
    position: absolute;
	opacity: 0;
	visibility: hidden;
	top: -146px;
	left: -40px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.1px;
	color: var(--texte-secondaire);
	height:136px;
    width:250px;
	z-index:11002;
	text-align:left;	
	text-overflow:ellipsis;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	transform: translateY(2px);
	transition: none;
}
/* Flèche - couche extérieure (bord / ombre) */
.popup::before {
	content: "";
	position: absolute;
	top: calc(100% + 1px);               /* placé SOUS la bulle */
	left: 50%;
	transform: translateX(-50%);
	border-width: 11px;
	border-style: solid;
	border-color: #D8DEE6 transparent transparent transparent;
}
/* Flèche - couche intérieure (fond blanc) */
.popup::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 10px;
	border-style: solid;
	border-color: #FAFBFC transparent transparent transparent;
}
.popup, .popup::before, .popup::after {pointer-events: none;}
.popwrap {
	height: 100%;
	background: #FAFBFC;
	border: 1px solid #D8DEE6;
	border-radius: 8px;
	overflow: hidden;
}
.popup span {font-size:11.5px; color:var(--metadonnees);}
@media (pointer: coarse) {
	.popup {display: none !important;}
}
.popTitle {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	padding: 7px 10px;
	background: #1C86E4;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.popContent {padding: 5px 10px 10px 10px;}
.popDesc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/**********************************************
SLIDER
**********************************************/
.slider {display:flex; align-items: center; height:40px; background-color: var(--secondary-background);}
.slid1 {width:30%; text-align: center;}
.slid1 img {margin-top:4px; cursor:pointer;}
.slid1 img:hover {
  filter: brightness(1.15);
}
.slid2 {width: 40%; margin-top:4px;text-align: center;}
.slid3 {width:30%; height:100%; display: flex;justify-content: center;align-items: center;}
.slider-separator {
  width: 1px;
  height: 100%;
  background: linear-gradient( to right, rgba(0,0,0,0.18), rgba(255,255,255,0.75) );
  box-shadow: 1px 0 0 rgba(255,255,255,0.75);
}
#fullscreen{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  background: transparent;
  color: var(--primary-color);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
#fullscreen .icon{
  width: 26px;
  height: 26px;
  fill: currentColor;
}
#fullscreen:disabled {
  opacity: 0.4;
}
#fullscreen .tooltip{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cinema-dark);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  transform-origin: bottom center;
}
#fullscreen .tooltip::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--cinema-dark);
}

#fullscreen:hover .tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
/**********************************************
PREROLL
**********************************************/
#preloader{overflow:hidden;position:relative;width:100%;height:650px;margin:0 auto;border-radius: 8px;}
#playGame{cursor:pointer;position:absolute;display:block;width:100%;height:100%;background-color:transparent;z-index: 9;}
#playImg{position:absolute;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;filter: blur(50px) brightness(1.5);}
#playButton{
	position:absolute;
	height: 52px;
	padding: 0 28px;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .04em;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:#fff;
	background: var(--secondary-color);
	white-space:nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 2px 0 rgba(0,0,0,.10);
	text-shadow: 0 1px 2px rgba(0,0,0,.22);
	transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease;
	z-index:10;
	cursor:pointer;
}
#playButton::after{
	content:"";
	position:absolute;
	inset: 1px;
	border-radius: 13px;
	background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
	pointer-events:none;
}
#playButton:hover{
	transform: translate(-50%, calc(-50% - 1px));
	box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.10);
	filter: brightness(1.05);
}
#playButton:active{
	transform: translate(-50%, calc(-50% + 1px));
	box-shadow: 0 5px 14px rgba(0,0,0,.20);
	filter: brightness(0.98);
}
#playButton .icon{
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
#playName{
	position:absolute;
	width:90%;
	text-align:center;
	top:75%;
	left:50%;
	font-size:20px;
	font-weight:600;
	letter-spacing: 0.2px;
	transform:translate(-50%, -50%);
	padding:18px 0;
	color:#fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	background: linear-gradient(to right,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.35) 35%,rgba(0, 0, 0, 0.35) 65%,rgba(0, 0, 0, 0) 100%);
	backdrop-filter: blur(2px);
}
.playThumb {position: absolute;top: 30%;left: 50%;border: 2px solid #eff;border-radius: 12px;transform: translate(-50%, -50%);}
/**********************************************
BOUTON CLOSE GAME
**********************************************/
#closegame {
    display: none;
    position: absolute;
    align-items: center;
    z-index: 999;
    left: 0;
    top: 24px;
    background: linear-gradient(#a0d5e9,#0e8dcb);
    padding: 5px 5px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.30);
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
#closegame #iconarrow {width: 9px;height: 15px;margin-right: 5px;transform: scaleX(-1);fill: #f6f6f6;}
#closegame #iconsite {width: 37px;height: 30px;}
#closegame * { pointer-events: none; }
/**********************************************
JRATING
**********************************************/
.jRatingAverage{background-color:var(--primary-color);position:relative;top:0;left:0;z-index:2;height:100%}
.jRatingColor{background-color:#ffbe04;position:relative;top:0;left:0;z-index:2;height:100%}
.jStar{position:relative;left:0;z-index:3}
p.jRatingInfos{position:absolute;z-index:9999;background:transparent url(js/jrating/icons/bg_jRatingInfos_new.png) no-repeat;color:#fff;display:none;width:91px;height:29px;font-size:16px;text-align:center;padding-top:5px}
p.jRatingInfos span.maxRate{color:#c9c9c9;font-size:14px}
/**********************************************
MEDIA QUERIES
**********************************************/
@media only screen and (min-width:1730px) {
	#global {margin-left: 220px !important; width: calc(100% - 220px) !important;}
	#menu {width: var(--taille-menu) !important;}
}
@media only screen and (min-width:1020px) {
	#global {margin-left: 58px; width: calc(100% - 58px); transition: margin-left .5s cubic-bezier(.8,.2,.05,1),width .5s cubic-bezier(.8,.2,.05,1);}
	#menu {width: 78px;}
	body:has(#menuToggle input:checked) #global{margin-left: 0 !important;width: 100% !important;}
	#menu:hover {width: var(--taille-menu);}
	#menu li.navhome {display:none;}
	#menu {top: 60px; height: calc(100vh - 60px);}
	#menuToggle input:checked ~ span {background: #f6f6f6;}	
	#menuToggle input ~ ul{transform:none}
	#menuToggle input:checked ~ ul{transform:translate(-100%, 0)}
	
	#menuToggle input:not(:checked) ~ span{transform: rotate(45deg) translate(0, 0);}
	#menuToggle input:not(:checked) ~ span:nth-last-child(3){opacity:0;transform:rotate(0deg) scale(0.2, 0.2)}
	#menuToggle input:not(:checked) ~ span:nth-last-child(2){transform:rotate(-45deg) translate(0, 0)}
	
	#menuToggle input:checked ~ span{transform: none}
	#menuToggle input:checked ~ span:nth-last-child(3){opacity: 1;transform: none}
	#menuToggle input:checked ~ span:nth-last-child(2){transform: none}
}
@media only screen and (max-width:1570px) {
	.Gside, .content_wide {max-width: 930px;}
}
@media only screen and (max-width:1450px) {
	.Lside {max-width: 747px;}
	.edito {width: calc(747px + 412px);}
	.rGside .colonne_droite {max-width: 930px; margin: 0 0 15px 0; width: 100%; box-sizing: border-box;}
	#slotG1 {width: 160px !important; margin-top: 120px !important;}
	#slotG2 {display:none;}
	#slotG3 {display:block !important;}
	.slotGside {margin:0; position: absolute; right:0; background: transparent; box-shadow: none; border-radius: 0;}
	.Gside, .content_wide, .rGside {margin-right: 160px;}
	#preloader{height:500px;}
}
@media only screen and (max-width:1270px) {
	.Lside {max-width: 572px;}
	.edito {width: calc(572px + 412px);}
	.Lside .slot_header {display:none;}
	.slotGside {display:none;}
	.Gside, .content_wide, .rGside {margin-right: 0;}
}
@media only screen and (max-width:1100px) {
	.slotRight {display:none;}
	.Lside {max-width: 747px;}
	.Rside .colonne_droite {max-width: 717px;width: 100%;margin: 0 0 15px 0;}
	.edito {width: 747px;}
	.Lside .slot_header {display:flex;}
}
@media only screen and (max-width:950px) {
	.content, #game_container, .colonne_droite, .content_wide {margin:0 !important; padding:0; border-radius:0; border:0;}
	.Lside, .colonne_droite, .Gside, .content_wide {max-width: 950px !important;}
	.edito {width: 100%;}
	.textbox {border-top: 1px solid rgba(0, 0, 0, 0.10);margin:0;background: rgba(255,255,255,.55);}
	.edito-box {all: unset;}
	.sortMenu li.actif {border-top-right-radius: 0;}
	.slot_header {margin-bottom: 15px;}
	.cons_head {border-radius:0;}
	#preloader {border-radius:0}
	#header,.content,.colonne_droite, #content_game {box-shadow: none;}
	.cons_content {border:none;border-radius:0;}
	#content_game {margin: 0;border-radius: 0;}	
	.headwrap {justify-content: flex-end;}
	.search {display: none}
	.favHead, .flag {display: none;}
	.icon-search2 {display:block;}
	#simGames_top {display:none}
	#simGames_0 {display:contents !important;}
	#simGames_end {display:none !important;}
}
@media only screen and (max-width:800px) {
	.slot_header {display:none !important;}
	#slotMobi {display:block !important;}
}
@media only screen and (max-width:600px) {
	#preloader {height: 250px}
	#playName {display:none}
	.playThumb {top:35%}
	#playButton {top:80%}
	#content_game .cons_head, .slider {display:none}
	#favorite2 {display: block !important;}
	#content_game {margin: 0;border-radius: 0;}
}
@media only screen and (max-width:400px) {
	.cons_content {padding: 15px 0 0 10px;}
	.plug_image {margin:0 10px 15px 0;}
}
@media only screen and (min-width:310px) and (max-width:350px) {
  .plug_image {width: 140px;height: 105px;}
  .plug_image img {width: 140px;height: 105px;}
  .game_title {width: 132px;}
}
@media only screen and (max-width:340px) {
	.textfoot img {height: 15px;width: 86px;}
	#favorite2 {float: none !important;margin: 15px 0 0 0 !important;}
}