Affichage boîte MP

[Argimpasa]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 24/04/2024
Lien du forum : https://mydearjane.forumactif.com/

Description du problème

Bonjour,

Je reviens vous ennuyer avec le dernier codage qui me pose souci. J'ai tenté de contacter le/la créatrice/créateur mais en vain.
Comme vous pouvez le voir, la boîte est immense et je n'arrive pas à changer la largeur.

Pour le coup, je ne sais pas du tout où est le souci.
Je vous fourni donc le template et vous remercie d'avance.

privmsgs_read_body

Code:

<ul id="privmsgs-menu" style="text-align:center;">
 <li><i class="ion-archive"></i>{INBOX}<div class="active"></div></li>
 <li><i class="ion-paper-airplane"></i>{SENTBOX}<div class="active"></div></li>
 <li><i class="ion-share"></i>{OUTBOX}<div class="active"></div></li>
 <li><i class="ion-bookmark"></i>{SAVEBOX}<div class="active"></div></li>
</ul>



<div class="clear"></div>

<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">

 
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN switch_box_size_notice -->
 <p class="left-box">{BOX_SIZE_STATUS}</p>
 <!-- END switch_box_size_notice -->
 <p class="right-box">
 {L_DISPLAY_MESSAGES}: <select name="msgdays">
 {S_SELECT_MSG_DAYS}
 </select> <input class="button2" type="submit" name="submit_msgdays" value="{L_GO}" />
 </p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span></div>
</div>
 
  <div class="mp_bouton">
 <a href="/privmsg?mode=post">Envoyer un nouveau message</a>
</div>
 

<div class="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>

 <ul class="topiclist">

 </ul>

 <ul class="topiclist pmlist bg_none">
 <!-- BEGIN listrow -->

<div class="total_liste_mp">
 
<div class="icon_mp" style="background-image: url({listrow.PRIVMSG_FOLDER_IMG});"></div>
 
  <div class="title_mp"><a href="{listrow.U_READ}" class="topictitle">{listrow.SUBJECT}</a></div>
 
  <div class="blok_mp">
    <div class="from_mp">envoyé par : {listrow.FROM}</div>
    <div class="date_mp">envoyé le : {listrow.DATE}</div>
  </div>
 
 <dd class="markyy"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></dd>
  </div>
         
         
 <!-- END listrow -->
 <!-- BEGIN switch_no_messages -->
 <li class="row row1">
 <dl class="icon">
 <dt>
 <strong>{L_NO_MESSAGES}</strong>
 </dt>
 <dd class="mark"> </dd>
 </dl>
 </li>
 <!-- END switch_no_messages -->
 </ul>

 <span class="corners-bottom"><span></span></span></div>
</div>
<p class="right-box" style="margin: 0;"><a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a></p>
<div class="clear"></div>
<p><span class="pagination">{PAGINATION}{PAGE_NUMBER}</span><br/></p>
<div class="clear"></div>
<div class="pm-actions bottom">
 <div class="pm-actions-buttons">
 {S_HIDDEN_FIELDS}
 <!-- BEGIN switch_save -->
 <input class="button1" type="submit" name="save" value="{L_SAVE_MARKED}" />
 <!-- END switch_save -->
 <!-- BEGIN switch_move_profile -->
 <input class="button1" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />
 <!-- END switch_move_profile -->
 <input class="button2" type="submit" name="delete" value="{L_DELETE_MARKED}" />
 <input class="button2" type="submit" name="deleteall" value="{L_DELETE_ALL}" />
 </div>
</div>
</form>

<div class="clear"></div>
<div class="jumpjump" style="width: 430px;float: right;margin-top: -50px;">{JUMPBOX}</div>

<br style="clear:both" />

[MlleAlys]

Bonjour,
La largeur de la boîte est a priori automatique, égale à celle du forum.
Si vous souhaitez la réduire, vous pouvez essayer en ajoutant ce code css à votre feuille de style :

Code:

/*largeur liste mp*/
form[name="privmsg_list"] .forabg {
    max-width: 800px;
    margin: auto;
}

Ici j'ai mis 800px au pif, valeur modifiable bien sûr.

Si ce n'est pas le résultat souhaité, pourriez-vous également partager le votre css, et repréciser le résultat attendu ?

[Argimpasa]

Bonjour,

Merci, du coup mon problème ne vient pas de la largeur. Comment mettre les icones du coup sur la gauche ?

[MlleAlys]

N'auriez vous pas à un endroit un élément qui élargit la page ? je n'arrive pas reproduire sur mon forum test (et impossible bien sûr d'avoir accès à une boîte mp sans compte sur le votre)
Voici ce que j'ai sur mon forum test avec le template donné (qui est privmsgs_body et non privmsgs_read_body) et le css que j'ai pu récupérer :



Je ne comprends pas bien ce que vous voulez dire par "mettre les icones sur la gauche" ? Mais avec un schéma, il est possible de retravailler le template oui, et le css si vous le fournissez comme proposé dans mon message précédent. Vous semblez y avoir des codes en double d'ailleurs.


EDIT : Est-ce quelque chose comme ça que vous souhaitez ?

[Argimpasa]

Bonsoir,

Désolée de m'être mal exprimée. J'aimerai effectivement que la boite mp ressemble à ce que vous montrez sur votre dernière image.

[MlleAlys]

Alors il faut effectivement corriger le css. Qu'il faudrait donc fournir, comme déjà demandé dans mes messages précédent :

pourriez-vous également partager votre css

le css si vous le fournissez comme proposé dans mon message précédent

[Argimpasa]

Bonjour,

Autant pour moi, sa longueur dépassant la limite autorisée, je cherchai un site qu'on m'avait donné pour les codages mais du coup je vais le séparer en deux.

Code:

/*largeur liste mp*/
form[name="privmsg_list"] .forabg {
    max-width: 800px;
    margin: auto;
}

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

#wrap {
    box-sizing: content-box;
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
}

/*********** FICHE DE PREDEFINIS - ARTEMIS - POUR EPICODE ET ARTIFICES ***********/

.presentation-artemis {
    --police-texte: "Roboto", sans-serif;
    --couleur-foncee-a: #090402;
    --couleur-pastel: #ccaf9b;
    --fond-fiche: #f2f2f2;
    --fond-avatar: #fbfafa;
    width: 85%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 45px 285px 210px 180px 1fr;
    gap: 10px;
    margin: 0 auto 15px;
    background: var(--fond-fiche);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 10px;
    font: 13px var(--police-texte);
    position: relative;
}

.avatar-infos {
    grid-column: 1/2;
    grid-row: 1/3;
    background: var(--fond-avatar);
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.presentation-artemis > .avatar-infos img,
.icone-lien img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: ease-in-out 0.8s;
}

.avatar-infos:after {
    content: " ";
    background: linear-gradient(to bottom, transparent, 70%, var(--couleur-pastel));
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: absolute;
    bottom: 10px;
    right: 10px;
    mix-blend-mode: multiply;
    transition: all 0.8s;
}

.presentation-artemis > .avatar-infos:hover:after {
    opacity: 0;
    transition: all 0.8s;
}

.presentation-artemis > .avatar-infos:hover img {
    transform: scale(1.7) rotate(10deg);
    -webkit-filter: none;
    filter: none;
    transition: ease-in-out 0.8s;
}

.avatar-infos span {
    background: var(--couleur-pastel);
    color: var(--couleur-foncee-a);
    display: inline-block;
    padding: 3px 10px;
    position: absolute;
    top: 20px;
    left: 20px;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
}

.presentation-artemis > h1 {
    margin: 0;
    padding: 0;
    grid-column: 2/3;
    grid-row: 1/2;
    background: var(--couleur-foncee-a);
    border-top: 2px solid var(--couleur-pastel);
    border-bottom: 2px solid var(--couleur-pastel);
    color: var(--couleur-pastel);
    text-align: center;
    display: grid;
    place-content: center;
    font-family: "Yeseva One", serif;
    font-weight: normal;
    font-size: 18px;
}

.presentation-artemis > dl {
    grid-column: 2/3;
    grid-row: 2/3;
    margin: -10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
}

.presentation-artemis > dl > dd {
    border: 1px solid var(--couleur-pastel);
    margin: 0;
    padding: 15px 5px 10px 10px;
    height: 44px;
    width: 100%;
    overflow: auto;
    font-size: 11px;
    text-align: justify;
    box-sizing: border-box;
}

.presentation-artemis > dl dt {
    background: var(--fond-fiche);
    position: relative;
    top: 7px;
    left: 5px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.caractere-arte {
    grid-column: 1/2;
    grid-row: 3/4;
    background: var(--couleur-pastel);
    padding: 10px;
}

.caractere-arte h2,
.infos-arte h2 {
    text-align: right;
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-size: 13px;
    text-transform: uppercase;
    position: relative;
    border: none;
}

.caractere-arte h2 {
    color: var(--couleur-foncee-a);
}

.infos-arte h2 {
    color: var(--couleur-pastel);
}

.caractere-arte h2:after,
.infos-arte h2:after {
    content: " ";
    width: 70px;
    height: 3px;
    position: absolute;
    right: 0;
    bottom: -5px;
}

.caractere-arte h2:after {
    background: var(--couleur-foncee-a);
}

.infos-arte h2:after {
    background: var(--couleur-pastel);
}

.caractere-arte p,
.infos-arte p {
    font-family: var(--police-texte);
    font-weight: 100;
    text-align: justify;
    height: 80%;
    overflow: auto;
    margin: 20px auto;
    font-size: 12px;
    line-height: 16px;
    padding: 0 5px;
}

.caractere-arte p {
    color: var(--couleur-foncee-a);
}

.infos-arte p {
    color: var(--couleur-pastel);
}

.infos-arte {
    grid-column: 2/3;
    grid-row: 3/4;
    background: var(--couleur-foncee-a);
    padding: 10px;
}

.histoire-arte {
    grid-column: 1/3;
    grid-row: 4/5;
    border: 1px solid var(--couleur-pastel);
    padding: 15px 15px;
    text-align: justify;
    font-weight: 100;
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.9);
    max-height: 180px;
    overflow: auto;
}

.histoire-arte span {
    background: var(--couleur-pastel);
    padding: 2px 5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--couleur-foncee-a);
}

.liens-predefinis {
    display: grid;
    gap: 10px;
    grid-column: 1/3;
    grid-template-columns: 30px 1fr;
    grid-template-rows: 1fr;
}

