html, body {
  margin: 0;
  padding: 0;
  width: 100%;
    overflow-x: hidden;
}



img {
	border: 0px;
}
/* REQUIRED CSS STYLES */
.game_not_found {
	height: 170px;
	padding-top: 130px;
	font-family: Arial;
}
#no_games {
	font-family: Arial;
	text-align: center;
	padding-top: 30px;
}
/* REQ:5 STAR RATING CSS */
#rateStatus{float:left; clear:both; width:100%; height:20px;}
    #rateMe{float:left; clear:both; width:100%; height:auto; padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on{background:url(images/star.png) no-repeat;}
    #rateMe a{float:left;background:url(images/empty_star.png) no-repeat;width:20px; height:20px;}
    #ratingSaved{display:none;}
    .saved{color:red; }

#comments ul {
	list-style: none;
	margin:0px;
	padding:0px;
	padding:8px 10px 15px 8px;
}

#comments ul li {
	color:#FFF;
	line-height: 150%;
	margin-bottom:8px;
	overflow:auto;
	width:448px;
	background: #363636;
}
#error_message {
	padding: 5px 5px 0px 15px;
	background-color: #fff;
  font-size: 13px;  
}
#cgu_message {
	padding: 10px 5px 5px 15px;
	background-color: #fff;
  font-size: 13px;
}
#pm_task_complete {
	padding: 5px 5px 5px 10px;
	background-color: #f2eeb0;
	margin-bottom: 20px;
}
#member_list {
	width: 100%;
}
#member_list td {
	border-bottom: 1px solid #d2d2d2;
	height: 40px;
	color: #6f7c91;
}
#member_list td a {
	color: #db3b5b;
}
/* Survol de ligne un peu plus visible + liseré à gauche */
#member_list tr:hover td{
  background:#fafcff;
}
#member_list img {
	margin-top: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 5px;
    border-radius: 3px;
}

/* même base que ci-dessus, puis : */
@media (max-width: 560px){
  /* On masque l'entête de table */
  #member_list tr:first-child{ display:none; }

  /* Chaque ligne devient une carte */
  #member_list, #member_list tbody, #member_list tr{ display:block; width:100%; }
  #member_list tr{
    border:1px solid #eaeaea; border-radius:12px; background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    margin:0 0 12px; overflow:hidden;
  }
  #member_list td{
    display:flex; justify-content:space-between; gap:10px;
    border-top:none; padding:10px 12px;
  }
  /* Avatar seul en première "ligne" */
  #member_list td:first-child{ justify-content:flex-start; }
  #member_list td:first-child::before{ content:""; }

  /* Libellés automatiques */
  #member_list td:nth-child(2)::before{ content:"Pseudo"; font-weight:600; color:#666; }
  #member_list td:nth-child(3)::before{ content:"Points"; font-weight:600; color:#666; }
  #member_list td:nth-child(4)::before{ content:"Date";   font-weight:600; color:#666; }

  /* Evite les débordements moches */
  #member_list td:nth-child(2) a{ overflow-wrap:anywhere; }
  #member_list td:nth-child(3),
  #member_list td:nth-child(4){ white-space:nowrap; }
}
/* 1) Noms très longs: jamais de casse moche */
#member_list td:nth-child(2) a{
  display:inline-block;
  overflow-wrap:anywhere;   /* casse proprement si besoin */
  text-decoration:none;
}

/* 2) Chiffres et dates: toujours nets */
#member_list td:nth-child(3),
#member_list td:nth-child(4){
  white-space:nowrap;               /* évite le retour à la ligne en mobile */
  font-variant-numeric:tabular-nums;/* alignement des colonnes de chiffres */
}

/* 3) Mobile: on allège l'entête (icônes +/?) et on espace un peu */
@media (max-width:720px){
  #member_list tr:first-child td img{ display:none; } /* masque les petites icônes */
  #member_list td{ padding:10px 12px; line-height:1.35; }
}

/* Gold / Silver / Bronze rings */
#member_list tr:nth-child(2) td:first-child img{
  outline:none;
  box-shadow:0 0 0 2px #d6a73b, 0 0 0 6px rgba(214,167,59,.25);
}
#member_list tr:nth-child(3) td:first-child img{
  outline:none;
  box-shadow:0 0 0 2px #bfc6cf, 0 0 0 6px rgba(191,198,207,.25);
}
#member_list tr:nth-child(4) td:first-child img{
  outline:none;
  box-shadow:0 0 0 2px #c97c38, 0 0 0 6px rgba(201,124,56,.25);
}

/* === Badge rang 1/2/3 sur l'avatar (bas-droite) === */
#member_list{ --av: 40px;      /* taille avatar (px) */
              --bdg: 20px;     /* taille badge (px) */
              --bx: 46px;      /* X: décalage depuis le bord gauche de la cellule */
              --by: 30px; }    /* Y: décalage depuis le haut de la cellule */

#member_list td:first-child{ position:relative; }
#member_list td:first-child img{
  width:var(--av); height:var(--av);
  border-radius:50%; object-fit:cover; display:block;
}

/* base du badge */
#member_list tr:nth-child(2) td:first-child::after,
#member_list tr:nth-child(3) td:first-child::after,
#member_list tr:nth-child(4) td:first-child::after{
  position:absolute;
  left:var(--bx); top:var(--by);              /* ? ajuste si besoin */
  width:var(--bdg); height:var(--bdg); line-height:var(--bdg);
  border-radius:999px; text-align:center; font-weight:700; font-size:12px; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 0 0 2px #fff;
  pointer-events:none; z-index:2;
}

/* couleurs + numéros */
#member_list tr:nth-child(2) td:first-child::after{ background:linear-gradient(135deg,#f9e27d,#d6a73b); content:"1"; }
#member_list tr:nth-child(3) td:first-child::after{ background:linear-gradient(135deg,#e8eef5,#bfc6cf); content:"2"; }
#member_list tr:nth-child(4) td:first-child::after{ background:linear-gradient(135deg,#f2c199,#c97c38); content:"3"; }

/* Ajuste un poil en mobile (avatar visuellement plus bas) */
@media (max-width:560px){
  #member_list{ --bx: 72px; --by: 36px; }
}

/* ===== Desktop : lignes assez hautes + 1re colonne fixe ===== */
@media (min-width: 561px){
  /* 1) on enlève la hauteur forcée et on met du padding */
  #member_list td{
    height: auto !important;
    padding: 10px 12px;
    vertical-align: middle;
  }

  /* 2) colonne avatar/numéro : largeur fixe + centrée */
  #member_list td:first-child{
    width: 84px;              /* ajuste 76-92px selon ton goût */
    text-align: center;
    position: relative;       /* pour le badge ::after si tu l'utilises */
  }

  /* 3) avatar : rond, sans marge parasite */
  #member_list td:first-child img{
    width: 40px; height: 40px;
    margin-top: 0 !important;
    border-radius: 50% !important;
    object-fit: cover; display: inline-block;
    padding: 0 !important; border: none !important; background: transparent !important;
  }
}
/* ===== Tablette & Desktop : ligne assez haute + 1re colonne fixe ===== */
@media (min-width:561px){
  /* Hauteur auto (pas de coupe d'image) */
  #member_list td{
    height:auto !important;
    padding:10px 12px;
    vertical-align:middle;
  }
  /* Colonne avatar/badge : largeur fixe */
  #member_list td:first-child{
    width:86px;                 /* ajuste 82-90 si besoin */
    text-align:center;
    position:relative;
  }
  /* Avatar bien rond */
  #member_list td:first-child img{
    width:40px; height:40px;
    margin-top:0 !important;
    border-radius:50% !important;
    object-fit:cover; display:inline-block;
    padding:0 !important; border:none !important; background:transparent !important;
  }
}

/* ===== Position du petit badge 1/2/3 (overlay avec tes variables) ===== */
/* Tablette (? 561-720px) */
@media (min-width:561px) and (max-width:720px){
  #member_list{ --bx: 72px; --by: 36px; }   /* décale un peu à droite et vers le bas */
}
/* Desktop (?721px) */
@media (min-width:721px){
  #member_list{ --bx: 72px; --by: 36px; }
}


.link_item {
	padding:5px;
}
#login_to_comment {
	text-align: center;
	padding: 15px 0px 15px 0px;
}

.alert{padding:12px;margin:12px 0;border-radius:8px}
.alert.error{background:#fee;border:1px solid #f99}

.dropdown-submit{
font-size:15px;
font-family:Arial;
background:#fbfbfb url(images/3.png) left top repeat-x;
    background-size: contain;
font-weight:bold;
color:#555;
  text-shadow: 1px 1px 0 #FFFFFF;
min-width:66px;
height:54px;
margin-left:4px;
border:1px solid #b0b0b0;
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;cursor:pointer;
    display: block; 
    clear: both;
}

.dropdown-submit:hover{
border:#d0d0d0 solid 1px;
text-decoration:none
}

.dropdown-submit:disabled {
    color:#b0b0b0;
}

/* END OF REQUIRED CSS STYLES */
.content {
    width: 100%;
    max-width: 1042px;
    margin: auto;
    padding: 0 10px;
    background-color: #fff;
    box-sizing: border-box;
} 


.header_container {
	width: 1002px;
	margin: auto;
}

.header {
	width: 1002px;
	margin: auto;
	padding-top: 0px;
}

.language_select li {
    text-decoration: none;
    list-style: none;
        display: inline-block;    
}

.language_select li a {
    width: 18px;
    height: 18px;
    line-height: 16px;
    border: 1px solid #ccc;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    list-style: none;
    	font-size: 100%;
      padding:2px;
          
}

.lang_choice {
  margin: 0; /* pousse la div à droite */
  margin-top: 0px;
    margin-left: 8px;
    color: #ccc;
}

.lang-form {
float:left;
width:19px;
height:16px;
margin:3px 1px 1px 3px;
}

.lang_text {
float:left;
margin: 2px 5px 0px 1px;
color:#5#ccc;    
}

.online_text {
float:left;
margin: 2px 10px 0px 10px;
}

.lang_en-submit {
float:left;
width:19px;
height:16px;
border:0px;
background:#fff url(/images/en.png) repeat-x;
}

.lang_fr-submit {
float:left;
width:19px;
height:16px;
border:0px;
background:#fff url(/images/fr.png) repeat-x;
}

.logo {
	float: left;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
        margin-top: 8px;
    margin-bottom: 8px;
}
.loginhome {
    float:left;
    margin-top: 20px;   
}
.user_area {
	float: left;
	background: #ffffff;
	border-top: 0px;
	color: #6f7c91;
	font-family: Arial;
	width: 37%;
    margin-top:51px;
}
.user_area2 {
	float: left;
	background: #ffffff;
	border-top: 0px;
	color: #6f7c91;
	font-family: Arial;
	width: 37%;
    margin-top:51px;
}
.ua_avatar {
	float: left;
	margin: 0px 4px 0px 5px;
}

.ua_username {
	font-size: 16px;
	font-weight: bold;
	margin-top: 6px;
	float:left;
}
.ua_unregistered {
	font-size: 16px;
	font-weight: bold;
  color: #6f7c91;  
	margin-top: 6px;
}
.ua_points{
  float: left;
  background-color: #fff;
  /* 12px avec line-height fixe = hauteur stable sur tous les devices */
  font: 12px/18px Arial;
  color: #6f7c91;

  /* on évite l'empilement de corrections verticales variables */
  padding: 0 2px;
  margin: 7px 0 0 5px;          /* ? plus de margin-top */

  white-space: nowrap;        /* pas de retour à la ligne intempestif */
  -webkit-text-size-adjust: 100%; /* limite l'auto-zoom sur iOS/Android */
}
.ua_pointsboth {
    clear:both;
    margin-bottom:2px;
}

.ua_dep {
	float: left;
	background-color: #fff;
	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
	font-size: 12px;
	color: #333;
	padding: 0px 0px 0px 0px;
}

.ua_info {
	float: left;
	font-size: 14px;
	margin-left: 10px;
}

.ua_info a {
	color: #6f7c91;
	text-decoration: none;
}


.ua_info a:hover {
	text-decoration: underline;
}
/* ===== UA GAME (desktop) ===== */
.ua_game{
  float:left;
  width:195px;
  height:38px;
  background:#dadada;
  font-size:14px;
  padding:8px 0 0 52px;
  border:0;
  border-radius:5px;
  margin-top:51px;
  font-family:Arial;
  color:#6f7c91;
  position:relative; 
    /* pour l'icône/bouton interne */
}

  .ua_game b{
    flex:1 1 auto;
    min-width:0;                /* nécessaire pour l'ellipsis en flex */
    font-weight:700;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }


/* Le lien plein écran : plus de clear */
.ua_fs_link{
  clear:none !important;        /* ? casse la ligne sinon */
  display:inline;
  white-space:nowrap;
  text-decoration:none;
  color:#6f7c91;
}

@media (max-width:1050px){
  .ua_game{
    margin-top:35px;
  }
}

/* ===== Bouton overlay (inchangé) ===== */
.fs-btn{
  position:absolute; top:5px; right:8px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:42px; height:42px; border:0; border-radius:12px;
  background:#fb8c00; color:#fff; opacity:.85;
  box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; z-index:30;
  transition:opacity .15s ease, transform .08s ease;
}
.fs-btn:hover{ opacity:1; transform: translateY(-1px); }
.fs-btn:active{ transform: scale(.98); }
.fs-btn:focus-visible{ outline:2px solid #7aa2ff; outline-offset:2px; }

/* Variante dans la tuile UA */
.ua_game .fs-btn.ua{
  top:5px; left:8px; right:auto;           /* coin gauche */
  width:36px; height:36px; border-radius:6px;
  background:#fb8c00; color:#fff;
  box-shadow:none; opacity:1;
}
.ua_game .fs-btn.ua:hover{ background:rgba(0,0,0,.12); }

/* ===== Mobile : une seule ligne (titre + lien), bloc collé à gauche ===== */
@media (max-width:858px){
  .ua_game{
    width:100%;  
    max-width:320px;
    height:36px;
    float:none !important;      /* sort des floats */
    clear:both;                 /* revient à la ligne */
    display:flex;               /* 1 ligne : titre + lien */
    align-items:center;
    gap:10px;
    margin:3px 0 5px 10px;
    padding:8px 10px 8px 52px;  /* garde la pastille à gauche */
    box-sizing:border-box;
  }

  /* Titre du jeu (si tu as un <b> dans .ua_game) */
  .ua_game b{
    flex:1 1 auto;
    min-width:0;                /* nécessaire pour l'ellipsis en flex */
    font-weight:700;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .ua_fs_link{
    margin-left:auto;           /* pousse le lien à droite */
    white-space:nowrap;         /* reste sur 1 ligne */
  }

  .ua_game .fs-btn.ua{
    width:37px; height:26px;    /* bouton un peu plus petit en mobile */
  }
    .user_area2 {
        width: 60% !important;
        margin-top: 38px;
    }    
}

.ua_game a {
	color: #6f7c91;
	text-decoration: none;
}
.ua_game a:hover {
	text-decoration: underline;
}
.main_menu_container {
	font-family: Arial;
	font-size: 16px;
	text-align: left;
	padding-bottom: 0px;
}
.main_menu_container a {
	color: #fff;
	text-decoration: none;
}
.main_menu_container a:hover {
  text-decoration: underline;
}
.main_menu {
  float: left;
  width: 980px;
  color: #fff;
  margin: 2px auto 8px auto;
  padding: 3px 5px;
  background-color: #7791B9;
  border-radius: 5px;
}

/**************************************** MENU ****************************/

.center { 
  margin-left: auto; 
  margin-right: auto; 
  width: 979px; /* largeur obligatoire pour être centré */ 

}

#navigation {
	width: 1006px;
  margin: 0;
  padding: 0;  
	border: #333333 solid 0px;
	font-family: Verdena, Arial, Helvetica, sans-serif;
  list-style: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#navigation a:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
} 

#navigation li {
	display: inline;
	height: 85px;
	width: 166px;
}

#navigation li a {
  display: block ;
  float: left ;  
	height: 85px;
	width: 166px;
	border: #333333 solid 0px;   
  text-align: center ;
  text-decoration: none ;
  font-family: Verdena, Arial, Helvetica, sans-serif;    
    font-variant: normal;
  font-weight: bold;
	color: #fff;    
}

#navigation a span.main {
	font-size: 1.5em;
}   

#navigation li.menu_link1 a {
	/* background: url(images/fd1.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
        border-radius: 10px 0 0 0;
}
	
#navigation li.menu_link2 a {
	/* background: url(images/fd2.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
}

#navigation li.menu_link3 a {
	/* background: url(images/fd3.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
}

#navigation li.menu_link4 a {
	/* background: url(images/fd4.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
}

#navigation li.menu_link5 a {
	/* background: url(images/fd5.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
}

#navigation li.menu_link6 a {
	/* background: url(images/fd6.png) repeat-x;*/
    background-color: #888;
        border-radius: 0 10px 0 0;
}

