J'ai cassé le hover de mon profil

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis le transfert css > template
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, c'est encore moiiii TT
(promis j'arrive au bout du codage de mon forum-test /sort)

Comme dit le titre du sujet, j'ai cassé le hover de l'affichage du profil sur les messages, sans savoir comment exactement... J'étais tranquillement en train de transférer mon CSS dans le template correspondant pour gagner de la place (parce qu'on n'arrive pas à externaliser le CSS et on atteint tout doucement les limites), et quand j'ai validé le hover ne fonctionnait plus...

J'ai vérifié plusieurs fois, j'ai trouvé l'une ou l'autre balise style que j'avais mal notées parce que j'ai les doigts qui s'emmêlent parfois, mais là je vois plus d'erreur, toutes les balises qui pouvaient être transférées le sont, j'en ai pas supprimé par inadvertance (je pense) et ça ne veut pas réapparaître...

Je vous mets les codes, d'abord le CSS restant :

Code:

/**************** PROFIL ET MESSAGES ********************/
.nouveau_sujet_v a {  background: var(--couleur-degrade2);  color: var(--fond-blocs)!important;  text-decoration: none;  padding: 2px 10px;  display: inline-block;  margin: 0 0 0 4px;  box-shadow: none !important;  border-radius: 6px;}
.pagination_arte a {  color: var(--couleur-texte);  text-decoration: none;  border-radius: 6px;}
.block_avatar_hover > img {  width: 200px;  height: 320px;  object-fit: cover;  border-radius: 6px;}
.block_avatar_hover:hover .hover_membre{visibility:visible;opacity:1;}
.hover_membre .block_joueur .champ_profil:nth-of-type(1) span, .hover_membre .champ_profil:nth-of-type(6) span, .hover_membre .champ_profil:nth-of-type(7) span, .champ_profil:nth-of-type(12) span{
  display: none;}
.hover_membre .champ_profil:nth-of-type(1) img {  width: 80px;  height: 80px;  display: block;  margin: auto;  object-fit: cover;  border: 4px solid var(--fond-blocs);  outline: 0px solid rgba(0,0,0,0.2);  outline-offset: -1px;  border-radius: 6px;  margin-top:30px;}
.hover_membre .champ_profil:nth-of-type(1) span {display: none}
.hover_membre > h2:after {  width: 100px;  height: 5px;  background: var(--couleur-degrade2);  content: " ";  position: absolute;  bottom: -10px;  left: 0;}
.champ_profil span {  text-transform: uppercase;   color:var(--couleur-tertiaire);  font-weight:bold;}
.hover_membre .champ_profil:nth-of-type(6) img{  width: 40px;  height: 40px;  object-fit: cover;  margin: 0 3px;  border: 3px solid var(--fond-blocs);  outline: 1px solid rgba(0,0,0,0.2);  border-radius: 6px;  }
.hover_membre .champ_profil:nth-of-type(6) {  margin-top: 10px;  text-align: center;}
.hover_membre .champ_profil:nth-of-type(7) {  font: 10px var(--police-texte);  font-style: oblique;  text-align: center;  margin-top: 15px;  height: 45px;  overflow: auto;}
.block_contact img {  width: 15px;  height: 15px;  object-fit: cover;  border-radius: 6px;}
.block_contact a {  margin: 0 4px;}
.afficher-masquer img{  object-fit:cover;}
.nom_sujet_boutons a {  color:var(--fond-blocs);  font-size:12px;}
.btn-delete a:hover {  background:none;}
.btn-quote a:hover {  background:none;}
.btn-edit a:hover {  background:none;}
.forum_actions a:hover {  color: var(--fond-blocs) !important;}
.fa_like_div{  margin-top:-14px;  margin-right:-200px;}
.fa_like {  color: var(--couleur-texte);  background:var(--fond-blocs);}
.fa_dislike { color: var(--couleur-texte); background:var(--fond-blocs);}
.switch_likes_active {  background:var(--couleur-texte);}
 .rep-button, .rep-button:active, .rep-button:focus {    border-radius: 4px;     font-family: Trebuchet MS;     font-size: 11.4px;     font-weight: 700;     text-transform: initial; }
.topic-actions.bottom .topic-actions-buttons {   margin: 0 auto; display: flex;   width: 950px;   justify-content: flex-end;  gap: 10px;    line-height: 25px;}
.signature_div > div  {   margin-top: -15px;}
.button1:active, .button1:hover, .button1:link, .button1:visited, .button2:active, .button2:hover, .button2:link, .button2:visited, .button:active, .button:hover, .button:link, .button:visited, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:link, input[type="submit"]:visited {  box-shadow: none;}
#preview .postbody {width:100%;}

Le template avec des bouts de CSS :

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
 //<![CDATA[
 var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
 if( $(this).is(":visible") ) {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 } else {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    } catch(e) { }

 return false;
};