.liens-predefinis > h3 {
    all: unset;
    grid-column: 1/2;
    grid-row: 1/2;
    background: var(--couleur-pastel);
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    display: grid;
    place-content: center;
    text-transform: uppercase;
}

.un-lien-arte {
    width: 100%;
    display: flex;
    gap: 0px 10px;
    justify-content: space-between;
    overflow: hidden;
    grid-column: 2/3;
    margin-bottom: 10px;
}

.un-lien-arte:last-child {
    margin: 0;
}

.icone-lien {
    width: 120px;
    height: 120px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: var(--fond-avatar);
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.bloc-droite {
    width: calc(100% - 120px);
}

.pseudo-lien {
    margin: 0;
    border-bottom: 4px solid var(--couleur-pastel);
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--couleur-foncee-a);
    font-weight: 700;
}

.bloc-droite p {
    height: 58px;
    overflow: auto;
    font-size: 11px;
    margin: 8px 0;
    text-align: justify;
}

.bloc-droite > span {
    background: var(--couleur-foncee-a);
    color: var(--fond-fiche);
    font-size: 10px;
    text-transform: uppercase;
    height: 20px;
    display: grid;
    place-content: center;
}

.credit-artemis {
    position: absolute;
    text-align: center;
    bottom: -15px;
    font-size: 10px;
}

.credit-artemis a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
}

/* CATÉGORIES */

/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés*/

.liens_pa {
 background: var(--background2);
    padding: 5px 0 7px;
    border-radius: 7px;
    margin-top: 9px;
    text-align: center;
}

.liens_pa a {
    background: var(--background1);
    border-radius: 7px;
    padding: 1px 10px;
    margin: 0 10px;
    text-transform: uppercase;
    font-size: 10px;
}

/*Titre de la catégorie*/

.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

.cat_titre h2 {color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin: 0;}

/*Rassemblement de balises répétitives*/

#cate {margin: 0 7px 0 0;
    border-radius: 7px;}

.liensforums, .imgnew, .txt_derniermess {
  border: var(--border1); }

/*Corps des catégories*/

.cat_container {  background: var(--background2);
    border-radius: 7px;
    height: 114px;/*à modifier seulement si vous la voulez plus haute*/
    padding: 10px;
    margin: 0 0 4px;
    display: flex;
font-size:14px;}

/*Partie liens forums*/

.liensforums { font-size: 0px;
    overflow: auto;
    width: 18%;
    padding: 5px;
    text-align: left;}

#liensforums2 a {
display: block;
    text-transform: lowercase;
    font-size: 14px;
}

#liensforums2 a::before {
    color: #DD9F8C;
    content: " ● ";
}

/*Partie image new, no new etc.*/

.imgnew {    padding: 3px;
    width: 5%;}

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

/*Partie titre du forum et description*/

.titredescriforum {  
    width: 65%;}

/*titre forum*/
.titreforum {    background: var(--background1);
    border-radius: 7px;
    padding-left: 13px;
    text-transform: lowercase;
    text-align: left;}

.titreforum a {     font-size: 15px;
    font-weight: 700;
    color: #000;}

/*description*/
.descricat {    height: 67px; /*à modifier si vous changer la height de .cat_container*/
    margin-top: 4px;
    text-align: justify;
    overflow: auto;
    line-height: 20px;
    border-top: var(--border1);}

/*Partie nb de sujets et messages*/

.nbsujnotes {     display: flex;
    flex-wrap: wrap;
    max-width: 60px;}

.nbsujnotes2 {  background: var(--background1);
    border-radius: 4px;
    color: var(--acc1);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;}

.nbsujnotes2:nth-child(2) {margin-top:7px;
  color:var(--acc2);}

/*Partie dernier message posté*/

.derniermess {
        max-width: 164px;}

/* titre avec écrit last song*/
.ti_derniermess {       background-image: var(--degrade);
    border-radius: 4px;
    color: var(--acc3);
    font-size: 11px;
    margin: 0 0 0 21px;
    text-align: center;
    min-width: 140px;}

/*dernier avatar*/
.avatarcat {    background: var(--background2);
    border: var(--border1);
    border-radius: 50px;
    margin-top: -18px;
    padding: 2px;
    position: absolute;
}

.avatarcat img {        border-radius: 50px;
    width: 39px;
    height: 39px;
    object-fit: cover;}

/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
    border-radius: 7px;
    margin: 5px 0 0;
    padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
    text-transform: lowercase;
    height: 73px; /*à modifier si vous changer la height de .cat_container*/
    display: flex;
    line-height: 13px;
    flex-wrap: wrap;
    align-items: center;
}

.txt_derniermess a {    font-size: 14px;}

.txt_derniermess br {
content: "";
    margin: 2em 0 0 4em;
    display: block;
    font-size: 24%;
}

[Argimpasa]

Code:

/*QEEL*/

/*balise qui contient tout le QEEL*/
.qeel_container {      background: var(--background2);
    margin: 10px 0 0;
    border-radius: 10px;
    padding: 10px 10px 7px;
    display: flex;
    flex-wrap: wrap;}

/*BALISE QUI CONTIENT LES MEMBRES CO 24 HEURES / NOUVEAU MEMBRE / TEXTE CRÉDITS / PARTIE GROUPES*/
.qeel1 {       margin-right: 7px;
    width: 70%;}

/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 {    display: flex;
margin:0 0 7px 0;}

/*balise connectes dernieres 24 heures*/
.qeel_dc {         width: 57%;
    margin: 0 7px 0 0;
    height: 98px;
    border-top: var(--border1);
    margin-right: 7px;
    padding: 5px;
    font-size: 14px;
    text-align: justify;
    overflow: auto;}

/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}

/*balise nouveau inscrit*/
.qeel_nm {    border: var(--border1);
    border-radius: 7px 7px 7px 28px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;}

/*balise avatar nouveau inscrit*/
.qeel_avatar {       width: 50px;
    z-index: 100;
    height: 50px;
    padding: 4px;
    border-radius: 10px 100% 100%;
    background: var(--background2);
    border: var(--border1);
box-sizing: border-box;}

/*avatar nouveau inscrit*/
.qeel_avatar img {   width: 40px;
    object-fit: cover;
    height: 40px;
    border-radius: 10px 100% 100%;}

/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
    text-transform: lowercase;
    font-size: 16px;
    line-height: 31px;
    min-height: 30px;
    margin: 0 0 0 20px;}

.qeel_nouvmembre strong {font-weight:500;}

/*balise titre bienvenue sur forum*/
.qeel_bienvenue {      width: 100%;
    text-align: right;
    background: var(--background1);
    text-transform: lowercase;
    font-weight: 600;
    font-size: 12px;
    padding: 0 10px 0 0;
    margin: -17px 0 0 24px;
    border-radius: 4px;
    color: var(--acc1);}

/*balise txt libre/credits*/
.qeel_cred {   text-align: justify;
    height: 45px;
    overflow: auto;
    margin-top: 4px;
    font-size: 12px;}

/*balise contenant groupes*/
.qeel_groups {      display: flex;
    width: 100%;
    border-top: var(--border1);
    padding: 7px 0 0;}

/*balise des groupes*/
.group {    background: var(--background1);
    padding: 3px 10px 2px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;margin:0 7px 0 0;
    font-size: 12px;
    font-weight: 600;}

.group:last-child {margin:0;}

/*BALISE QUI CONTIENT NB CONNECTES ET INVITES, MEMBRES CONNECTES ET NB INSCRITS/MESSAGES*/
.qeel2 {    width: 29%;}

/*balise nb utilisateurs en ligne*/
.qeel_stats {    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    border-bottom: var(--border1);
    padding: 0 0 4px;
  letter-spacing: 1px;}

.qeel_stats strong {
  font-weight:500;}

/*balise nb inscrits/messages et membres connectes*/
.qeel5 {    display: flex;
  margin: 7px 0 0;}

/*balise nb inscrits/messages*/
.qeel_sujmess {      margin: 0 7px 0 0;
    max-width: 85px;}

/*nb inscrits/messages*/
.qeel_sujmess2 {  background: var(--background1);
    text-align: center;
    font-size: 11px;
    padding: 0 10px;
    border-radius: 7px;
    font-weight: 700;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;    color: var(--acc2);}

.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
    color: var(--acc1);}

/*balise membres connectes*/
.qeel_mc {    border: var(--border1);
    border-radius: 7px;
    padding: 5px;
    text-align: justify;
    text-transform: lowercase;
    width: 100%;}

.qeel_mc br {display:none!important;}

/*balise titre membres co*/
.qeel_mc2 {    text-align: center;
    background: var(--acc2);
    text-transform: uppercase;
    font-size: 11px;
    color: var(--acc3);
  border-radius: 4px;}

/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
    height: 76px;
    margin: 4px 0 0;
    border-top: var(--border1);
    overflow: auto;}

.qeel_mc3 a {font-size:14px;}

/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf {    width: 100%;
    border-top: 1px solid #ededed;
    margin: 7px 0 0;
    padding: 7px 0 0;
    text-align: center;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d1d1d1;}