#navigation li span.sfm {
  position: relative;
  display: block;
  height: 22px;
  line-height: 22px;  
  top:22px;
  padding-top:5px;  
  font: 0.8em "Arial" !important;
  color: #333 !important;
  text-decoration: none !important;
  text-align:center;
  cursor: pointer;
  text-shadow: 1px 1px 0 #FFFFFF;
  white-space: nowrap;
	background:#f6f6f6 url(images/sfm.png) repeat-x;    
}

#navigation li span p {
vertical-align:middle;
}

#navigation li span {
  position: relative;
  display: block;
  height: 24%;
  line-height: 25px;
}



.hero {
  background-image: url('/templates/template/images/kyoutch-autumn-1002x300.png');
  background-color:#fff;    
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
   width: 100%;
  height: 300px;
  display: flex;
  position: relative;
  font-family: "Baloo 2", Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.1;
  z-index: 1;
  border: 10px solid #f2f2f2; /* ? ici la bordure */
  box-sizing: border-box;   
     -webkit-border-radius: 5px 0px;
    -moz-border-radius: 5px 0px;
    border-radius: 10px;
    margin-bottom: 0px;
  
}

.hero-overlay {
  border-radius: 10px;
  color: #4b5c7c;
  max-width: 46%;
  margin-left: 7%;
}

.hero h1 {
    font-size: 2em;
    margin-bottom: 0px;
    margin-top: 8%;
    font-variant: normal;
    font-weight: bold;
    color: #fff;
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 3%;
}

.cta-button {
  background: #67c91d;
  padding: 15px 38px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: 0.2s;
    float: left;
    margin-left: 13%;
    
   animation-duration: 5s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;    
}

@keyframes clignoter {
  30%   { opacity:1; }
  50%   {opacity:0; }
  100% { opacity:1; }
}

.cta-button:hover {
  background: #e63333;
}




/**************  MENU END **************/

/**************  MENU MOBILE **************/
#menu-toggle {
  display:none;
  }
#navigationmob {
  display: none;

}

@media (max-width: 736px) {


.menu-icon {
     position: fixed;
  display: none;
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: absolute;
  top: 40px;
  left: 15px;
  z-index: 9999
}

    
   

.menu-icon span {
  display: block;
  height: 5px;
  background: #8bc34a;
  margin: 5px 0;
  transition: all 0.3s ease-in-out;
}


#navigationmob {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#navigationmob a:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
}     
    
    
    
    
#navigationmob li.menu_link1 a {
  margin-right:1px;
        background-color: #888;
    
}
	
#navigationmob li.menu_link2 a {
	/*background: url(images/fd2.png) repeat-x;*/
  margin-right:1px;
        background-color: #888;
}

#navigationmob li.menu_link3 a {
	/*background: url(images/fd3.png) repeat-x;*/
  margin-right:1px;
        background-color: #888;
}

#navigationmob li.menu_link4 a {
	/*background: url(images/fd4.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
}

#navigationmob li.menu_link5 a {
	/*background: url(images/fd5.png) repeat-x;*/
  margin-right:1px;
    background-color: #888;
}

#navigationmob li.menu_link6 a {
	/*background: url(images/fd6.png) repeat-x;*/
    background-color: #888;
}    
    
#navigationmob li span.sfm {
  position: relative;
  display: block;
  height: 22px;
  line-height: 22px;  
  top:22px;
  padding-top:5px;  
  font: 0.8em "Arial" !important;
  color: #333 !important;
  text-decoration: none !important;
  text-align:center;
  cursor: pointer;
  text-shadow: 1px 1px 0 #FFFFFF;
  white-space: nowrap;
	background:#f6f6f6 url(images/sfm.png) repeat-x;    
}

#navigationmob li span p {
vertical-align:middle;
}

#navigationmob li span {
  position: relative;
  display: block;
  height: 24%;
  line-height: 25px;
}    
#navigationmob li {
	display: inline;
    height: 65px;
	width: 166px;
}

#navigationmob li a {
  display: block ;
  float: left ;  
	height: 65px;
	width: 166px;
	border: #333333 solid 0px;   
  text-align: center ;
  text-decoration: none ;
  font-family: Verdena, Arial, Helvetica, sans-serif;    
    font-variant: normal;
  font-weight: bold;
	color: #fff;    
}

#navigationmob a span.main {
	font-size: 1.5em;
}     
    

/* Version mobile */
@media (max-width: 754px) {
  .menu-icon {
    display: block;
                  margin-top: 4px;
  }
    #navigation {
        display: none !important;
    }
    
#navigationmob {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  min-width: 50px;
  height: 100vh;
  background: #ffffffbf;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  flex-direction: column;
  padding-top: 85px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}

  .menu-toggle:checked + .menu-icon + #navigationmob {
    transform: translateX(0);
  }

  #navigationmob li {
    padding: 5px;
    text-align: left;
    border-bottom: 0px solid #ddd;
  }

  #navigationmob li a {
    display: flex;
    flex-direction: column;
  }
}

/* Animation croix */
.menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
.menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

    

}



/************** FIN MENU MOBILE **************/

.blocktab {
    position: relative;
    border: 0px solid #d6d6d6;
    height: 38px; position: relative;
}

.blocktab ul{
    position: relative;
  margin:0;
  padding:0;
    height: 38px; position: relative;
}

.blocktab li:first-child {
    border-top-left-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
}

