@charset "utf-8";

@font-face {
    font-family: "X";
    src: url(../fonts/x.otf);	
}

/* ---------------------------------------------------
   Règle générale pour tout le site :
   - Enveloppez votre contenu principal dans 
     <div class="content-wrapper">…</div>
   - Header et footer restent fixes, seul 
     .content-wrapper défile
   - Les barres de défilement sont invisibles
--------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    width: auto;
    height: 100%;
    overflow: hidden;            /* Désactive la barre globale */
}
.content-wrapper {
    position: absolute;
    top: 172px;    /* hauteur de #header */
    bottom: 107px; /* hauteur de #footer */
    left: 0;
    right: 0;
    overflow-y: auto;            /* Scroll interne */
    -ms-overflow-style: none;    /* IE/Edge : pas de barre */
    scrollbar-width: none;       /* Firefox : pas de barre */
}
.content-wrapper::-webkit-scrollbar {
    display: none;               /* Chrome/Safari : pas de barre */
}

/* vos règles existantes ci-dessous… */

html {
    width: auto;	
    height: 100%;
    Padding:0;
}
/* Format text */
.texttab {
    margin-left:8px;
    color: white;
}

body {
    font-family: "X";
    font-size: 66%;
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    width:100%;
    color: white;
    margin: 0;	
    /* NOTE: plus de position:fixed ici */
    -webkit-background-size: cover; /* pour Chrome et Safari */ 
    -moz-background-size: cover;    /* pour Firefox */ 
    -o-background-size: cover;      /* pour Opera */ 
    background-size: cover;         /* version standardisée */ 
}

#preload {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

#preload:before {
  content: url('../img/header/menu/accueilON.png'),
          url('../img/header/menu/lejeuON.png'),
          url('../img/header/menu/mediasON.png'),
          url('../img/header/menu/forumON.png'),
          url('../img/header/menu/boutiqueON.png'),
          url('../img/header/login/supernovaON.png');
}

.thrColLiqHdr #container { 
    width: 100%;  
    margin: 0 auto; 
    text-align: left; 
}
.thrColLiqHdr #header {
    background-image: url(../img/header/header.png);
    background-repeat: repeat;		
    width:100%;
    height:172px;	
}

.demo {
    color: #fff;
    width: 365px;
    list-style: none;
    overflow: hidden;
    margin-top:30px;
    margin-left:-30px;
}

/* Conseils pour les encadrés :
1. Comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour les encadrés. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".thrColLiqHdr #sidebar1 p".
3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
*/
.thrColLiqHdr #sidebar1 {
    float: left; 
    width: 22%; 
    background: none; 
    padding: 15px 0; 
}
.thrColLiqHdr #sidebar2 {
    float: right; 
    width: 23%; 
    background: none; 
    padding: 15px 0; 
}
.thrColLiqHdr #sidebar1 p, 
.thrColLiqHdr #sidebar1 h3, 
.thrColLiqHdr #sidebar2 p, 
.thrColLiqHdr #sidebar2 h3 {
    margin-left: 10px; 
    margin-right: 10px;
}

/* Conseils pour mainContent :
1. l'espace compris entre l'élément mainContent et les encadrés est créé avec les marges gauche et droite de l'élément div mainContent.
2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 300 pixels (images comprises).
3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
*/
.thrColLiqHdr #mainContent { 
    margin: 0 24% 0 23.5%;	
}

.thrColLiqHdr #footer { 
    padding: 0 10px; 	
    background-image: url(../img/footer/footer.png);
    background-repeat: no-repeat;
    width: 100%;	
    height: 107px;
    bottom: 0px;
    position: fixed;
    -webkit-background-size: cover; 
    -moz-background-size: cover;    
    -o-background-size: cover;      
    background-size: cover;         
} 
.thrColLiqHdr #footer p {
    margin: 0; 
    padding: 10px 0; 
}