/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {
  background-color: var(--white);
  border-radius: 10px;
  display: grid;
  text-align: center;
  grid-gap: 7px;
  grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
  padding: 10px;
  height: 250px;
}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {       height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {     cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {  
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {     color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
         background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/


/*CONTEXTE ET HOVER*/

/* corps du contexte (container en gros qui tient tout*/
.gif_pa {     border: 1px solid var(--border);
    border-radius: 7px;
    display: inline-block;
    grid-area: 1 / 2 / span 5 /span 2;
    height: 192px;
    line-height: 110%;
    overflow: auto;
    padding: 3px;
    width: 216px; } /* à modifier si vous modifiez la largeur de la grid */

/*container de l'image du contexte*/
.img_pa {
    width: 100%;
margin: 0 auto;
position: relative;
      overflow: hidden;
  border-radius:7px;
}

/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
    height: 192px;
    object-fit: cover;
    width: 216px; /* même largeur que gif_pa*/
}

/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt {  background-color: var(--white);
    height: 192px;
    left: 108px;
    line-height: 16px;
  overflow: hidden auto;
    position: relative;
    padding: 5px;
    scrollbar-width: none;
    text-align: justify;
    top: 96px;
    transform: translate(-50%,-50%);
    width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */

/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
    bottom: 0;
    height: 0;
    left: 0;
    overflow: hidden auto;
    position: absolute;
    scrollbar-width:none;
    right: 0;
    transition: .5s ease;
    width: 100%;
}
.img_pa:hover .overflow {
  height: 100%}

/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar  {width:0px;height:0px;}


/*PARTIE NAVIGATION / LIENS*/

.item_1 {    grid-area: 1 / 4 / span 5 /span 1;}

/*liens navigation*/
.link_pa {        background-color: var(--background);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
  text-transform:uppercase;
    margin-bottom: 6px;
    line-height: 10px;
    padding: 1px 0;}

/*container avec les règles*/
.item_5 {       border: 1px solid var(--border);
    border-radius: 4px;
    height: 77px;
    line-height: 15px;
    overflow: auto;
    padding: 5px 7px 3px;
    text-align: justify;
    margin: 8px 0;}



/* PA */

:root {
    --accc1: #000;
    --accc2:#DD9F8C;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --background: #f1f1f1;
    --degrag: #ccc9c7;
}

/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {          background-color: var(--white);
    border-radius: 10px;
    display: grid;
text-align:center;
    grid-gap: 7px;
    grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
    padding: 10px;}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {       height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {     cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {  
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {     color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
         background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/

/*TIMELINE*/

/*container timeline*/
.item_8 {      border: 1px solid var(--border);
    border-radius: 5px;
    grid-area: 1 / 5 / span 2 /span 2;
    height: 57px;
    padding: 2px 5px;
    text-align: justify;}

/*container texte timeline*/
.texte_1 {   height: 43px;
    line-height: 13px;
    overflow: auto;
    text-align: justify;}

/*partie premiere version signée xx*/
.titre_4 {    background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;}


/*PARTIE PÉRIODE DE JEU*/

/*container période de jeu*/
.item_9 {      border-bottom: 1px solid var(--border);
    color: var(--accc1);
    font-size: 11px;
    font-weight: 600;
    grid-area: 3 / 5 / span 1 /span 2;
    letter-spacing: 1px;
    margin-top: -2px;
    text-transform: uppercase;}

/*déco de texte pour rendre rose*/
j {color:var(--accc2);
  font-style: italic;
}


/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/

/*container du tout*/
.item_10 {   grid-area: 4 / 5 / span 2 /span 2;}

/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}

/*container des membres du mois (colonne gauche)*/
.float_pa1 {    float: left;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
    height: 56px;}

/*style des images des membres du mois*/
.mdm1, .mdm2 {
          border: 1px solid var(--border);
    border-radius: 10px;
    height: 30px;
    object-fit: cover;
    padding: 3px;
    width: 21px;
}
.mdm2 {margin:0 5px;}

/*container de la partie nous soutenir*/
.float_pa2 {float: left;
    height: 56px;
    margin-left: 4px;
    line-height: 12px;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}

/*icons discord et tumblr*/
.discord_pa {    width: 21px;}

/*PARTIE PARTENARIATS*/

/*container de la partie partenariats*/
.item_11 {          border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 3px;}

/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
  border-width: 1px;
  border-radius: 5px;
  border: 1px solid var(--border);
  width: 175px;
  letter-spacing: 1px;
  font-size: 8px;
  text-transform: uppercase;}


/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/

.titre_1, .titre_2 {
   border-radius: 4px;
    color: var(--white);
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/

w,y {font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
  text-transform:uppercase;
}

w {  color: var(--accc2);}
y {  color: var(--accc1);}

/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {
  grid-area: 6 / 1 / span 1 /span 6;
  font-size: 7px;
  border-top: 1px solid var(--border);
  letter-spacing: 1px;
  padding-top: 5px;
  color: #d1d1d1;
  margin-top: 16px;
}


/************************* LISTE DES SUJETS *************************/

/***********PARTIE AU-DESSUS ET EN-DESSOUS LISTE DES SUJETS***********/

/*Boutons nouv/rep et navigation*/
.pro_nav {      display: flex;
    font-size: 0;
    margin: 15px 0;
align-items:center;}

/*liens dans navigation*/
.pro_nav a {    font-size: 12px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    font-weight: 600;
    padding: 1px 0 0;}

/*styling bouton nouv/rep*/
.pro_nouvrep a {    background: var(--background3);
    color: var(--acc3)!important;
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;    transition: .5s ease;}

.pro_nouvrep {       margin: 0 10px 0 0;
}
.pro_nouvrep a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.pro_nouvrep a:nth-child(1):hover {background: var(--background3);    transition: .5s ease;
    color: var(--acc3)!important;}

/*liens navigation à côté de bouton rep/nouv*/
.liens_suj {       background: var(--background2);
    padding: 2px 10px 3px;
    border-radius: 7px;
    display: flex;
    justify-content: flex-start;
    font-size: 0;
    align-items: center;}

.liens_suj a {
    margin: 0 15px 0 0;
    text-transform: uppercase;
    font-size: 12px;
  font-weight: 600;}

/*la pagination*/
.pagination {    float: none;
    display: flex;
    justify-content: flex-end;
  font-size: 0px;
margin:0;}

.pagination2 {    
    text-transform: uppercase;
}

.pagination a, .pagination span {font-size:12px;}

.pagination a {    padding: 0 10px 0;}

.pagination a strong {font-weight:500;}

.pagination span strong {      background: var(--acc2);
    padding: 0 5px;
    border: none;
    color: var(--acc3);
    font-size: 10px;
    border-radius: 3px;
        line-height: 16px;
    width: auto;}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active
{    color: var(--acc1);
    background: var(--background1);
    padding: 0 5px;
    border: none;
    font-size: 10px;
  border-radius: 3px;
    line-height: 16px;
    width: auto;}

.pagination span a.pag-img {vertical-align: baseline;}

.pagination span a.pag-img img {    height: 9px;
    margin-top: 0;}

/*titre de liste des sujets*/
.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

/*********** LES SUJETS ***********/

/*Div qui contient toutes les balises*/
.af_suj1 {    display: flex;
    background: var(--background2);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 74px;
    margin: 0 0 7px;}

/*partie image new/no new*/
.af_suj2 {   width: 57px;
    margin: 0 7px 0 0;}

.af_suj2 img {       width: 57px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;}

/*partie réponses / vues*/
.af_suj3 {       width: 9%;
    margin: 0 7px 0 0}

.suj_stat {background: var(--background1);
    border-radius: 7px;
    display: flex;
    height: 25px;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--acc2);}

.suj_stat:nth-child(1) {
margin:0 0 4px;
color:var(--acc1);}

/*partie titre du sujet, auteur, pagination & description*/
.af_suj4 {width: 58%;}

/*titre du sujet*/
.suj_titre {       border-bottom: var(--border1);
    padding: 0 0 4px;
    margin: 0 0 4px;}

a.topictitle {   color: var(--acc1);
    font-weight: 600;
    font-size: 15px;
    text-transform: lowercase;
    line-height: 13px;}

a.topictitle:hover {
text-decoration:none;}

ba {    color: var(--acc2);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 13px;}

.suj_titre img {margin:0 5px 0 0;}

/*partie auteur et pagination*/
.af_suj5 {    display: flex;}

.suj_auteur {        width: 50%;
  font-size: 11px;
    text-transform: uppercase;}

.suj_pagination {    text-transform: uppercase;
    font-size: 0px;
    width: 50%;
    text-align: right;
  }

.suj_pagination a {    font-size: 11px;
    background: var(--background1);
    padding: 0 9px;
    border-radius: 4px;
    margin: 0 3px 0 0;}

.suj_pagination br, .suj_pagination img {display:none!important;}

.suj_pagination .gensmall {font-size:0px!important;}

/*description du sujet*/

.suj_description {    color: var(--acc1);
    font-style: italic;
  font-size: 13px;}

/*partie avatar dernier posteur*/
.af_suj6 {       border: var(--border1);
    padding: 3px;
    width: 50px;
    height: 50px;
    border-radius: 60px;
    box-sizing: border-box;
    margin: auto 7px;}

.af_suj6 img {width: 41px;
    height: 42px;
    border-radius: 51px;
  object-fit: cover;}

/*partie dernier message et dernier posteur pseudo*/
.af_suj7 {width: 17%;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    text-transform: lowercase;
    margin: auto 0;}

.af_suj7 span {
  padding:0 10px 0 0;
}

.af_suj7 img {margin:0 0 0 3px;}

/*********** AFFICHAGE SUJETS SI PAS DE SUJETS ***********/
li.row {
    border: none;
    text-align: center;
    list-style: none;
    padding: 9px;
    text-transform: uppercase;
    color: var(--acc1);
    letter-spacing: 1px;
  border-radius: 0 0 10px 10px;
  font-size:14px;
  background:var(--background2);
}

li.row:hover {
    background-color: var(--background2);
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
  margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
    background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

/*Div contenant le rang et limage*/
.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {        width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
        background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/

/*Div contenant le tout*/
.spro_3 {
    margin: 0 0 0 7px;
    width: 100%;
}

/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}

/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
  width: 70%;
    margin: 0 7px 0 0;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {      border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {          height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}

dl.details dt {
    text-align: left;
    width: 12em;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--acc2);
}

dl.details dd {
    margin: 0 0 .5em 12em;
  font-size:14px;
  line-height:22px;
}

/*Div contenant la feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

/*Div contenant feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div titre feuille de personnage*/
.spro_frpgtitle {
    background-image: var(--degrade);
    color: var(--acc3);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
}

/*Div avec scroll pour feuille personnage*/
.spro_frpg {
    margin: 7px 0 0;
    height: 335px;
    overflow: auto;
    border-top: var(--border1);
    box-sizing: border-box;
    padding: 10px 0 0;
}

/*Styling des champs*/
frpg {font-weight: 700;
    letter-spacing: 1px;
    color: var(--acc1);
    text-transform: uppercase;
  font-size: 13px;}

/*Styling où le texte se trouve*/
.spro_frpg textarea {
    width: 100%!important;
    height: 93px!important;
    border: var(--border1);
    border-radius: 10px;
    margin: 10px 0 12px;
    overflow: auto;
    box-sizing: border-box;
}

.inputbox:hover {
    border: var(--border1);
}
.memberlist_t {
      width: 850px !important;
    height: 50px;
    background: #cbcbcb;
    border-radius: 10px;
    margin: auto !important;
    text-align: center;
    color: white !important;
    font: 11px roboto !important;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    margin-bottom: 10px;
}


.panelarte {
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 850px;
  margin: auto;
  background: none;
}

.panelarte h2 {
  border: none;
  color: #cbcbcb;
}

.memberlist_arte {
  width: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  padding: 0;
  
}

.one_member {
  width: 275px;
  height: 120px;
  background: #95b8d9;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}

.one_member a, .one_member a:hover {
  text-decoration: none;
  color: white !important;
}

.one_member:before {
  content: " ";
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(251,251,251,0.2);
  z-index: 0;
  -webkit-clip-path: circle(50% at 29% 22%);
          clip-path: circle(50% at 29% 22%);
}

.avatar_member_list {
  width: 70px;
  height: 70px;
  z-index: 99;
}

.avatar_member_list img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid white;
  -o-object-fit: cover;
     object-fit: cover;
}


.pseudo_memberlist {
  margin: 0;
  width: 155px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}

.pseudo_memberlist > h2 {
  color: white;
  font: 12px roboto;
  text-transform: uppercase;
  font-weight: 500;
  border-left: 2px solid white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
}

.pseudo_memberlist div {
      color: white;
    font: 9px roboto;
    font-weight: 400;
    margin-top: -40px;
    font-style: oblique;
    margin-bottom: -5px;
    text-transform: lowercase;
  
  
}

.pseudo_memberlist > h2 strong {
  color: white;
  font-weight: 500;
}

.stats_link_members {
  width: 155px;
  margin-left: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -5px;
}

.stats_link_members span {
  display: block;
  font: 9px source code pro;
  color: white;
  text-transform: uppercase;
  margin: 0 0px;}

.one_member a[href^="/privmsg"]:before{
  content:'MP';
}

.stats_link_members a[href^="/privmsg"] img{
    display: none;
}

.stats_link_members span:after {
  content: "|";
    margin: 0 3px;
}

.stats_link_members span:last-child:after {
  content: " ";
}
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

#wrap-topic {
    width: 800px;
    margin: auto;
    display: flex;
    flex-flow: wrap;
}

#header-topic {
    background-color: #f1f0f4;
    width: 100%;
    color: #c07c59;
    font-size: 11px;
    font-style: italic;
    line-height: 27px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

#header-topic .sousligne {
    font: 11px 'Roboto', sans-serif;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header-topic a:not(:first-of-type) {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: -0.5px;
}

#header-topic a:first-of-type {
    color: #262929;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.new-reply-topic,
.topic-pagination {
    display: flex;
    align-content: center;
    flex-flow: wrap;
}

.topic-pagination,
#pagination_memberlist {
    margin-left: auto;
    text-transform: uppercase;
    font-family: initial;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -1px;
    color: transparent;
}

.topic-pagination>div,
#pagination_memberlist>div {
    margin: 20px 0 5px;
}

.topic-pagination>div a,
#pagination_memberlist>div a {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -0.5px;
}

.new-reply-topic a {
    padding: 28px 17px 28px 25px;
}

.topic-pagination span strong,
#pagination_memberlist strong {
    padding: 0 0 0 5px;
}

.topic-pagination span,
#pagination_memberlist span {
    color: #262929;
}