.blocktab li{
  list-style: none;
	display: block;
  float:left;
  width: 174px;
  height: 28px;
    line-height: 25px;
    padding: 5px 20px;
    position: relative;
    border: 1px solid #d6d6d6;
    background: #db3b5b;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #db3b5b 0%, #e34363 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db3b5b), color-stop(100%,#e34363));
    background: -webkit-linear-gradient(top, #db3b5b 0%,#e34363 100%);
    background: -o-linear-gradient(top, #db3b5b 0%,#e34363 100%);
    background: -ms-linear-gradient(top, #db3b5b 0%,#e34363 100%);
    background: linear-gradient(to bottom, #db3b5b 0%,#e34363 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db3b5b', endColorstr='#e34363',GradientType=0 );
    color:#666    
}

.blocktab.top-position .tab-container ul.tab {
    position: relative !important;
}

.blocktab.tab-container ul.tab {
    padding: 0;
    margin: 0;
}

.item-box {
    position: relative;
  float:left;
  border: 1px solid #d6d6d6;
  width: 270px;
  height: 200px;
  margin:0 15px  
}

.blocktab.top-position .tab-container ul.tab li.sel {
    background: #db3b5b;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #db3b5b 0%, #e34363 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db3b5b), color-stop(100%,#e34363));
    background: -webkit-linear-gradient(top, #db3b5b 0%,#e34363 100%);
    background: -o-linear-gradient(top, #db3b5b 0%,#e34363 100%);
    background: -ms-linear-gradient(top, #db3b5b 0%,#e34363 100%);
    background: linear-gradient(to bottom, #db3b5b 0%,#e34363 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db3b5b', endColorstr='#e34363',GradientType=0 );
}    

.content_container {
	margin: auto;
    margin-top: 0px;
}

.categories_menu_container {
	width: 1002px;
	margin: auto;
	margin-top: 0px;
	overflow: auto;

}
.categories_menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px; /* (optionnel) un petit espace entre les blocs */
  font-size: 15px;
  font-family: Arial;
  color: #5c5c5c;
    position: absolute;
        top: 3px;
    left: 28%;
}
.categories_menu a {
	color: #585858;
	text-decoration: none;
	height: 22px;
}
.categories_menu a:hover {
	border-bottom: 1px solid #fff;
}

.categories_footer {
	margin: auto;
	font-family: Arial;
	font-size: 15px;
	padding: 6px;
	color: #c5c5c5;
  text-align:center;  
}
.categories_footer a {
	color: #585858;
	text-decoration: none;
	height: 30px;
}
.categories_footer a:hover {
	border-bottom: 1px solid #fff;
}

.styled-select select {
height: 21px;
	float: left;
}

.home_padding {
	padding-top: 0px;
	margin-top: 0px;
}
.search_contain {
	float: left;
}
.search_button_contain {
	float: left;
	margin-top: 5px;
  margin-left:2px;
}
.search_box {
  border: 1px solid #ccc;
	height: 20px;
	margin-top: 5px;
	font-size: 11px;
	font-family: Arial;
	padding: 1px 0px 0px 4px;
	width:210px;
	background: #ffffff;
	color: #cccccc;
  box-shadow: 0 1px .5px #f1f1f1;  
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.title {
  background-color:#ffca64;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 28px;
  width:738px;
	font-family: Arial;
	font-size: 1.5em;
	color: #fff;
	padding-top: 5px;
  padding-bottom:5px;
	padding-left: 8px;
}

.title_game {
  background:#4ba5f7;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	height: 28px;
	font-family: Arial;
	font-size: 16px;
	color: #fff;
  margin-top:3px;
	padding-top: 10px;
	padding-left: 8px;
}

.title_small {
	font-family: Arial;
	height: 35px;
	font-size: 20px;
	color: #6e0900;
	padding-top: 15px;
}
.leaderboard {
	text-align: center;
	padding: 10px;
}
.ad_banner {
	text-align: center;
    margin-top: 8px;
    margin-right: 3px;
    margin-bottom: 8px;
  
}
.ad_banner,
.ad_banner iframe,
.ad_banner img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

.ad_small_square {
	text-align: center;
	padding:0px 8px 8px 8px;
}
.main_left {
	width:750px;
	float: left;
    margin-top: 10px;
}
.main_right {
	width: 239px;
	float: right;
    margin-top: 10px;
}
.misc_container {
	border-bottom: 1px solid #d2d2d2;
	background-color: #fff;
	margin-bottom: 15px;
	overflow: auto;
	color: #6f7c91;
	font-family: Arial;
	padding: 8px;
}

/* CONTACT */
.misc_container_contact {
	border-bottom: 1px solid #7d7d7d;
	background-color: #fff;
	margin-bottom: 15px;
	overflow: auto;
	width:700px;
	color: #333;
	font-family: Arial;
	padding: 8px;
}

.register_form {
	padding: 20px 20px 0px 10px;
  float:left;
}

.login_form {
	padding: 20px;
}

.login_form_home {
	padding: 0px;
 	font-family: Arial;
	font-size: 14px;
  padding-left: 0px;
  float: left;
}

.login_form_home a {
	padding: 0px;
 	font-family: Arial;
	font-size: 12px;
  padding-left: 20px;
}

.login_form_home a:hover {
	padding: 0px;
 	font-family: Arial;
	font-size: 12px;
  padding-left: 20px;
	color: #C40001;
}

.align-center{
  width:120px;
  margin-left: auto;
  margin-right: auto;
}

.register-submit{
  font-size:15px;
  font-family:Arial;
  background:#fbfbfb url(images/2.png) left top repeat-x;  
  text-align: center;
  font-weight:bold;
  color:#555;
  width:120px;
  height:35px;
  margin-top:8px;
  border:1px solid #b0b0b0;
  -moz-border-radius:5px 5px 5px 5px;
  -khtml-border-radius:5px 5px 5px 5px;
  -webkit-border-radius:5px 5px 5px 5px;
  border-radius:5px 5px 5px 5px;cursor:pointer
}

.register-submit:hover{
border:#d0d0d0 solid 1px;
text-decoration:none
}

.misc_container a {
	color: #333;
}
.misc_container a:hover {
	color: #888;
}
.form_textbox {
	height: 18px;
	width: 200px;
	background-color: #fbfbfb;
	border:1px solid #1A1A1A;
  border-radius:5px;
	color:#333;
	font-size: 14px;
	padding: 2px;
}

.select_box {
  margin-top:0px;
  padding:3px;
  background-color: #fbfbfb;
  border:1px solid #1A1A1A;
  border-radius:5px;
	color:#333;
  width:203px;
}

.select_box2 {
  margin-top:0px;
  padding:3px;
  padding-left:7px;
  background-color: #fbfbfb;
  border:1px solid #1A1A1A;
  border-radius:5px;
	color:#333;
  width:57px;
}

.select_box3 {
  margin-top:0px;
  padding:3px;
  padding-left:12px;
  background-color: #fbfbfb;
  border:1px solid #1A1A1A;
  border-radius:5px;
	color:#333;
  width:81px;
}


.form_textbox_home {
	height: 22px;
	width: 145px;
	background-color:#fff;
	border:1px solid #dddddd;
	color:#333;
	font-size: 12px;
	padding: 2px;
  margin: 2px;
}

.footer {
	padding: 10px 0px 30px 0px;
	text-align: center;
	font-family: Arial;
	color: #a8a8a8;
	font-size: 12px;
  border-top: 5px solid #9E9E9E;
  margin-left: auto;
  margin-right: auto;
  width:1002px;
}
.footer a {
	color: #404040;
}
.more_links {
	text-align: center;
}
/* HOMEPAGE */
.featured_games {
	border-bottom: 0px solid #110000;
	background: #fff;
	margin-bottom: 0px;
	width:1002px;
}

.featured_games2 {
	border-bottom: 0px solid #110000;
	background: #fff;
	margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
	overflow:auto;
	width:1002px;
}

.featured_header {
	background-image: radial-gradient(#b0b0b0,#666666);
  background-color:#8c8c8c;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 28px;
	font-family: Arial;
  font-weight: bold;
	font-size: 18px;
	color: #fff;
	padding-top: 7px;
	padding-left: 8px;
    margin-top: 15px;
}
.featured_game {
	float: left;
	width: 320px;
	margin-top: 10px;
	margin-left: 7px;
}
.featured_game_image {
	float: left;
	padding: 2px 2px 2px 2px;
	text-align: center;
	background: url(images/thumb_back.png) #666666;
	height: 60px;
	width: 60px;
}
.featured_game_image img {
	display: block;
}
.featured_game_info {
	float: left;
	padding-left: 5px;
	width: 250px;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	padding-top: 5px;
	color: #333;
}
.featured_game_info a {
	color: #fff;
}
.featured_game_description {
	padding-top: 3px;
}
.featured_game_head a {
	font-family: Arial;
	font-size: 15px;
	color: #333;
}
.featured_game_head a:hover {
	color: #951510;
}

.featured_home {
	width: 1002px;
	margin-top: 0px;

}

.featured_block1 {
  float:left;
  position: relative; 
  border: 1px solid #ccc;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;  
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 100%;
	font-family: Arial;
	font-size: 14px;
	color: #fff;
  margin-bottom: 8px;
  text-align:justify;
}

.featured_block2 {
  float:left;
  position: relative; 
  background-image: url(images/bg10.png), url(images/bg10.png);
  background-position: right bottom, right top;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
	height: 145px;
  width: 300px;
	font-family: Arial;
	font-size: 12px;
	color: #333;
  text-align:center;
	padding-top: 6px;
	padding-left: 8px;
  padding-right: 8px;
  margin-right: 10px;
}

.featured_block3 {
  float:left;
  position: relative; 
  background-color: #F6F6F6;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
	height: 170px;
  width: 303px;
	font-family: Arial;
	font-size: 12px;
	color: #333;
	padding-top: 6px;
	padding-left: 8px;
  padding-right: 8px;
  margin-left:8px;
}

.title_block1 {
	font-family: Arial;
  font-weight: bold;
	font-size: 20px;
	color: #3E639C;
    text-align:left;
  padding-bottom: 2px;
  margin-bottom: 5px;
  padding-top: 6px;
	border-bottom: 3px solid #777;
}

.title_block2 {
	font-family: Arial;
  font-weight: bold;
	font-size: 20px;
	color: #FF9900;
  padding-bottom: 2px;
  margin-bottom: 5px;
  padding-top: 6px;
	padding-left: 60px;  
	border-bottom: 0px solid #3E639C;
}

.title_block3 {
	font-family: Arial;
  font-weight: bold;
	font-size: 16px;
	color: #3E639C;
  padding-bottom: 1px;
  margin-bottom: 2px;
	border-bottom: 2px solid #777;
}

.title_block {
	font-family: Arial;
  font-weight: normal;
	font-size: 14px;
	color: #333;
}

.title_block4 {
	font-family: Arial;
  font-weight: normal;
	font-size: 14px;
	color: #333;
}

.register_fast {

}

.register_fast_textbox {
    height: 12px;
    width: 130px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #333;
    font-size: 10px;
    padding: 2px;
}

.register_fast_select_box {
    margin-top: 0px;
    padding: 3px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #333;
    width: 130px;
    font-size: 10px;    
}

.register_fast_select_box2 {
    margin-top: 0px;
    padding: 3px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #333;
    font-size: 10px;
}

.register_fast_select_box3 {
    margin-top: 0px;
    padding: 3px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #333;
    font-size: 10px;
}

.home_category_container {
	float: left;
	margin-right: 9px;
}

.home_secure_container {
	float: center;
  text-align:center;
  margin-top:9px;
}
.home_adict_container {
	float: center;
	font-family: Arial;
	font-size: 12px;
	color: #6f7c91;
  text-align:left;
  text-align:justify;
	width:330px;
  margin-top:9px;
  margin-left: auto;
  margin-right: auto;
}

.home_adict_container b {
	color: #3E639C;
	text-decoration: none;
}

.home_cat_row {
	}
.home_category {
	border-bottom: 0px solid #7d7d7d;
	background-color: #fff;
	border-top: 0px;
	margin-bottom: 10px;
	overflow:auto;
	width:366px;
}

.home_category_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}



.home_cat_title {
	background:#888;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 30px;
	font-family: Arial;
	font-size: 16px;
	color: #fff;
	padding-top: 10px;
	padding-left: 8px;
	width: 358px;
}

.home_info_title {
	background: #FF5722; /* #607d8b; */
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 30px;
	font-family: Arial;
	font-size: 16px;
	color: #fff;
	padding-top: 8px;
	padding-left: 8px;
	width: 358px;
}

.home_info_title a {
	color: #fff;
	text-decoration: none;
}

.home_info_title a:hover {
	color: #fff;
	text-decoration: underline;
}

.home_cat_name {
	font-size: 18px;
	float: left;
}
.home_cat_link {
	float: right;
	font-size: 14px;
	margin-top: 2px;
	padding-right: 6px;
}
.home_cat_title a {
	color: #fff;
	text-decoration: none;
}
.home_cat_title a:hover {
	text-decoration: underline;
}
.homepage_game {
  background:#fbfbfb;
	float: left;
	width: 343px;
	margin-top: 10px;
  margin-left: 5px;
	padding-left: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  border: 1px solid #ccc;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.homepage_game:hover {
  transform: scale(0.95);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
} 

/* Par défaut (desktop large) : pas de pub */
.hc-ad{ display:none; }

/* Mise en page entre 900 et 1050px */
@media (max-width:1050px){
  .home_category.hc-flex{
    display:flex; align-items:flex-start; gap:10px;
    max-width:100%; box-sizing:border-box; overflow-x:hidden;
  }
  .hc-games{ flex:1 1 auto; min-width:0; }

  /* Colonne pub visible + marge haute de 5px demandée */
  .hc-ad{ display:block; margin-top:3px; }

  /* Conteneur visuel 206 px (pub 200×200 centrée dedans) */
  .ad-wrap-200{
    height:206px; width:200px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; /* sécurité */
    margin-right: 8px;  
  }
}

/* Sous 900px : on masque la pub */
@media (max-width:973px){
  .hc-ad{ display:none !important; }
}



.homepage_cat {
  background:#fbfbfb;
	float: left;
	width: 353px;
	margin-top: 10px;
  margin-left: 5px;
	padding-left: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  border: 1px solid #ccc;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
}

/* === JEUX - 2 colonnes puis 1 colonne, sans modifier l'intérieur des cartes === */

/* 2 colonnes (tablette) */
@media (max-width:1050px){
  .category_container{ width:100%; } /* sécurité */

  .category_container > .homepage_cat{
    float: left;                           /* on garde le float classique */
    width: calc(50% - 10px) !important;    /* 2 colonnes */
    margin: 0 5px 10px 5px !important;
    box-sizing: border-box;
  }

  /* Les pubs prennent toute la ligne pour ne pas casser la grille */
  .category_container > .ad_banner,
  .category_container > .google-auto-placed{
    width: 100% !important;
    float: none !important;
    clear: both;
    margin: 0 0 10px !important;
  }
}

/* 1 colonne (mobile) - on ne touche PAS à .home_game_image / .home_game_info */
@media (max-width:680px){
  .category_container > .homepage_cat{
    width: 100% !important;
    float: none !important;       /* une carte par ligne */
    clear: both;
    margin: 0 0 10px !important;  /* petit espace entre les cartes */
    box-sizing: border-box;
  }

  .category_container > .ad_banner,
  .category_container > .google-auto-placed{
    width: 100% !important;
    float: none !important;
    clear: both;
    margin: 0 0 10px !important;
  }
}
/* ?440px : garder image à gauche et texte à droite dans les cartes de jeux */
@media (max-width: 440px){
  .homepage_cat .home_game_image{
    float: left !important;
    margin: 8px 10px 8px 0 !important; /* petit espace entre image et texte */
  }
  .homepage_cat .home_game_info{
    float: left !important;
    width: calc(100% - 100px) !important; /* 80px vignette + ~20px marges */
    text-align: left !important;          /* annule le centrage global */
    padding-left: 0 !important;
  }
}
/* JEUX - sous 681px : on rétrécit le bloc texte pour forcer le retour à la ligne */
@media (max-width: 680px){
  .homepage_cat .home_game_info{
    width: 50% !important;   /* essaie 64% d'abord (au lieu de 70%) */
    min-width: 230px;        /* empêche le texte de passer sous l'image trop tôt */
    white-space: normal !important;
    text-align: left !important;
  }
}

/* Optionnel : on resserre un poil plus vers 560px */
@media (max-width: 560px){
  .homepage_cat .home_game_info{
    width: 60% !important;
    min-width: 220px;
  }
}

/* Sécurité proche des très petites largeurs : on garde le côte-à-côte propre */
@media (max-width: 480px){
  .homepage_cat .home_game_info{
    width: calc(100% - 110px) !important;  /* 80px vignette + ~30px marges */
    min-width: auto;
  }
}




.homepage_gift {
	margin-top: 10px;
	padding-left: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  border: 1px solid #ccc;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
  background:#fbfbfb;
}
.homepage_gift_desc {
float:left;
position:relative;
width:70%;
}
.homepage_gift_cab {
float:right;
position:relative;
width:30%;
text-align: center;
}
#homepage_gift_rebour {
	font-family: Arial;
	font-size: 16px;
	padding-top: 3px;
	color: #888888;
}
.cab{
  font: bold 18pt Arial;
  color:#607d8b;
  padding-bottom:5px;
}
.home_game_image {
	float: left;
	padding: 2px 2px 2px 2px;
	text-align: center;
	background: url(images/thumb_back_red.png) #666666;
	height: 80px;
	width: 80px;
}
.home_game_info {
	float: left;
	padding-left: 5px;
	width: 70%;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	padding-top: 20px;
}
.home_game_description {
	color: #999;
	padding-top: 4px;
}
.home_game_info a {
	color: #c6c6c6;
}
.home_game_head a {
	font-family: Arial;
	font-size: 15px;
  font-weight: bold;
	color: #7d7d7d;
  text-decoration: none;
}
.home_game_head a:hover {
	color: #9e9e9e;
}

.module {
	background-color: #fff;
	font-family: Arial;
	font-size: 14px;
	padding-bottom: 8px;
	margin-bottom: 10px;
	border-bottom: 0px solid #333;
	color: #888;
}
.module a {
	color: #6f7c91;
	text-decoration: none;
}
.module a:hover {
	color: #cfcfcf;
}
.module ul {
	list-style:none;
	padding:0px;
	margin:0px;
}
.module li {
	padding:4px;
	border-bottom: 1px solid #202020;
	text-align: left;
	margin-right: 10px;
	margin-left: 10px;
}

.module_header {
  background:#697d9b; /* #03A9F4; #7d7d7d; */
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 28px;
  text-align:center;
	font-family: Arial;
	font-size: 18px;
	color: #fff;
	padding-top: 10px;
}
/* VIEW GAME */
.game_container {
	border-bottom: 0px solid #c8c8c8;
	background-color: #fff;
	text-align: center;
  width: 716px;
}

.game_contain {
	text-align: center;
}

.game_info_container {
	border-bottom: 0px solid #333;
	background-color: #fff;
	margin-bottom: 15px;
  margin-right: 0px;
}
.game_info_content {
  width:508px;
	padding: 5px 2px 5px 0px;
  margin-left: auto;
  margin-right: auto;  
	font-family: Arial;
	font-size: 14px;
	color: #333;
      text-align: justify;
  text-justify: inter-word;
}
.tirage_gifts {
padding-top:5px;
text-align:center;
background:#789aab;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}
.tirage_gifts strong{
padding-top:3px;
font-size:16px;
color:#fff;
}
.cab2{
  font: bold 18pt Arial;
  color:#ff9800;
  padding-bottom:5px;
}
.game_info_header {
	background: url(images/black_header.png);
	height: 27px;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
	font-family: Arial;
	font-size: 16px;
	color: #fff;
	padding-top: 9px;
	padding-left: 8px;
}

.game_play_header {
	background: #9e9e9e;
	height: 27px;
	width: 500px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
	font-family: Arial;
	font-size: 16px;
  font-weight: bold;
	color: #fff;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
	padding-top: 9px;
	padding-left: 8px;
}


/* ====== HEADER ====== */
.game_play_header {
  background: #9e9e9e;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
  margin: 5px auto 0 auto;
  padding: 9px 8px;
  min-height: 27px;
  box-sizing: border-box;
}

/* ====== LIGNES (TABLEAU) ====== */
.game_play {
  background: #E3E3E3;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #333;
  width: 100%;
  margin: 2px auto 0 auto;
  padding: 9px 8px;
  min-height: 27px;
  box-sizing: border-box;

  /* FLEX pour un alignement fluide */
  display: flex;
  align-items: center;
  gap: 8px;
}

.game_play > div {
  box-sizing: border-box;
}

/* Largeurs fixes sur desktop */
.game_play > div:nth-child(1) { width: 160px; }
.game_play > div:nth-child(2) { width: 200px; }
.game_play > div:nth-child(3) { width: 120px; text-align: center; }

/* ====== FOOTER ====== */
.game_play_footer {
  background: #9e9e9e;
  height: 6px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #fff;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  margin: 2px auto 10px auto;
  padding: 0;
  box-sizing: border-box;
}

/* ====== BOUTONS ====== */
.game_button,
input[type="submit"].game_button {
  background: #9E9E9E url(images/button4.png) no-repeat center center;
  background-size: cover;
  width: 120px;
  min-height: 24px;
  padding: 1px 0px;
  font-family: Verdana, sans-serif;
  font-size: 15px;
  border: 0;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px #000;
  cursor: pointer;
  display: inline-block;
  transition: background 0.2s ease-in-out;
}

.game_button a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.game_button:hover,
input[type="submit"].game_button:hover {
  background: #6EC86E url(images/button7.png) no-repeat center center;
  background-size: cover;
}

/* ====== TABLETTE (= 768px) ====== */
@media (max-width: 768px) {
  .game_play_header,
  .game_play {
    font-size: 14px;
  }

  .game_play > div:nth-child(1) { width: 35%; min-width: 140px; }
  .game_play > div:nth-child(2) { width: 45%; min-width: 160px; }
  .game_play > div:nth-child(3) { width: 20%; }
}

@media (max-width: 760px) {
.gi_column2 {
    width: 100% !important;
    padding-left: 0px !important;
}
.game_info_content {
    width: 95%;
}    
}



/* ====== MOBILE (= 560px) ====== */
@media (max-width: 560px) {
  .game_play {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .game_play > div {
    width: 100% !important;
    text-align: left;
  }

  .game_button,
  input[type="submit"].game_button {
    width: 100%;
    font-size: 16px;
    padding: 10px 0;
    margin-top: 0;
}

.gi_column1 {
    float: none !important;
    width: 96% !important;
    margin-right: auto !important;
    margin-left: auto;
}
}

.game_play2 {
  background: #e3e3e3;
	font-family: Arial;
	font-size: 15px;
	color: #333;
  margin-top: 2px;
  margin-left: auto;
  margin-right: auto;
	padding-top: 9px;
	padding-left: 8px;
  padding-bottom:9px;
}

/* View gift - garder 2 colonnes jusqu'à ~736px */
@media (max-width: 820px) and (min-width: 737px){
  /* le parent devient flex pour empêcher le passage en dessous */
  .game_info_container{ display:flex; align-items:flex-start; gap:12px; }

  /* on neutralise les floats d'origine */
  .gi_column1, .gi_column2{ float:none !important; }

  /* colonne image (gauche) : largeur fixe raisonnable */
  .gi_column1{
    flex:0 0 190px;            /* 180-200px si tu préfères */
    max-width:200px;
    margin-top:0;
  }

  /* colonne contenu (droite) : prend le reste */
  .gi_column2{
    flex:1 1 auto;
    width:auto !important;     /* override des width fixes */
    min-width:0;
    padding-left:8px !important;
    box-sizing:border-box;
  }

  /* tout ce qui est "largeur fixe" à l'intérieur devient fluide */
  .gi_column2 .game_info_content,
  .gi_column2 .game_play_header,
  .gi_column2 .game_play,
  .gi_column2 .game_play_footer,
  .gi_column2 .game_play2{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
}

/* Sous 736px : on empile proprement */
@media (max-width: 736px){
  .game_info_container{ display:block; }
  .gi_column1, .gi_column2{
    float:none !important;
    width:100% !important;
    padding-left:0 !important;
  }
  /* Ads caché */
  .ad_banner_gift_right{
    display:none;
  }    
}
/* View gift - vignette : bordure incluse, pas de débordement */
.gi_column1{
  box-sizing: border-box;          /* width inclut padding + bordure */
}

.gi_column1 img{
  display: block;                  /* évite l'espace inline sous l'image */
  max-width: 100% !important;      /* ne dépasse jamais le conteneur */
  height: auto !important;
}

/* Bande 820-737px : garde une largeur "tout compris" cohérente */
@media (max-width:820px) and (min-width:737px){
  .gi_column1{
    flex: 0 0 200px;               /* ajuste 190-210px selon ton goût */
    max-width: 200px;
  }
}
/* View gift - vignette : bordure incluse + image centrée */
.gi_column1{
  box-sizing: border-box;      /* déjà ajouté, on garde */
}

.gi_column1 img{
  display:block;               /* supprime l'espace inline */
  max-width:100% !important;
  height:auto !important;
  margin:0 auto;               /* ? centre horizontalement */
}




.game_button2 {
	background: #9E9E9E url(images/button6.png);
	width: 120px;
	height: 24px;
	padding-right: 4px;
	margin-top: -3px;
  margin-left:auto;
  margin-right:auto;
	float:none;
	font-family: Verdana;
	font-size: 15px;
  border:0px solid #b0b0b0;
	color: #fff;
	text-decoration: none;
	text-align: center;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
}

.game_button2 a {
	color: #fff;
  text-decoration:none;
}

.game_button2:hover {
	background: #6EC86E url(images/button4.png);
}

.game_button3 {
	background: #9E9E9E url(images/button4.png);
	width: 120px;
	height: 24px;
	padding-right: 4px;
	margin-top: 10px;
  margin-left: auto;
    margin-right: auto;
	float:none;
	font-family: Verdana;
	font-size: 15px;
  border:0px solid #b0b0b0;
	color: #fff;
	text-decoration: none;
	text-align: center;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
}

.game_button3 a {
	color: #fff;
  text-decoration:none;
}

.game_button3:hover {
	background: #6EC86E url(images/button7.png);
}


.game_buttons {
	float: right;
	padding-top: 10px;
	padding-right: 10px;
}

.gi_column1 {
	float: left;
  border:5px solid #9e9e9e;
	width: 210px;
    margin-top: 15px;
  margin-bottom:5px;
  margin-right:18px;
	padding: 18px 0px 10px 0px;
	text-align: center;
	font-family: Arial;
	color: #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px; 
}
.gi_column2 {
	float: left;
  width:68%;
    margin-top: 8px;
	padding-left: 8px;
}
.title_game_options {
  float:left;
	font-family: Arial;
	color: #333;
	overflow:auto;
	width:100%;
  display: block;

}
.game_options {
  display: block;
  position:relative;
  float:left;
	padding: 0px 0px 0px 25px;
  font:italic bold 20pt Arial;
	color: #fff;

}
.game_options_column1 {
  position:relative;
	float: right;
	padding-top: 7px;
	margin-right: 20px;
	font-size: 10pt;
}
.game_options_column1 a{
  color:#888;
}
.game_options_column2 {
  position:relative;
	float: right;
	padding-top: 7px;
	margin-right: 20px;
	font-size: 10pt;
}
.game_options_column2 a{
  color:#888;
}
.button2 a {
	width: 103px;
	height: 20px;
	padding-top: 8px;
	float: right;
	font-family: Verdana;
	font-size: 13px;
	display: block;
	color: #333;
	text-decoration: none;
	outline: none;
}
.button2 a:hover {
	display: block;
	color: #888;
}
.button3 a {
	width: 103px;
	height: 30px;
	padding-top: 8px;
	float: right;
	font-family: Verdana;
	font-size: 13px;
	display: block;
	color: #fff;
	text-decoration: none;
	outline: none;
}
.button3 a:hover {
	display: block;
	background: #dedede url(images/module_header.png);
}
.game_column1 {
	border-bottom: 1px solid #9C0707;
	background-color: #2A2A2A;
	margin: 0px 15px 15px 0px;
	text-align: center;
	width: 49%;
	float: left;
}
.game_column2 {
	border-bottom: 1px solid #9C0707;
	background-color: #2A2A2A;
	width: 49%;
	float: left;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.comments_container {
	padding: 10px;
}
.add_comment_box {
	border: 1px solid #1a1a1a;
	width: 450px;
	background-color: #373737;
	font-family: Arial;
	font-size: 14px;
	color: #dddddd;
	margin-left: 8px;
}
.new_comment_container {
	text-align: left;
	font-family: Arial;
}
.comment_button_container {
	padding-top:5px;
	text-align:right;
	margin-bottom: 10px;
}
.comment_avatar {
	float: left;
}
.comment_avatar img {
	display: block;
}
.comment_content {
	float: left;
	width: 398px;
}
.comment_username {
	background: #3F3F3F;
	color: #D2D2D2;
	border-bottom: 1px solid #1a1a1a;
	padding-left: 5px;
}
.comment_username a {
	color: #fff;
	text-decoration: none;
}
.thecomment {
	color: #D2D2D2;
	padding-left: 5px;
}
.random_game {
	float: left;
	margin-top: 10px;
}
.random_game_image {
	float: left;
	padding: 2px 2px 2px 2px;
	text-align: center;
	background: url(images/thumb_back_red.png) #666666;
	height: 60px;
	width: 60px;
	margin-left: 10px;
}
.random_game_info {
	float: left;
	padding-left: 5px;
	width: 390px;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	padding-top: 5px;
	color: #c6c6c6;
}
.random_game_info a {
	color: #cdcdcd;
}
.random_game_head a {
	font-family: Arial;
	font-size: 14px;
	color: #c6c6c6;
}
.random_game_head a:hover {
	color: #951510;
}
.embed_textbox {
	background: #373737;
	border: 1px solid #151515;
	color: #929292;
	padding: 3px;
}
/* CATEGORY */
.category_container {
  width: 746px;
	border-bottom: 0px solid #7d7d7d;
	background-color: #fff;
	border-top: 0px;
	overflow: auto;
	color: #bebebe;
}
.sort_options {
	border-bottom: 0px solid #000;
	padding: 6px 8px 6px 8px;
	font-family: Arial;
	font-size: 14px;
	background: #fff;
	width: 698px;
	height: 20px;
	color: #333;
}
.sort_options a {
	color: #333;
	text-decoration: none;
}
.sort_options a:hover {
	text-decoration: underline;
}
.category_pages {
	margin: auto;
	background: #fff;
	border-bottom: 1px solid #333;
	text-align: center;
	padding: 5px;
	font-family: Arial;
}
.category_pages a {
	color: #333;
	padding: 3px;
	text-decoration: none;
}
/* PROFILE */
.profile_container {
	border-bottom: 0px solid #000;
	background: #fff;
	margin-bottom: 15px;
	overflow:auto;
	width:100%;
	color: #333;
}
.profile_container a {
	color: #fff;
}
.profile_header_avatar {
	width:80px;
	height: 87px;
	float: left;
	padding-top: 2px;
}

.profile_avatar_image {
	float: left;
	padding: 2px 2px 2px 2px;
	text-align: center;
	background: url(images/thumb_back_red.png) #666666;
	height: 75px;
	width: 75px;
}

.profile_header_info {
	float: left;
	padding-top: 3px;
}
.profile_header_buttons {
	float: left;
	background-position:top left;
	height: 25px;
	padding-left: 0px;
	padding-top: 4px;
}
.profile_username {
	font-size: 30px;
	font-family: Arial;
	padding: 0px;
	float: left;
}
.profile_points {
	float: left;
  min-width:85px;
  height: 20px;
	background-color: #9e9e9e;
	margin-left: 10px;
	font-family: Arial;
	color: #fff;
  text-align: center;
  vertical-align: middle;
	padding: 5px 12px 0px 12px;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
}

.profile_euro {
	float: left;
  min-width:85px;
  height: 20px;
	background-color: #00BCD4;
	margin-left: 10px;
	font-family: Arial;
	color: #fff;
  text-align: center;
  vertical-align: middle;
	padding: 5px 12px 0px 12px;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
}

.profile_kyou {
	float: left;
  min-width:85px;
  height: 20px;
	background-color: #8BC34A;
	margin-left: 10px;
    margin-right: 0px !important;
	font-family: Arial;
	color: #fff;
  text-align: center;
  vertical-align: middle;  
	padding: 5px 12px 0px 12px;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
}

.small_points {
	font-size: 10px;
	text-transform: uppercase;
}
.profile_stats {
	font-size: 15px;
	font-family: Arial;
	height: 16px;
    margin-top: 5px;
}
.profile_button a {
	background: #ae3632 url(images/button3.png);
	width: 135px;
	height: 21px;
	padding-top: 4px;
	padding-right: 4px;
	margin-top: 4px;
  margin-right: 15px;
	float: left;
	font-family: Verdana;
	font-size: 13px;
	display: block;
	color: #fff;
	text-decoration: none;
	text-align: center;
  text-shadow: -1px -1px 0 #777777;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	-webkit-box-shadow:0 1px 2px #000;
	-webkit-moz-shadow:0 1px 2px #000;
}

.profile_button a:hover {
	display: block;
	background: #ae3632 url(images/button5.png);
}

.profile_column1 {
	width: 76%;
	float: right;
}
.profile_column2 {
	border-bottom: 0px solid #9c0707;
	background: #fff;
	font-family: Arial;
	font-size: 15px;
	margin-bottom: 20px;
	color: #888;
}
.user_info {
	padding-left: 20px;
	padding-top: 10px;
  padding-bottom: 10px;  
	overflow: hidden;
}
.user_info a {
	color: #888;
}
.right_title {
float:left;
	color: #333;
  margin-top: 5px;
}

.left_title {
float:left;
	color: #888;
  margin-top: 5px;
  margin-left: 5px;  
}

.profile_content_item {
	border-bottom: 0px solid #9C0707;
	background-color: #fff;
	margin-bottom: 5px;
	font-family: Arial;
}

.profile_deposit_container {
  width:50%;
  color: #333;
  text-align:left;
  margin-top:0px;
}
.profile_deposit_container p{
  font-size:12px;
  text-align: center;
  margin-top:0px;
}

.profile_deposit_container img{
	display:block;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	overflow:hidden;
}

.profile_deposit_submit{
font-size:13px;
font-family:Arial;
background:#fbfbfb;
background:-webkit-gradient(linear,0% 0,0% 100%,from(#fcfcfc),to(#EEE));
background:-moz-linear-gradient(top, #fefefe, #bbb);
font-weight:bold;
color:#555;
width:66px;
height:30px;
margin-top:0px;
margin-left:4px;
border:1px solid #b0b0b0;
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;cursor:pointer
}

.profile_deposit_submit:hover{
border:#d0d0d0 solid 1px;
text-decoration:none
}

.inter{
	margin-top: 10px;
  margin-left: 30px;
}

.form_textbox_deposit {
	height: 24px;
	width: 60px;
	background-color:#fff;
	border:1px solid #3E639C;
	color:#333;
	font-size: 15px;
	padding: 2px;

-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;cursor:pointer  
}

.fav_container {
	padding: 5px 0px 0px 0px;

	color: #888;
}
.profile_comment {
	margin-bottom: 10px;
	background: #363636;
}
.profile_comment_username {
	color: #d2d2d2;
	padding-top: 6px;
	background: #3f3f3f;
	padding: 5px;
}
.profile_comment_username a {
	color: #fff;
	text-decoration: none;
}
.profile_thecomment {
	color: #2f2f2f;
	border-top:1px solid #1a1a1a;
	padding: 5px;
	color: #d2d2d2;
}
.profile_left_header {
  background-color:#dfdfdf;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 25px;
	padding-top: 10px;
	padding-left: 10px;
	color: #607d8b;
	font-family: Arial;
	font-size: 16px;
}
.profile_module_header {
	background-color:#9E9E9E;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	height: 25px;
	font-family: Arial;
	font-size: 16px;
	color: #fff;
	padding-top: 10px;
	padding-left: 8px;
}
/* EDIT PROFILE */
.edit_avatar_container {
	padding: 10px 0px 10px 10px;
	border-bottom: 1px solid #7d7d7d;
	margin-bottom: 10px;
	overflow:auto;
	width:95%;
}

.form1 {
	padding: 10px 0px 10px 10px;
	border-bottom: 1px solid #7d7d7d;
	margin-bottom: 10px;
	overflow:auto;
	width:680px;
}
.edit_info_container {
	padding: 10px 0px 10px 10px;
}
.edit_profile_header {
	font-size: 20px;
	color: #9e9e9e;
	font-family: Arial;
}	
.edit_profile_lable {
	float:left;
	margin-right:10px;
	width:80px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
	text-align:left;
}
.edit_profile_element {
	float: left;
}
.edit_avatar_element {
	float: left;
	padding-top: 3px;
}
.edit_profile_textbox {
	height: 20px;
	width: 500px;
	background-color:#fbfbfb;
	border:1px solid #1A1A1A;
  border-radius: 5px;  
	color:#333;
	font-size: 15px;
	padding: 4px;
}
.edit_profile_textarea {
	height: 60px;
	width: 500px;
	background-color:#fbfbfb;
	border:1px solid #1A1A1A;
  border-radius: 5px;  
	color:#333;
	font-size: 15px;
	padding: 4px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* NEWS */
.news_wrapper {
	border: 1px solid #ccc;
	background-color: #fff;
  -webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	overflow:hidden;
	margin-top: 10px;
	width: 746px;
	color: #888;
}
.news_header {
	background: #fff;
	overflow:auto;
	width:100%;
	border-bottom: 1px solid #ccc;
	color: #0088df;
}
.news_image {
	float: left;
	width: 60px;
	margin: 5px 0px 0px 5px;
}
.news_title {
	float: left;
	font-family: Arial;
	font-size: 20px;
	padding-left: 10px;
	padding-top: 12px;
}
.news_title a {
	color: #777;
	text-decoration: none;
}
.news_author {
	font-size: 14px;
	color: #333;
}
.news_main {
	padding: 10px;
	font-family: Arial;
}



/* Private messages */
.pm_subject_textbox {
	height: 20px;
	width: 600px;
	border: 1px solid #CCC;
	font-size: 15px;
	padding: 4px;
}
.pm_message_textbox {
	height: 100px;
	width: 600px;
	border: 1px solid #CCC;
	font-size: 15px;
	padding: 4px;
	font-family: Arial;
}
.pm_subject {
	font-size: 20px;
}
.pm_details {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #202020;
}
.pm_message {
	padding: 10px;
}
.pm_footer {
	border-top: 1px solid #202020;
	margin-top: 10px;
	padding-top: 5px;
	color: #b1b1b1;
}
.pm_footer a {
	color: #b1b1b1;
}
.pm_table td {
	border-bottom: 1px solid #202020;
	padding: 5px;
	font-size: 14px;
}
.pm_no_messages {
	height: 80px;
	padding-top: 70px;
	text-align: center;
}

/* News comments */
#news_comments ul {
	list-style: none;
	margin:0px;
	padding:0px;
	padding:8px 10px 15px 8px;
	font-family: Arial;
}

#news_comments ul li {
	color:#FFF;
	line-height: 150%;
	margin-bottom:8px;
	margin-left: 10px;
	overflow:auto;
	width:680px;
	background: #363636;
}

.news_comments_container {
	background-color: #2a2a2a;
	margin-bottom: 15px;
	overflow: auto;
	width:718px;
}
.news_comments_header {
	background: url(images/red_header.png);
	height: 27px;
	font-family: Arial;
	font-size: 16px;
	color: #fff;
	padding-top: 9px;
	padding-left: 8px;
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
}
.news_add_comment_box {
	border: 1px solid #1a1a1a;
	width: 450px;
	background-color: #373737;
	font-family: Arial;
	font-size: 14px;
	color: #dddddd;
	margin-left: 8px;
}
.news_new_comment_container {
	text-align: left;
	font-family: Arial;
}
.news_comment_button_container {
	padding-top:5px;
	text-align:right;
	margin-bottom: 10px;
	width: 450px;
}
.news_comment_avatar {
	float: left;
}
.news_comment_avatar img {
	display: block;
}
.news_comment_content {
	float: left;
	width: 630px;
}
.news_comment_username {
	background: #3F3F3F;
	color: #D2D2D2;
	border-bottom: 1px solid #1a1a1a;
	padding-left: 5px;
}
.news_comment_username a {
	color: #fff;
	text-decoration: none;
}
.news_thecomment {
	color: #D2D2D2;
	padding-left: 5px;
}

/* SUBMIT GAME */

.tb-submit {
	height: 20px;
	width: 500px;
	border: 1px solid #CCC;
	font-size: 15px;
	padding: 4px;
}
.ta-submit {
	height: 60px;
	width: 500px;
	border: 1px solid #CCC;
	font-size: 15px;
	padding: 4px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* MODULE NOTICE */

.module_notice {
	text-align: center;
	padding: 5px;
}

/* GAME DESC LINKS FOR TAGS */
.game_info_content a {
	color: #c4c4c4;
}

/* ADS */

.ad_info {
	font-family: Arial;
	color: #c6c6c6;
    margin-top: 8px;    
}
.ad_info a {
	color: #f0f2e3;
}

/* TAG CLOUD */

.tag_cloud {
	text-align: center;
	padding: 6px;
}

/* Social buttons */
.social_text {
	font-size: 12px;
	margin-bottom: 3px;
	margin-top: 6px;
}
.refer_textbox {
	height: 15px;
	width: 250px;
	border: 1px solid #000;
	font-size: 12px;
	padding: 4px;
	background-color: #373737;
	color: #dddddd;
}

/* Facebook login */
.facebook_message {
	margin: 10px 0px 30px 0px;
}

/* Reports */
#reportform {
	padding: 5px 5px 5px 10px;
	font-family: Arial;
	font-size: 14px;
	text-align: center;
}
.reportform {
	padding: 5px 5px 5px 10px;
	font-family: Arial;
	font-size: 14px;
	text-align: center;
}
.game_report_text {
	font-family: Arial;
}
.comment_report_text {
	font-family: Arial;
	font-size: 14px;
	text-align: left;
}

/* AV Arcade popup */
#ava-popup {
    
    position: fixed;
    top: 30%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    
    background-color: #2c2c2a;
    color: #fff;
    border: 3px solid #363636;
    border-radius: 5px;
    -moz-border-radius: 5px;
    display: none;
    
    z-index: 3;
}

#overlay{
    background: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: none;
    -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
}
* html #overlay{
    background-color: #333;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src="/images/overlay.png", sizingMethod="scale");
}
#ava-popup-header {
	background: url(images/red_header.png);
	height: 27px;
	font-family: Arial;
	font-size: 14px;
	color: #fff;
	padding-top: 9px;
	padding-left: 8px;
}
#ava-popup-content {
	padding: 10px;
	font-family: Arial;
	color: #c8c8c8;
}
#ava-popup-title {
	float: left;
}
#popup-close-button {
	float: right;
	margin-right: 8px;
}
.comment_report_textbox {
	border: 1px solid #000;
	width: 577px;
	background-color: #494945;
}
/* Game page highscores */
.profile_right_container {
	float: left;
	width: 20%;
}
.game_highscore_list {
	list-style: none;
	font-family: Arial;
	font-size: 13px;
}
.game_highscore_container {
	height: 35px;
	color: #D2D2D2;
}
.game_highscore_container a {
	color: #D2D2D2;
}
.game_highscore_avatar {
	float: left;
}
.game_highscore_name {
	float: left;
	padding: 7px 10px 1px 6px;
	width: 33%;
}
.game_highscore_score {
	float: left;
	padding-top: 7px;
	font-weight: bold;
	width: 28%;
}
.game_highscore_date {
	float: left;
	padding-top: 7px;
	color: #D2D2D2;
	width: 19%;
}
.game_no_highscores {
	font-family: Arial;
	text-align: center;
	padding: 20px 0px 20px 0px;
	color: #C6C6C6;
}
.game_highscore_pages {
	font-family: Arial;
	text-align: center;
}
.game_highscore_pages a {
	color: #D2D2D2;
}
#game_highscore_header {
	height: 35px;
}
#game_highscore_header .game_highscore_score, #game_highscore_header .game_highscore_date {
	font-weight: normal;
	color: #fff;
}
#game_highscore_header .game_highscore_name {
	padding-left: 0px;
	width: 41%;
	color: #fff;
}
.game_info_left {
	float: left;
	overflow: inherit;
	margin-top: 30px;
	width: 50%;
}
.game_highscores {
	float: right;
	overflow: inherit;
	margin-top: 40px;
	width: 47%;
	border-left: 1px solid #929292;
	padding-left: 10px;
}
.game_highscores_header {
	font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;
	font-size: 18px;
	text-align: left;
	}
.highscore_title {
	font-family: Arial;
	text-align: center;
	padding-top: 3px;
	color: #D2D2D2;
}
/* Profile page highscores */
.user_highscore_list {
	list-style: none;
	font-family: Arial;
	font-size: 13px;
	padding: 2px;
	margin: 0px;
	color: #D2D2D2;
}
.user_highscore_container {
	height: 35px;
}
.user_highscore_container a {
	color: #D2D2D2;
}
.user_highscore_avatar {
	float: left;
}
.user_highscore_name {
	float: left;
	padding: 7px 0px 1px 6px;
	width: 45%;
}
.user_highscore_score {
	float: right;
	padding-top: 7px;
	font-weight: bold;
	width: 15%;
	margin-right: 10px;
}
.user_no_highscores {

	font-family: Arial;
	text-align: center;
padding-left: -40px;
padding-top: 10px;
}
.user_highscore_pages a {
	color: #505050;
}
#user_highscore_header {
	height: 35px;
}
#user_highscore_header .user_highscore_score {
	font-weight: normal;
	color: #fff;
}
#user_highscore_header .user_highscore_name {
	padding-left: 0px;
	width: 41%;
	color: #fff;
}
.user_highscores_container {
}

