Souci de la taille du gif

[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 : 01/01/2024
Lien du forum : https://mydearjane.forumactif.com/u4

Description du problème

Bonjour

J'espérais pouvoir arrêter de vous ennuyer mais alors que je pensais pouvoir enfin lancer mon forum, je rencontre un autre souci.
Comme vous le voyez, le gif est beaucoup trop grand. J'ai essayé de trouver la div correspondante pour pouvoir modifier le tout mais j'en ai été incapable et je m'en excuse grandement. Et du coup dois-je mettre  

Code:

img {
max-width : 100%;
height : auto;
}

J'avais déjà eu un souci dans le genre mais là le problème n'est pas réellement une méconnaissance du css mais plus du template.
?
Je vous remercie d'avance. J'aimerais juste que la largeur s'adapte à celle du profil.

CSS

Code:

.headerbar { background : none; height:488px; }
#headerbar-top { height:auto; }

#logo img {
  max-width: 100%;
  margin-top: 72px;
}
/* CATEGORIES - ARTEMIS */
:root
{
 --couleur-fond: #bc896f;
 --couleur-fond2: #f7e8cd;
}

a:hover
{
 text-decoration: none !important;
}

a
{
 text-decoration: none !important;
}

a:link
{
 text-decoration: none;
}

a:visited
{
 text-decoration: none;
}

