Codage et graphisme 

Headers

Story + extra

Baguette a droite du queel

Nouveau Message, Pas de Message et Verrouiller

Partenariats

PNJ

Staff

Code:

/*--------------------------------------------------------*/
/*-----------Codes couleurs mode Clair / Sombre-----------*/
/*--------------------------------------------------------*/
:root{
/*ici vous devez rentrer tout vode codes de couleur, mais vraiment pour TOUT pour votre code par défaut*/
  /*Header*/
  --header: url(https://zupimages.net/up/22/30/lcy1.jpg);
  --texture: url(https://www.transparenttextures.com/patterns/black-felt.png);
  /*Fonds*/
  --fond:#FEFAEF;
  --fond2:#96AAA8;
  --fonds:#0E192F; /*sélection contenu, fond inversé clair / sombre*/
  --fondln:#CBA16F; /*fond lumos / nox*/
  /*Textes*/
  --texte:#0E192F;
  --texte2:#FEFAEF;
  /*Bordures*/
  --bordure:#CBA16F;
  --bordurei:#657FB8;
  /*Liens*/
  --lien:#657FB8;
  --lienh:#CBA16F;
  /*Dégradé*/
  --deg:linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  /*Couleurs*/
  --color1:#CBA16F;
}

/*dark mode*/

[data-theme="dark"]{
/*ici vous devez rentrer tout vode codes de couleur, mais vraiment pour TOUT, pour le dark mode (donc les équivalents du premier root mais dans les couleurs qui vont changer en activant le toggle*/
  /*Header*/
  --header: url(https://zupimages.net/up/22/30/uybj.jpg);
  --texture: url(https://www.transparenttextures.com/patterns/nice-snow.png);
  /*Fonds*/
  --fond:#0E192F;
  --fond2:#153347;
  --fonds:#FEFAEF;
  --fondln:#657FB8;
  /*Textes*/
  --texte:#FEFAEF;
  --texte2:#0E192F;
  /*Bordures*/
  --bordure:#657FB8;
  --bordurei:#CBA16F;
  /*Liens*/
  --lien:#CBA16F;
  --lienh:#657FB8;
  /*Dégradé*/
  --deg:linear-gradient(to left, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  /*Couleurs*/
  --color1:#657FB8;
}

/*toggle*/
.theme-switch-wrapper {
    display: inline-block;
    align-items: center;
    position: fixed;
    z-index: 99;
    right: 0;
  top:55px;
}

.theme-switch-wrapper em {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-left:-10px;
}
.theme-switch {
  display: inline-block;
  height: 20px;
  position: relative;
  width: 40px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color:var(--fondln);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: var(--fond);
  bottom: 4px;
  content: "";
  height: 12px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 12px;
}

input:checked + .slider {
  background-color:var(--fondln);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

/*fin dark mode*/

@font-face {
  font-family: Airthan Age;
  src: url(https://dl.dropbox.com/s/5zal9iqoxshfwre/AirthanAge.ttf?);
}

/*--------------------------------------------------------*/
/*-----------------Apparence Fond / Header----------------*/
/*--------------------------------------------------------*/
body {
  background-color:var(--fond);
  color:var(--texte);
  background-image:var(--texture);
}

body a {
  color:var(--lien);
  text-decoration:none!important;
  transition-duration: 2s;
}

body a:hover {
  color:var(--lienh);
  text-decoration:none!important;
  transition-duration: 2s;
}

.bodyline {
  background-color:var(--fond);
}

img#i_logo {
  margin: auto;
  width: 100%;
  background: var(--header);
  background-repeat:no-repeat;
  background-size:cover;
  height:405px;
  margin-top:20px;
}

/*--------------------------------------------------------*/
/*-----------Suppression des bordures initiales-----------*/
/*--------------------------------------------------------*/
.row3Right {
  border: none !important;
}
td.catHead,
th.thHead {
  border: none !important;
}
.thCornerL,
.thCornerR,
.thTop {
  border: none !important;
}
.thLeft,
.thRight {
  border-left: none !important;
  border-right: none !important;
}
.catLeft,
.catRight {
  border: none !important;
}
.catBottom {
  border: none !important;
}
td.catHead {
  border: none;
  font-size: 11px;
}
hr {
  display: none;
}
td.catBottom,
th.thBottom {
  border: none !important;
}
td.spaceRow {
  border: none;
}
th.thSides {
  border: none;
}

/*--------------------------------------------------------*/
/*-------------------Apparence Scrollbar------------------*/
/*--------------------------------------------------------*/

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background:var(--fond);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:var(--lienh);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:var(--lien);
}

/*--------------------------------------------------------*/
/*------------Sélectionner le contenu d'un code-----------*/
/*--------------------------------------------------------*/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

/*--------------------------------------------------------*/
/*------Couper les liens trop long dans les messages------*/
/*--------------------------------------------------------*/
.postbody {
  word-wrap: break-word;
}

/*--------------------------------------------------------*/
/*-----------------Apparence de l'édituer-----------------*/
/*----------------------Sparrow-style---------------------*/
/*--------------------------------------------------------*/
/*--- Bloc réponse rapide ---*/
 
.sceditor-container.ltr.sourceMode {
width:100% !important;
background-color:var(--fond) !important;
  border:1px solid var(--bordure)!important;
  border-top:none!important;
}
.sceditor-container.ltr.wysiwygMode {
width:100% !important;
background-color:var(--fond) !important;
  border:1px solid var(--bordure)!important;
  border-top:none!important;
}

/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
background-image:var(--deg)!important;
width:cacl(100% - 10px) !important;
  border:none!important;
}

/*---  Partie texte area : fond ---*/
 
.sceditor-container iframe, .sceditor-container textarea {
background-color:var(--fond) !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width:99%!important;
color:var(--texte)!important;
font-size:11px !important;
}

/*---  Groupe de boutons ---*/
 
div.sceditor-group {
background:none!important;
  border:none!important
}

.sceditor-button.hover, a.sceditor-button:hover {
background-color:var(--lien);
}

#sceditor_smilies {
  background-color:var(--fond)!important;
  color:var(--texte);
}

input.post, textarea.post, select, #text_editor_iframe, textarea.inputbox {
  background-color:var(--fond);
  color:var(--texte);
}

input.liteoption {
background-image:var(--deg);
color:var(--texte);
  border-radius:20px;
  border:none;
}
input.mainoption {
background-image:var(--deg);
color:var(--texte);
  border-radius:20px;
  border:none;
}

/*--------------------------------------------------------*/
/*------------------Les corrections de FA-----------------*/
/*--------------------------------------------------------*/

/*Fond bloc recherche*/
th.thHead {
  background-image:var(--deg);
}

td.row2 {
  background-color:var(--fond);
}

/*Fond connexion*/
input {
  background-color:var(--fond);
  color:var(--texte);
}

/*---------------------------------------------------------------------*/
/*---------------------------Codes de Bounty---------------------------*/
/*---------------------------------------------------------------------*/
/*--------------- FLOAT --------------*/
.droite {
  float: right;
  padding: 0 0 0 10px;
}

.gauche {
  float: left;
  padding: 0 10px 0 0;
}

.clearfix::after{
  clear: both;
  content: "";
  display: block;
}

/*-------------- COLUMNS --------------*/
.columns,
.col {
  display: flex;
}

.col > * {
  padding: 10px;
  margin: 0 5px;
  flex: 1;
}

.col img {
  width: 100%;
}

.is-2 {
  flex: 2;
}
.is-3 {
  flex: 3;
}

.forumline {
  width: 90%;
  margin: 0 auto;
}

/*Texte surligné*/
::selection {
  background-color:var(--fonds);
  color:var(--texte2);
}

/*Boîte code & citation*/
.codebox dt span b:before {
  content: " ❝ ";
  font-size: 24px;
  color:var(--color1);
  margin-right: 5px;
  font-family: arial;
}

.codebox,
.codebox .code,
.codebox .quote {
  text-align: justify;
  font-size: 12px;
}

.codebox dt {
  margin-bottom: 2px;
}

.codebox .quote {
  border: none;
  margin: 0;
  padding: 10px;
  background-color:var(--fond);
}
/*.codebox dt span.genmed { 
display: none;
}*/

.codebox dt span.selectCode {
  color: grey;
  font-family: 'Marcellus', serif;
  font-size: 9px;
}

.code {
  padding: 20px;
  background-color:var(--fond);
  border: none;
}

.code div.cont_code {
  max-width:400px;
  max-height: 200px;
  overflow: auto;
  font-family: 'Marcellus', serif;
  color: grey;
  text-align: left;
  font-size: 12px;
}

/*Apparence forum*/
.post {
  margin-bottom: 50px;
}

#page-footer {
  /*width: 875px;*/
  height: 50px;
  /*background: url(https://zupimages.net/up/18/49/e5u6.png);*/
}

#page-footer a {
  font-size: 10px;
  color:var(--lien) !important;
}