/* CHANGES

.profile_stats {
	MAKE font size 15px
}
.user_area {
	MAKE width 400px;
}

*/

/* Sub-categories */

.category_subcats {
	padding-bottom: 6px;
	margin-bottom: 4px;
	padding-left: 5px;
	font-family: Arial;
	color: #fff;
}
.category_subcats a {
	color: #C6C6C6;
}

/* Submit game */

.submit_form_element {
	
}
.submit_text_box, .link_text_box {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	padding:5px;
	background: #999;
	border:1px solid #2a2a2a;	
	color:#fff;
	width: 300px;
}
.submit_text_area, .link_text_area {
	height: 60px;
	width: 300px;
	border: 1px solid #2a2a2a;
	font-size: 15px;
	padding: 4px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.submit_form_element_container {
	overflow: auto;
	margin: 0px 0px 3px 0px;
	padding: 10px 10px 10px 10px;
	background: #1e1e1e;
	font-size: 13px;
}
.submit_form_lable {
	float: left;
	width: 180px;
	font-size: 14px;
	padding-top: 2px;
}
.submit_form_element {
	float: left;
}
.submit_button_container {
	text-align: right;
	padding-right: 10px;
	padding-top: 8px;
}
.submit_text_area {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	padding:5px;
	background:#121212;
	border:1px solid #2a2a2a;	
	color:#fff;
}

/* Friends */
.friends_header, .friend_requests_header, .links_header {
	font-size: 16px;
	border-bottom: 0px solid #2a2c35;
	color: #fff;
}
.friends_container, .friend_requests_container {
	margin: 7px 0px;
}

.friend_container {
	background: #fff;
	padding: 5px;
	height: 50px;
	margin-bottom: 5px;
	border-left: 0px solid #22252A;
}
.friend_avatar {
	float: left;
}
.friend_avatar img{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 0 2px #4b5c7c, 0 0 0 6px #9e9e9e70;
}
.friend_username {
	float: left;
	padding: 15px 0px 0px 15px;
	font-size: 16px;
}
.friend_buttons {
    float: left;
    margin-left: 20px;
    padding-top: 5px;
    display: block;

}

.friend_last_login {
	font-size: 14px;
}
.no_friends {
	text-align: center;
	font-size: 16px;
	margin-top: 20px;
}

/* Link exchange */
.add_link_form_container {
	margin-bottom: 10px;
}
.link_form_element_container {
	overflow: auto;
	margin: 0px 0px 3px 0px;
	padding: 10px 10px 10px 10px;
	background: #fff;
	font-size: 13px;
}
.link_form_lable {
	float: left;
	width: 180px;
	font-size: 14px;
	padding-top: 2px;
}
.link_form_element {
	float: left;
}
.link_button_container {
	text-align: right;
}
.link_exchange_info {
	margin: 10px 0px;
}

/* Challenege a friend */
#game_message {
	background: url(images/game_info_header.png) #107b10;
	width: 90%;
	margin: auto;
	margin-top: 15px;
	padding: 5px 10px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color: #fff;
	font-weight: bold;
	text-align: left;
	font-family: Arial;
	font-size: 14px;
}
#game_message a {
	color: #fff;
}