.title_cate_salva
{
 width: 830px;
 height: 80px;
 margin: 10px auto;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 outline: 1px solid white;
 outline-offset:-10px;
 background: url(https://zupimages.net/up/23/45/j78l.jpg);
 -webkit-filter: none;
 filter: pinkscale(1);
 background-size: 100%;
 background-position: center top;
 background-repeat: no-repeat;
}

.title_cate_salva h2
{
 text-align: center;
 margin: 0 auto;
 color: #68514c;
 font: 30px 'Oswald', sans-serif;
 text-transform: uppercase;
}

.categories_content
{
 width: 830px;
 height: 125px;
 margin: auto;
 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;
 background: #f5f5f5;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border: 1px solid #C5C5C5;
 margin-top: 10px;
 padding: 10px;
 position: relative;
}

.description_img_block
{
 width: 220px;
 height: 100px;
 background: #fafafa;
 border: 1px solid #bc896f;
 position: relative;
 z-index: 3;
}

.title_and_desc
{
 width: 415px;
 height: 100px;
}

.title_and_desc > a
{
 width: 100%;
 text-align: left;
 text-decoration: none;
 display: block;
 background: -webkit-linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font: 25px barlow condensed;
 text-transform: uppercase;
 font-style: oblique;
 height: 35px;
 margin-top: -5px;
 line-height: 35px;
}

.title_and_desc > a:before
{
 content: "||";
 margin-right: 5px;
}

.title_and_desc p
{
 width: 100%;
 margin: 0;
 font: 12px calibri;
 height: 70px;
 overflow: auto;
 line-height: 12px;
 text-align: justify;
 color: #8E8E8E;
}

.title_and_desc > p img
{
 width: 199px;
 height: 80px;
 position: absolute;
 top: 20px;
 left: 22px;
 -o-object-fit: cover;
 object-fit: cover;
 -webkit-filter: none;
 filter: none;
 z-index: 99;
}
.title_and_desc > p img:hover
{
 -webkit-filter: none;
 filter: none;
}
.stats_salva
{
 width: 160px;
 height: 100px;
 background: #fafafa;
 border: 1px solid #bc896f;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-align: center;
 padding-top: 15px;
}

.last_message
{
 box-sizing: border-box;
 width: 100%;
 height: 65px;
 font: 10px calibri;
 color: gray;
 text-transform: lowercase;
 font-style: oblique;
 padding-top: 5px;
}

.last_message a
{
 text-transform: uppercase;
 text-decoration: none;
 font-size: 10px;
 color: #bba985;
 font-style: normal;
}

.mess_topic
{
 width: 100%;
 height: 20px;
 margin-top: -5px;
 text-align: center;
 font: 8px calibri;
 text-transform: uppercase;
 /* font-weight: bold;
 */
 line-height: 20px;
 border-top: 1px solid #e8e8e8;
 color: gray;
}

.img_etat_salva
{
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 2;
}

.subforums_salva
{
 width: 830px;
 height: 23px;
 background: -webkit-gradient(linear, left top, left bottom, from(var(--couleur-fond)), to(var(--couleur-fond2)));
 background: -o-linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 background: linear-gradient(to left, var(--couleur-fond), var(--couleur-fond2));
 margin: auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0 5px;
 font-size: 0;
}

.subforums_salva a
{
 color: #a89c8c;
 text-decoration: none;
 font: 10px calibri;
 text-transform: uppercase;
 font-style: oblique;
 background: #fafafa;
 display: block;
 padding: 0 5px;
 margin: 0 2px;
}

.descFRM
{
 display: none;
}
a{text-decoration:none;}
a:hover{text-decoration:none !important;
}
::-webkit-scrollbar-thumb {
    background-color:#cb8a48;
}
::-webkit-scrollbar {
    width: 7px;
    height: 8px;
    border: 3px solid #eeeeee;
    background-color: #cb8a48;
}
.panel {
    box-shadow: none !important;
}
@font-face {
  font-family: ptlight;
  src:url('https://files.jcink.net/uploads/noctuary/Skin___Historia/FuturaPTLight.otf');
  format("opentype");
}
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px 12px 5px 12px;
background-color: #2e2c29;
  letter-spacing:1px;
font:9px arial;
text-transform: uppercase;
color:#eeeeee;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
#page-footer {
  margin: auto;
  background: #eee;
  width: 830px;
  background : none;
}
#page-footer a {
    color: black;
    font: 9px calibri;
    text-transform: uppercase;
}
.memberlist_t {
      width: 850px !important;
    height: 50px;
    background: url(https://zupimages.net/up/23/45/j78l.jpg);
    border-radius: 10px;
    margin: auto !important;
    text-align: center;
    color: #68514c;
    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: #68514c;
}

.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: " ";
}
:root {--color-pink: #bc896f;}

.pa_arte {
  width: 800px;
  height: 500px;
  background: #EFEFEF;
  margin: auto;
  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: 10px 10px 5px 10px;
}

.pa_arte > h1 {
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #bc896f;
 font: 30px 'Oswald', sans-serif;
  text-transform: uppercase;
  font-style: oblique;
  margin: 0;
  color: #c2c2c2;
  letter-spacing: -2px;
  position: relative;
  margin-bottom: 5px;
  text-align: left;
}

.pa_arte > h1:after {
  width: 100%;
  content: " ";
  height: 2px;
  background: var(--color-pink);
  position: absolute;
  bottom: -7px;
  left: 0;
}

.pa_arte > h1 > span {
  color: var(--color-pink);
}

.pa_arte > p:first-of-type {
  background: #f4f4f4;
  width: 450px;
  height: 200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #bc896f;
  padding: 25px;
  overflow: auto;
  font: 11px roboto;
  text-align: justify;
  color: #979797;
  margin: 0;
  overflow: auto;
 
}

.pa_arte > p:nth-of-type(2) {
  background: var(--color-pink);
  height: 200px;
  width: 280px;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font: 11px calibri;
  color: white;
  text-align: justify;
  line-height: 11px;
  letter-spacing: 0.2px;
}

.pa_arte > p:nth-of-type(2) span {
  display: block;
  text-align: right;
  position: relative;
  font-size: 14px;
  font-style: oblique;
  margin-right: 5px;
  text-transform: lowercase;
  margin-bottom: 10px;
 
}

.pa_arte> p:nth-of-type(2) span:before {
  width: 120px;
  height: 1px;
  background: white;
  content: " ";
  position: absolute;
  left: 0;
  top: 6px;
  opacity: 0.8;

}

.pa_arte> p:nth-of-type(2) a {
  text-decoration: none;
  color: white;
}

.staff_block {
  width: 315px;
  height: 116px;
  background: #bc896f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
 
}

.img_staff {
  width: 95px;
  height: 95px;
  background: #cfa88d;
  border: 1px solid #caa086;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.img_staff img {
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
}

.img_staff div {
  width: 100%;
  height: 100%;
  background: rgba(251,251,251,0.8);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 10x;
  left: 0;
  font: 11px calibri;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
 
 
}

.img_staff div span {
  display: block;
  margin: auto;
  color: var(--color-pink);
}

.img_staff div span strong {
  font-weight: normal;
  font: 10px calibri;
  color: #858585;
}

.img_staff:hover div {
  opacity: 1;
}

.top_sites_liens {
  width: 114px;
  height: 121px;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
          justify-content: space-between;
 
}

.top_sites_liens a {
  display: block;
  width: 55px;
    height: 55px;
  background: var(--color-pink);
  text-align: start;
  text-decoration: none;
  color: white;
  font: 30px arial;
  line-height: 55px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;

}
.top_sites_liens a:hover {
  border-radius: 50%;
}


.nouveautes_block {
  height: 116px;
  width: 230px;
  background: #f4f4f4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #bc896f;
  padding: 15px;
  overflow: auto;
  font: 11px roboto;
  text-align: justify;
  color: #979797;
  line-height: 10px;
  overflow: auto;
}

.nouveautes_block span {
  color: var(--color-pink);
  float: left;
  margin: 0 5px 0 0;
}

.nouveautes_block span:after {
  content: "—";
  margin-left: 3px;
}

.nouveautes_block hr {
  opacity: 0.2;
}

.liens_importants {
  width: 155px;
  height: 116px;
}

.liens_importants a {
  display: block;
  width: 100%;
  border: 1px solid var(--color-pink);
  height: 18px;
  margin-bottom: 3.8px;
  text-align: center;
  text-decoration: none;
  font:10px roboto;
  text-transform: uppercase;
  line-height: 18px;
  position: relative;
  overflow: hidden;
  color: #bc896f;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.liens_importants a:before {
  content: " ";
  width: 100%;
  height: 18px;
  background: var(--color-pink);
  position: absolute;
  left: -100%;
  top: 0;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  z-index: 1;
 
}

.liens_importants a:hover:before {
  left: 0;
}

.liens_importants a:hover {
  color: white;
}
.liens_importants a span {
  z-index: 3;
  position: static;
}
.partos_pa {
  width: 100%;
  height: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: -5px;
}

/* NAVBAR - ARTEMIS POUR ARTIFICES */

:root
{
 --couleur-bleue: #ffffff;
}

.bodylinewidth
{
 margin-top: 72px;
}

.navbar_arte
{
 width: 100%;
 background: #b5e5f9;
 height: 70px;
 -webkit-box-shadow: 0 2px 1px #e6e6e6;
 box-shadow: 0 2px 1px #e6e6e6;
 position: fixed;
 top: 0;
 left: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px 15px 0 5px;
 z-index: 999;
}

.avatar_navbar
{
 width: 60px;
 height: 60px;
 border: 1px solid white;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px;
 background: #e9e9e9;
 display: inline-block;
 float: left;
}

.avatar_navbar img
{
 width: 48px;
 height: 48px;
 -o-object-fit: cover;
 object-fit: cover;
}

.bloc_pseudo_search
{
 font: 9px montserrat;
 width: 240px;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 2px;
 height: 60px;
 vertical-align: top;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px 5px;
 color: #6f6f6f;
 float: left;
 text-align: left;
 margin-left: 5px;
}

.bloc_pseudo_search li
{
 list-style-type: none;
}

.navbar_arte form
{
 height: 20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 background: white;
 padding: 0;
 margin-top: 8px;
}

.navbar_arte form input[type="submit"]
{
 border: none!important;
 background: var(--couleur-bleue)!important;
 color: white !important;
 padding: 0 10px!important;
 margin:0!important;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
}

.navbar_arte form input[type="text"]
{
 cursor: text;
 border: none!important;
 width: 100%;
 min-width: 150px;
 padding: 0 8px!important;
 margin:0!important;
 background: rgba(255,255,255,0.05)!important;
 color: lightgray;
 font-size:11px;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
 text-transform: uppercase !important;
 font: 10px calibri !important;
 letter-spacing: 2px !important;
}

.navbar_arte form input
{
 outline: none;
 font-size:11px;
}

.link_navbar
{
 float: right;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 25px 15px;
 font: 10px montserrat;
 text-transform: uppercase;
}

.link_navbar a
{
 text-decoration: none;
 margin: 0 5px;
 color: var(--couleur-bleue);
 font-weight: 600;
}

.link_navbar a img
{
 display: none;
}

.link_navbar a:hover
{
 text-decoration: none !important;
 color: var(--couleur-bleue);
}

.link_navbar a::before,.link_navbar a::after
{
 display: inline-block;
 opacity: 0;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
 -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
 transition: opacity 0.2s, -webkit-transform 0.3s;
 -o-transition: transform 0.3s, opacity 0.2s;
 transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s}

.link_navbar a::before
{
 content: '[';
 -webkit-transform: translateX(25px);
 -ms-transform: translateX(25px);
 transform: translateX(25px);
}

.link_navbar a::after
{
 content: ' ]';
 -webkit-transform: translateX(-25px);
 -ms-transform: translateX(-25px);
 transform: translateX(-25px);
}

.link_navbar a:hover::before,.link_navbar a:hover::after
{
 -webkit-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}

.link_navbar a[href^="/search"]
{
 display: none;
}

.link_navbar li
{
 list-style-type: none;
 display: inline-block;
}

/* QEEL PASTEL PAR KOALAVOLANT */

:root{
--maincolor:rgba(227, 227, 227, 1);
--sndcolor:rgba(238, 245, 247, 1);
--color-titre:rgba(204, 227, 234, 1);
--color-titre2:#EACCE7;
--texte:rgba(130, 130, 130, 1);
 
--border1:1px solid var(--maincolor);
 
--font1:'Poppins', sans-serif;
--font2:'Oswald', sans-serif;
 
}
.qeel-total, .qeel-total *{ box-sizing:border-box; }
.qeel-total{ background:white; padding:10px; }
.qeel-total .qeel-titre{
  background:url(https://zupimages.net/up/23/45/j78l.jpg);
font-size:35px; text-transform:uppercase;
letter-spacing:1px; border:var(--border1);
font-family:'Oswald', sans-serif;
 text-align:center; color:#68514c;
}

.qeel-flex{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; }
.qeel-flex .qeel-gauche, .qeel-flex .qeel-lasts{ width:49%; }


.qeel-total .qeel-tit{ font-family:25px barlow condensed;
text-transform:uppercase; color:#68514c; font-size:25px; }

.qeel-total .qeel-co{ padding:10px; display:flex;
 border:var(--border1); height:65px; overflow:auto;  }
.qeel-total .qeel-co a{ margin:0 3px; }

.qeel-total .qeel-membresmess{ margin:5px 0; display:flex; justify-content:space-between; }
.qeel-total .qeel-membresmess span{ display:block; width:49%; text-align:center;
background:#ede8d8; padding:10px; font-family:var(--font1);
font-size:16px; color:var(--texte);}

.qeel-total #newus{ background:#ede8d8;
 position:relative; overflow:hidden; height:55px; }
.qeel-total #newus h2{ color:var(--texte); font-size:16px; margin: 15px 10px; text-align:center; width:70%;
font-family:var(--font1);  }
.qeel-total #newus #ib-last-user{ position:absolute; right:0; top:0;  }
.qeel-total #newus #ib-last-user img{ height:55px; width:120px; object-fit:cover; object-position:0% 27%; }

.qeel-total .qeel-col{ display:block; border:var(--border1); padding:10px; height:176px; overflow:auto;}
.qeel-total .qeel-col a, .qeel-total .qeel-co a{ font-family:var(--font1);  }
.qeel-total .qeel-col a strong, .qeel-total .qeel-co a strong{ font-weight:600;  }

.qeel-total .qeel-groupes{ display:flex; justify-content:center; flex-wrap:wrap; margin-top:5px; width:100%;  }
.qeel-total .qeel-groupes a{ background:var(--color-titre); font-size:25px; padding:2px 5px; font-weight:700; margin:0 2px;
 text-transform:uppercase; font-family:var(--font2);  color:white !important;  display:block; }

/* COULEURS DES GROUPES */

/* Groupe 1 */ .qeel-total .qeel-groupes a:nth-child(1){ background:#a4a148; }
/* Groupe 2 */ .qeel-total .qeel-groupes a:nth-child(2){ background:#72316c; }
/* Groupe 3 */ .qeel-total .qeel-groupes a:nth-child(3){ background:#3a663e; }
/* Groupe 4 */ .qeel-total .qeel-groupes a:nth-child(4){ background:#3c5078; }

/* Pour en ajouter, copier coller le groupe 4 et remplacer 4 par 5, etc. */
.qeel-total .qeel-groupes a:hover{ background:var(--maincolor); }

/* NAVBAR - ARTEMIS POUR EPICODE */

:root
{
 --couleur-bleue: #ffffff;
}

.bodylinewidth
{
 margin-top: 72px;
}

.navbar_arte
{
 width: 100%;
 background:  linear-gradient(to left, var(--couleur-fond), var(--couleur-fond2));
 height: 70px;
 -webkit-box-shadow: 0 2px 1px #e6e6e6;
 box-shadow: 0 2px 1px #e6e6e6;
 position: fixed;
 top: 0;
 left: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px 15px 0 5px;
 z-index: 999;
}

.avatar_navbar
{
 width: 60px;
 height: 60px;
 border: 1px solid white;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px;
 background: #e9e9e9;
 display: inline-block;
 float: left;
}

.avatar_navbar img
{
 width: 48px;
 height: 48px;
 -o-object-fit: cover;
 object-fit: cover;
}

.bloc_pseudo_search
{
 font: 9px montserrat;
 width: 240px;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 2px;
 height: 60px;
 vertical-align: top;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px 5px;
 color: #6f6f6f;
 float: left;
 text-align: left;
 margin-left: 5px;
}

.bloc_pseudo_search li
{
 list-style-type: none;
}

.navbar_arte form
{
 height: 20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 background: white;
 padding: 0;
 margin-top: 8px;
}

.navbar_arte form input[type="submit"]
{
 border: none!important;
 background: var(--couleur-bleue)!important;
 color: white !important;
 padding: 0 10px!important;
 margin:0!important;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
}

.navbar_arte form input[type="text"]
{
 cursor: text;
 border: none!important;
 width: 100%;
 min-width: 150px;
 padding: 0 8px!important;
 margin:0!important;
 background: rgba(255,255,255,0.05)!important;
 color: lightgrey;
 font-size:11px;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
 text-transform: uppercase !important;
 font: 10px calibri !important;
 letter-spacing: 2px !important;
}

.navbar_arte form input
{
 outline: none;
 font-size:11px;
}

.link_navbar
{
 float: right;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 25px 15px;
font: 15px barlow condensed;
 text-transform: uppercase;
 font-style: oblique;
}

.link_navbar a
{
 text-decoration: none;
 margin: 0 5px;
 color: var(--couleur-bleue);
 font-weight: 600;
}

.link_navbar a img
{
 display: none;
}

.link_navbar a:hover
{
 text-decoration: none !important;
 color: var(--couleur-bleue);
}

.link_navbar a::before,.link_navbar a::after
{
 display: inline-block;
 opacity: 0;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
 -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
 transition: opacity 0.2s, -webkit-transform 0.3s;
 -o-transition: transform 0.3s, opacity 0.2s;
 transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s}

.link_navbar a::before
{
 content: '[';
 -webkit-transform: translateX(25px);
 -ms-transform: translateX(25px);
 transform: translateX(25px);
}

.link_navbar a::after
{
 content: ' ]';
 -webkit-transform: translateX(-25px);
 -ms-transform: translateX(-25px);
 transform: translateX(-25px);
}

.link_navbar a:hover::before,.link_navbar a:hover::after
{
 -webkit-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}

.link_navbar a[href^="/search"]
{
 display: none;
}

.link_navbar li
{
 list-style-type: none;
 display: inline-block;
}
/* --------- AFFICHAGE PROFIL (C) SUNHAE --------- */
#wrap-profil {
  background-color: #f1f0f4;
  width: 800px;
  margin: auto;
  display: flex;
  padding: 26px 77px 26px 38px;
  color: #262929;
  font-size: 11px;
}

#avatar-profil {
  text-align: center;
  margin-right: 28px;
}

#avatar-profil > div {
  width: 200px;
  height: 320px;
  overflow: hidden;
  border: 2px solid #F6F5F8;
  margin-bottom: 5px;
}

#avatar-profil > div img {
  width: 200px;
  height: 320px;
}

#avatar-profil a,
#avatar-profil {
  text-transform: uppercase;
  color: #c07c59;
  font-size: 11px;
}