//]]>
</script>

<div class="fil_ariane_nouveau_sujet" style="width: 950px;    height: 30px;    display: flex;    justify-content: space-between;    margin: auto;    font: 13px var(--police-texte);    color: var(--fond-blocs);    line-height: 25px;    border-radius: 6px;">
  <div class="fil_ariane_v" style="padding-top:9px;"><a class="nav" style="font-weight: bold;  color: var(--couleur-tertiaire);  text-decoration: none;" href="{U_INDEX}"><span>{L_INDEX}</span></a> {NAV_CAT_DESC}</div>
  
  <div class="nouveau_sujet_v">
    <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
 <!-- END switch_user_authreply -->
  </div>
  
</div>

<div class="pagination_arte" style="width: 950px;  margin: auto;  text-align: right;  font: 14px var(--police-texte);  color: var(--couleur-tertiaire);  border-radius: 6px;"> <!-- BEGIN topicpagination -->
 {PAGINATION}
 <!-- END topicpagination --></div>
  
  <div class="titre_sujet_a" style="width: 950px;  height: 40px;  background: var(--couleur-degrade2);  margin: 5px auto;  font: 14px var(--police-texte);  text-transform: uppercase;  box-sizing: border-box;  padding: 11px 30px;  border-radius: 6px;"><a href="{TOPIC_URL}" style="text-decoration: none;  color: #fff;  font-weight: bold;">{TOPIC_TITLE}</a></div>

{POLL_DISPLAY}

<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div class="message_profil" style="width: 950px;  display: flex;  justify-content: space-between;  margin: 0 auto 10px;">
  <div class="block_gauche_mess" style="width: 200px;  font: 10px var(--police-texte);">
  <div class="block_avatar_hover" style="width: 210px;    height: 330px;  position: relative;  border: 5px solid var(--fond-blocs);  outline: 0px solid rgba(0,0,0,0.2);  outline-offset: -1px;  border-radius: 6px;">
   {postrow.displayed.POSTER_AVATAR}<div class="hover_membre" style="width: 200px;  height: 320px;  background: rgba(251,251,251,0.9);  position: absolute;  top: 0;  left: 0;  box-sizing: border-box;  padding: 20px;  visibility: hidden;    opacity: 0;  transition: all 1s;  overflow:auto;">
    <h2 style="font: 13px var(--police-texte);  font-weight: 900;  text-transform: uppercase;  color: var(--couleur-tertiaire;);  position: relative;  position: absolute; ">Profil</h2>
    <!-- BEGIN profile_field -->
                          <div class="champ_profil" style="font-size:12px;">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
    <!-- END profile_field --></div>
    
    <div class="block_pseudo" style="width: 212px;  height: 38px;  background: var(--fond-blocs);  margin-left: -6px;  border: 0px solid rgba(0,0,0,0.2);  margin-top: 10px;  font: 12px var(--police-texte);  font-weight: 900;  padding: 5px 10px;  box-sizing: border-box;  text-transform: uppercase;  color: var(--couleur-tertiaire);  border-radius: 6px;">
      {postrow.displayed.POSTER_NAME} <span style="display: block;  font-weight: 600;  font-size: 12px;">{postrow.displayed.POSTER_RANK_NEW}</span>
    </div>
    
     <div class="block_contact" style="width: 212px;  height: 27px;  background: var(--fond-blocs);  margin-left: -6px;  border: 0px solid rgba(0,0,0,0.2);  margin-top: 5px;  font: 10px var(--police-texte);  font-weight: 900;  padding: 5px 10px;  box-sizing: border-box;  text-transform: uppercase;  color: var(--couleur-tertiaire);  text-align: center;  border-radius: 6px;">
    {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} <!-- BEGIN contact_field -->
 {postrow.displayed.contact_field.CONTENT}
 <!-- END contact_field -->
    </div>
    
    