/* Diverses classes à réutiliser */
.fltrt { 
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear: both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#structure {	
    width:635px;
    height: 172px;
    margin-right:0px;
    margin-left:auto;	
}
#login {
    background-image: url(../img/header/login/backlog.png);
    background-repeat: no-repeat;
    height:46px;
    margin-left:120px;	
    margin-bottom:40px;	
}
#menu{	
    height:40px;			
}

#SupNova{
    background: url(../img/header/login/supernovaOFF.png) no-repeat;
    background-position: center center;
    width:65px;
    height:46px;
    position:relative;
    float:left;
}

#SupNova:hover{
    background: url(../img/header/login/supernovaON.png) no-repeat;
    background-position: center center;
    width:65px;
    height:46px;
    position:relative;
    float:left;
    /*border:1px;
    border-style:solid;	
    border-color:white; */	
}

#Connect{
    height:46px;
    position:relative;
    float:left;
}

/* Partie pour le menu */
#menu li {
    float:left;
    display:inline;
}

.accueil{
    background: url(../img/header/menu/accueil.png) no-repeat;
    width:120px;
    height:40px;
} 
.accueil:hover{
    background: url(../img/header/menu/accueilON.png) no-repeat;
    width:120px;
    height:40px;
}

.lejeu{
    background: url(../img/header/menu/lejeu.png) no-repeat;
    width:113px;
    height:40px;
} 
.lejeu:hover{
    background: url(../img/header/menu/lejeuON.png) no-repeat;
    width:113px;
    height:40px;
}

.medias{
    background: url(../img/header/menu/medias.png) no-repeat;
    width:113px;
    height:40px;
} 
.medias:hover{
    background: url(../img/header/menu/mediasON.png) no-repeat;
    width:113px;
    height:40px;
}

.forum{
    background: url(../img/header/menu/forum.png) no-repeat;
    width:113px;
    height:40px;
} 
.forum:hover{
    background: url(../img/header/menu/forumON.png) no-repeat;
    width:113px;
    height:40px;
}

.boutique{
    background: url(../img/header/menu/boutique.png) no-repeat;
    width:120px;
    height:40px;
} 
.boutique:hover{
    background: url(../img/header/menu/boutiqueON.png) no-repeat;
    width:120px;
    height:40px;
}

/* mise en page */

/* Gestion de compte*/
.gestioncompte{
    background: url(../img/body/gestioncompte.png) no-repeat;	
}

.gestionadmin{
    background: url(../img/body/admin.png) no-repeat;	
}

/* Body */

.XFlash {
    background: url(../img/body/flash.png) no-repeat;
    width:434px;
    height:125px;
}

.XActus {
    background: url(../img/body/actus.png) no-repeat;
    width:434px;
    height:395px;
}

.XProfil {
    background: url(../img/body/profil.png) no-repeat;
    width:370px;
    height:125px;
}

.XPub {
    background: none;
    width:370px;
    height:125px;
}

.XDev {
    background: url(../img/body/devblog.png) no-repeat;
    width:374px;
    height:395px;
}

.XStats {
    background: url(../img/body/stats.png) no-repeat;
    width:850px;
    height:90px;
}

/* Footer */

.footer img {
    display: block;
    margin-left:auto;
    margin-right:auto;
    margin-top:43.5px;
    margin-bottom:43.5px;
}

.forum-message {
    max-width: 70%;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s forwards;
    clear: both;
}

.forum-message.user-message {
    margin-left: auto;
    background-color: rgba(2, 184, 249, 0.2);
    border-color: rgba(2, 184, 249, 0.4);
}

.forum-message strong {
    color: #02B8F9;
}

.forum-message .meta {
    font-size: 0.8em;
    color: #ccc;
    margin-bottom: 5px;
}

/* Animation */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.forum-message:hover {
    background-color: rgba(2, 184, 249, 0.15);
    border-color: rgba(2, 184, 249, 0.4);
    transition: background-color 0.3s, border-color 0.3s;
}