.challenge_buttons {
	border-top: 1px solid #3b3b3b;
	margin-top: 8px;
	padding-top: 8px;
}

/* Challenge a friend PM */
.challenge_pm_container {
	width: 400px;
	background:#202227;
	border:1px solid #313234;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	margin: auto;
	margin-top: 10px;
	overflow: auto;
}
.challenge_pm_image {
	float: left;
}
.challenge_pm_info {
	float: left;
	padding: 10px;
	font-size: 15px;
	color: #67747F;
}

/* Comment pages */
.comment_pages {
	margin:15px auto 15px auto;
	text-align: center;
	padding: 5px;
	font-size: 14px;
}
.comment_pages a {
	color: #a1a9b6;
	padding: 5px 5px 5px 6px;
	text-decoration: none;
	border: 1px solid #121314;
	background-color: #1c1e20;
}

/* Search */
.search_form_container {
	margin: auto;
	width: 400px;
}
.search_page_textbox {
	height: 20px;
	width: 300px;
	font-size: 15px;
	padding: 4px;
	background:#121212 url(images/textbox_bg.png);
	border:1px solid #2a2a2a;
	color:#fff;
}

    .container_slider {
      margin-top:3px;
      margin-left:auto;
      margin-right:auto;
      border: 0px solid #8E8E8E;
      padding:5px;
      width: 96%;
    }
    
    #slides {
      margin-top:0px;
      margin-bottom:0px;    
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }

/* CSS Cookies ban */    
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: normal;
        src: url('https://fonts.googleapis.com/css?family=Roboto+Condensed') format('truetype');
    }
    #cookiesaccept{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgb(61, 70, 76);
        background-color: rgba(61, 70, 76, 0.9);
        color: #fff;
        text-align: center;
        z-index: 99999999999999999;
        font-family: Roboto, sans-serif;
        font-size: 11px;
    }
    #cookiesaccept > div
    {
        display: block;
        width: 70%;
        margin: auto;
    }
    #cookiesaccept p {
        font-size: 11px!important;
     }
    #cookiesaccept ul, #cookiesaccept li {
        margin: 0;
        padding: 0;
    }
    #cookiesaccept ul {
        margin-top: 10px;
     }
    #cookiesaccept li {
        display: inline-block;
        vertical-align: middle;
        margin: 5px;
     }
    #cookiesaccept li > a {
        font-size: 12px;
        color: #e1e1e1;
        border: 1px solid #888;
        padding : 5px 10px;
        text-decoration: none;
     }
    #cookiesaccept li:first-child > a {
        background: linear-gradient(to right top, #0af, #00d2f3);
        color: #fff;
        border-radius: 2px;
        font-size: 15px;
        border: none;
     }
    #cookiesaccept li:first-child > a:hover {
        background: linear-gradient(to right top, #00d2f3, #0af);
     }
     
    .accept_rgpd {
    display:block;
        background: linear-gradient(to right top, #0af, #00d2f3);
        color: #fff;
        border-radius: 2px;
        font-size: 15px;
        border: none;
        padding : 5px 10px;
        text-decoration: none;        
     }
    .accept_rgpd:hover{
        background: linear-gradient(to right top, #00d2f3, #0af);
     }          

    @media (max-width: 740px) {
        #cookiesaccept > div {
             width: 90%;
         }
        #cookiesaccept li {
             margin: 10px 5px;
         }
    }

    #monetag_ad_6695310 iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 200px;
        max-height: 200px;
    }



@media (max-width: 1050px) {

.content {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  display: block;
}    

/******* MENU *******/

.center { 
   margin-left: auto; 
   margin-right: auto; 
   width: 100%; 
}

.header {
    overflow: hidden;
    width: 100%;
    margin: auto;
    padding-top: 0px;
}

.header_container {
    width: 100%;
    margin: auto;
}    
    
.content_container {
    margin: auto;
    margin-top: 8px;
}
    
.logo {
    height: auto;
    width: 280px;
    display: inline-block;
    vertical-align: middle;
  }
    
.logo img {
  width: 99%;
  height: auto;
  display: block;
}    
    
.ad_banner {
    text-align: center;
    margin-top: 2px;
    margin-right: 0px;
}    
    
.user_area {
    width: 26%;
    margin-top: 38px;
}
.user_area2 {
    width: 35%;
    margin-top: 38px;
} 
    
.loginhome {
    margin-top: 5px;
}

.home_cat_title {
    padding-left: 0px;
    width: 100%;
    height: 38px;
}
.home_category_container {
    margin-right: 0px;
}    
.home_cat_name {
    font-size: 16px;
    padding-left: 15px;
}
.home_cat_link {
    padding-right: 15px;
}
.homepage_game {
  margin-top: 5px;
}

    
.main_left {
    width: 100%;
        margin-top: 0px;
}    
    
.main_right {
    display: none;
} 
    
#navigation {
  width: 100%;    
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 0px;
  padding: 0;
  list-style: none;
  background-color: transparent;
    box-sizing: border-box;
height: 62px;
    
}
    
     

#navigation li {
  width: calc(100vw / 6);
  height: calc((100vw / 6) * 0.512);
  min-width: 80px;
  min-height: 40px;
  background-color: #fff;
  border: 0px solid #999;
  box-sizing: border-box;
  display: flex;
  align-items: stretch; /* très important ici */
  justify-content: stretch;
}
    
.hero {
    border: 3px solid #4b5c7c;
    margin-bottom: 5px;
    height: 184px;
}    
    
    
#navigation li a {
    height: 50px;
}    

#navigation a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: Verdana, sans-serif;
  font-size: clamp(10px, 1.2vw, 16px);
  text-decoration: none;
  color: black;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  
}
    
#navigation a span.main {
  font-size: clamp(16px, 1vw, 20px);
}    

#navigation li.menu_link1 a {
  /* background: url(images/fd1.png) no-repeat center center; */
  background-size: 100% 100%;
  margin-right: 1px;
    background-color: #888;
}
	
#navigation li.menu_link2 a {
  /* background: url(images/fd2.png) no-repeat center center; */
  background-size: 100% 100%;
  margin-right: 1px;
    background-color: #888;
}

#navigation li.menu_link3 a {
  /* background: url(images/fd3.png) no-repeat center center; */
  background-size: 100% 100%;
  margin-right: 1px;
    background-color: #888;
}

#navigation li.menu_link4 a {
  /* background: url(images/fd4.png) no-repeat center center; */
  background-size: 100% 100%;
  margin-right: 1px;
    background-color: #888;
}

#navigation li.menu_link5 a {
  /* background: url(images/fd5.png) no-repeat center center; */
  background-size: 100% 100%;
  margin-right: 1px;
    background-color: #888;
}

#navigation li.menu_link6 a {
  /* background: url(images/fd6.png) no-repeat center center; */
  background-size: 100% 100%;
    background-color: #888;
}

#navigation li span.sfm {
  position: relative;
  display: block;
  height: 22px;
  line-height: 22px;  
  top:17px;
  padding-top:5px;  
  font: 1.2em "Arial" !important;
  color: #333 !important;
  text-decoration: none !important;
  text-align:center;
  cursor: pointer;
  text-shadow: 1px 1px 0 #FFFFFF;
  white-space: nowrap;
	background:#f6f6f6 url(images/sfm.png) repeat-x;    
}

#navigation li span p {
vertical-align:middle;
      font-size: clamp(10px, 1.2vw, 16px);
}

#navigation li span {
  position: relative;
  display: block;
  height: 15%;
  line-height: 25px;
}
    
.category_container {
    width: 100%;
} 
.homepage_cat {
    width: 48%;
}    

.categories_footer {
    margin: 0px;
    width: 100%;
}
    
.footer {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
} 
    
.homepage_game {
    margin-top: 5px;
}

.home_category {
    margin-bottom: 5px;
    overflow: auto;
    width: auto;
} 
    
.homepage_game a{
    margin-left: auto;
    margin-right: auto;
    }    
    
.title {
    padding-left: 15px;
    margin-top: 0px;
    width: 100%;
    height:38px;
} 
    
    
    
    
    
/* Ne pas laisser .title grandir quand on ajoute du padding */
.main_left > .title{
  width: 100% !important;      /* remplace le width:738px */
  max-width: 100%;
  box-sizing: border-box;      /* le padding est inclus dans la largeur */
  padding-left: 14px;          /* la valeur que tu veux */
}    
    
}


@media (max-width: 736px) {

.loginhome {
    float: none;
    width: 100%;
    text-align: right; /* si tu veux qu’il reste à droite */
  }

.ua_info {
            padding-right: 2%;
}

#navigation {
    margin-top: 3;
}

.logo {
    margin-bottom: 5px;

    }
  
    
}


@media (max-width: 845px) {
.hero h1 {
    font-size: 1.7em;
}
.hero p {
    font-size: 1.0em;
} 
}
    
@media (max-width: 730px) {
.hero h1 {
    font-size: 1.4em;
}
.hero p {
    font-size: 0.9em;
}
}


@media (max-width: 736px) {
.logo {
    padding-left: 55px;
}
}
    
    
@media (max-width: 736px) {    
.lang_text {
    display: none;
    }
.categories_menu {
    left: 22%;
    padding-left:10%;
}
    .user_area2 {
        width: 100% !important;
        margin-top: 0px;
    }    
}  

@media (max-width: 736px) {
.user_area {
    float: none;
    width: 35%;

}
    .loginhome {
        margin-top: 5px;
        margin-left: 10px;
        margin-bottom: 3px;
    }
    
}


@media (max-width: 560px) {
    .loginhome {
        float: inline-end;
        width: 100%;
        text-align: right;
    }
    .user_area {
         width: 99%;
    }    
}
    

@media (max-width: 480px) {
    .homepage_game {
    margin-top: 5px;
    text-align: center;
    height: auto !important;
    margin-left: 0px !important; 
    
}
}
 
@media (max-width: 439px) {
    .loginhome {
        width: 100%;
        text-align: right;
        float: left;
}
.home_game_info {
    text-align:center;
    padding-left: 0px;
    width: 90%;

}    
}
@media (max-width: 407px) {
.ua_username {
    font-size: 16px;
    font-weight: bold;
    /* margin-top: 6px; */
    float: left;
    float: none !important;
    display: block;
}    
.ua_points {
  float: none !important;   /* annule le float/revert */
  display: block;           /* prend toute la ligne */
  clear: both;              /* passe sous un éventuel float du pseudo */
  margin: 2px 0 0 0;        /* ajuste l'espacement (à ton goût) */ 
  padding: 0 0 0 0;
}
}

@media (max-width: 368px) {
    .categories_menu {
        left: 0%;
        padding-left: 1%;
    }
    .menu-icon {
        top: 32px;
    }
    .logo {
        padding-left: 50px;
        margin-top: 24px;
    }
    .logo img {
        width: 74%;
        height: auto;
        display: block;
    }
    .hero h1 {
        font-size: 1.1em;
    }
.cta-button {
     padding: 7px 17px;
    margin-left: 0%;
}
}    

    

.homepage_game img {
  display: inline-block;
}

/* Barre de progression du compte à rebours pub */
.ad_progress{
  position: relative;
  height: 8px;
  background: #ddd;
  border-radius: 999px;
  overflow: hidden;
  margin: 0px auto 10px;
}
.ad_progress_bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#58d66b,#34b048);
  transition: width .25s ease;
}

/* transitions douces pour les 2 conteneurs */
#ava-advert_container,
#ava-game_container{
  transition: opacity .35s ease;
  will-change: opacity;
}   

#vast-player-wrap video,
#vast-player-wrap .fluid_video_wrapper {
    max-width: 728px !important;
    max-height: 300px !important;
    margin: 0 auto;
}

#vast-player-wrap { position: relative; }
#vast-skip-btn {
  position:absolute; right:8px; bottom:8px; z-index:5;
  display:none; align-items:center; gap:6px;
  padding:10px 14px; border:0; border-radius:12px; cursor:pointer;
  font-weight:600; background:#111; color:#fff; opacity:.9;
}
#vast-player-wrap.show-skip #vast-skip-btn { display:inline-flex; }

/* Backdrop (voile derrière en plein écran) */
.rf-box:fullscreen::backdrop,
.rf-box:-webkit-full-screen::backdrop{
  background: rgba(255,255,255,.15) !important;
}

/* Plein écran : fond blanc translucide, taille exacte écran */
.rf-box:fullscreen,
.rf-box:-webkit-full-screen{
  background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) !important;
  width: 100svw !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Ruffle doit remplir la box */