#warp-infos-profil {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

#warp-infos-profil > span {
  padding: 15px 0 25px 20px;
  width: 100%;
}

#warp-infos-profil > span span strong {
  font: 20px 'DM Serif Display', serif;
  text-transform: uppercase;
  font-weight: normal;
}

.title-infos {
  font: 20px 'DM Serif Display', serif;
  margin-top: -10px;
}

.title-infos-sd {
  color: #c07c59;
  font: 35px 'Hamilton', serif;
  margin-top: -25px;
}

.infos-profil {
  height: 252px;
  width: 186px;
  font-size: 10px;
}

.infos-profil:first-of-type {
  padding-left: 22px;
  border-left: 4px solid #c07c59;
}

.infos-profil:first-of-type > div:last-of-type {
  height: 188px;
  overflow: auto;
  line-height: 13px;
}

.infos-profil > div > span,
.infos-profil .label-profil {
  text-transform: uppercase;
  font-weight: bold;
}

.infos-profil > div > div:not(.invisible) {
  display: inline-block;
}

.infos-profil > a > img {
  margin-right: 6px;
}
.infos-profil textarea {
  font-size: 10px;
  text-align: justify;
  height: 50px;
  max-height: 50px;
  max-width: 158px;
  margin-left: 18px !important;
  padding: 0;
  border: none;
}