.topic-pagination strong,
#pagination_memberlist strong {
    color: #c07c59;
    padding: 0 2px;
}

.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
    display: none;
}

.header-message {
    width: 100%;
    height: 86px;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    padding: 0 50px 0 0;
    color: #f6f5f8;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
    background-color: #262929;
}

.header-message div {
    position: absolute;
    left: 35px;
    bottom: 22px;
}

.header-message span,
.header-message a[href*="/u"] {
    width: 100%;
    text-align: right;
}

.header-message span {
    font: 20px 'DM Serif Display', serif;
    font-style: normal;
    margin-right: -20px;
}

.header-message span,
.header-message>a {
    width: 100%;
}

.header-message strong {
    color: #f6f5f8;
    font-weight: 100;
}

.header-message>div img {
    padding: 0 2px;
}

.wrap-topic-content {
    background-color: #F1F0F4;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    padding: 19px 0;
}

.topic-content {
    width: 538px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding-top: 6px;
}

.topic-content,
.topic-content>a {
    color: #C3C3C3;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

.topic-content>div a {
    font-weight: bold !important;
}

.topic-content>div {
    color: #262929;
    font-style: normal;
    text-align: justify;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid #C3C3C3;
    padding: 18px 0;
    margin-top: 8px;
    width: 100%;
}

.topic-content>div img {
    max-width: 100%;
}

.topic-avatar {
    border: 2px solid #F6F5F8;
    overflow: hidden;
    width: 200px;
    height: 320px;
    position: relative;
}

.topic-avatar>div img {
    max-width: 100%;
}

.topic-avatar>a img {
    width: 200px;
}

.topic-avatar>div {
    position: absolute;
    top: 396px;
    background-color: #ffffffe0;
    width: 200px;
    height: 320px;
    transition: all 1s;
    padding: 5px 20px 10px;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topic-avatar:hover>div {
    top: 0;
}

.feuille-de-perso a[href*="/u"],
.title-profil {
    font: 30px 'Hamilton', cursive;
    color: #c07c59;
    text-align: right;
    display: block;
    height: 32px;
    text-transform: lowercase;
  white-space: nowrap;
}

.topic-avatar .label {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
    color: #262929
}

.topic-avatar>div .label span,
.feuille-de-perso {
    color: #262929 !important;
}

.feuille-de-perso textarea {
    min-width: 100%;
    max-width: 100%;
    display: block;
    height: 50px;
    background-color: #F6F5F8;
    padding: 6px;
    overflow: auto;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
}

/*.feuille-de-perso br { display: none; }*/

.topic-avatar .contact_link_p {
    position: sticky;
    bottom: 5px;
    margin: 10px -10px 0 0;
    font-size: 0;
    text-align: right;
}

.topic-avatar .contact_link_p a:first-child {
    padding-right: 7px;
}

.separation {
    width: 555px;
    margin: auto;
    height: 1px;
    background-color: #C3C3C3;
    margin: 15px 0 2px;
}

.signature-topic {
    width: 100%;
    max-height: 280px;
    padding: 5px;
    overflow: auto;
}

.signature-topic img {
    max-width: 100%;
}

#wrap-topic a[name="quickreply"]+.h3 {
    display: none;
}

#wrap-topic form#quick_reply {
    width: 100%;
}

#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
    background-color: #F1F0F4 !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif;
}

#wrap-topic #quick_reply #textarea_content {
    box-shadow: none;
}

#wrap-topic #quick_reply #textarea_content+div input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 15px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0px 10px 10px 10px;
    height: 35px;
    padding: 0 15px;
}

#topic-form label {
    font-size: 0;
}

#topic-form select {
    background-color: #F1F0F4;
    border: none;
    font-size: 10px;
    padding: 3px 5px;
}

#topic-form fieldset {
    margin: 55px 0 28px;
}

#topic-form input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 12px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0 5px;
    height: 21px;
    padding: 0 5px;
}

/* Affichage du bloc des permissions */
.permissions {
    width: 100%;
    background-color: #F1F0F4;
    padding: 20px 25px;
    font: 11px 'Roboto', sans-serif;
}

.permissions a {
    color: #c07c59;
}

.permissions .h3 {
    border: none;
    font: 13px 'DM Serif Display', serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
    margin: 0 0 20px;
    background: none;
    font: 12px 'Roboto', sans-serif;
    padding: 0;
    border: none;
}

blockquote {
    padding: 10px 30px;
}

dl.codebox code,
.spoiler dd,
.hidecode {
    background-color: #F6F5F8 !important;
    padding: 10px 30px !important;
}

.hidecode dt,
dl.codebox::before,
blockquote::before {
    display: none !important;
}

dl.codebox dt,
cite {
    border: none;
    color: #C38567;
    font: 11px 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 5px 0 8px 11px;
    font-weight: 500;
}

.spoiler dt {
    margin-bottom: 3px !important;
}

dl.codebox code {
    font-size: 12px;
}
  /* --------- FIN AFFICHAGE MESSAGES --------- */
/********************************************************* NAVIGATION ET HEADER *********************************************************/
/* NAVIGATION */
.navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #f4f4f4;
        border-bottom: 2px solid #475944;
        z-index: 99;
        padding: 1rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
   font-family: Arial, sans-serif;
        color: #8f8a9e;
        text-transform: uppercase;
}

.navigation img {
     display: none;
}

.barre_nav {
        display: flex;
        margin: auto;
}

.barre_nav li {
        list-style-type: none;
        padding: 0 .5rem;
}

.barre_nav .mainmenu {
        font-weight: bold;
        font-size: 10px;
        color: #8f8a9e;
}

/* BOUTONS HAUT BAS */
.up_down {
        color: #8f8a9e;
        font-size: 10px;
        font-weight: 700;
        padding: 0 2rem 0 0;
        position: absolute;
        right: 0;
}

.up_down a:first-child {
     color: #429679;
}

.up_down a:last-child {
     color: #b88749;
}

/* CACHER LA DESCRIPTION */
#site-desc {
     display: none;
}