.rf-box:fullscreen ruffle-player,
.rf-box:fullscreen .ruffle-player,
.rf-box:-webkit-full-screen ruffle-player,
.rf-box:-webkit-full-screen .ruffle-player{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/* --- Banniere Sidebar --- */
.ad-wrap{
  width:100%;
  max-width:336px;
  min-height: 250px;   /* 250-280px suffit pour un rectangle */
  margin:16px auto;
}
@media (min-width: 992px){
  .ad-wrap{ min-height: 280px; }  /* desktop */
}

.ad-wrap ins.adsbygoogle {
  min-height: 250px !important;  /* force la réserve */
  display: block !important;
  width: 100% !important;
}

/* Spécifique au bandeau du haut (n'affecte pas le reste) */
.ad_banner.ad-top728{
  width:728px !important;
  max-width:none !important;
  margin:8px auto 12px;
  padding:0 !important;
  overflow:visible !important;
  text-align:center;
}
.ad_banner.ad-top728 ins.adsbygoogle{
  display:inline-block !important;
  width:728px !important;
  height:90px !important;
}

.ad_small_square {
  margin-top: 15px; /* ajuste la valeur comme tu veux (20px, 25px, .) */
}


/* ===================== MESSAGERIE - TABLE > CARTES en mobile ===================== */

/* Desktop/tablette : table normale (propre) */
.pm_table{ width:100%; border-collapse:separate; border-spacing:0; }
.pm_table td{ padding:6px 8px; }

/* Desktop large : colonnes stables sans scroll */
@media (min-width:901px){
  .pm_table{
    table-layout: fixed;
    width: 100%;
  }
  /* On inclut le padding dans la largeur de chaque cellule */
  .pm_table td{ box-sizing: border-box; }

  /* Laisse un peu d'air pour les paddings + icônes */
  .pm_table td:nth-child(1){ width:48%; }  /* Sujet  */
  .pm_table td:nth-child(2){ width:18%; }  /* De     */
  .pm_table td:nth-child(3){
    width:20%;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }                                         /* Date   */
  .pm_table td:nth-child(4){
    width:14%;                               /* Actions (3 boutons + marges) */
    white-space:nowrap;
    text-align:right;
  }
}


/* ===== Mobile (?600px) : chaque ligne devient une "carte" ===== */
@media (max-width:600px){

  /* on garde tout à l'intérieur du conteneur = pas de débordement bizarre */
  .pm_table{ width:100%; border-collapse:separate; border-spacing:0; }

  /* masquer l'entête, peu importe sa position ou s'il y a un <tr> vide avant */
  .pm_table tr:empty{ display:none !important; }                 /* sécurité */
  @supports(selector(tr:has(td))){
    .pm_table tr:has(> td > strong){ display:none !important; }  /* repère la ligne d'entête */
  }
  /* fallback si :has() n'est pas supporté : souvent l'entête est le 1er <tr> */
  .pm_table tr:first-child td > strong{  }
  .pm_table tr:first-child{ display:none !important; }

  /* les lignes "cards" */
  .pm_table tr{
    display:block; width:100%;
    background:#fff;
    border:1px solid #eef1f5; border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    margin:0 0 12px; overflow:hidden;
  }
  .pm_table td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px; border:none; width:100%; box-sizing:border-box;
  }

  /* labels automatiques sur chaque "champ" */
  .pm_table td:nth-child(1)::before{ content:"Sujet";   font-weight:600; color:#666; }
  .pm_table td:nth-child(2)::before{ content:"De";      font-weight:600; color:#666; }
  .pm_table td:nth-child(3)::before{ content:"Date";    font-weight:600; color:#666; }
  .pm_table td:nth-child(4)::before{ content:"Actions"; font-weight:600; color:#666; }

  /* sujets longs = pas de débordement */
  .pm_table td:nth-child(1) a{ flex:1; overflow-wrap:anywhere; }

  /* la colonne "Actions" (icônes) reste compacte à droite */
  .pm_table td:nth-child(4){ justify-content:flex-end; gap:8px; }
  .pm_table td:nth-child(4) img{ display:inline-block; width:auto; max-height:18px; }
}
/* ==== Messagerie - Actions : icônes + zones cliquables plus grandes ==== */

/* Table / Desktop : jolis boutons carrés */
.pm_table td:last-child{
  white-space: nowrap;
}
.pm_table td:last-child a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;                /* taille du bouton */
  height: 36px;
  margin-left: 6px;
  border-radius: 8px;
  background: #f6f8fb;
  border: 1px solid #e6ebf2;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .08s ease, background .15s, border-color .15s;
}
.pm_table td:last-child a:hover{
  background:#eef3ff;
  border-color:#cdd9ff;
  transform: translateY(-1px);
}

/* taille d'icône par défaut (évite le flou si tes PNG sont petits) */
.pm_table td:last-child img{
  width: 20px;
  height: 20px;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges; /* fallback */
}

/* Mobile (?600px) : un peu plus grand pour le doigt */
@media (max-width:600px){
  .pm_table td:nth-child(4){ gap: 10px; }
  .pm_table td:nth-child(4) a{
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .pm_table td:nth-child(4) img{
    width: 22px;  /* passe à 22-24px si tes sources le permettent */
    height: 22px;
  }
}
.pm_table td:last-child a:active{
  transform: scale(.96);
}
.pm_table td:last-child a:focus-visible{
  outline: 2px solid #7aa2ff;
  outline-offset: 2px;
}
/* === Anti-scroll desktop : box-sizing sur toute la table === */
.pm_table, .pm_table *{ box-sizing: border-box; }

/* === Desktop compact : 901-1199px (écrans "étroits") === */
@media (min-width:901px) and (max-width:1199px){
  .pm_table{
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
  }

  /* Largeurs qui laissent de l'air au bloc Actions */
  .pm_table td:nth-child(1){ width: 46%; }  /* Sujet   */
  .pm_table td:nth-child(2){ width: 17%; }  /* De      */
  .pm_table td:nth-child(3){
    width: 19%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .pm_table td:nth-child(4){
    width: 18%;
    white-space: nowrap;
    text-align: right;
  }

  /* Boutons un peu plus compacts pour tenir sans scroll */
  .pm_table td:last-child a{
    width: 32px;
    height: 32px;
    margin-left: 4px;
    border-radius: 8px;
  }
  .pm_table td:last-child img{
    width: 18px;
    height: 18px;
  }
}

/* === Desktop large : ?1200px (confort) === */
@media (min-width:1200px){
  .pm_table{
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
  }
  .pm_table td:nth-child(1){ width: 48%; }  /* Sujet   */
  .pm_table td:nth-child(2){ width: 18%; }  /* De      */
  .pm_table td:nth-child(3){
    width: 20%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .pm_table td:nth-child(4){
    width: 14%;
    white-space: nowrap;
    text-align: right;
  }
  .pm_table td:last-child a{
    width: 36px;
    height: 36px;
    margin-left: 6px;
  }
  .pm_table td:last-child img{
    width: 20px;
    height: 20px;
  }
}
/* ===== Anti-scroll "1 px" autour de 900-1200px ===== */

/* 1) Pas de marge inutile sur le 1er bouton d'actions */
.pm_table td:last-child a:first-child{ margin-left: 0; }

/* 2) Rounding fix : à ces largeurs, certains navigateurs débordent de 1 px.
      On force une largeur calculée + on collapse les bordures. */
@media (min-width:901px){
  .pm_table{
    width: calc(100% - 1px);
    table-layout: fixed;
    border-collapse: collapse;
  }
  .pm_table, .pm_table *{ box-sizing: border-box; }
}

/* --- Annule l'overflow caché pour ne rien couper --- */
.main_left, .misc_container{ overflow-x: visible !important; }

/* --- Anti-scroll propre, sans clipper le dernier bouton --- */
@media (min-width:901px){
  .pm_table{
    width: calc(100% - 2px);   /* évite le débordement de sous-pixels */
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  /* réduit l'empreinte côté droit */
  .pm_table td:last-child{ padding-right: 0; }
  .pm_table td:last-child a:first-child{ margin-left: 0; }
  .pm_table td:last-child a{ margin-left: 4px; } /* (6px ? 4px) */
}

/* --- Desktop compact : 901-1199 px (on garde tes réglages compacts) --- */
@media (min-width:901px) and (max-width:1199px){
  .pm_table td:nth-child(1){ width:46%; }  /* Sujet */
  .pm_table td:nth-child(2){ width:17%; }  /* De    */
  .pm_table td:nth-child(3){ width:19%; white-space:nowrap; font-variant-numeric:tabular-nums; } /* Date */
  .pm_table td:nth-child(4){ width:18%; white-space:nowrap; text-align:right; }                  /* Actions */

  .pm_table td:last-child a{ width:32px; height:32px; }
  .pm_table td:last-child img{ width:18px; height:18px; }
}

/* --- Desktop large : ?1200 px - on donne un peu + d'air à Actions --- */
@media (min-width:1200px){
  .pm_table td:nth-child(1){ width:46%; }  /* Sujet (48% ? 46%) */
  .pm_table td:nth-child(2){ width:18%; }  /* De */
  .pm_table td:nth-child(3){ width:20%; white-space:nowrap; font-variant-numeric:tabular-nums; } /* Date */
  .pm_table td:nth-child(4){ width:16%; white-space:nowrap; text-align:right; }                  /* Actions (14% ? 16%) */

  .pm_table td:last-child a{ width:36px; height:36px; }
  .pm_table td:last-child img{ width:20px; height:20px; }
}


/* =========================
   CADEAUX - mobile clean
   ========================= */
@media (max-width:620px){
  /* carte en pile + centrage global */
  .homepage_gift{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:12px;
  }

  /* image centrée */
  .homepage_gift .home_game_image{
    float:none !important;
    width:100px !important;           /* base mobile */
    height:100px !important;
    margin:0 auto 8px !important;
  }
  .homepage_gift .home_game_image img{
    display:block;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
  }

  /* TEXTE - c'est bien .home_game_info */
  .homepage_gift .home_game_info{
    float:none !important;
    width:100% !important;
    padding:10px 0 0 !important;
    text-align:center !important;
  }
  /* évite que le lien titre garde une largeur "bizarre" */
  .homepage_gift .home_game_head a{ display:inline-block; }

  /* colonne tirage + bouton */
  .homepage_gift .homepage_gift_cab{
    float:none !important;
    width:100% !important;
    text-align:center !important;
    border-top:1px solid #eee;
    padding-top:10px;
  }
  .homepage_gift .game_button3{
    width:100%; max-width:280px; margin:8px auto 0;
  }
  .homepage_gift .home_game_image{
    width:210px !important;
    height:210px !important;
  }    
}
/* ===== MENU MOBILE - correctifs ===== */

/* 1) Ouvrir le volet même s'il y a des éléments (script, etc.) entre le label et le menu */
@media (max-width: 754px){
  #menu-toggle:checked + .menu-icon ~ #navigationmob {
    transform: translateX(0);
  }

  /* 2) Forcer l'icône à être visible si une règle plus haut la met en display:none */
  .menu-icon{ display:block !important; }
}

/* 3) Animation "burger ? croix" (on passe par l'ID pour être plus spécifique) */
#menu-toggle:checked + .menu-icon span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
#menu-toggle:checked + .menu-icon span:nth-child(2){ opacity: 0; }
#menu-toggle:checked + .menu-icon span:nth-child(3){ transform: rotate(-45deg) translate(5px, -5px); }


/* ===== PROFIL - RESET LOCAL pour éviter les conflits ===== */
#profile .profile_column1,
#profile .profile_right_container,
#profile .profile_column2,
#profile .fav_container,
#profile .profile_container,
#profile .profile_header_avatar,
#profile .profile_header_info {
  float: none !important;
  width: auto !important;
}

/* ===== EN-TÊTE DU PROFIL ===== */
#profile .profile_container{
  display:flex;
  align-items:flex-start;
  gap:16px;
  box-sizing:border-box;
margin-top: 10px;    
}

#profile .profile_header_avatar{
  flex:0 0 auto;
}

#profile .profile_header_info{
  flex:1 1 auto;
  min-width:0;
}

#profile .profile_username{
  font-size:20px;
  font-weight:700;
  margin-top:3px;
}

/* Petits badges points/? */
#profile .profile_points,
#profile .profile_euro,
#profile .profile_kyou{
  display:inline-block;
  margin-right:8px;
}

/* ===== LAYOUT PRINCIPAL : 2 colonnes ===== */
#profile .profile_main{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); /* contenu | infos */
  gap:16px;
  align-items:start;
  box-sizing:border-box;
}

/* Assure une largeur naturelle de la colonne droite */
#profile .profile_right_container{
  width:auto !important;
}

/* Module d'infos utilisateur en grille (label/valeur) */
#profile .user_info{
  display:grid;
  grid-template-columns: 140px 1fr;
  column-gap:10px;
  row-gap:8px;
}

/* On neutralise les floats historiques pour label/valeur */
#profile .user_info .right_title,
#profile .user_info .left_title{
  float:none !important;
  margin:0;
}

/* Certains includes ajoutent des <div style="clear:both"> : on les masque ici */
#profile .user_info > div[style*="clear"]{
  display:none !important;
}

/* Titres des modules */
#profile .profile_left_header,
#profile .profile_module_header{
  font-weight:700;
  padding:8px 10px;
  background:#eee;
  border:1px solid #d9d9d9;
  border-radius:4px;
  margin:8px 0;
}

/* Cartes de contenu colonne gauche */
#profile .profile_content_item{
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:6px;
  padding:10px;
  margin-bottom:14px;
  clear: both;    
}

/* Pubs */
#profile .ad_banner{ margin:10px 0; }

/* ===== HISTORIQUE - sandbox pour ne pas polluer les autres tableaux ===== */
#profile .hist_wrap{
  overflow:hidden;           /* pas d'overflow global */
}

#profile .hist_table_wrap{
  overflow-x:auto;           /* scroll horizontal si nécessaire */
  -webkit-overflow-scrolling:touch;
}

#profile .hist_table_wrap table{
  width:100%;
  border-collapse:collapse;
}

#profile .hist_table_wrap table th,
#profile .hist_table_wrap table td{
  padding:6px 8px;
  border-bottom:1px solid #ececec;
  white-space:nowrap;        /* évite le cassage moche des cellules étroites */
}

/* Si ton tableau d'historique utilise .pm_table, on la scope ici */
#profile .hist_table_wrap .pm_table{
  width:100% !important;
  table-layout:auto;         /* laisse respirer le contenu */
}

/* ===== SAFETY extra : empêche toute "fuite" vers le header ===== */
#profile .profile_container,
#profile .profile_column1,
#profile .profile_right_container,
#profile .profile_content_item,
#profile .fav_container,
#profile .ad_banner,
#profile .profile_left_header,
#profile .profile_module_header{
  max-width:100%;
}

/* Historique : garde 1 seule ligne et scrolle en X si nécessaire */
#profile .hist_table_wrap table{ min-width:760px; }
@media (max-width:480px){
  #profile .hist_table_wrap table{ min-width:700px; font-size:13px; }
}

/* ===== RESPONSIVE ===== */

/* < 1050px : 1 seule colonne */
@media (max-width:1050px){
  #profile .profile_main{
    grid-template-columns: 1fr;
  }
}

/* Header plus compact sous 560px (au lieu de 640px) */
@media (max-width:560px){
  #profile .profile_container{
    flex-wrap:wrap;
    gap:10px;
  }
  #profile .profile_header_avatar{ order:0; }
  #profile .profile_header_info{ order:1; width:100%; }

  #profile .user_info{
    grid-template-columns: 110px 1fr;
  }
}

/* Empile les badges sous le pseudo dès 635px + grille de boutons */
@media (max-width: 635px){
  /* Le conteneur d'infos devient un flex qui peut passer à la ligne */
  #profile .profile_header_info{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0;
  }
  /* Le pseudo occupe toute la ligne (1re rangée) */
  #profile .profile_username{
    flex: 0 0 100%;
    margin: 0;
    line-height: 1.15;
  }

  /* On utilise le <br style="clear:both"> (présent dans ton HTML) pour forcer la rupture
     de ligne entre les pastilles et les boutons */
  #profile .profile_header_info > br{
    flex: 0 0 100%;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Pastilles */
  #profile .profile_points,
  #profile .profile_euro,
  #profile .profile_kyou{
    float: none !important;
    min-width: 0 !important;
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px 4px 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .profile_stats { margin-top: 0; }

  /* Boutons : 2 par ligne, pas de float parasite */
  #profile .profile_header_buttons{
    float: none !important;
    display:inline-block;
    vertical-align:top;
    width:calc(50% - 6px);
  }
  /* Le bouton remplit la largeur du bloc */
  #profile .profile_header_buttons .profile_button,
  #profile .profile_header_buttons a{
    display:block;
    width:100%;
  }
}

/* Très petit écran : 1 bouton par ligne */
@media (max-width:420px){
  #profile .profile_header_buttons{
    width:100%;
    margin-right:0;
  }
}

/* === PROFIL - corrige le scroll interne sous 560px === */
@media (max-width:560px){
  /* on désactive tout overflow sur l'en-tête du profil */
  #profile .profile_container{
    overflow: visible !important;      /* remplace auto/hidden éventuels */
    max-height: none !important;       /* évite une hauteur figée */
    -webkit-overflow-scrolling: auto !important; /* coupe l'inertie iOS */
  }

  /* sécurité : pas d'overflow parasite sur la zone info */
  #profile .profile_header_info{ overflow: visible !important; }

  /* boutons : 2 par ligne, retour à la ligne autorisé (cohérent) */
  #profile .profile_header_buttons{
    display:inline-block;
    vertical-align:top;
    width:calc(50% - 6px);
   }
}

/* === Garder avatar + bloc info sur la même ligne jusqu'à ~480px === */
@media (max-width:560px){
  /* NE PAS wrap: on garde tout sur la même rangée */
  #profile .profile_container{
    flex-wrap: nowrap !important;
    gap: 5px;                 /* un peu plus serré */
  }
  /* largeur fixe de l'avatar pour éviter les surprises */
  #profile .profile_header_avatar{ flex: 0 0 75px; }
  /* le bloc info prend tout l'espace restant */
  #profile .profile_header_info{ flex: 1 1 auto; min-width: 0; }
}

/* Et seulement sous 353px on accepte que le bloc info passe sous l'avatar */
@media (max-width:353px){
  #profile .profile_container{ flex-wrap: wrap !important; }
  #profile .profile_header_avatar{ flex: 0 0 64px; }
}

/* Avatar 70px sous 560px */
@media (max-width:560px){
  #profile .profile_header_avatar{ flex: 0 0 70px; }
  #profile .profile_header_avatar img,
  #profile .profile-header_avatar_img{
    width: 70px !important;
    height: 70px !important;
  }
}