.infos-profil input[type="submit"] {
  font: 12px 'DM Serif Display', serif;
  background: #F6F5F8;
  width: 95px !important;
  height: 22px;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #c07c59;
  text-transform: uppercase;
  line-height: 22px;
  padding: 0;
}

#warp-infos-profil > span:last-of-type {
  text-align: center;
  padding: 0;
  color: #c07c59;
  position: relative;
  top: 22px;
}

#warp-infos-profil > span:last-of-type * {
  font: 9px 'Roboto', sans-serif;
  font-weight: bold;
  color: #c07c59;
  text-transform: none;
}
/* --------- FIN AFFICHAGE PROFIL --------- */
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

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

#header-topic {
    background: url(https://zupimages.net/up/23/45/j78l.jpg);
    width: 100%;
    color: #DFC8A8;
    font-size: 11px;
    font-style: 'Oswald', sans-serif;
    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: 13px;
    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 {
border-top-left-radius: 20px;
  border-top-right-radius: 20px;
    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: 15px '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 --------- */
/* --------- AFFICHAGES TOPIC LIST (C) SUNHAE --------- */
#wrap-topic.lshg-topiclist {
    width: 778px; /* largeur de la liste des sujets */
    margin:auto;
}

.lshg-topiclist > #header-topic {
    margin-top: 45px;
}