/* HEADER */
.heabder_bann {
  text-align:center;
}
.heabder_bann img {
  width:100%;
}
ul.topiclist.bg_none {
    background: #e2e2e2;
}
#privmsgs-menu {
    float: none !important;
    padding: 0 9px;
}
#picture_legend, #privmsgs-menu {
    border-radius: 3px;
    box-shadow: none !important;
    font-size: 1.3rem;
    margin-bottom: 24px;
    overflow: hidden;
}
#privmsgs-menu a {
  color:black;
  text-transform:uppercase;
  font:11px calibri;
  letter-spacing:1px;
}
.mp_bouton{
    background: #cdb65c;
    width: 49%;
    margin: 0px 5px 0px 0px;
    outline: 1px solid #9e8b3e;
    outline-offset: -4px;
    padding: 4px;
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #e8e8e8;
    font: 11px calibri;
    text-transform: uppercase;
    text-align: center;
}
.mp_bouton a {
    color: #1e1e1e;
    display: block;
}
.total_liste_mp {
    background: #e8e8e8;
    padding: 10px;
    height: 69px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.title_mp {
    width: 500px;
    height: 18px;
    border-bottom: solid 1px #cdb65c;
    padding: 10px 0px 15px 0px;
}
.title_mp a {
  color:black;
  font:10px calibri;
  text-transform:uppercase;
}
.blok_mp {
    width: 286px;
    padding: 10px 30px 0px 30px;
    font: 10px calibri;
    text-transform: uppercase;
    height: 30px;
}
.icon_mp {
    width: 100px;
    margin-top: -10px;
}

.heabder_bann {
  text-align:center;
}
.heabder_bann img {
  width:100%;
}
:root{
  --main-color:#555;
  --snd-color:#fff;
  --third-color:#888;
  --four-color:#FCC5A0;
  --five-color:#F28977;
  --five-v-color:#FAC0B6;
  --six-color:#B9919A;
    --six-v-color:#DAC5CA;
  
  --font1: 'Source Sans Pro', sans-serif;
  --font2:'Playfair Display', serif;
  --fontjournal:'Alfa Slab One', cursive;
}

.degr, .fondgen h3, .fondgen.bottin strong{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
    position:relative; z-index:20;
}

/* Fiche Générale du forum par KoalaVolant */

.gengen{ width:80%; margin:0 auto; padding:5px; }
.gengen *{ box-sizing:border-box; }

/* Image de la fiche + Titre */
.entgen{ position:relative; width:100%; height:200px; }
.entgen img{ width:100%; height:200px; object-fit:cover; border:double 7px var(--snd-color); }
  .entgen h1{ font-family:var(--font2); font-size:22px; text-align:center; line-height:25px; padding:13px; color:var(--main-color);
  width:80%; text-align:center; padding:5px; background-color:var(--snd-color); position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.entgen h1 strong{ font-size:12px; line-height:13px; font-family:var(--font1); letter-spacing:1px;  color:var(--six-color); }
  
/* Reste */
.fondgen{ background-color:#fff;text-align:justify; color:var(--main-color); padding:20px; font-size:12px; line-height:1.4em; }
.fondgen h3{ text-align:center; padding:5px; font-family:var(--font1); color:var(--snd-color);  width:85%; position:relative; left:50%; transform:translateX(-50%);  margin:5px 0px;
  font-size:15px; letter-spacing:2px; font-weight:normal;  line-height:18px; }
.fondgen img{ width:80%; max-height:200px; object-fit:cover; border:3px solid var(--six-color); padding:2px; position:relative; left:50%; transform:translateX(-50%); }

/* Liste */

.gengen ul{ margin:0px; padding:0px; }
.gengen ul li{ list-style-type : none !important; margin:5px 0px;}
.gengen li:before{ content:'•'; padding-right:5px; color:var(--five-color) !important; }

/* Presentation Staff */

.debstaff{ display:flex; justify-content:space-between; align-items:center;  }
.fondgen.staff h2{ font-family:var(--font2); font-size:18px; text-transform:uppercase; margin:0px;}
.fondgen.staff h3{ width:100%; font-size:13px; position:initial; transform:none; margin:0px; }
.debstaff img{ width:100%; height:100px; position:initial; transform:none;}
.sta-left{ width:59%; }
.sta-right{ width:40%; }
.debstaff.reverse{ flex-direction:row-reverse; }
.debstaff.reverse h2{ text-align:right; }
}

[MlleAlys]

Voici une correction, si le bloc est toujours d'une largeur supérieure aux 900px demandés, c'est qu'il s'agit d'un autre souci : un élément sur la page qui l'élargit, à l'intérieur ou à l'extérieur de la boîte des mp. A défaut pour les invités d'y avoir accès, peut être pourriez-vous faire une capture de la page entière pour qu'on tente de l'identifier à l'oeil.

partie 1 :

Code:

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

#wrap {
    box-sizing: content-box;
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
}

/*********** FICHE DE PREDEFINIS - ARTEMIS - POUR EPICODE ET ARTIFICES ***********/

.presentation-artemis {
    --police-texte: "Roboto", sans-serif;
    --couleur-foncee-a: #090402;
    --couleur-pastel: #ccaf9b;
    --fond-fiche: #f2f2f2;
    --fond-avatar: #fbfafa;
    width: 85%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 45px 285px 210px 180px 1fr;
    gap: 10px;
    margin: 0 auto 15px;
    background: var(--fond-fiche);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 10px;
    font: 13px var(--police-texte);
    position: relative;
}

.avatar-infos {
    grid-column: 1/2;
    grid-row: 1/3;
    background: var(--fond-avatar);
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.presentation-artemis > .avatar-infos img,
.icone-lien img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: ease-in-out 0.8s;
}

.avatar-infos:after {
    content: " ";
    background: linear-gradient(to bottom, transparent, 70%, var(--couleur-pastel));
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: absolute;
    bottom: 10px;
    right: 10px;
    mix-blend-mode: multiply;
    transition: all 0.8s;
}

.presentation-artemis > .avatar-infos:hover:after {
    opacity: 0;
    transition: all 0.8s;
}

.presentation-artemis > .avatar-infos:hover img {
    transform: scale(1.7) rotate(10deg);
    -webkit-filter: none;
    filter: none;
    transition: ease-in-out 0.8s;
}

.avatar-infos span {
    background: var(--couleur-pastel);
    color: var(--couleur-foncee-a);
    display: inline-block;
    padding: 3px 10px;
    position: absolute;
    top: 20px;
    left: 20px;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
}

.presentation-artemis > h1 {
    margin: 0;
    padding: 0;
    grid-column: 2/3;
    grid-row: 1/2;
    background: var(--couleur-foncee-a);
    border-top: 2px solid var(--couleur-pastel);
    border-bottom: 2px solid var(--couleur-pastel);
    color: var(--couleur-pastel);
    text-align: center;
    display: grid;
    place-content: center;
    font-family: "Yeseva One", serif;
    font-weight: normal;
    font-size: 18px;
}

.presentation-artemis > dl {
    grid-column: 2/3;
    grid-row: 2/3;
    margin: -10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
}

.presentation-artemis > dl > dd {
    border: 1px solid var(--couleur-pastel);
    margin: 0;
    padding: 15px 5px 10px 10px;
    height: 44px;
    width: 100%;
    overflow: auto;
    font-size: 11px;
    text-align: justify;
    box-sizing: border-box;
}

.presentation-artemis > dl dt {
    background: var(--fond-fiche);
    position: relative;
    top: 7px;
    left: 5px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.caractere-arte {
    grid-column: 1/2;
    grid-row: 3/4;
    background: var(--couleur-pastel);
    padding: 10px;
}

.caractere-arte h2,
.infos-arte h2 {
    text-align: right;
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-size: 13px;
    text-transform: uppercase;
    position: relative;
    border: none;
}

.caractere-arte h2 {
    color: var(--couleur-foncee-a);
}

.infos-arte h2 {
    color: var(--couleur-pastel);
}

.caractere-arte h2:after,
.infos-arte h2:after {
    content: " ";
    width: 70px;
    height: 3px;
    position: absolute;
    right: 0;
    bottom: -5px;
}

.caractere-arte h2:after {
    background: var(--couleur-foncee-a);
}

.infos-arte h2:after {
    background: var(--couleur-pastel);
}

.caractere-arte p,
.infos-arte p {
    font-family: var(--police-texte);
    font-weight: 100;
    text-align: justify;
    height: 80%;
    overflow: auto;
    margin: 20px auto;
    font-size: 12px;
    line-height: 16px;
    padding: 0 5px;
}

.caractere-arte p {
    color: var(--couleur-foncee-a);
}

.infos-arte p {
    color: var(--couleur-pastel);
}

.infos-arte {
    grid-column: 2/3;
    grid-row: 3/4;
    background: var(--couleur-foncee-a);
    padding: 10px;
}

.histoire-arte {
    grid-column: 1/3;
    grid-row: 4/5;
    border: 1px solid var(--couleur-pastel);
    padding: 15px 15px;
    text-align: justify;
    font-weight: 100;
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.9);
    max-height: 180px;
    overflow: auto;
}

.histoire-arte span {
    background: var(--couleur-pastel);
    padding: 2px 5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--couleur-foncee-a);
}

.liens-predefinis {
    display: grid;
    gap: 10px;
    grid-column: 1/3;
    grid-template-columns: 30px 1fr;
    grid-template-rows: 1fr;
}

.liens-predefinis > h3 {
    all: unset;
    grid-column: 1/2;
    grid-row: 1/2;
    background: var(--couleur-pastel);
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    display: grid;
    place-content: center;
    text-transform: uppercase;
}

.un-lien-arte {
    width: 100%;
    display: flex;
    gap: 0px 10px;
    justify-content: space-between;
    overflow: hidden;
    grid-column: 2/3;
    margin-bottom: 10px;
}

.un-lien-arte:last-child {
    margin: 0;
}

.icone-lien {
    width: 120px;
    height: 120px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: var(--fond-avatar);
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.bloc-droite {
    width: calc(100% - 120px);
}

.pseudo-lien {
    margin: 0;
    border-bottom: 4px solid var(--couleur-pastel);
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--couleur-foncee-a);
    font-weight: 700;
}

.bloc-droite p {
    height: 58px;
    overflow: auto;
    font-size: 11px;
    margin: 8px 0;
    text-align: justify;
}

.bloc-droite > span {
    background: var(--couleur-foncee-a);
    color: var(--fond-fiche);
    font-size: 10px;
    text-transform: uppercase;
    height: 20px;
    display: grid;
    place-content: center;
}

.credit-artemis {
    position: absolute;
    text-align: center;
    bottom: -15px;
    font-size: 10px;
}

.credit-artemis a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
}

/********************************************************************* CATÉGORIES */

/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés)*/

.liens_pa {
 background: var(--background2);
    padding: 5px 0 7px;
    border-radius: 7px;
    margin-top: 9px;
    text-align: center;
}

.liens_pa a {
    background: var(--background1);
    border-radius: 7px;
    padding: 1px 10px;
    margin: 0 10px;
    text-transform: uppercase;
    font-size: 10px;
}

/*Titre de la catégorie*/

.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

.cat_titre h2 {color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin: 0;}

/*Rassemblement de balises répétitives*/

#cate {margin: 0 7px 0 0;
    border-radius: 7px;}

.liensforums, .imgnew, .txt_derniermess {
  border: var(--border1); }

/*Corps des catégories*/

.cat_container {  background: var(--background2);
    border-radius: 7px;
    height: 114px;/*à modifier seulement si vous la voulez plus haute*/
    padding: 10px;
    margin: 0 0 4px;
    display: flex;
font-size:14px;}

/*Partie liens forums*/

.liensforums { font-size: 0px;
    overflow: auto;
    width: 18%;
    padding: 5px;
    text-align: left;}

#liensforums2 a {
display: block;
    text-transform: lowercase;
    font-size: 14px;
}

#liensforums2 a::before {
    color: #DD9F8C;
    content: " ● ";
}

/*Partie image new, no new etc.*/

.imgnew {    padding: 3px;
    width: 5%;}

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

/*Partie titre du forum et description*/

.titredescriforum {  
    width: 65%;}

/*titre forum*/
.titreforum {    background: var(--background1);
    border-radius: 7px;
    padding-left: 13px;
    text-transform: lowercase;
    text-align: left;}