/* Avatar 64px sous 480px */
@media (max-width:480px){
  #profile .profile_header_avatar{ flex: 0 0 64px; }
  #profile .profile_header_avatar img,
  #profile .profile-header_avatar_img{
    width: 64px !important;
    height: 64px !important;
  }
}

/* Réduction du CONTENEUR avatar sous 560px */
@media (max-width:560px){
  #profile .profile_header_avatar{
    float: none !important;
    width: 70px !important;       /* largeur du conteneur */
    height: 70px !important;      /* hauteur du conteneur */
    flex: 0 0 70px !important;    /* base fixe en flex */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* L'image remplit le conteneur */
  #profile .profile_header_avatar img,
  #profile .profile-header_avatar_img{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* Réduit un peu l'écart avec les infos pour gratter des px */
  #profile .profile_container{
    gap: 10px !important; /* au lieu de 10-16 selon tes règles */
  }
}

/* Couper le scroll interne de l'entête sous 635px */
@media (max-width:635px){
  /* Le conteneur de l'entête ne scrolle plus */
  #profile .profile_container{
    overflow: visible !important;
    max-height: none !important;              /* évite une hauteur figée */
    -webkit-overflow-scrolling: auto !important;
  }

  /* Sécurité : pas d'overflow parasite sur la zone info */
  #profile .profile_header_info{
    overflow: visible !important;
    max-width: 100% !important;
  }

  /* Empêche toute fuite de largeur qui créerait une barre de scroll */
  #profile .profile_container,
  #profile .profile_header_avatar{
    max-width: 100% !important;
  }
}
/* Desktop: two columns with Grid (no overflow) */
@media (min-width: 1060px){
  /* parent of the two columns */
  #profile .profile_main,
  .profile_main{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px; /* left | right */
    gap: 16px;
    align-items: start;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* neutralize legacy floats/widths on the columns */
  #profile .profile_column1,
  #profile .profile_right_container,
  .profile_column1,
  .profile_right_container{
    float: none !important;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Tablet & below: stack to one column (if not already) */
@media (max-width: 1059px){
  #profile .profile_main,
  .profile_main{
    display: block;  /* or your existing single-column rules */
  }
}
/* Pastilles en taille naturelle, sans rapetisser */
@media (max-width:635px){
  /* En-tête info : ligne qui peut tenir sans casser tant que possible */
  #profile .profile_header_info{
    display: flex;
    flex-wrap: nowrap;            /* une seule ligne si ça rentre */
    align-items: center;
    gap: 6px;
  }

  /* Le pseudo au-dessus */
  #profile .profile_username{
    flex: 0 0 100%;
    margin-bottom: 2px;
  }

  /* Pastilles : largeur naturelle + on annule les vieilles règles */
  #profile .profile_points,
  #profile .profile_euro,
  #profile .profile_kyou{
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;               /* largeur naturelle */
    flex-shrink: 0;               /* ne pas se comprimer */
    min-width: unset !important;
    white-space: nowrap;

    margin: 0 !important;
    padding: 0 10px !important;   /* garde de belles pastilles */
    height: 22px !important;
    font-size: 13px;
  }
}

/* Sous 560px, on autorise le retour à la ligne pour ne pas écraser le texte */
@media (max-width:560px){
  #profile .profile_header_info{ flex-wrap: wrap; }
  #profile .profile_points,
  #profile .profile_euro,
  #profile .profile_kyou{ margin-bottom: 4px; }
}
/* === Fix 561-635px : header qui déborde/partie invisible === */
@media (min-width: 561px) and (max-width: 635px){
  #profile .profile_container{
    gap: 8px !important;
    overflow: visible !important;
  }

  #profile .profile_header_info{
    display: flex !important;
    flex-wrap: wrap !important;          /* <- on force le retour à la ligne */
    align-items: center;
    overflow: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* neutralise tout float/héritage et évite les largeurs imposées */
  #profile .profile_header_info > *{
    float: none !important;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* pseudo "saut de ligne" après la 3e pastille */
  #profile .profile_username{ flex-basis: 100%; }
  #profile .profile_points,
  #profile .profile_euro,
  #profile .profile_kyou{
    white-space: nowrap;
    margin: 0 8px 4px 0;
  }
  #profile .profile_kyou::after{
    content: "";
    flex-basis: 100%;
    height: 0;
  }

  /* Boutons gris en pleine largeur pour éviter tout débordement */
  #profile .profile_header_buttons{
    display: block !important;
    width: 100% !important;
    margin: 0 0 0 0 !important;
    height: auto !important;
    padding: 0 !important;
  }
  #profile .profile_header_buttons .profile_button,
  #profile .profile_header_buttons a{
    display: block;
    width: 100%;
  }
}
/* === Profil > Historique : forcer le mode "table" (anti-cartes) === */
#profile .hist_table_wrap .pm_table{
  display: table !important;
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

/* groupements natifs visibles */
#profile .hist_table_wrap .pm_table thead{ display: table-header-group !important; }
#profile .hist_table_wrap .pm_table tbody{ display: table-row-group !important; }

/* lignes & cellules natives */
#profile .hist_table_wrap .pm_table tr{ display: table-row !important; }
#profile .hist_table_wrap .pm_table th,
#profile .hist_table_wrap .pm_table td{
  display: table-cell !important;
  white-space: nowrap;        /* garde 1 ligne par cellule */
  border-bottom: 1px solid #ececec;
}

/* si un design "cartes" injectait des labels avant le texte, on les coupe */
#profile .hist_table_wrap .pm_table td::before{
  content: none !important;
}

/* wrapper : scroll horizontal si nécessaire */
#profile .hist_table_wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* option : en-tête collant quand on scrolle horizontalement */
#profile .hist_table_wrap .pm_table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* largeur mini pour éviter le "compressage" des colonnes */
#profile .hist_table_wrap .pm_table{ min-width: 820px; }  /* ajuste à ton nombre de colonnes */

/* sur très petit écran, tu peux réduire un peu la police pour gagner en lisibilité */
@media (max-width: 480px){
  #profile .hist_table_wrap .pm_table{ min-width: 760px; }
  #profile .hist_table_wrap .pm_table th,
  #profile .hist_table_wrap .pm_table td{  }
}
/* === Profil > Historique : RENDRE LE <thead> VISIBLE === */
#profile .hist_table_wrap .pm_table thead{
  display: table-header-group !important; /* redevient une vraie tête */
  visibility: visible !important;
  position: static !important;
  clip: auto !important;
  height: auto !important;
  text-indent: 0 !important;
}
#profile .hist_table_wrap .pm_table thead tr{ display: table-row !important; }
#profile .hist_table_wrap .pm_table thead th{
  display: table-cell !important;
  white-space: nowrap;
  font-weight: 700;
  padding: 8px;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd;
  /* option : fixe l'entête quand tu scrolles */
  position: sticky; top: 0; z-index: 2;
}

/* Si un thème avait tenté de le cacher avec ::before, on neutralise. */
#profile .hist_table_wrap .pm_table td::before{
  content: none !important;
}

/* === SECOURS si le tableau n'a VRAIMENT PAS de <thead> ===
   (on "habille" la première ligne du tbody comme un header) */
#profile .hist_table_wrap .pm_table:not(:has(thead)) tbody tr:first-child{
  position: sticky; top: 0; z-index: 2; background: #fff;
}
#profile .hist_table_wrap .pm_table:not(:has(thead)) tbody tr:first-child > *{
  font-weight: 700; background: #f7f7f7; border-bottom: 1px solid #ddd;
}
/* <= 600px : garder le tableau classique + montrer l'entête */
@media (max-width:600px){
  /* le wrapper peut scroller en X */
  #profile .hist_table_wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* annule le mode "cartes" : on remet les displays par défaut des tables */
  #profile .hist_table_wrap .pm_table{ display:table !important; table-layout:auto; min-width:760px; }
  #profile .hist_table_wrap .pm_table thead{ display:table-header-group !important; visibility:visible !important; position:static !important; height:auto !important; clip:auto !important; }
  #profile .hist_table_wrap .pm_table tbody{ display:table-row-group !important; }
  #profile .hist_table_wrap .pm_table tr{ display:table-row !important; }
  #profile .hist_table_wrap .pm_table th,
  #profile .hist_table_wrap .pm_table td{
    display:table-cell !important;
    float:none !important;
    white-space:nowrap;
  }

  /* désactive les labels "cartes" */
  #profile .hist_table_wrap .pm_table td::before{ content:none !important; display:none !important; }

  /* petite mise en forme d'entête (optionnelle) */
  #profile .hist_table_wrap .pm_table thead th{
    font-weight:700; background:#f7f7f7; border-bottom:1px solid #ddd; padding:8px;
  }
}
/* --- PROFIL > Historique --- */
/* La colonne "Jeux" reste alignée à gauche, quoi qu'il arrive */
#profile .hist_table_wrap .pm_table th:nth-child(4),
#profile .hist_table_wrap .pm_table td:nth-child(4){
  text-align: left !important;
}

/* Tronquer proprement le nom du jeu (optionnel, à garder si tu veux l'ellipsis) */
@media (max-width: 1199px){
  #profile .hist_table_wrap .pm_table{
    table-layout: fixed; /* garantit l'ellipsis */
  }
  #profile .hist_table_wrap .pm_table th:nth-child(4),
  #profile .hist_table_wrap .pm_table td:nth-child(4){
    width: 28ch;                 /* ajuste à ton goût */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #profile .hist_table_wrap .pm_table td:nth-child(4) a{
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* --- Dépôt --- */
#profile .hist_table_wrap.hist--deposit{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#profile .hist_table_wrap.hist--deposit .pm_table{
  display: table !important;
  table-layout: fixed;          /* garantit l'ellipsis colonne */
  width: 100%;
  min-width: 520px;             /* adapte au besoin */
}
/* En-tête collante (desktop), coupée en mobile pour éviter le "remonté" */
#profile .hist_table_wrap.hist--deposit .pm_table thead th{
  position: sticky; top: 0; background:#fff; z-index: 2;
}
@media (max-width:600px){
  #profile .hist_table_wrap.hist--deposit .pm_table thead th{
    position: static; top: auto;
  }
}

/* Toujours tableau, jamais "cartes" */
#profile .hist_table_wrap.hist--deposit .pm_table thead{ display: table-header-group !important; }
#profile .hist_table_wrap.hist--deposit .pm_table tbody{ display: table-row-group !important; }
#profile .hist_table_wrap.hist--deposit .pm_table tr{ display: table-row !important; }
#profile .hist_table_wrap.hist--deposit .pm_table th,
#profile .hist_table_wrap.hist--deposit .pm_table td{
  display: table-cell !important;
  white-space: nowrap;
  text-align: left !important;
}
#profile .hist_table_wrap.hist--deposit .pm_table td::before{ content:none !important; }

/* Largeurs par colonne */
#profile .hist_table_wrap.hist--deposit .pm_table th:nth-child(1),
#profile .hist_table_wrap.hist--deposit .pm_table td:nth-child(1){ width:12ch; overflow:hidden; text-overflow:ellipsis; }
#profile .hist_table_wrap.hist--deposit .pm_table th:nth-child(2),
#profile .hist_table_wrap.hist--deposit .pm_table td:nth-child(2){ width:12ch; overflow:hidden; text-overflow:ellipsis; }
#profile .hist_table_wrap.hist--deposit .pm_table th:nth-child(3),
#profile .hist_table_wrap.hist--deposit .pm_table td:nth-child(3){ width:auto; overflow:hidden; text-overflow:ellipsis; }
#profile .hist_table_wrap.hist--deposit .pm_table th:nth-child(4),
#profile .hist_table_wrap.hist--deposit .pm_table td:nth-child(4){ width:10ch; }

/* Compact un peu en mobile */
@media (max-width:600px){
  #profile .hist_table_wrap.hist--deposit .pm_table th,
  #profile .hist_table_wrap.hist--deposit .pm_table td{ padding:6px 8px; }
  #profile .hist_table_wrap.hist--deposit .pm_table{ min-width:480px; }
}

/* --- Retrait --- */
#profile .hist_table_wrap.hist--withdraw{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#profile .hist_table_wrap.hist--withdraw .pm_table{
  display: table !important;
  table-layout: fixed;
  width: 100%;
  min-width: 540px;             /* tu peux ajuster différemment de Dépôt */
}
#profile .hist_table_wrap.hist--withdraw .pm_table thead th{
  position: sticky; top: 0; background:#fff; z-index: 2;
}
@media (max-width:600px){
  #profile .hist_table_wrap.hist--withdraw .pm_table thead th{
    position: static; top: auto;
  }
}

/* Forcer le "mode tableau" */
#profile .hist_table_wrap.hist--withdraw .pm_table thead{ display: table-header-group !important; }
#profile .hist_table_wrap.hist--withdraw .pm_table tbody{ display: table-row-group !important; }
#profile .hist_table_wrap.hist--withdraw .pm_table tr{ display: table-row !important; }
#profile .hist_table_wrap.hist--withdraw .pm_table th,
#profile .hist_table_wrap.hist--withdraw .pm_table td{
  display: table-cell !important;
  white-space: nowrap;
  text-align: left !important;  /* passer en right si tu préfères aligner le Montant */
}
#profile .hist_table_wrap.hist--withdraw .pm_table td::before{ content:none !important; }

/* Largeurs par colonne (tu peux différencier des dépôts) */
#profile .hist_table_wrap.hist--withdraw .pm_table th:nth-child(1),
#profile .hist_table_wrap.hist--withdraw .pm_table td:nth-child(1){ width:14ch; overflow:hidden; text-overflow:ellipsis; }
#profile .hist_table_wrap.hist--withdraw .pm_table th:nth-child(2),
#profile .hist_table_wrap.hist--withdraw .pm_table td:nth-child(2){ width:10ch; overflow:hidden; text-overflow:ellipsis; }
#profile .hist_table_wrap.hist--withdraw .pm_table th:nth-child(3),
#profile .hist_table_wrap.hist--withdraw .pm_table td:nth-child(3){ width:auto; overflow:hidden; text-overflow:ellipsis; }
#profile .hist_table_wrap.hist--withdraw .pm_table th:nth-child(4),
#profile .hist_table_wrap.hist--withdraw .pm_table td:nth-child(4){ width:10ch; }

/* Mobile */
@media (max-width:600px){
  #profile .hist_table_wrap.hist--withdraw .pm_table th,
  #profile .hist_table_wrap.hist--withdraw .pm_table td{ padding:6px 8px; }
  #profile .hist_table_wrap.hist--withdraw .pm_table{ min-width:500px; }
}

@media (max-width:600px){
.profile_deposit_container {
    width: 60%;
}
}
@media (max-width:440px){
.profile_deposit_container {
     width: 90%;
}
}

/* pub mobile cachée par défaut */
.hc-ad-mobile{ display:none; }

/* visible SEULEMENT entre 605px et 755px */
@media (min-width:610px) and (max-width:755px){
  .hc-flex{ 
    display:flex; 
    gap:12px; 
    align-items:flex-start; 
  }
  .hc-games{ 
    flex:1 1 auto; 
    min-width:0; 
  }
  .hc-ad{ display:none; }   /* masque la pub desktop dans ce range */

  .hc-ad-mobile{ 
    display:flex; 
    flex:0 0 200px;          /* largeur fixe 200px */
    height:412px;            /* hauteur de la colonne */
    align-items:center;      /* centrage vertical */
    justify-content:center;  /* centrage horizontal */
  }

  .ad-wrap-200x406{
    width:200px;
    height:406px;            /* hauteur fixe du slot */
    margin-top: 5px;
    margin-right: 6px;  
  }
  .ad-wrap-200x406 ins.adsbygoogle{
    display:inline-block !important;
    width:200px !important;
    height:406px !important;
  }
}
/* Centrage des tuiles jeux sous 610px */
@media (max-width:610px){
  .homepage_game{
    margin:0px auto;
  }
}

/* Bloc pub inline 353×96 (même gabarit que les tuiles) */
.game-ad-inline353{
  display:block;
  margin:10px auto 6px;
  width:353px;
  height:96px;
  display:flex; align-items:center; justify-content:center;
}

/* Le tag AdSense doit garder la taille exacte */
.game-ad-inline353 ins.adsbygoogle{
  display:inline-block !important;
  width:353px !important;
  height:96px !important;
}

/* Sécurité: cache l'annonce si l'écran est trop étroit pour 353px */
@media (max-width:369px){
  .game-ad-inline353{ display:none; }
}

.game-ad-inline353{
  margin:10px auto 6px;
  width:353px; height:96px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:369px){
  .game-ad-inline353{ display:none; } /* évite le dépassement sur très petit écran */
}