#wrap-topic .forumbg {
    all: unset;
    width: 100%;
}

#wrap-topic .announcement {
    margin-bottom: 17px;
}

/* Bloc conteneur d'un sujet */
.topiclisty {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #f1f0f4;
    padding: 14px 30px 14px 12px;
    margin-bottom: 10px;
    height: 63px;
    box-sizing: initial;
    font-family: 'Roboto', sans-serif;
}

/* Affichage du titre d'un sujet */
.titletopiclist {
    width: 265px;
    padding-left: 5px;
}

.titletopiclist a {
    font: 13px 'DM Serif Display', serif;
    color: #252929;
    line-height: 15px;
}

/* Affichage de la description d'un sujet */
.topic-description {
    font: 10px 'Roboto', sans-serif;
    width: 253px;
    padding-left: 17px;
    display: block;
    text-align: justify;
    max-height: 22px;
    min-height: 12px;
    overflow: auto;
    margin-top: 5px;
    line-height: 11px;
}

/* Affichage de l'auteur du sujet */
.author_topic {
    width: 125px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
}

.author_topic strong, .infos_topiclist strong {
    font-weight: 300;
}

/* Affichage de la pagination (sous l'auteur du topic) */
.author_topic .pagination {
    float: none;
    font-size: 11px;
}