.titreforum a {     font-size: 15px;
    font-weight: 700;
    color: #000;}

/*description*/
.descricat {    height: 67px; /*à modifier si vous changer la height de .cat_container*/
    margin-top: 4px;
    text-align: justify;
    overflow: auto;
    line-height: 20px;
    border-top: var(--border1);}

/*Partie nb de sujets et messages*/

.nbsujnotes {     display: flex;
    flex-wrap: wrap;
    max-width: 60px;}

.nbsujnotes2 {  background: var(--background1);
    border-radius: 4px;
    color: var(--acc1);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;}

.nbsujnotes2:nth-child(2) {margin-top:7px;
  color:var(--acc2);}

/*Partie dernier message posté*/

.derniermess {
        max-width: 164px;}

/* titre avec écrit last song*/
.ti_derniermess {       background-image: var(--degrade);
    border-radius: 4px;
    color: var(--acc3);
    font-size: 11px;
    margin: 0 0 0 21px;
    text-align: center;
    min-width: 140px;}

/*dernier avatar*/
.avatarcat {    background: var(--background2);
    border: var(--border1);
    border-radius: 50px;
    margin-top: -18px;
    padding: 2px;
    position: absolute;
}

.avatarcat img {        border-radius: 50px;
    width: 39px;
    height: 39px;
    object-fit: cover;}

/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
    border-radius: 7px;
    margin: 5px 0 0;
    padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
    text-transform: lowercase;
    height: 73px; /*à modifier si vous changer la height de .cat_container*/
    display: flex;
    line-height: 13px;
    flex-wrap: wrap;
    align-items: center;
}

.txt_derniermess a {    font-size: 14px;}

.txt_derniermess br {
content: "";
    margin: 2em 0 0 4em;
    display: block;
    font-size: 24%;
}



[MlleAlys]

partie 2 :

Code:

/******************************************************************************* QEEL*/

/*balise qui contient tout le QEEL*/
.qeel_container {      background: var(--background2);
    margin: 10px 0 0;
    border-radius: 10px;
    padding: 10px 10px 7px;
    display: flex;
    flex-wrap: wrap;}

/*BALISE QUI CONTIENT LES MEMBRES CO 24 HEURES / NOUVEAU MEMBRE / TEXTE CRÉDITS / PARTIE GROUPES*/
.qeel1 {       margin-right: 7px;
    width: 70%;}

/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 {    display: flex;
margin:0 0 7px 0;}

/*balise connectes dernieres 24 heures*/
.qeel_dc {         width: 57%;
    margin: 0 7px 0 0;
    height: 98px;
    border-top: var(--border1);
    margin-right: 7px;
    padding: 5px;
    font-size: 14px;
    text-align: justify;
    overflow: auto;}

/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}

/*balise nouveau inscrit*/
.qeel_nm {    border: var(--border1);
    border-radius: 7px 7px 7px 28px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;}

/*balise avatar nouveau inscrit*/
.qeel_avatar {       width: 50px;
    z-index: 100;
    height: 50px;
    padding: 4px;
    border-radius: 10px 100% 100%;
    background: var(--background2);
    border: var(--border1);
box-sizing: border-box;}

/*avatar nouveau inscrit*/
.qeel_avatar img {   width: 40px;
    object-fit: cover;
    height: 40px;
    border-radius: 10px 100% 100%;}

/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
    text-transform: lowercase;
    font-size: 16px;
    line-height: 31px;
    min-height: 30px;
    margin: 0 0 0 20px;}

.qeel_nouvmembre strong {font-weight:500;}

/*balise titre bienvenue sur forum*/
.qeel_bienvenue {      width: 100%;
    text-align: right;
    background: var(--background1);
    text-transform: lowercase;
    font-weight: 600;
    font-size: 12px;
    padding: 0 10px 0 0;
    margin: -17px 0 0 24px;
    border-radius: 4px;
    color: var(--acc1);
}

/*balise txt libre/credits*/
.qeel_cred {   text-align: justify;
    height: 45px;
    overflow: auto;
    margin-top: 4px;
    font-size: 12px;
}

/*balise contenant groupes*/
.qeel_groups {      display: flex;
    width: 100%;
    border-top: var(--border1);
    padding: 7px 0 0;
}

/*balise des groupes*/
.group {    background: var(--background1);
    padding: 3px 10px 2px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;margin:0 7px 0 0;
    font-size: 12px;
    font-weight: 600;
}

.group:last-child {margin:0;}

/*BALISE QUI CONTIENT NB CONNECTES ET INVITES, MEMBRES CONNECTES ET NB INSCRITS/MESSAGES*/
.qeel2 {    width: 29%;}

/*balise nb utilisateurs en ligne*/
.qeel_stats {    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    border-bottom: var(--border1);
    padding: 0 0 4px;
  letter-spacing: 1px;}

.qeel_stats strong {
  font-weight:500;}

/*balise nb inscrits/messages et membres connectes*/
.qeel5 {    display: flex;
  margin: 7px 0 0;}

/*balise nb inscrits/messages*/
.qeel_sujmess {      margin: 0 7px 0 0;
    max-width: 85px;}

/*nb inscrits/messages*/
.qeel_sujmess2 {  background: var(--background1);
    text-align: center;
    font-size: 11px;
    padding: 0 10px;
    border-radius: 7px;
    font-weight: 700;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;    color: var(--acc2);}

.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
    color: var(--acc1);}

/*balise membres connectes*/
.qeel_mc {    border: var(--border1);
    border-radius: 7px;
    padding: 5px;
    text-align: justify;
    text-transform: lowercase;
    width: 100%;}

.qeel_mc br {display:none!important;}

/*balise titre membres co*/
.qeel_mc2 {    text-align: center;
    background: var(--acc2);
    text-transform: uppercase;
    font-size: 11px;
    color: var(--acc3);
  border-radius: 4px;}

/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
    height: 76px;
    margin: 4px 0 0;
    border-top: var(--border1);
    overflow: auto;}

.qeel_mc3 a {font-size:14px;}

/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf {    width: 100%;
    border-top: 1px solid #ededed;
    margin: 7px 0 0;
    padding: 7px 0 0;
    text-align: center;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d1d1d1;}