.bodylinewidth {
  width: 100%;
  max-width: 850px;
  border-right: 5px solid var(--bordure);
  border-left: 5px solid var(--bordure);
}

.selectCode {
  float: right;
  text-transform: uppercase;
  cursor: pointer;
}
div.cont_code {
  clear: right;
  text-align: justify;
  color:var(--texte);
}

/*  Typographie */

/*input[type="submit"],
input {
  border: 1px solid var(--bordure);
  font-family: 'Marcellus', serif;
  padding: 5px;
  border-radius: 5px;
  font-size: 9px;
  /text-transform: uppercase;
  color:var(--color1);
  background:none;
}*/

select {
  padding: 2px;
  border-radius: 2px;
  color: grey;
}

input.post {
  width: 100%;
  margin-bottom: 10px;
}

textarea {
  font-family: 'Marcellus', serif;
  font-size: 11px;
}

/*-----------------------------------------------------------------*/
/*---------------------------Codes Staff---------------------------*/
/*-----------------------------------------------------------------*/
.Loukoum, .Nougat, .Bounty, .Pitch, .Chewi {
    text-align: center;
    font-style: italic;
}

.Loukoum {color:#FF00FF;}
.Nougat {color: #6666ff;}
.Bounty {color: #cc6633;}
.Pitch {color: #006633;}
.Chewi {color: #CF0000;}

@font-face {
  font-family: Elsie Regular;
  src: url(https://dl.dropbox.com/s/083zho2o93466up/Elsie-Regular.ttf?);
}

.MAJL {
  text-align:center;
  font-size:12px;
  font-family: 'Elsie Regular', cursive;
  background-image: linear-gradient(to right bottom, #cba16f, #e18a5e, #f76b62, #ff427d, #ff01aa, #f32ac7, #e144e4, #c55aff, #9e6ef7, #7e78e8, #6b7ed2, #657fb8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

/*------------------------------------------------------------------*/
/*---------------------------Effets texte---------------------------*/
/*------------------------------------------------------------------*/
u {
  border-bottom: 1px dotted;
  border-color:var(--bordure);
  text-decoration: none;
}

.infos3 {
  text-transform: uppercase;
  background-image: linear-gradient(to left, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

uu {
  box-shadow: inset 0 -3px 0 var(--bordure);
  transition-duration: 2s;
}

uuu {
  box-shadow: inset 0 -3px 0 var(--bordure);
  transition-duration: 2s;
}

uuu:hover {
  box-shadow: inset 0 -15px 0 var(--bordurei);
  color:(--texte2);
  transition-duration: 2s;
}

ii {
  border-bottom:none;
  color:var(--bordure);
  font-style: italic;
  text-shadow: 1px 0px 0px var(--texte);
}

.infos4 {
  background-image: linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  padding:4px 10px 2px 10px;
  border-radius:20px;
  color:var(--texte);
  font-weight:bold;
  text-transform:uppercase;
}

.infos, c {
  text-transform: uppercase;
  background-image: linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.infos2 {
  background-image: linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  padding:4px 10px 2px 10px;
  border-radius:20px;
  color:var(--texte);
  font-weight:bold;
  text-transform:uppercase;
}

/*------------------------------------------------------------*/
/*---------------------------Fiches---------------------------*/
/*------------------------------------------------------------*/

/*-------------- Fiche de présentation --------------*/

.rm_fiche_fond {
  background-image: url("https://www.transparenttextures.com/patterns/paper-3.png");
  background-color: var(--fond);
  text-align: justify;
  width: 488px;
  margin: 0 auto;
  border: 1px solid var(--bordure);
 
}

/* .rm_fiche_section * {
  font-family: 'Open Sans' !important;
} */
.img_250 {
  position: relative;
  overflow-y: hidden !important;
  flex: 0.4 !important;
  padding: 0 !important;

}

.img_250::before {
  display: block;
  content: "";
  width: 250px;
  padding-top: calc((1 / 1) * 250px);
}

.img_250 img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 150px !important;
  width: 250px !important;
  object-fit: cover;
}

.rm_fiche_section {
  background-color:var(--fond);
  padding: 1em;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.rm_fiche_section-dark {
  background-color: var(--bordure);
  color:var(--texte);
  padding: 20px;
}

.rm_fiche_section b{
  color:var(--bordure);
}

.rm_fiche_section-dark a,
.rm_fiche_section-dark a:visited,
.rm_fiche_section-dark a:active,
.rm_fiche_section-dark a:hover {
  color:var(--lien);
  text-decoration: underline;
}

span.spacer {
  display: block;
  height: 20px;
}
.rm_fiche_section_wrapper {
  border: 1px solid var(--bordure);
 
}

.rm_fiche_section .columns  {
  max-height: 320px;
  justify-content: space-between;
 
}

.rm_fiche_section .columns p {
  flex: 1;
  padding: 0 10px;
  margin: 0;
}

.rm_fiche_section img.droite,
.rm_fiche_section img.gauche {
  max-width: 200px;
}
.rm_fiche_section .columns div {
  overflow-y: scroll;
  text-align: left;
  padding-right: 10px;
  flex: 1;
}

.rm_fiche_link {
 height: 130px;
 overflow-y: scroll;
}

.rm_fiche_link * {
  padding: 0 !important;
  text-align: justify;
  padding-left:10px!important;
}

.rm_fiche_titre {
  margin: 20px;
}
.rm_fiche_titre p {
  font-family: 'Airthan Age', cursive;
  font-size: 40px;
  text-align: center;
  /*text-transform: uppercase;*/
  margin: 0;
  color:var(--texte);
}
.rm_fiche_titre span {
  display: block;
  font-family: 'Airthan Age', cursive;
  font-size: 14px;
  text-align: center;
  /* text-transform: uppercase; */
  margin: -10px 0 0 0;
  font-style: italic;
  color:var(--bordurei);
}

.rm_fiche_soustitre {
    font-family: 'Airthan Age', cursive;
    font-size: 20px;
    /*text-transform: uppercase;*/
    margin: 0;
  color:var(--bordurei);
}

.rm_fiche_cover {
  position: relative;
}

.rm_fiche_cover::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc((1 / 3) * 100%);
}

.rm_fiche_cover img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.7;
}

.rm_fiche_avatar {
  position: relative;
  overflow-y: hidden !important;
  flex: 0.4 !important;
  padding: 0 !important;
  overflow-x:hidden;

}

.rm_fiche_avatar::before {
  display: block;
  content: "";
  width: 130px;
  padding-top: calc((1 / 1) * 130px);
}

.rm_fiche_avatar img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 130px !important;
  width: 130px !important;
  object-fit: cover;
}


/*--------------  --------------*/
ul.liste {
  padding-left: 2em;
}
ul.liste li {
  list-style-type: none;
  position: relative; 
}

ul.liste li ul {
  padding-left: 1.5em;
}

ul.liste li ul li::before {
  content: '-'; 
  position: absolute;
  left: -1.5em; 
  font-size: 1em;
  color: silver;
}

ul.liste li::before {
  content: 'Ϟ'; 
  position: absolute;
  left: -1.5em; 
  font-size: 1em;
  color: silver;   
}
/*Fin fiche de présentation*/

/* --------------------- Fiche d'Administration, de Présentation & de Scénario --------------------- */

/* .fafond br {
    display: none;
} */

.fafond {
  width: 100%;
  background-color:var(--fond);
  background-image: url("https://www.transparenttextures.com/patterns/paper-3.png");
}

.fatexte {
  width:80%;
  padding: 1.5em 2em;
  margin: 0;
  font-size: 12px;
  text-align: justify;
  /*text-indent: 2em;*/
  background-color:var(--fond);
  color:var(--texte);
  font-family: 'Marcellus', serif;
}

.fatexte bb{
  background-image:var(--deg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.fatexte a {
  font-weight:bold;
  letter-spacing:1px;
}

.fatitre,
.fasoustitre,
.titre1,
.titre2 {
  font-family: 'Airthan Age', cursive;
  /*text-transform: uppercase;*/
  padding-top:20px;
}

.fatitre,
.titre1 {
  font-size: 60px;
  font-weight: 700;
  color:var(--bordure);
}

.fasoustitre,
.titre2 {
  font-size: 30px;
  border-bottom: 1px solid var(--bordure);
  border-top: 1px solid var(--bordure);
  padding: 10px;
  color:var(--bordure);
  margin-top:20px;
}

.titre1,
.titre2 {
  text-align: center;
}

.titre2 {
  width: 80%;
  margin: 0 auto;
}

.facrédit {
  font-size: 9px;
  border-top: 1px solid var(--bordure);
  padding-top:5px;
  padding-bottom: 10px;
  color: var(--bordure);
}

.faimage {
  width: 80%;
}

/*-------------------------Fiches de liens par Loukoum-------------------------*/
.LTfond{
  width:100%;
  background-color:var(--fond);
  background-image: url("https://www.transparenttextures.com/patterns/paper-3.png");
  padding:10px;
}

.LTavatar{
  width:200px!important;
  height:320px;
  objectif-fit:cover;
  border:1px solid var(--bordure);
}

.LTpseudo{
  font-size:20px;
  color:var(--texte);
  text-align:right;
  margin-top:5px;
  font-family: 'Airthan Age', cursive;
}

.LTcitation{
  font-size:10px;
  text-align:right;
  color:var(--texte);
  letter-spacing:-1px;
  margin-top:-10px;
  font-family: 'Marcellus', serif;
}

.LTinfos{
  overflow:auto;
  height:265px;
  background-color:var(--fond);
  color:var(--texte);
  text-align:justify;
  padding:5px 10px 5px 5px;
  font-size:12px;
  font-family: 'Marcellus', serif;
}

.LTrptitre{
  font-size:18px;
  /*text-transform:uppercase;*/
  color:var(--texte);
  text-align:left;
  font-family: 'Airthan Age', cursive;
}

.LTrpcontenu{
  background-color:var(--fond);
  color:var(--texte);
  text-align:justify;
  padding:10px;
  font-size:12px;
  font-family: 'Marcellus', serif;
}

.LEtitre{
  width:400px;
  background-color:var(--bordure);
  color:#FFFFFF;
  font-size:30px;
  border:10px double var(--texte2);
  padding:10px;
  font-family: 'Airthan Age', cursive;
}

.LEimage {
  width:200px;
  height:200px;
  padding:0;
  position:relative;
  overflow:hidden;
}

.LEimage2 {
  width:200px;
  z-index:1;
  position:relative;
}

.LEcontenu{
  width:200px;
  height:200px;
  background-color:var(--fond);
  background-image: url("https://www.transparenttextures.com/patterns/paper-3.png");
}

.LEtexte{
  height:170px;
  color:var(--texte);
  overflow:auto;
  text-align:justify;
  padding:0px 10px 0px 10px;
  font-family: 'Marcellus', serif;
  font-size:12px;
}

.LBfond{
  width:90%;
  background-color:var(--fond);
  background-image: url("https://www.transparenttextures.com/patterns/paper-3.png");
  border:2px outset var(--bordure);
}

.LBtitre{
  width:96%;
  background-color:var(--bordure);
  color:var(--texte2);
  font-size:30px;
  border-top:2px solid var(--bordure);
  border-bottom:2px solid var(--bordure);
  padding:10px;
  font-family: 'Airthan Age', cursive;
}

.LBtitre2{
  width:90%;
  color:var(--bordure);
  font-family: 'Airthan Age', cursive;
  font-size:15px;
  border-bottom:2px solid var(--bordure);
}

.LBcontenu{
  width:80%;
  padding-right:10px;
  height:200px;
  overflow:auto;
  text-align:justify;
  font-family: 'Marcellus', serif;
  font-size:12px;
  color:var(--texte);
}

.LBtitre3{
  width:100%;
  background-color:var(--bordure);
  color:var(--texte2);
  font-family: 'Airthan Age', cursive;
  font-size:20px;
  border-bottom:2px solid var(--bordure);
}

.LBcontenu2{
  width:95%;
  padding-right:10px;
  height:100px;
  overflow:auto;
  text-align:justify;
  font-family:'Overpass';
  font-size:12px;
  color:var(--texte);
}

.SimsFAfond{
  width:450px;
  background-color:var(--fond);
  background-image: url("https://www.transparenttextures.com/patterns/paper-3.png");
  border:5px solid var(--bordure);
  padding:10px;
  text-align:justify;
  font-family: 'Marcellus', serif;
  font-size:12px;
  color:var(--texte);
}

.SimsFA{
  width:200px;
  height:320px;
  overflow:hidden;
  color:var(--texte);
}

.SimsFA_img{
  position:relative;
  z-index:2;
  width:200px;
  height:320px;
  transform:all;
  -moz-transform:all;
  -o-transform:all;
  -htm-transform:all;
  -webkit-transform:all;
  transition:1s;
  -moz-transition:1s;
  -o-transition:1s;
  -htm-transition:1s;
  -webkit-transition:1s;
}

.SimsFA:hover .SimsFA_img{
  margin-left:-200px;
  transform:all;
  -moz-transform:all;
  -o-transform:all;
  -htm-transform:all;
  -webkit-transform:all;
  transition:1s;
  -moz-transition:1s;
  -o-transition:1s;
  -htm-transition:1s;
  -webkit-transition:1s;
}

.SimsFA_description{
  position:relative;
  z-index:1;width:200px;
  height:320px;
  margin-top:-320px;
  overflow-y:auto;
  overflow-x:hidden;
  color:var(--texte)!important;
  font-family: 'Marcellus', serif;
  font-size:12px;
}

.SimsFAbande{
  color:var(--texte);
  background-image: linear-gradient(to left, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  width:90%;
  padding:5px;
  text-align:center;
  font-family: 'Airthan Age', cursive;
  font-size:14px;
}

.SimsFAbande:hover{
  background-image: linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
}

.SimsFAbande2{
  color:var(--texte);
  background-image: linear-gradient(to left, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  width:440px;
  padding:5px;
  text-align:center;
  font-family: 'Airthan Age', cursive;
  font-size:14px;
}

.SimsFAbande2:hover{
  background-image: linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
}

.SimsFAbande22{
  color:var(--texte);
  background-image: linear-gradient(to left, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
  width:440px;
  padding:5px;
  text-align:center;
  font-family: 'Airthan Age', cursive;
  font-size:20px;
}

.SimsFAbande22:hover{
  background-image: linear-gradient(to right, #cba16f, #d68b7d, #ca7d98, #a37bb0, #657fb8);
}

.SimsFAgras{
  font-weight:bold;
  color:var(--bordure);
  text-transform:uppercase;
  font-size:10px;
}

.SimsFAgras:hover{
  color:var(--bordurei);
}

.SimsFAinfos{
  padding-left:10px;
  text-align:center;
}

.SimsFAanecdotes{
  padding:0px 10px 0px 10px;
  width:90%;
  height:200px;
  overflow:auto;
  font-size:12px;
  text-align:justify;
  font-family: 'Marcellus', serif;
  color:var(--texte);
}

.SimsFApresentation{
  padding:0px 10px 0px 10px;
  width:90%;
  height:270px;
  overflow:auto;
  font-size:12px;
  text-align:justify;
}

.SimsFApresIRL{
  padding:0px 10px 0px 10px;
  width:90%;
  height:120px;
  overflow:auto;
  font-size:12px;
  text-align:justify;
}

.SimsFAtitre{
  font-size:20px;
  font-family: 'Airthan Age', cursive;
  color:var(--bordure);
  width:400px;
  font-weight:bold;
}

.SimsFAentete{
  width:350px;
}

.SimsFAlien{
  font-family: 'Marcellus', serif;
  font-size:12px;
  opacity:0.0;
  color:var(--texte);
  text-align: justify;
  width: 190px;
  height: 310px;
  background-color:var(--fond);
  -webkit-transition: opacity .6s linear;
  -moz-transition: opacity .6s linear;
  -o-transition: opacity .6s linear;
  padding:5px;
  overflow:auto;
}

.SimsFAlien:hover{
  opacity: 0.9;
}

.SimsFAbande3{
  color:var(--texte);
  background-color:var(--bordure);
  width:190px;
  padding:5px;
  text-align:center;
  margin-top:-180px;
  font-family: 'Airthan Age', cursive;
  font-size:14px;
}

.SimsFAbande321{
  color:var(--texte);
  background-color:var(--bordure);
  width:190px;
  padding:5px;
  text-align:center;
  margin-top:-26px;
  font-family: 'Airthan Age', cursive;
  font-size:14px;
}

.SimsFAbande322{
  color:var(--texte2);
  background-color:var(--bordurei);
  width:190px;
  padding:5px;
  text-align:center;
  margin-top:-26px;
  font-family: 'Airthan Age', cursive;
  font-size:14px;
}

/*--------------------------------------------------------*/
/*-----------Barre de Navigation + Notifications----------*/
/*--------------------Jawn sur Epsilon--------------------*/
/*--------------------------------------------------------*/

#fa_toolbar {
  top: -30px;
}
#fa_toolbar #fa_right #notif_list {
  z-index: 999 !important;
  margin-top: 10px !important;
  margin-left: -45px !important;
}
#fa_left, #fa_search, #fa_share, #fa_welcome, #fa_hide {
        display: none !important;
    }
#notif_list {
  background:var(--fond) !important;
  top: 28px;
  position: fixed !important;
}
.rep_navbar {
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  background:var(--bordure);
  padding: 10px;
  z-index:99;
}
a.mainmenu, #fa_notifications {
  color:var(--texte) !important;
  font: 11px Marcellus;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#fa_notifications {
  margin-left: 15px;
}
.js-avatar {
  border-radius: 100%;
  position: fixed;
  top: 0px;
  z-index: 9;
  left: 4px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: solid 5px var(--bordure);
  z-index:999;
}
.js-avatar img {
  width:100%;
}
a[href="/memberlist"] {
  margin-left:10px;
}
a[href="/groups"] {
  margin:0px 10px;
}
a[href="/privmsg?folder=inbox"] {
 margin:0px -10px 0px 5px;
}
/*--------------------------------------------------------*/
/*------------------------Catégories----------------------*/
/*-----------------Loukoum sur Tourmaline-----------------*/
/*--------------------------------------------------------*/
.catlienshaut a {
  font-family:'Airthan Age';
  font-size:30px;
  margin-top:20px;
}

.catt h2{
  text-align:center;
  font-family:'Airthan Age';
  font-size:60px;
  color:var(--bordure);
}

.catnew img, .catvava img {
  width:75px;
  height:150px;
  object-fit:cover;
}

.catsst a{
  font-family:'Airthan Age';
  font-size:30px;
  color:var(--bordure);
}

.catsst a:hover {
  color:var(--bordurei);
}

.catdes {
  width:250px;
  height:100px;
  overflow:auto;
  text-align:justify;
  font-size:12px;
  float:left;
  margin-right:10px;
}

.catssf {
  width:170px;
  height:100px;
  overflow:auto;
  margin-left:10px;
}

.catssf a{
  display:block;
  margin:auto;
  margin-bottom:3px;
  width:95%;
  text-align:center;
  font-size:12px;
  line-height:12px;
  color:var(--texte) !important;
  background:var(--bordure);
  padding:2px;
}

.catssf a:hover {
  background:var(--bordurei);
}

.catlast {
  width:120px;
  height:150px;
}

.catsuj, .catmes {
  background:var(--bordure);
  texte:var(--texte);
}
.catsuj {margin-top:15px;margin-bottom:5px;}
.catmes {margin-top:5px;margin-bottom:15px;}
.catlast2 {height:90px;}

/*--------------------------------------------------------*/
/*----------------------Page d'Accueil--------------------*/
/*-----------------Loukoum sur Tourmaline-----------------*/
/*--------------------------------------------------------*/
.onglet {}   
.onglet_0{background:transparent;}
.onglet_1{background:transparent;}
.contenu_onglet {
  display:none;
  text-align: justify;
  width: 400px;
  height: 400px;
  font-size: 12px;
}
.onglet img {
  width:200px;
  height:400px;
  object-fit:cover;
}
.patitre {
  font-family:'Airthan Age';
  font-size:30px;
  color:var(--bordure);
  text-align:center;
}
.pahis {
  position:relative;
  top:0px;
  left:0px;
  width:395px;
  height:150px;
  overflow:auto;
  padding-right:5px;
}
.panav {
  text-align:center;
  margin-top:5px;
}
.panav a {
  font-family:'Airthan Age';
  font-size:30px;
}
.pasce {
  position:relative;
  top:10px;
  left:0px;
  width:210px;
  height:200px;
  text-align:left;
}
.imgscena {
  width:66px;
  height:66px;
  object-fit:cover;
}
.infobulle {
  position:relative;
  height:66px;
  width:66px;
  overflow:visible;
  display:inline-block;
}
.infobulle .bulleimage {
  height:66px;
  width:66px;
  object-fit:cover;
}
.infobulle .bulletexte { /*Apparence des bulles*/
  position: absolute;
  top:0px;
  left:0px;
  width: 56px;
  height: 56px;
  background-color:var(--fond); /*Modifiable*/
  opacity: 0;
  visibility: hidden;
  padding:5px;
  -webkit-transform: scale(0);
  transform: scale(0);
  visibility: hidden;
  transition: all ease 1s;
  color:var(--texte);
  text-align:center;
}
.bulletexte strong, .pairl strong, .panews strong {color:var(--color1);}
.bulletexte a {color:var(--bordurei);}
.infobulle:hover .bulletexte {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  visibility: visible;
  z-index: 999;
  transition: all ease 1;
}
.pairl {
  position:relative;
  top:-190px;
  left:220px;
  width:175px;
  height:205px;
  padding-right:5px;
  overflow:auto;
}
.staff {
  position:relative;
  top:0px;
  left:0px;
  width:400px;
  height:188px;
  padding:2px 5px;
  text-align:center;
}
.staff img {
  width:56px;
  height:56px;
  border-radius:100px;
  object-fit:cover;
}
.bulleTiti, .bullePhil, .bullePaul, .bulleMaddi, .bulleSeth {
  display: inline-block;
}
.bulleTiti > div, .bullePhil > div, .bullePaul > div, .bulleMaddi > div, .bulleSeth > div {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  background:var(--fond);
  width:390px;
  height:90px;
  padding:5px;
}
.bulleTiti:hover > div, .bullePhil:hover > div, .bullePaul:hover > div, .bulleMaddi:hover > div, .bulleSeth:hover > div {
  opacity: 1;
  visibility: visible;     
}
.bulleTiti:hover > div {
  margin-top: 0px;
  margin-left: -58px;
}
.bullePhil:hover > div {
  margin-top: 0px;
  margin-left: -117.5px;
}
.bullePaul:hover > div {
  margin-top: 0px;
  margin-left: -177px;
}
.bulleMaddi:hover > div {
  margin-top: 0px;
  margin-left: -236.5px;
}
.bulleSeth:hover > div {
  margin-top: 0px;
  margin-left: -296px;
}
.bullestaff {
  font-size:10px;
}
.bullestaff img {
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:100px;
}
.bulleTiti d, .bullePhil d, .bullePaul d, .bulleMaddi d, .bulleSeth d {color:var(--color1);font-family:'Airthan Age';font-size:20px;}
.panews {
  position:relative;
  top:10px;
  left:0px;
  width:180px;
  height:200px;
  overflow:auto;
  paddng-right:5px;
}
.paamis {
  position:relative;
  top:-190px;
  left:190px;
  width:210px;
  height:50px;
  text-align:center;
}
.pamdm {
  position:relative;
  top:-180px;
  left:190px;
  width:210px;
  height:70px;
  text-align:center;
}
.pacre {
  position:relative;
  top:-175px;
  left:190px;
  width:205px;
  height:65px;
  text-align:justify;
  padding-right:5px;
  overflow:auto;
}

/*--------------------------------------------------------*/
/*---------------------Qui Est En Ligne-------------------*/
/*-----------------Loukoum sur Tourmaline-----------------*/
/*--------------------------------------------------------*/
.qeelfond {height:220px;}
.qeelt a {
  text-align:center;
  font-family:'Airthan Age';
  font-size:60px;
  color:var(--bordure);
}
.qeelpur {
  position:relative;
  top:0px;
  left:50px;
  width:150px;
  height:35px;
  background-color:#A87B43;
  font-family:'Airthan Age';
  font-size:30px;
  padding:5px;
  text-align:center;
}
.qeelmele {
  position:relative;
  top:10px;
  left:50px;
  width:150px;
  height:35px;
  background-color:#F2D1A8;
  font-family:'Airthan Age';
  font-size:30px;
  padding:5px;
  text-align:center;
}
.qeelne {
  position:relative;
  top:20px;
  left:50px;
  width:150px;
  height:35px;
  background-color:#91A7D5;
  font-family:'Airthan Age';
  font-size:30px;
  padding:5px;
  text-align:center;
}
.qeelmol {
  position:relative;
  top:30px;
  left:50px;
  width:150px;
  height:35px;
  background-color:#44619E;
  font-family:'Airthan Age';
  font-size:30px;
  padding:5px;
  text-align:center;
}
.qeelpur a, .qeelmele a, .qeelne a, .qeelmol a {color:var(--texte)!important;}
.qeellast {
  position:relative;
  top:-180px;
  left:220px;
  width:200px;
  height:210px;
  text-align:center;
  font-size:12px;
}
.qeellast img {
  width:200px;
  height:150px;
  object-fit:cover;
}
.qeellast strong {font-family:'Airthan Age';font-size:30px;}
.qeelstats {
  position:relative;
  top:-390px;
  left:430px;
  width:250px;
  height:210px;
  text-align:justify;
  padding-right:5px;
  overflow:auto;
  font-size:12px;
}
.qeelsab {
  position:relative;
  top:-600px;
  left:690px;
  width:100px;
  height:200px;
}
.qeelsab img {width:105px;height:210px;}
.partenaires img {width:100px;height:35px;object-fit:cover;margin:1px;filter: grayscale(100%);}
.partenaires img:hover {filter: grayscale(0%);}
/*--------------------------------------------------------*/
/*--------------------Profils & Messages------------------*/
/*-----------------Loukoum sur Tourmaline-----------------*/
/*--------------------------------------------------------*/
.affsujtitre h1 {
  background:var(--deg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size:40px;
  font-family:'Airthan Age';
  padding:5px;
}

.affsujpag {
  font-size:10px;
  text-align:center;
}

.affsujpag b {
  font-family:'Airthan Age';
  font-size:12px!important;
}

.affsujprofil {
  width:210px;
  padding:5px;
  /*background-color:var(--bordure);*/
}

.affsujpseudo {
  font-family:'Airthan Age';
  font-size:40px;
  text-align:center;
}

.affsujrang {
  color:var(--bordure);
  font-size:12px;
  text-align:center;
}

.affsujit {
  color:var(--bordure);
  font-family:'Airthan Age';
  font-size:30px;
  text-align:center;
}

.affsujavatar {
  border:5px solid var(--bordure);
  width:200px;
  height:320px;
  overflow: hidden;
}

.affsujavatar_img {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 320px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.affsujavatar:hover .affsujavatar_img {
  margin-left: -200px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.affsujrpg {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 320px;
  margin-top: -320px;
  overflow-y: auto;
  overflow-x: hidden;
}
 
.affsujinfos {
  width:200px;
  height:200px;
  border:5px solid var(--bordure);
  /*background-color:var(--fond2);*/
  overflow:auto;
}

.affsujinfos img {
  max-width:100%;
}

.affsujonligne {
  margin-top:5px;
}

.affsujad {
  /*background-color:var(--bordure);*/
}

.affsujzone {
  /*background-color:var(--bordure);*/
  min-height:450px;
  margin-bottom:10px;
}

.postbody {
  /*background-color:var(--fond2);*/
  padding:10px;
  width:calc(100%-10px);
  text-align:justify;
  font-size:12px;
}

.affsujtitre2 {
  background:var(--deg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size:20px;
  font-family:'Airthan Age';
  padding:5px;
}

.affsujpage {
  font-size:10px;
}

.affsujpage b {
  font-family:'Airthan Age';
  font-size:12px!important;
}

/*--------------------------------------------------------*/
/*---------------------Liste des sujets-------------------*/
/*-----------------Loukoum sur Tourmaline-----------------*/
/*--------------------------------------------------------*/ 
.lsujimg img {
  width:50px;
  height:80px;
  object-fit:cover;
}

.lsujgen {
  width:450px;
}

.lsujgen h2 {
  color:var(--lien);
  margin-left:2px;
  font-size:15px;
}

.lsujgen h2:hover {
  color:var(--lienh);
}

.lsujaut {
  color:var(--texte);
  font-size:10px;
  margin-left:20px;
}

.lsujdes {
  color:var(--texte);
  font-size:10px!important;
}

.lsujnav {
  color:var(--texte);
  font-size:10px;
  text-align:right;
  float:right;
}

.lsujvava img {
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:100%;
}

.lsujder {
  width:200px;
  font-size:10px;
  text-align:center;
}

.lsujrepvu {
  padding:5px;
  background:var(--bordure);
  font-size:12px;
  text-align:center;
}

/*--------------------------------------------------------*/
/*--------------------Liste des membres-------------------*/
/*-------------------SKEAMP sur CCCrush-------------------*/
/*--------------------------------------------------------*/ 
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:690px; margin:auto;
}
/* ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
margin:0 auto 5px; width:660px;
background:var(--fond); /* MODIFIABLE */
}
/* TITRE ENTÊTE */
.tleLMBER th {
margin-bottom:5px; padding:5px 0;
text-transform:uppercase; font-family:Arial; font-size:16px;
background:var(--bordure); color:var(--texte); /* MODIFIABLE */
}
/* BLOC MEMBRE */
#MBER {
float:left; margin:5px; width:220px; height:160px; overflow:hidden;
}
/* BLOC AVATAR */
#imgLMBER {
width:200px; height:160px; overflow:hidden;
}
/* SURVOL BLOC AVATAR */
#imgLMBER:hover {
box-shadow:0 0 3px var(--bordure); /* MODIFIABLE */
}
/* AVATAR */
.imgLMBER {
position:relative;
width:200px; height:160px; overflow:hidden;
}
.imgLMBER div img{
position:absolute; margin-left:-100px; width:200px;
}
/* PSEUDONYME */
.nameLMBER{
position:absolute; z-index:3; margin-top:-145px; margin-left:-15px;
width:150px; padding:5px;
text-align:left; text-transform:uppercase; font-family:Arial;
background:var(--fond); /* MODIFIABLE - COULEUR PAR DEFAUT */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.nameLMBER span strong{
color:var(--texte);
}
#imgLMBER:hover .nameLMBER{
margin-top:-160px; margin-left:0;
width:190px; padding:10px 5px; text-align:center;
transform:rotate(0deg); -webkit-transform:rotate(0deg);
}
/* INFORMATIONS */
.stsLMBER {
position:absolute; margin-top:-130px;
width:180px; height:115px; padding:15px 10px 0; overflow:hidden;
font-size:10px; text-align:justify; font-family:Arial;
background:var(--fond); color:var(--texte) !important; /* MODIFIABLE */
opacity:0; transition:opacity 0.35s linear; -webkit-transition:opacity 0.35s linear;
}
#imgLMBER:hover .stsLMBER {
opacity:1;
}
/* NOMBRE MESSAGES & DATE INSCRIPTION */
.stsLMBER div{
display:inline-block; margin-bottom:5px;
width:75px; padding:5px; text-align:center;
background:var(--bordure); color:var(--texte); /* MODIFIABLE */
}
/* DERNIERE VISITE */
.stsLMBER span {
display:block; margin:5px auto; padding-bottom:5px; text-align:center;
border-bottom:1px solid var(--bordure); color:var(--texte) !important; /* MODIFIABLE */
}
/* IMAGES MP & WWW */
.btnLMBER {
display:block !important; margin:auto; margin-bottom:0 !important;
width:160px !important; padding:5px 0 !important; background:none !important;
}
.btnLMBER img {
max-height:15px;
filter:grayscale(1); -webkit-filter:grayscale(1);
}

/*--------------------------------------------------------*/
/*-------------------Affichage du profil------------------*/
/*-------------Reine des Ténèbres sur Epicode-------------*/
/*--------------------------------------------------------*/
/* ----------------------------------------------
---- Codage Profil------- Reine des Ténèbres  ---
------------------------------------------------*/
.temp_profil * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.rds_last,
.rds_sj-msg,
.rds_bottom a {
  color:var(--texte);
}

.rds_profil,
.rds_rang,
.rds_mesgp {
  color: var(--texte);
}

.rds_last,
.rds_profil,
.rds_mesgp,
.rds_bottom a,
.rds_enligne {
  font-size: 11px;
}

.rds_sj-msg,
.rds_mesgp,
.rds_rang,
.rds_enligne {
  text-align: center;
}

.rds_name,
.rds_sj-msg,
.rds_bottom {
  background-color:var(--bordure);
}

.rds_sj-msg,
.rds_enligne,
.rds_mesgp,
.rds_bottom {
  line-height: 30px;
}

.rds_admin,
.rds_last {
  margin-left: 5px;
}

.rds_admin {
  font-size: 20px;
  font-weight: 500;
  font-variant: small-caps;
  color: skyblue;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 5px;
}

.rds_profil {
  border: 1px solid var(--bordure);
  padding: 20px 15px;
  overflow:auto;
  height:320px;
}
.rds_profil img {
  max-width:50%;
}
.rds_profil .field_uneditable {
  display: inline-block;
}

.rds_sj-msg {
  outline: 4px solid var(--bordure);
  border: 1px solid var(--fond);
  font-size: 16px;
  text-transform: uppercase;
  margin: 4px;
}

.rds_sj-msg a {
  color:var(--texte)!important;
}

span.rds_profil {
  border: none;
}

.rds_enligne {
  margin: 5px 5px 0 0;
}

.onlinegreen {
  background-color: lightgreen;
}

.onlinered {
  background-color: #FFA3A3;
}

.rds_rang {
  background-color:var(--fond);
  margin: 10px;
  font-size: 14px;
}

.rds_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 5px;
}

.rds_bottom a {
  text-decoration: none;
}

.rds_nnicone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.temp_profil {
  max-width: 800px;
  max-height: 445px;
  background-color:var(--fond);
  display: grid;
  grid-template: 1fr 0.5fr repeat(3, 1fr) 4fr repeat(2, 1fr) / 4fr 1.5fr 2fr 130px 60px;
  grid-gap: 10px;
  padding: 5px;
  font-family: Arial, sans-serif;
  margin: auto;
}

.rds_name {
  grid-area: 1 / 1 / span 2 / span 3;
}

.rds_admin {
  grid-area: 1 / 1 / 1 / 1;
}

.rds_last {
  grid-area: 2 / 1 / 3 / span 2;
}

.rds_profil {
  grid-area: 3 / 1 / span 5 / span 2;
}

.rds_sujet {
  grid-area: 3 / 3 / 4 / 4;
}

.rds_mesgp {
  grid-area: 4 / 3 / 5 / 4;
}

.rds_messages {
  grid-area: 5 / 3 / 6 / 4;
}

.rds_img-avatar {
  grid-area: 1 / 4 / 8 / span 2;
}

.rds_enligne {
  grid-area: 1 / 5 / 2 / 6;
}

.rds_rang {
  grid-area: 7 / 4 / 8 / span 2;
}

.rds_bottom {
  grid-area: 8 / 1 / 9 / -1;
}

.rds_bottom .field_uneditable{
  display:none;
}