.author_topic .pagination span.page-sep {
    display: inline-block;
}

.author_topic .pagination a {
    background: none !important;
    color: #252929 !important;
    display: inline !important;
    line-height: 9px !important;
    font-size: 11px !important;
    font-style: initial;
    margin: 0 !important;
}

/* affichage des statistiques */
.stat_topiclist {
    font: 40px 'DM Serif display', sans-serif;
    letter-spacing: -2px;
    line-height: 19px;
    color: #c07c59;
    width: 110px;
    text-align: center;
}

.stat_topiclist > div {
    margin-left: 18px;
    color: #252929;
}

/* Affichage dernier message posté */
.infos_topiclist {
    font: 10px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    width: 115px;
    text-align: center;
    line-height: 10px;
}

.infos_topiclist a {
    font-size: 11px;
}

/* Affichage de l'avatar */
.topiclisty > .lastpostvava {
    margin:0;
}

.lastpostvava {
    width: 59px;
    height: 71px;
    overflow: hidden;
    border: solid 2px #f6f5f8;
    box-shadow: 1px 1px 10px #f1f1f1;
}

.lastpostvava img {
    width:100%;
    height:100%;
    object-fit: cover;
    -o-object-fit: cover;
}

/* --------- FIN AFFICHAGES TOPIC LIST --------- */
/*********** 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: #bc896f;
    font-weight: 700;
}

.bloc-droite p {
    height: 58px;
    overflow: auto;
    font-size: 11px;
    margin: 8px 0;
    text-align: justify;
}
.bloc-d2 p {
    height: 158px;
    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);
}
/*Fiche générale*/
: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: "Yeseva One", 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 left, var(--couleur-fond), var(--couleur-fond2));
    position:relative; z-index:20;
}

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