<div class="elt-declencheur" style="width: 212px;  height: 27px;  background: var(--couleur-tertiaire);  margin-left: -6px;  border: 0px solid rgba(0,0,0,0.2);  margin-top: 5px;  font: 10px var(--fond-blocs);  font-weight: 900;  padding: 7px 10px;  box-sizing: border-box;  text-transform: uppercase;  color: var(--fond-blocs);  text-align: center;  border-radius: 6px;">
  Afficher le profil
</div>
    <div class="afficher-masquer infos-supp" style="display: none; max-height:125px;background:var(--fond-blocs);padding:10px;margin-top:5px;border-radius:6px;border:1px solid var(--couleur-tertiaire);object-fit:cover;"></div>
    </div>    </div>
    
    <div class="block_message_a" style="width: 730px;  border: 0px solid rgba(0,0,0,0.2);  background: var(--fond-blocs);  border-radius: 6px;">
      <div class="nom_sujet_boutons" style="width: 100%;  height: 30px;  background: var(--couleur-tertiaire);  display: flex;  justify-content: space-between;  font: 12px var(--police-texte);  color: var(--fond-blocs);  box-sizing: border-box;  padding: 6px;  border-radius: 6px;">
        <div class="boutons_sujet">
         <ul class="forum_actions" style="margin: 0;  padding: 0;  display: flex;  width: auto;  list-style-type: none;  border-radius: 6px;">
 
 <li class="btn-quote" style="padding: 0;  margin: 0 4px;  ">
 <a href="{postrow.displayed.QUOTE_URL}">citer</a>
 </li>
 <li class="btn-edit" style="padding: 0;  margin: 0 4px;  ">
 <a href="{postrow.displayed.EDIT_URL}">éditer</a>
 </li>
 <li class="btn-delete" style="padding: 0;  margin: 0 4px;  ">
 <a href="{postrow.displayed.DELETE_URL}">supprimer</a>
 </li>
           <li style="padding: 0;  margin: 0 4px;  ">| {postrow.displayed.POST_DATE_NEW}</li>
 </ul>
        </div>
        
        <div class="nom_sjt">
          <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}" style="background:var(--fond-blocs);color:var(--couleur-texte)">
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}" style="background:var(--fond-blocs);color:var(--couleur-texte)">
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->
        </div>
      </div>
      
    <div class="message_contenu" style="min-height: 373px;  box-sizing: border-box;  padding: 20px;  font: 14px var(--police-texte);  text-align: justify;  color: var(--couleur-texte);">
    {postrow.displayed.MESSAGE}
 <!-- BEGIN switch_signature -->
 <div class="signature_div" style="border-top: 0px solid rgba(0,0,0,0.2);   width: 80%;   margin: 20px auto 0;   border-radius: 6px;" id="sig{postrow.displayed.U_POST_ID}">
 {postrow.displayed.SIGNATURE_NEW}
 </div>
 <!-- END switch_signature -->
      </div>
    </div>
  </div>
 <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>
<div class="topic-actions bottom">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->

 <div class="topic-actions-buttons">
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 {S_WATCH_TOPIC}
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->

 <div class="nouveau_sujet_v">
    <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
 <!-- END switch_user_authreply -->
  </div>
 </div>
</div>

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <div class="h3">{L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
 <a name="quickreply"></a>
 {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
 <fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}:</label>
 {S_SELECT_MOD}
 <input class="button2" style="background: var(--couleur-degrade2);color: var(--fond-blocs)!important;text-decoration: none;padding: 2px 10px;display: inline-block;margin-bottom:15px;box-shadow: none !important;border-radius: 6px;font-size:14px;padding:10px;" type="submit" value="{L_GO}" />
 </fieldset>
</form>

<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
 $('pre, code').each(function(i, block) {
 hljs.highlightBlock(block);
 });

 $('.post').each(function() {
 if (!$(this).find('.postprofile-avatar').html().length) {
 $(this).find('.postprofile-rank').css('border-bottom', 'none');
 $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
 }
 });
});
</script>