/* ===== Mobile < 610px : catégorie pleine largeur + vignettes centrées ===== */
@media (max-width:610px){

  /* 1) Tous les wrappers de la catégorie passent en 100% */
  .home_category_container,
  .home_cat_row,
  .home_category,
  .home_category.hc-flex,
  .home_cat_title {
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box;
  }

  /* 2) Casser le flex de la rangée pour revenir en flux normal */
  .home_category.hc-flex{
    display:block !important;
    gap:0 !important;
  }

  /* 3) La colonne jeux prend l'intégralité, sans padding qui décale */
  .hc-games{
    width:100% !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center;                 /* centrage via inline-block */
  }

  /* 4) Chaque tuile : enlever le float/marge gauche et centrer */
  .hc-games .homepage_game{
    float:none !important;
    margin-left:0 !important;          /* tue le margin-left hérité */
    margin-right:0 !important;
    display:inline-block !important;   /* pour text-align:center */
    vertical-align:top;
    margin-top:5px; margin-bottom:0px;
  }
}
/* Par défaut: cachée */
.game-ad-inline353{ display:none; }
/* Visible seulement ? 610px */
@media (max-width:610px){
  .game-ad-inline353{
    display:flex;               /* ou block si tu préfères */
    justify-content:center;
    align-items:center;
  }
}
/* Par défaut cachée - évite les allumages intempestifs */
.game-ad-inline353{ display:none !important; }

/* SEULEMENT ? 604px : on l'affiche */
@media (max-width:604px){
  .game-ad-inline353{
    display:block !important;
    margin:10px auto 6px;
    width:353px; height:96px;
  }
}

/* ? 605px : on force le OFF, même si une autre règle essaie de l'afficher */
@media (min-width:605px){
  .game-ad-inline353{ display:none !important; }
}

/* Boutique cadeaux : mobile < 610px */
@media (max-width:610px){
  /* la carte cadeau reste pleine largeur, on ne touche pas */
  .hc-games .homepage_game{ text-align:center; }

  /* bloc vignette = centré, 110x110, plus de float */
  .hc-games .home_game_image{
    float:none !important;
    width:210px !important;
    height:210px !important;
    margin:8px auto 6px !important;   /* centre + espace */
    background-position:center;
    background-size:cover;            /* si tu utilises un bg décoratif */
    border-radius:8px;                 /* optionnel, cohérent avec tes cards */
  }

  /* si l'image est un <img> à l'intérieur, force la même taille */
  .hc-games .home_game_image img,
  .hc-games .home_game_image a img{
    display:block;
    width:210px !important;
    height:210px !important;
    margin:0 auto;
  }

  /* l'ancre occupe toute la zone pour être cliquable facilement */
  .hc-games .home_game_image a{
    display:block;
    width:210px; height:210px;
    margin:0 auto;
  }
}

/* BANNIÈRE MOBILE - sous 736px */
@media (min-width: 611px) and (max-width: 736px){
  .hero{
    background-image: url('/templates/template/images/kyoutch-autumn-706x190.png') !important; /* ta version mobile */
    height: 190px !important;  /* hauteur de ton visuel mobile */
    border: 1px solid #ccc;  
  }
    .hero h1 {
        font-size: 1.5em;
        margin-top: 9%;
        color: #fff;
    }
.hero-overlay {
    border-radius: 10px;
    color: #4b5c7c;
    max-width: 50%;
    margin-left: 6%;
}
    .hero p {
    font-size: 0.9em;
    margin-left: 0%;    
    }
.cta-button {
     padding: 8px 10px;
    margin-left: 35%;

}
    .content_container {
        margin-top: 0px;
    }    
}

/* BANNIÈRE MOBILE - sous 1050px */
@media (min-width: 775px) and (max-width: 1050px){
  .hero{
    background-image: url('/templates/template/images/kyoutch-autumn-1004x190.png') !important; /* ta version mobile */
    height: 190px !important;  /* hauteur de ton visuel mobile */
    border: 1px solid #ccc;        
  }
   .hero h1 {
        font-size: 1.5em;
        margin-top: 9%;
        color: #fff;
    }
.hero-overlay {
    border-radius: 10px;
    color: #4b5c7c;
    max-width: 35%;
    margin-left: 6%;
}
    .hero p {
    font-size: 0.9em;
    margin-left: 0%;    
    }
.cta-button {
     padding: 8px 10px;
    margin-left: 35%;

}
    .content_container {
        margin-top: 0px;
    }        
}

/* BANNIÈRE MOBILE - sous 775px */
@media (min-width: 737px) and (max-width: 775px){
  .hero{
    background-image: url('/templates/template/images/kyoutch-autumn-1004x190.png') !important; /* ta version mobile */
    height: 190px !important;  /* hauteur de ton visuel mobile */
    border: 1px solid #ccc;        
  }
   .hero h1 {
        font-size: 1.5em;
        margin-top: 9%;
        color: #fff;
    }
.hero-overlay {
    border-radius: 10px;
    color: #4b5c7c;
    max-width: 38%;
    margin-left: 6%;
}
    .hero p {
    font-size: 0.9em;
    margin-left: 0%;    
    }
.cta-button {
     padding: 8px 10px;
}
    .content_container {
        margin-top: 0px;
    }        
}



/* BANNIÈRE MOBILE - sous 611px */
@media (min-width: 551px) and (max-width: 611px){
  .hero{
    background-image: url('/templates/template/images/kyoutch-autumn-576x190.png') !important; /* ta version mobile */
    height: 190px !important;  /* hauteur de ton visuel mobile */
    border: 1px solid #ccc;        
  }
   .hero h1 {
        font-size: 1.5em;
        margin-top: 9%;
        color: #fff;
    }
.hero-overlay {
    border-radius: 10px;
    color: #4b5c7c;
    max-width: 50%;
    margin-left: 6%;
}
    .hero p {
    font-size: 0.9em;
    margin-left: 0%;    
    }
.cta-button {
     padding: 8px 10px;
    margin-left: 35%;

}
    .content_container {
        margin-top: 0px;
    }        
}

/* BANNIÈRE MOBILE - sous 611px */
@media (min-width: 425px) and (max-width: 550px){
  .hero{
    background-image: url('/templates/template/images/kyoutch-autumn-576x190.png') !important; /* ta version mobile */
    height: 190px !important;  /* hauteur de ton visuel mobile */
    border: 1px solid #ccc;        
  }
   .hero h1 {
        font-size: 1.5em;
        margin-top: 9%;
        color: #fff;
    }
.hero-overlay {
    border-radius: 10px;
    color: #4b5c7c;
    max-width: 68%;
    margin-left: 6%;
}
    .hero p {
    font-size: 0.9em;
    margin-left: 0%;    
    }
.cta-button {
     padding: 8px 10px;
    margin-left: 35%;

}
    .content_container {
        margin-top: 0px;
    }        
}



/* BANNIÈRE MOBILE - sous 425px */
@media (max-width: 425px){
  .hero{
    background-image: url('/templates/template/images/kyoutch-autumn-380x190.png') !important; /* ta version mobile */
    height: 190px !important;  /* hauteur de ton visuel mobile */
    border: 1px solid #ccc;  
    background-color: #4b5c7c;      
  }
    .hero h1 {
        font-size: 1.2em;
        margin-top: 16%;
        color: #fff;
    }
.hero-overlay {
    border-radius: 10px;
    color: #4b5c7c;
    max-width: 60%;
    margin-left: 2%;
}
    .hero p {
    font-size: 0.8em;
    margin-left: 0%;    
    }
.cta-button {
     padding: 5px 10px;
    margin-left: 6%;

}
    .content_container {
        margin-top: 0px;
    }    
}



/* Empile overlay + carte sans toucher aux styles existants de .hero */
.hero-stack{
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  gap:12px;
}

/* Variante "ancrée en bas du hero", sans changer la hauteur */
.hero{ position:relative; }
.dl-card{
  position:absolute; left:35%; bottom:12px; transform:translateX(-50%);
  width:45%; margin:0;   /* on n'utilise plus le flux normal */
}

.dl-card-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 12px;
  border-radius:12px;
  background: #3f51b561;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color:#fff;
}

.btn-dl{
  display:inline-flex; align-items:center; gap:3px;
  padding:6px 10px; border-radius:10px;
  font-weight:700; background:#27ae60; color:#fff; border:0; cursor:pointer;
}
.btn-dl.ghost{ background:transparent; border:1px solid rgba(255,255,255,.6); }

/* léger relief + hover doux */
.dl-card-inner{ box-shadow:0 10px 24px rgba(0,0,0,.25); }
.btn-dl{ transition:transform .12s ease, filter .12s ease; }
.btn-dl:hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* ? 1050px : carte à DROITE en CARRÉ, centrée verticalement */
@media (max-width:1050px){
  .dl-card{
    right:-1%;
    left:auto;
    top:195px;
    bottom:auto;
    transform:translateY(-50%);   /* centre vertical */
    width:280px;
    aspect-ratio:1 / 1;           /* carré */
    border-radius:14px;
  }

  /* Contenu centré dans le carré */
  .dl-card-inner{
    padding:12px;
    display:grid;
    grid-auto-rows:min-content;
    justify-items:center;
    align-content:center;
    gap:8px;
    background:#3f51b561;      /* ton fond */
    border-radius:inherit;
    text-align:center;
  }

  .dl-card-text{ font-size:14px; line-height:1.1; }

  /* Bouton compact */
  .btn-dl{ padding:8px 10px; gap:6px; }
  .btn-dl svg{ display:block; }
}

/* (Optionnel) si tu veux forcer une zone libre à droite pour l'overlay */
@media (max-width:1050px){
  /* décommente si besoin - ça pousse le texte à gauche */
  /* .hero-overlay{ margin-right:clamp(200px, 30vw, 320px); } */
}
@media (max-width:875px){
  .dl-card{
    right:-7%;
  }
}


/* ?1050px : tout centré dans le carré (texte + bouton) */
@media (max-width:1050px){
  .dl-card-inner{
        padding: 8px;      
    display:flex;                 /* écrase le flex/grille précédent */
    flex-direction:column;
    align-items:center;           /* centre horizontal */
    justify-content:center;       /* centre vertical */
    text-align:center;
    gap:10px;
    width:70%;
   }
  .dl-card-text{ margin:0; }
  .dl-card-actions{
    display:flex;
    align-items:center;
    justify-content:center;       /* bouton centré */
    width:100%;
  }
  .btn-dl{ margin:0; }  /* pas de décalage latéral */
   .btn-dl svg{ display:block; }
 
    
}

/* par défaut : on garde la carte "desktop" et on cache la mobile */
.dl-card2{ display:none; }

/* ? 736px : on cache .dl-card (celle dans le hero) et on montre .dl-card2 (sous le hero) */
@media (max-width:736px){
  .dl-card{ display:none !important; }

  .dl-card2{
    display:block;
    width:100%;
    margin:5px auto;           /* sous le hero */
    z-index:1;
  }
  .dl-card-inner2{
    display:flex; align-items:center; justify-content:space-between;
    gap:4px; padding:8px 6px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;    
    background: #fbfbfb;
    backdrop-filter: blur(6px);
    color:#4b5c7c; text-align:left;
    font-family: "Baloo 2", Verdana, Arial, Helvetica, sans-serif;  
  }
  .dl-card-text2 strong{ font-weight:800; }
  .btn-dl{
    display:inline-flex; align-items:center; gap:6px;
    min-height:36px; padding:8px 12px;
    border-radius:10px; font-weight:700;
    background:#27ae60; color:#fff; border:0; cursor:pointer;
    transition:transform .12s ease, filter .12s ease;
  }
  .btn-dl:hover{ transform:translateY(-1px); filter:brightness(1.06); }
  .btn-dl svg{ display:block; }
  .btn-dl svg path{ fill:#fff; }
}

@media (max-width: 400px) {
    .homepage_game {
        width: 99.5% !important;
    }
    .homepage_game img{

        width: 100% !important;
    }    
}

.gift-home{ width:100%; margin:5px 0 5px; }
.gft-hm{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 12px 10px 12px; border-radius:10px;
  background: linear-gradient(90deg,#4b5c7c,#4b5c7c 55%,#4b5c7c);
  color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.18);
  font-family: "Baloo 2", Verdana, Arial, Helvetica, sans-serif;    
}
.gft-hm-title{ font-weight:800; }

.gft-hm-cpt{
  display:flex; align-items:baseline; gap:8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.gft-hm-cpt span{
  font-size:1.05rem; font-weight:800; min-width:36px; text-align:center;
  background:rgba(255,255,255,.12); padding:4px 8px; border-radius:8px;
}
.gft-hm-cpt small{ opacity:.85; margin-left:-6px; margin-right:4px; }

.btn-join{
  display:inline-block; padding:4px 12px; border-radius:10px;
  background:#ffb703; color:#666; font-weight:800; text-decoration:none;
  transition:transform .12s ease, filter .12s ease;
}
.btn-join:hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* Mets le titre sur une ligne entière */
.gft-hm-title strong{
  display:block;
}
/* Et espace le bouton dessous */
.gft-hm-title .btn-join{
  margin-top:6px;          /* ajuste si besoin */
  width:fit-content;       /* garde le bouton à sa largeur */
  display:inline-block;    /* optionnel */
}

/* 1) Prépare le conteneur pour un calque de fond animé */
.gft-hm{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* le ::after reste bien contenu */
}

/* 2) Logo en arrière-plan : centré, grand, qui flotte et rétrécit */
.gft-hm::after{
  content:"";
  position:absolute; inset:0;
  background: url("/games/images/black-logo-ps5.webp") center / 53% no-repeat;
  opacity:.7;                 /* lisibilité du texte */
  transform: translateY(-6px) scale(1.26);
  animation: floatShrink 6s ease-in-out infinite alternate;
  z-index:0;                   /* sous le contenu */
  pointer-events:none;
}

/* 3) S'assure que le contenu reste au-dessus du fond */
.gft-hm > *{
  position: relative;
  z-index:1;
}

/* 4) Animation : légère oscillation + réduction de taille */
@keyframes floatShrink{
  0%   { transform: translateY(-8px) scale(1.08); }
  50%  { transform: translateY( 8px) scale(1.00); }
  100% { transform: translateY( 0px) scale(0.92); }
}

/* 5) Option accessibilité */
@media (prefers-reduced-motion: reduce){
  .gft-hm::after{ animation:none; transform:none; }
}

/* 6) (Optionnel) petit voile pour contraste si besoin
.gft-hm::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.14));
}
*/
@media (max-width:560px){
  .gft-hm::after{
    background-image: url("/games/images/black-logo-ps5.webp");
    background-repeat: no-repeat;
    background-size: 63%;
    /* collé à droite avec 3% de marge et centré verticalement */
    background-position: right 15% center;

    opacity:.7;
    transform: translateY(-6px) scale(1.32);
    animation: floatShrink 6s ease-in-out infinite alternate;
  }
}

/* Mobile */
@media (max-width:736px){
  .gft-hm{ flex-wrap:wrap; gap:10px; }
  .gft-hm-title{ flex:1 1 100%; }
  .gft-hm-cpt{ order:3; width:100%; justify-content:center; }
  .gft-hm-actions{ order:2; }
}

/* --- Anti-lag input: le conteneur ne laisse pas le navigateur capter les gestes --- */
#ava-game_container .rf-box,
#ava-game_container #container {
  touch-action: none;           /* évite le "swipe"/scroll qui mange l'input */
  -webkit-user-select: none;
  user-select: none;
}
/* ===== Footer social - reset local + tailles fixes ===== */
.ky-social{margin:1.25rem 0 0;font-family: Arial;color:#4b5c7c}
.ky-social__wrap{display:flex;flex-direction:column;gap:.6rem}
.ky-social__title{font-weight:600;font-size:1.1rem}
.ky-social__list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}

/* Pastilles */
.ky-social__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08);
  text-decoration:none;overflow:hidden;
  transition:transform .15s, background .15s, border-color .15s;
}
.ky-social__link:hover{transform:translateY(-1px);background:rgba(0,0,0,.10);border-color:rgba(0,0,0,.18)}

/* Neutralise TOUT style global sur les icônes, puis remet nos tailles */
.ky-social__link > img{
  all: initial;
  display:block;
  width:24px;height:24px;
}

/* Mobile compact */
@media (max-width:480px){
  .ky-social__link{width:36px;height:36px}
  .ky-social__link > img{width:22px;height:22px}
}

/* Dark mode (optionnel) */
@media (prefers-color-scheme:dark){
  .ky-social__link{background:#ffffff14;border-color:#ffffff1e}
  .ky-social__link:hover{background:#ffffff26;border-color:#ffffff3a}
}
/* - Uniformise la pastille grise des icônes social - */
:root{
  --ky-social-bg: rgba(0,0,0,.06);
  --ky-social-bd: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --ky-social-bg: rgba(255,255,255,.10);
    --ky-social-bd: rgba(255,255,255,.18);
  }
}

nav.ky-social .ky-social__link{
  background: var(--ky-social-bg) !important;
  border: 1px solid var(--ky-social-bd) !important;
  border-radius: 999px; /* garde la pastille ronde */
}
/* Centrage du titre + des icônes */
.ky-social__wrap{align-items:center; text-align:center}
.ky-social__title{margin:0 0 .25rem}
.ky-social__list{justify-content:center}

 /* Deux colonnes côte à côte dans le bloc dépôt */
  .fav--deposit{
    display:flex;
    gap:16px;
    align-items:flex-start;
    flex-wrap:wrap;           /* repasse en pile sur petits écrans */
  }
  .fav--deposit .profile_deposit_container{
    flex:1 1 50%;
    min-width:300px;
    width:auto !important;    /* neutralise le width:50% hérité du thème */
  }