.gengen{ width:100%; 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:#090402;
  width:80%; text-align:center; padding:5px; background-color:#ccaf9b; 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:"Roboto", sans-serif; 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:100%; max-height:100%; 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; }

/* Bottins */

.fondgen.bottin strong{  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
.fondgen.bottin strong:before{ content:':spades:'; background:none !important; padding-right:5px; } 

/*MP*/
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: #BC896F;
    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: 451px;
    height: 18px;
    border-bottom: solid 1px #BC896F;
    padding: 10px 0px 15px 0px;
}
.title_mp a {
  color:black;
  font:10px calibri;
  text-transform:uppercase;
}
.blok_mp {
    width: 240px;
    padding: 10px 30px 0px 30px;
    font: 10px calibri;
    text-transform: uppercase;
    height: 30px;
}
.icon_mp {
position: center;
    width: 100px;
    margin-top: -1px;
}

.title_total_mp {
    width: 100%;
    background-image: url(https://zupimages.net/up/23/45/j78l.jpg);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 10px;
    color: #68514c;
    text-shadow: 1px 1px 2px black;
    text-align: center;
    text-transform: uppercase;
    font: 12px calibri;
    font-weight: bold;
    margin-bottom: 20px;
}
.postprofile-avatar {
    margin-bottom: 6px;
    border: solid 5px #cecece;
    text-align: center;
    width: 200px;
    height: 320px;
    overflow: hidden;
}
.postprofile-avatar img {
    border: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    height: 320px !important;
    width: 200px;
}
.titre_du_mp{
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid #BC896F;
    font: 10px calibri;
    text-transform: uppercase;
}
.titre_du_mp span {
  color:#cdb65c;
}
.signature_div{
    border-top: solid 1px #BC896F;
}
.postbody .content {
    font: 13px calibri !important;
    text-align: justify;
}
.title_revue {
    background-image: url(https://zupimages.net/up/23/45/j78l.jpg);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 20px;
    color: #68514c;
    text-align: center;
    font: 12px calibri;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.fond_revue_mp {
    padding: 10px;
    background: #e8e8e8;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}
.firstblok {
    width: 120px;
    text-align: center;
}
.avatar_revue {
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: solid 5px #cecece;
}
.avatar_revue img {
  width:100%;
}
.blok_revue {
  width: 688px;
}
.revue_title_mp {
    text-align: right;
    font: 10px calibri;
    text-transform: uppercase;
    color: black;
    padding-bottom: 10px;
    border-bottom: solid 1px #b7b7b7;
    margin-bottom: 5px;
}
.revue_title_mp span {
    color: #cdb65c;
}
.style {
  text-decoration-line: underline overline;
  text-decoration-style: double;
  text-decoration-color: #a4a148;
  font: 15px 'Oswald', sans-serif;
}
.style2 {
  text-decoration-line: underline overline;
  text-decoration-style: double;
  text-decoration-color: #72316c;
  font: 15px 'Oswald', sans-serif;
}
.style3 {
  text-decoration-line: underline overline;
  text-decoration-style: double;
  text-decoration-color: #3a663e;
  font: 15px 'Oswald', sans-serif;
}
.style4 {
  text-decoration-line: underline overline;
  text-decoration-style: double;
  text-decoration-color: #3c5078;
  font: 15px 'Oswald', sans-serif;
}
.style5 {
  font-size: 18px;
  text-decoration-line: underline overline;
  text-decoration-style: double;
  text-decoration-color: #9f6d56;
 font-family: 'Dancing Script', cursive;
  text-underline-position: under;
}
.wrap-topic-content{margin-bottom: 10px;}


[Argimpasa]

Template Profile view body

Code:

<div id="wrap-profil">
  <div id="avatar-profil">
    <div>{AVATAR_IMG}</div>
    <!-- BEGIN switch_auth_user -->
    {ADMINISTRATE_USER}{BAN_USER}
    <!-- END switch_auth_user -->
    <script type="text/javascript">
      //<![CDATA[
      $('#avatar-profil').html($('#avatar-profil').html().replace(/-/g,'|'));
      //]]>
    </script>
  </div>
 
  <div id="warp-infos-profil">
    <span>
      {USERNAME}<br />
      {L_LAST_VISITED}: {LAST_VISIT_TIME}
    </span>
 
    <div class="infos-profil">
      <div class="title-infos">Informations</div>
      <div class="title-infos-sd" style="margin: -23px 0 0 55px;">basiques</div>
   
      <div>
        <!-- BEGIN profile_field -->
        <span>{profile_field.LABEL}</span> {profile_field.CONTENT}<br />
        <!-- END profile_field -->
      </div>
      <!-- BEGIN contact_field -->
      {contact_field.CONTENT}
      <!-- END contact_field -->
    </div>
 
    <div class="infos-profil">
      <div class="title-infos-sd">feuille de</div>
      <div class="title-infos" style="margin: -25px 0 0 15px;">personnage</div><br />
   
      <!-- BEGIN switch_rpg -->
      <!-- BEGIN rpg_fields -->
      <span class="label-profil">{switch_rpg.rpg_fields.F_NAME} :</span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br />
      <!-- END rpg_fields -->
   
      <fieldset class="submit-buttons">
        {U_ADMIN_RPG_NEW}
      </fieldset>
      <!-- END switch_rpg -->
    </div>
 
    <span>
      <a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS}</a> |
      <a rel="nofollow" href="/sta/{PUSERNAME}">Voir tous les {L_TOPICS} répondus</a> |
      <a rel="nofollow" href="/spa/{PUSERNAME}">Voir tous les {L_POSTS}</a>
    </span>
  </div>
</div>


<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
      $('[id^=field_id]').each(function(){
        if ( $(this).find('.field_editable').is('span, div') )
        {
            $(this).hover(function()
            {
              if( $(this).find('.field_editable.invisible').is('span, div') )
              {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                    }).click(function(){
                    $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                    $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                    }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                          var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                          if ( (type_special && $(this).is(':checked')) || !type_special )
                          {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                          }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                          "{U_AJAX_PROFILE}",
                          {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                          function(data){
                              $.each(data, function(i, item){
                                $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                          },
                          "json"
                        );
                    });
                    $(this).remove();
                  });
              }
            },function()
            {
              if( $(this).find('.field_editable.invisible').is('span, div') )
              {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
              }
            });
        }
      });
  });