Et pour comparaison, le CSS de base (faites pas gaffe aux couleurs, c'est une autre version donc ça ne correspond pas, mais le code est globalement le même) :

Code:

/**************** PROFIL ET MESSAGES ********************/

.fil_ariane_nouveau_sujet {
    width: 950px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    font: 13px var(--police-texte);
    color: var(--fond-blocs);
    line-height: 25px;
    border-radius: 6px;
}

.fil_ariane_v {padding-top:9px;}

.fil_ariane_v a {
  font-weight: bold;
  color: var(--couleur-tertiaire);
  text-decoration: none;
}

.nouveau_sujet_v a {
  background: var(--couleur-degrade2);
  color: var(--fond-blocs)!important;
  text-decoration: none;
  padding: 2px 10px;
  display: inline-block;
  margin: 0 0 0 4px;
  box-shadow: none !important;
  border-radius: 6px;
}

.pagination_arte {
  width: 950px;
  margin: auto;
  text-align: right;
  font: 14px var(--police-texte);
  color: var(--couleur-tertiaire);
  border-radius: 6px;
}


.pagination_arte a {
  color: var(--couleur-texte);
  text-decoration: none;
  border-radius: 6px;
}

.titre_sujet_a {
  width: 950px;
  height: 40px;
  background: var(--couleur-degrade2);
  margin: 5px auto;
  font: 14px var(--police-texte);
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 11px 30px;
  border-radius: 6px;
  
}

.titre_sujet_a a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.message_profil {
  width: 950px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 10px;
  min-height : 500px;
}

.block_gauche_mess {
  width: 200px;
  font: 10px var(--police-texte);
}

.block_avatar_hover > img {
  width: 200px;
  height: 320px;
  object-fit: cover;
  border-radius: 6px;
}


.block_avatar_hover {
  width: 210px;
    height: 330px;
  position: relative;
  border: 5px solid var(--fond-blocs);
  outline: 0px solid rgba(0,0,0,0.2);
  outline-offset: -1px;
  border-radius: 6px;

}

.hover_membre {
  width: 200px;
  height: 320px;
  background: rgba(251,251,251,0.9);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 20px;
  visibility: hidden;
    opacity: 0;
  transition: all 1s;
  overflow:auto;
}

.block_avatar_hover:hover .hover_membre{visibility:visible;opacity:1;}

.hover_membre .block_joueur .champ_profil:nth-of-type(1) span, .hover_membre .champ_profil:nth-of-type(6) span, .hover_membre .champ_profil:nth-of-type(7) span, .champ_profil:nth-of-type(12) span{
  display: none;
}

.champ_profil {
  font-size:12px;
}

.hover_membre .champ_profil:nth-of-type(1) img {
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
  object-fit: cover;
  border: 4px solid var(--fond-blocs);
  outline: 0px solid rgba(0,0,0,0.2);
  outline-offset: -1px;
  border-radius: 6px;
  margin-top:30px;
}

.hover_membre > h2 {
  font: 13px var(--police-texte);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--couleur-tertiaire;);
  position: relative;
  position: absolute;
}

.hover_membre > h2:after {
  width: 100px;
  height: 5px;
  background: var(--couleur-degrade2);
  content: " ";
  position: absolute;
  bottom: -10px;
  left: 0;
}

.champ_profil span {
  text-transform: uppercase;
  color:var(--couleur-tertiaire);
  font-weight:bold;
}

.hover_membre .champ_profil:nth-of-type(6) img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin: 0 3px;
  border: 3px solid var(--fond-blocs);
  outline: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  }

.hover_membre .champ_profil:nth-of-type(6) {
  margin-top: 10px;
  text-align: center;
}

.hover_membre .champ_profil:nth-of-type(7) {
  font: 10px var(--police-texte);
  font-style: oblique;
  text-align: center;
  margin-top: 15px;
  height: 45px;
  overflow: auto;
}

.block_pseudo {
  width: 212px;
  height: 38px;
  background: var(--fond-blocs);
  margin-left: -6px;
  border: 0px solid rgba(0,0,0,0.2);
  margin-top: 10px;
  font: 12px var(--police-texte);
  font-weight: 900;
  padding: 5px 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--couleur-tertiaire);
  border-radius: 6px;
  
}

.block_pseudo span {
  display: block;
  font-weight: 600;
  font-size: 12px;
}