/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {
  background-color: var(--white);
  border-radius: 10px;
  display: grid;
  text-align: center;
  grid-gap: 7px;
  grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
  padding: 10px;
  height: 250px;
}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {       height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {     cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {  
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {     color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
         background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/


/*CONTEXTE ET HOVER*/

/* corps du contexte (container en gros qui tient tout*/
.gif_pa {     border: 1px solid var(--border);
    border-radius: 7px;
    display: inline-block;
    grid-area: 1 / 2 / span 5 /span 2;
    height: 192px;
    line-height: 110%;
    overflow: auto;
    padding: 3px;
    width: 216px; } /* à modifier si vous modifiez la largeur de la grid */

/*container de l'image du contexte*/
.img_pa {
    width: 100%;
margin: 0 auto;
position: relative;
      overflow: hidden;
  border-radius:7px;
}

/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
    height: 192px;
    object-fit: cover;
    width: 216px; /* même largeur que gif_pa*/
}

/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt {  background-color: var(--white);
    height: 192px;
    left: 108px;
    line-height: 16px;
  overflow: hidden auto;
    position: relative;
    padding: 5px;
    scrollbar-width: none;
    text-align: justify;
    top: 96px;
    transform: translate(-50%,-50%);
    width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */

/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
    bottom: 0;
    height: 0;
    left: 0;
    overflow: hidden auto;
    position: absolute;
    scrollbar-width:none;
    right: 0;
    transition: .5s ease;
    width: 100%;
}
.img_pa:hover .overflow {
  height: 100%}

/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar  {width:0px;height:0px;}


/*PARTIE NAVIGATION / LIENS*/

.item_1 {    grid-area: 1 / 4 / span 5 /span 1;}

/*liens navigation*/
.link_pa {        background-color: var(--background);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
  text-transform:uppercase;
    margin-bottom: 6px;
    line-height: 10px;
    padding: 1px 0;}

/*container avec les règles*/
.item_5 {       border: 1px solid var(--border);
    border-radius: 4px;
    height: 77px;
    line-height: 15px;
    overflow: auto;
    padding: 5px 7px 3px;
    text-align: justify;
    margin: 8px 0;}



/* PA */

:root {
    --accc1: #000;
    --accc2:#DD9F8C;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --background: #f1f1f1;
    --degrag: #ccc9c7;
}

/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {          background-color: var(--white);
    border-radius: 10px;
    display: grid;
text-align:center;
    grid-gap: 7px;
    grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
    padding: 10px;}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {       height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {     cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {  
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {     color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
         background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/

/*TIMELINE*/

/*container timeline*/
.item_8 {      border: 1px solid var(--border);
    border-radius: 5px;
    grid-area: 1 / 5 / span 2 /span 2;
    height: 57px;
    padding: 2px 5px;
    text-align: justify;}

/*container texte timeline*/
.texte_1 {   height: 43px;
    line-height: 13px;
    overflow: auto;
    text-align: justify;}

/*partie premiere version signée xx*/
.titre_4 {    background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;}


/*PARTIE PÉRIODE DE JEU*/

/*container période de jeu*/
.item_9 {      border-bottom: 1px solid var(--border);
    color: var(--accc1);
    font-size: 11px;
    font-weight: 600;
    grid-area: 3 / 5 / span 1 /span 2;
    letter-spacing: 1px;
    margin-top: -2px;
    text-transform: uppercase;}

/*déco de texte pour rendre rose*/
j {color:var(--accc2);
  font-style: italic;
}


/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/

/*container du tout*/
.item_10 {   grid-area: 4 / 5 / span 2 /span 2;}

/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}

/*container des membres du mois (colonne gauche)*/
.float_pa1 {    float: left;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
    height: 56px;}

/*style des images des membres du mois*/
.mdm1, .mdm2 {
          border: 1px solid var(--border);
    border-radius: 10px;
    height: 30px;
    object-fit: cover;
    padding: 3px;
    width: 21px;
}
.mdm2 {margin:0 5px;}

/*container de la partie nous soutenir*/
.float_pa2 {float: left;
    height: 56px;
    margin-left: 4px;
    line-height: 12px;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}

/*icons discord et tumblr*/
.discord_pa {    width: 21px;}

/*PARTIE PARTENARIATS*/

/*container de la partie partenariats*/
.item_11 {          border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 3px;}

/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
  border-width: 1px;
  border-radius: 5px;
  border: 1px solid var(--border);
  width: 175px;
  letter-spacing: 1px;
  font-size: 8px;
  text-transform: uppercase;}


/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/

.titre_1, .titre_2 {
   border-radius: 4px;
    color: var(--white);
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/

w,y {font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
  text-transform:uppercase;
}

w {  color: var(--accc2);}
y {  color: var(--accc1);}

/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {
  grid-area: 6 / 1 / span 1 /span 6;
  font-size: 7px;
  border-top: 1px solid var(--border);
  letter-spacing: 1px;
  padding-top: 5px;
  color: #d1d1d1;
  margin-top: 16px;
}


/****************************************************************** LISTE DES SUJETS *************************/

/***********PARTIE AU-DESSUS ET EN-DESSOUS LISTE DES SUJETS***********/

/*Boutons nouv/rep et navigation*/
.pro_nav {      display: flex;
    font-size: 0;
    margin: 15px 0;
align-items:center;}

/*liens dans navigation*/
.pro_nav a {    font-size: 12px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    font-weight: 600;
    padding: 1px 0 0;}

/*styling bouton nouv/rep*/
.pro_nouvrep a {    background: var(--background3);
    color: var(--acc3)!important;
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;    transition: .5s ease;}

.pro_nouvrep {       margin: 0 10px 0 0;
}
.pro_nouvrep a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.pro_nouvrep a:nth-child(1):hover {background: var(--background3);    transition: .5s ease;
    color: var(--acc3)!important;}

/*liens navigation à côté de bouton rep/nouv*/
.liens_suj {       background: var(--background2);
    padding: 2px 10px 3px;
    border-radius: 7px;
    display: flex;
    justify-content: flex-start;
    font-size: 0;
    align-items: center;}

.liens_suj a {
    margin: 0 15px 0 0;
    text-transform: uppercase;
    font-size: 12px;
  font-weight: 600;}

/*la pagination*/
.pagination {    float: none;
    display: flex;
    justify-content: flex-end;
  font-size: 0px;
margin:0;}

.pagination2 {    
    text-transform: uppercase;
}

.pagination a, .pagination span {font-size:12px;}

.pagination a {    padding: 0 10px 0;}

.pagination a strong {font-weight:500;}

.pagination span strong {      background: var(--acc2);
    padding: 0 5px;
    border: none;
    color: var(--acc3);
    font-size: 10px;
    border-radius: 3px;
        line-height: 16px;
    width: auto;}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active
{    color: var(--acc1);
    background: var(--background1);
    padding: 0 5px;
    border: none;
    font-size: 10px;
  border-radius: 3px;
    line-height: 16px;
    width: auto;}

.pagination span a.pag-img {vertical-align: baseline;}

.pagination span a.pag-img img {    height: 9px;
    margin-top: 0;}

/*titre de liste des sujets*/
.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

/*********** LES SUJETS ***********/

/*Div qui contient toutes les balises*/
.af_suj1 {    display: flex;
    background: var(--background2);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 74px;
    margin: 0 0 7px;}

/*partie image new/no new*/
.af_suj2 {   width: 57px;
    margin: 0 7px 0 0;}

.af_suj2 img {       width: 57px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;}

/*partie réponses / vues*/
.af_suj3 {       width: 9%;
    margin: 0 7px 0 0}

.suj_stat {background: var(--background1);
    border-radius: 7px;
    display: flex;
    height: 25px;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--acc2);}

.suj_stat:nth-child(1) {
margin:0 0 4px;
color:var(--acc1);}

/*partie titre du sujet, auteur, pagination & description*/
.af_suj4 {width: 58%;}

/*titre du sujet*/
.suj_titre {       border-bottom: var(--border1);
    padding: 0 0 4px;
    margin: 0 0 4px;}

a.topictitle {   color: var(--acc1);
    font-weight: 600;
    font-size: 15px;
    text-transform: lowercase;
    line-height: 13px;}

a.topictitle:hover {
text-decoration:none;}

ba {    color: var(--acc2);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 13px;}

.suj_titre img {margin:0 5px 0 0;}

/*partie auteur et pagination*/
.af_suj5 {    display: flex;}

.suj_auteur {        width: 50%;
  font-size: 11px;
    text-transform: uppercase;}

.suj_pagination {    text-transform: uppercase;
    font-size: 0px;
    width: 50%;
    text-align: right;
  }

.suj_pagination a {    font-size: 11px;
    background: var(--background1);
    padding: 0 9px;
    border-radius: 4px;
    margin: 0 3px 0 0;}

.suj_pagination br, .suj_pagination img {display:none!important;}

.suj_pagination .gensmall {font-size:0px!important;}

/*description du sujet*/

.suj_description {    color: var(--acc1);
    font-style: italic;
  font-size: 13px;}

/*partie avatar dernier posteur*/
.af_suj6 {       border: var(--border1);
    padding: 3px;
    width: 50px;
    height: 50px;
    border-radius: 60px;
    box-sizing: border-box;
    margin: auto 7px;}

.af_suj6 img {width: 41px;
    height: 42px;
    border-radius: 51px;
  object-fit: cover;}

/*partie dernier message et dernier posteur pseudo*/
.af_suj7 {width: 17%;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    text-transform: lowercase;
    margin: auto 0;}

.af_suj7 span {
  padding:0 10px 0 0;
}

.af_suj7 img {margin:0 0 0 3px;}

/*********** AFFICHAGE SUJETS SI PAS DE SUJETS ***********/
li.row {
    border: none;
    text-align: center;
    list-style: none;
    padding: 9px;
    text-transform: uppercase;
    color: var(--acc1);
    letter-spacing: 1px;
  border-radius: 0 0 10px 10px;
  font-size:14px;
  background:var(--background2);
}

li.row:hover {
    background-color: var(--background2);
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
  margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
    background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

/*Div contenant le rang et limage*/
.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {        width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
        background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/

/*Div contenant le tout*/
.spro_3 {
    margin: 0 0 0 7px;
    width: 100%;
}

/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}

/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
  width: 70%;
    margin: 0 7px 0 0;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {      border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {          height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}

dl.details dt {
    text-align: left;
    width: 12em;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--acc2);
}

dl.details dd {
    margin: 0 0 .5em 12em;
  font-size:14px;
  line-height:22px;
}

/*Div contenant la feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

/*Div contenant feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div titre feuille de personnage*/
.spro_frpgtitle {
    background-image: var(--degrade);
    color: var(--acc3);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
}

/*Div avec scroll pour feuille personnage*/
.spro_frpg {
    margin: 7px 0 0;
    height: 335px;
    overflow: auto;
    border-top: var(--border1);
    box-sizing: border-box;
    padding: 10px 0 0;
}

/*Styling des champs*/
frpg {font-weight: 700;
    letter-spacing: 1px;
    color: var(--acc1);
    text-transform: uppercase;
  font-size: 13px;}

/*Styling où le texte se trouve*/
.spro_frpg textarea {
    width: 100%!important;
    height: 93px!important;
    border: var(--border1);
    border-radius: 10px;
    margin: 10px 0 12px;
    overflow: auto;
    box-sizing: border-box;
}

.inputbox:hover {
    border: var(--border1);
}
.memberlist_t {
      width: 850px !important;
    height: 50px;
    background: #cbcbcb;
    border-radius: 10px;
    margin: auto !important;
    text-align: center;
    color: white !important;
    font: 11px roboto !important;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    margin-bottom: 10px;
}


.panelarte {
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 850px;
  margin: auto;
  background: none;
}

.panelarte h2 {
  border: none;
  color: #cbcbcb;
}

.memberlist_arte {
  width: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  padding: 0;
  
}

.one_member {
  width: 275px;
  height: 120px;
  background: #95b8d9;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}

.one_member a, .one_member a:hover {
  text-decoration: none;
  color: white !important;
}

.one_member:before {
  content: " ";
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(251,251,251,0.2);
  z-index: 0;
  -webkit-clip-path: circle(50% at 29% 22%);
          clip-path: circle(50% at 29% 22%);
}

.avatar_member_list {
  width: 70px;
  height: 70px;
  z-index: 99;
}

.avatar_member_list img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid white;
  -o-object-fit: cover;
     object-fit: cover;
}


.pseudo_memberlist {
  margin: 0;
  width: 155px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}

.pseudo_memberlist > h2 {
  color: white;
  font: 12px roboto;
  text-transform: uppercase;
  font-weight: 500;
  border-left: 2px solid white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
}

.pseudo_memberlist div {
      color: white;
    font: 9px roboto;
    font-weight: 400;
    margin-top: -40px;
    font-style: oblique;
    margin-bottom: -5px;
    text-transform: lowercase;
  
  
}

.pseudo_memberlist > h2 strong {
  color: white;
  font-weight: 500;
}

.stats_link_members {
  width: 155px;
  margin-left: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -5px;
}

.stats_link_members span {
  display: block;
  font: 9px source code pro;
  color: white;
  text-transform: uppercase;
  margin: 0 0px;}

.one_member a[href^="/privmsg"]:before{
  content:'MP';
}

.stats_link_members a[href^="/privmsg"] img{
    display: none;
}

.stats_link_members span:after {
  content: "|";
    margin: 0 3px;
}

.stats_link_members span:last-child:after {
  content: " ";
}
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

#wrap-topic {
    width: 800px;
    margin: auto;
    display: flex;
    flex-flow: wrap;
}

#header-topic {
    background-color: #f1f0f4;
    width: 100%;
    color: #c07c59;
    font-size: 11px;
    font-style: italic;
    line-height: 27px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

#header-topic .sousligne {
    font: 11px 'Roboto', sans-serif;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header-topic a:not(:first-of-type) {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: -0.5px;
}

#header-topic a:first-of-type {
    color: #262929;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.new-reply-topic,
.topic-pagination {
    display: flex;
    align-content: center;
    flex-flow: wrap;
}

.topic-pagination,
#pagination_memberlist {
    margin-left: auto;
    text-transform: uppercase;
    font-family: initial;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -1px;
    color: transparent;
}

.topic-pagination>div,
#pagination_memberlist>div {
    margin: 20px 0 5px;
}

.topic-pagination>div a,
#pagination_memberlist>div a {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -0.5px;
}

.new-reply-topic a {
    padding: 28px 17px 28px 25px;
}

.topic-pagination span strong,
#pagination_memberlist strong {
    padding: 0 0 0 5px;
}

.topic-pagination span,
#pagination_memberlist span {
    color: #262929;
}