//]]>
</script>

[marcophil]

bonjour

et bonne année
c'est comme forcer à réduire toutes images grande taille
dans un profil . avis perso j'évite et ça complique la conception d'un forum
il y a eu un sujet similaire au votre , je le retrouve pas..
votre image revu via ce site ( sans faire de pub )
qui m'aide souvent. cliquez ici
il est en 150/100

[Argimpasa]

Bonne année à vous aussi !

Je vais marquez dans la description de cette image de profil que la largeur doit être de 150px. Je vous remercie ^^

Toutefois, j'ignore si c'est du à ce système mais maintenant le profil s'affiche ainsi :



PS: Je cherche des solutions de mon côté aussi ^^

[MlleAlys]

Bonjour,
Vous pouvez essayer avec ce code css, qui est plus précis que le votre puisqu'il vise uniquement les images dans le bloc "infos-profil" :

Code:

.infos-profil img {
  max-width: 100%;
}

(inutile de préciser pour la hauteur qui est en auto par défaut)

[marcophil]

l'image dans le profile est corrigé
le problème avec repère, il y a un décalage  

[MlleAlys]

Le code donné pour le gif évitera de rencontrer le même problème si un membre met une image qui n'est pas à la taille demandée : elle sera automatiquement réduite à la largeur disponible.


Concernant le second problème, les deux blocs sont bien à la même hauteur, c'est le positionnement des textes à l'aide de marge négatives qui donne cet effet.
Déjà pour corriger le titre coupé :
- localisez le code :

Code:

.infos-profil:first-of-type {
  padding-left: 22px;
  overflow: auto;
  overflow-x: hidden;
  border-left: 4px solid #c07c59;
}

- vous pouvez le supprimer.
- localisez le code :

Code:

.infos-profil {
  height: 252px;
  width: 186px;
  font-size: 10px;
}

- supprimez la ligne height: 252px;


A partir de là, à voir, est-ce que vous voulez que ce soit les textes de couleur marron qui soient alignés ?

[chattigre]

bonjour

et bonne année
c'est comme forcer à réduire toutes images grande taille
dans un profil . avis perso j'évite et ça complique la conception d'un forum
il y a eu un sujet similaire au votre , je le retrouve pas..
votre image revu via ce site ( sans faire de pub )
qui m'aide souvent. cliquez ici
il est en 150/100

l'image dans le profile est corrigé
le problème avec repère, il y a un décalage  

Bonjour @marcophil,

Comme indiqué dans les règles de la section : Vous n'interviendrez dans un sujet déjà aidé que si vous avez une précision importante à y mettre pour aider votre co-aideur et le demandeur. Vous vous efforcerez de répondre à une question le plus complètement possible. Un sujet d'entraide n'est pas un salon de chat. J'ajouterai qu'il appartient au seul demandeur d'intervenir pour préciser sa demande ou faire un retour. Merci de ne pas vous substituer à l'auteur du sujet, à moins que vous n'ayez une solution alternative à proposer, comme le stipulent les règles de la section.

Cordialement

[chattigre]

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[chattigre]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.