.block_contact {
   width: 212px;
  height: 27px;
  background: var(--fond-blocs);
  margin-left: -6px;
  border: 0px solid rgba(0,0,0,0.2);
  margin-top: 5px;
  font: 10px var(--police-texte);
  font-weight: 900;
  padding: 5px 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--couleur-tertiaire);
  text-align: center;
  border-radius: 6px;
}

.block_contact img {
  width: 15px;
  height: 15px;
  object-fit: cover;
  border-radius: 6px;
}

.block_contact a {
  margin: 0 4px;
}

.elt-declencheur {
   width: 212px;
  height: 27px;
  background: var(--couleur-tertiaire);
  margin-left: -6px;
  border: 0px solid rgba(0,0,0,0.2);
  margin-top: 5px;
  font: 10px var(--fond-blocs);
  font-weight: 900;
  padding: 7px 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--fond-blocs);
  text-align: center;
  border-radius: 6px;
}

.afficher-masquer img{
  object-fit:cover;
}

.block_message_a {
  width: 730px;
  border: 0px solid rgba(0,0,0,0.2);
  background: var(--fond-blocs);
  border-radius: 6px;
}

.nom_sujet_boutons {
  width: 100%;
  height: 30px;
  background: var(--couleur-tertiaire);
  display: flex;
  justify-content: space-between;
  font: 12px var(--police-texte);
  color: var(--fond-blocs);
  box-sizing: border-box;
  padding: 6px;
  border-radius: 6px;
}

.nom_sujet_boutons a {
  color:var(--fond-blocs);
  font-size:12px;
}

.btn-delete a:hover {
  background:none;
}

.btn-quote a:hover {
  background:none;
}

.btn-edit a:hover {
  background:none;
}

.forum_actions {
  margin: 0;
  padding: 0;
  display: flex;
  width: auto;
  list-style-type: none;
  border-radius: 6px;
}

.forum_actions li {
  padding: 0;
  margin: 0 4px;
  }
.forum_actions a:hover {
  color: var(--fond-blocs) !important;}
.fa_like_div{
  margin-top:-14px;
  margin-right:-200px;
}
.fa_like {
  color: var(--couleur-texte);
  background:var(--fond-blocs);
}
 .fa_dislike {
  color: var(--couleur-texte);
  background:var(--fond-blocs);
}
.switch_likes_active {
  background:var(--couleur-texte);
}
 .rep-button, .rep-button:active, .rep-button:focus {
    border-radius: 4px;
    font-family: Trebuchet MS;
    font-size: 11.4px;
    font-weight: 700;
    text-transform: initial;
}
.message_contenu {
  min-height: 373px;
  box-sizing: border-box;
  padding: 20px;
  font: 14px var(--police-texte);
  text-align: justify;
  color: var(--couleur-texte);
}
.topic-actions.bottom .topic-actions-buttons {
    margin: 0 auto;
    display: flex;
    width: 950px;
    justify-content: flex-end;
  gap: 10px;
    line-height: 25px;
}
.signature_div {
    border-top: 0px solid rgba(0,0,0,0.2);
    width: 80%;
    margin: 20px auto 0;
    border-radius: 6px;
}
.signature_div > div  {
    margin-top: -15px;
}
.button1:active, .button1:hover, .button1:link, .button1:visited, .button2:active, .button2:hover, .button2:link, .button2:visited, .button:active, .button:hover, .button:link, .button:visited, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:link, input[type="submit"]:visited {
  box-shadow: none;}
#preview .postbody {width:100%;}

Merci d'avance ;;

[MlleAlys]

Bonjour,
Vous semblez avoir mis le css à l'intérieur des balises concernées ? Pourquoi pas entre balises <style>, peut être que ce serait plus simple ?

[Yunie16]

Alors... excellente question, j'y ai jamais pensé xD
J'avais commencé les modifs dans les templates parce que j'y trouvais des balises qui n'étaient pas dans le css donc j'y touchais direct là et j'ai continué comme ça, avec des attributs "style" dans les div et les span etc... sans penser que ça marcherait entre des <style>

Du coup, je viens de tout retirer et remettre comme vous dites en partant du css de l'autre version et non seulement ça marche, mais en plus le hover est revenu !

Donc merci beaucoup, ça va me faire gagner encore plus de place dans mon css ça !

[Yunie16]

J'ai oublié de mettre en résolu /sort