.topic-pagination strong,
#pagination_memberlist strong {
    color: #c07c59;
    padding: 0 2px;
}

.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
    display: none;
}

.header-message {
    width: 100%;
    height: 86px;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    padding: 0 50px 0 0;
    color: #f6f5f8;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
    background-color: #262929;
}

.header-message div {
    position: absolute;
    left: 35px;
    bottom: 22px;
}

.header-message span,
.header-message a[href*="/u"] {
    width: 100%;
    text-align: right;
}

.header-message span {
    font: 20px 'DM Serif Display', serif;
    font-style: normal;
    margin-right: -20px;
}

.header-message span,
.header-message>a {
    width: 100%;
}

.header-message strong {
    color: #f6f5f8;
    font-weight: 100;
}

.header-message>div img {
    padding: 0 2px;
}

.wrap-topic-content {
    background-color: #F1F0F4;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    padding: 19px 0;
}

.topic-content {
    width: 538px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding-top: 6px;
}

.topic-content,
.topic-content>a {
    color: #C3C3C3;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

.topic-content>div a {
    font-weight: bold !important;
}

.topic-content>div {
    color: #262929;
    font-style: normal;
    text-align: justify;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid #C3C3C3;
    padding: 18px 0;
    margin-top: 8px;
    width: 100%;
}

.topic-content>div img {
    max-width: 100%;
}

.topic-avatar {
    border: 2px solid #F6F5F8;
    overflow: hidden;
    width: 200px;
    height: 320px;
    position: relative;
}

.topic-avatar>div img {
    max-width: 100%;
}

.topic-avatar>a img {
    width: 200px;
}

.topic-avatar>div {
    position: absolute;
    top: 396px;
    background-color: #ffffffe0;
    width: 200px;
    height: 320px;
    transition: all 1s;
    padding: 5px 20px 10px;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topic-avatar:hover>div {
    top: 0;
}

.feuille-de-perso a[href*="/u"],
.title-profil {
    font: 30px 'Hamilton', cursive;
    color: #c07c59;
    text-align: right;
    display: block;
    height: 32px;
    text-transform: lowercase;
  white-space: nowrap;
}

.topic-avatar .label {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
    color: #262929
}

.topic-avatar>div .label span,
.feuille-de-perso {
    color: #262929 !important;
}

.feuille-de-perso textarea {
    min-width: 100%;
    max-width: 100%;
    display: block;
    height: 50px;
    background-color: #F6F5F8;
    padding: 6px;
    overflow: auto;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
}

/*.feuille-de-perso br { display: none; }*/

.topic-avatar .contact_link_p {
    position: sticky;
    bottom: 5px;
    margin: 10px -10px 0 0;
    font-size: 0;
    text-align: right;
}

.topic-avatar .contact_link_p a:first-child {
    padding-right: 7px;
}

.separation {
    width: 555px;
    margin: auto;
    height: 1px;
    background-color: #C3C3C3;
    margin: 15px 0 2px;
}

.signature-topic {
    width: 100%;
    max-height: 280px;
    padding: 5px;
    overflow: auto;
}

.signature-topic img {
    max-width: 100%;
}

#wrap-topic a[name="quickreply"]+.h3 {
    display: none;
}

#wrap-topic form#quick_reply {
    width: 100%;
}

#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
    background-color: #F1F0F4 !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif;
}

#wrap-topic #quick_reply #textarea_content {
    box-shadow: none;
}

#wrap-topic #quick_reply #textarea_content+div input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 15px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0px 10px 10px 10px;
    height: 35px;
    padding: 0 15px;
}

#topic-form label {
    font-size: 0;
}

#topic-form select {
    background-color: #F1F0F4;
    border: none;
    font-size: 10px;
    padding: 3px 5px;
}

#topic-form fieldset {
    margin: 55px 0 28px;
}

#topic-form input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 12px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0 5px;
    height: 21px;
    padding: 0 5px;
}

/* Affichage du bloc des permissions */
.permissions {
    width: 100%;
    background-color: #F1F0F4;
    padding: 20px 25px;
    font: 11px 'Roboto', sans-serif;
}

.permissions a {
    color: #c07c59;
}

.permissions .h3 {
    border: none;
    font: 13px 'DM Serif Display', serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
    margin: 0 0 20px;
    background: none;
    font: 12px 'Roboto', sans-serif;
    padding: 0;
    border: none;
}

blockquote {
    padding: 10px 30px;
}

dl.codebox code,
.spoiler dd,
.hidecode {
    background-color: #F6F5F8 !important;
    padding: 10px 30px !important;
}

.hidecode dt,
dl.codebox::before,
blockquote::before {
    display: none !important;
}

dl.codebox dt,
cite {
    border: none;
    color: #C38567;
    font: 11px 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 5px 0 8px 11px;
    font-weight: 500;
}

.spoiler dt {
    margin-bottom: 3px !important;
}

dl.codebox code {
    font-size: 12px;
}
  /* --------- FIN AFFICHAGE MESSAGES --------- */
/********************************************************* NAVIGATION ET HEADER *********************************************************/
/* NAVIGATION */
.navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #f4f4f4;
        border-bottom: 2px solid #475944;
        z-index: 99;
        padding: 1rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
   font-family: Arial, sans-serif;
        color: #8f8a9e;
        text-transform: uppercase;
}

.navigation img {
     display: none;
}

.barre_nav {
        display: flex;
        margin: auto;
}

.barre_nav li {
        list-style-type: none;
        padding: 0 .5rem;
}

.barre_nav .mainmenu {
        font-weight: bold;
        font-size: 10px;
        color: #8f8a9e;
}

/* BOUTONS HAUT BAS */
.up_down {
        color: #8f8a9e;
        font-size: 10px;
        font-weight: 700;
        padding: 0 2rem 0 0;
        position: absolute;
        right: 0;
}

.up_down a:first-child {
     color: #429679;
}

.up_down a:last-child {
     color: #b88749;
}

/* CACHER LA DESCRIPTION */
#site-desc {
     display: none;
}

/* HEADER */
.heabder_bann {
  text-align:center;
}
.heabder_bann img {
  width:100%;
}
ul.topiclist.bg_none {
    background: #e2e2e2;
}

/********************************************************** liste messages privés ***************************/

#privmsgs-menu {
    float: none !important;
    padding: 0 9px;
}
#picture_legend, #privmsgs-menu {
    border-radius: 3px;
    box-shadow: none !important;
    font-size: 1.3rem;
    margin-bottom: 24px;
    overflow: hidden;
}
#privmsgs-menu a {
  color:black;
  text-transform:uppercase;
  font:11px calibri;
  letter-spacing:1px;
}
.mp_bouton{
    background: #cdb65c;
    width: 49%;
    margin: 0px 5px 0px 0px;
    outline: 1px solid #9e8b3e;
    outline-offset: -4px;
    padding: 4px;
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #e8e8e8;
    font: 11px calibri;
    text-transform: uppercase;
    text-align: center;
}
.mp_bouton a {
    color: #1e1e1e;
    display: block;
}
.total_liste_mp {
    background: #e8e8e8;
    margin-top: 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.title_mp {
    border-bottom: solid 1px #ac8b68;
    flex-grow: 1;
    padding-bottom: 0.5rem;
}
.title_mp a {
  color:black;
  font:10px calibri;
  text-transform:uppercase;
}
.blok_mp {
    font: 10px calibri;
    text-transform: uppercase;
    flex-shrink: 0;
}
.icon_mp {
    height: 50px;
    width: 100px;
    flex-shrink: 0;
}

/*selection mp*/
ul.topiclist.pmlist dd {
    padding: 1rem;
}

/********************************************** FIN liste messages privés ***************************/

.heabder_bann {
  text-align:center;
}
.heabder_bann img {
  width:100%;
}
:root{
  --main-color:#555;
  --snd-color:#fff;
  --third-color:#888;
  --four-color:#FCC5A0;
  --five-color:#F28977;
  --five-v-color:#FAC0B6;
  --six-color:#B9919A;
    --six-v-color:#DAC5CA;
  
  --font1: 'Source Sans Pro', sans-serif;
  --font2:'Playfair Display', serif;
  --fontjournal:'Alfa Slab One', cursive;
}

.degr, .fondgen h3, .fondgen.bottin strong{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
    position:relative; z-index:20;
}

/* Fiche Générale du forum par KoalaVolant */

.gengen{ width:80%; margin:0 auto; padding:5px; }
.gengen *{ box-sizing:border-box; }

/* Image de la fiche + Titre */
.entgen{ position:relative; width:100%; height:200px; }
.entgen img{ width:100%; height:200px; object-fit:cover; border:double 7px var(--snd-color); }
  .entgen h1{ font-family:var(--font2); font-size:22px; text-align:center; line-height:25px; padding:13px; color:var(--main-color);
  width:80%; text-align:center; padding:5px; background-color:var(--snd-color); position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.entgen h1 strong{ font-size:12px; line-height:13px; font-family:var(--font1); letter-spacing:1px;  color:var(--six-color); }
  
/* Reste */
.fondgen{ background-color:#fff;text-align:justify; color:var(--main-color); padding:20px; font-size:12px; line-height:1.4em; }
.fondgen h3{ text-align:center; padding:5px; font-family:var(--font1); color:var(--snd-color);  width:85%; position:relative; left:50%; transform:translateX(-50%);  margin:5px 0px;
  font-size:15px; letter-spacing:2px; font-weight:normal;  line-height:18px; }
.fondgen img{ width:80%; max-height:200px; object-fit:cover; border:3px solid var(--six-color); padding:2px; position:relative; left:50%; transform:translateX(-50%); }

/* Liste */

.gengen ul{ margin:0px; padding:0px; }
.gengen ul li{ list-style-type : none !important; margin:5px 0px;}
.gengen li:before{ content:'•'; padding-right:5px; color:var(--five-color) !important; }

/* Presentation Staff */

.debstaff{ display:flex; justify-content:space-between; align-items:center;  }
.fondgen.staff h2{ font-family:var(--font2); font-size:18px; text-transform:uppercase; margin:0px;}
.fondgen.staff h3{ width:100%; font-size:13px; position:initial; transform:none; margin:0px; }
.debstaff img{ width:100%; height:100px; position:initial; transform:none;}
.sta-left{ width:59%; }
.sta-right{ width:40%; }
.debstaff.reverse{ flex-direction:row-reverse; }
.debstaff.reverse h2{ text-align:right; }

[Argimpasa]

C'est tout bon du coup ^^
Je vous remercie sincèrement.