/*LISTE DES SUJETS + INTÉRIEUR D'UN SUJET — CONTENU MESSAGES*/ 

.forum {
    height: fit-content;
  margin-bottom: 20px;
}

.cate_title { display:none; }

.category { display: grid;
    grid-template-columns: auto;
}

.fo_deco {
    display: flex;
    flex-direction: row;
    padding: 25px;
}

.fond_fo_deco img {
    width: 200px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius);
}

.fond_fo_deco {
    margin-right: 15px;
}

 /*responsive affichage différents sujets/forums*/
@media screen and (max-width: 1300px) { 
.grille_topic {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    }
}

  /*@media screen and (max-width: 1180px) { 
.forum {
    height: 100% !important;
    }
}*/

  @media screen and (max-width: 750px) { 
.bloglist_infos {
    display: flex !important;
    flex-direction: column;
}
.bloglist_details {
    width: 100% !important;
}
  }

  @media screen and (max-width: 430px) { 
.topic-stats {
    flex-direction: column;
}
  .topicslist-img { right: 25px !important; }
  
  .fo_deco {
    flex-direction: column !important;
}
  .fond_fo_deco img {
    width: 100% !important;
}
  }


/****** ------------------------------------------------------------------------------
 ****** BLOGS ------------------------------------------------------------------------ ******/

/*** ------------------------------- ***/
/*** LISTE DES BLOGS --------------- ***/

.bloglist {
    background: var(--neutral);
    border-radius: 5px;
    display: block;
    grid-template-columns: 65px auto;
    margin-bottom: 10px;
}


.bloglist_date {
    grid-row: 1;
    padding: 10px;
    border-right: 1px solid var(--neutralDark);
    line-height: 22px;
    text-align: center;
    background: var(--co-gradient);
    border-radius: var(--xs-radius);
align-content: center;
} 

.blog_daymonth {
    font-size: 16px;
    font-weight: 700;
    color: white;
    font-family: var(--font-2);
}

.blog_year {
    font-size: 17px;
    color: white;
    font-family: var(--special-font);
}

.bloglist_infos {
    display: grid;
    grid-template-columns: 1fr repeat(2, auto);
    gap: 0 var(--spacing);
    padding: 10px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  align-items: center;
}

.bloglist_infos .topictitle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--black);
    font-family: var(--font-2);
}
.ic_blog {
display: none;
}
.bloglist_details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;
    width: 150px;
    border: 1px solid var(--black);
    background: linear-gradient(135deg, var(--neutralDark) 33%, var(--co-1), var(--co-2));
    background-size: 350% 120%;
    transition: .7s;
    background-position: 1% 0%;
    padding: 5px;
    border-radius: var(--radius);
    text-align: center;
    background-color: var(--co-1);
    color: var(--black);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
} 

.bloglist_details:hover {
    background-position: 99% 0;
}

.bloglist_resum {
  padding: 0 10px 10px; }

.bloglist:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.blog-type strong:not(:empty) {
    background: var(--co-2grad);
    color: white;
    padding: 3px;
    font-size: var(--little-size);
    letter-spacing: 1px;
    border-radius: var(--radius);
    text-transform: uppercase;
    height: 30px;
    display: block;
    align-content: center;
    margin-top: 8px;
}

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

/*** ------------------------------- ***/
/*** ENTETE ET FOOTER DE LA LISTE DES SUJETS ***/

/* Chaîne de navigation et pagination
 * (réutilisé dans l'affichage d'un sujet (viewtopic_body)) */
.navigation_links {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

/* chaîne de lien de navigation : catégorie > forum > sous-fo */
.navigation_chain {
  font-size: 0;
  /*retire les :: de séparation */
}

.navigation_chain br {
    display: none;
}

.navigation_chain a {
  font-size: initial;
  /*rétablit la taille des liens*/
  margin-right: 8px;
}

.navigation_chain a:before {
  content: "›";
  /*symbole ou texte modifiable*/
  font-size: var(--nomal-size);
  margin-right: 3px;
}

/* BOUTONS DE MESSAGE : Répondre, Nouveau,... ---* 
 * (réutilisé dans l'affichage d'un sujet (viewtopic_body) et les MP (privmsgs_body) */
.buttons {
    background: var(--co-1);
    padding: 1px 8px;
    height: 24px;
    margin-left: auto;
    border-radius: var(--xs-radius);
    opacity: 1;
    align-content: center;
    color: var(--black);
}

.buttons:hover {
  opacity: 0.7;
  color: var(--white);
}

.actions-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 24px;
    background: var(--co-gradient);
    border-radius: var(--xs-radius);
    color: var(--black);
}

.actions-buttons.stop-watching {
    background: var(--black);
}

.start-watching::before {
    content: '\e97c';
    font-family: var(--font-ic);
}

.stop-watching::before {
    content: '\e97c';
    color: var(--co-1);
    font-family: var(--font-ic);
}

/* BOUTONS : modérer les sujets de ce forum */
#moderation_forum_tools,
#moderation_forum_tools strong {
  font-size: 0px;
}

#moderation_forum_tools a {
  background: var(--neutralDark);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: var(--normal-size);
}


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

/* genius panda */

/* Bloc de description du forum */
.forum-page_desc {
  display: flex;
      align-items: center;
background: var(--neutralDark);
    border-radius: var(--radius);
    text-align: justify;
    border-right: 10px solid var(--co-1);
    padding: var(--spacing);
}

.forum-page_desc .fo_links {
    display: none;
}

.forum-page_desc .desc {
    height: 125px;
}

/*titre du sujet*/
.topictitle {
  font-size: var(--medium-size);
  /* permet de raccourir les titres trop long ainsi : "Titre du suj..." */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 430px;
  white-space: nowrap;
  vertical-align: bottom;
}

/* icône de type de message ( exemple : -18 ans, sujet résolu, ... ) */
.topic_msgicon {
  margin-right: 5px;
}

.topic_msgicon:empty {
  display: none;
}

.topic_msgicon:has(img[src*="cw"])::before {
    content: "CW/TW";
}

.topic_msgicon:has(img)::before {
    content: "";
    display: inline-block;
    width: 55px;
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    color: white;
    background: var(--co-2);
    border-radius: var(--xs-radius);
    font-size: var(--small-size) !important;
    letter-spacing: 1px; }

.topic-labels img {
    display: none;
}

.topiclist-infos img {
  margin-right: 3px;
}

.topicslist-stats {
  text-align: right;
}

.topicslist-description {
    width: 100%;
    font-size: var(--little-size);
    font-family: var(--font-2);
    font-style: italic;
    color: var(--black);
}

/* ligne qui séparent les annonces et les notes des autres sujets (à activer dans "message > configuration") */
.topic_separator {
  height: 5px;
  background: var(--neutral);
  margin-bottom: 10px;
  border-radius: 5px;
}

/* Bouton "trier les sujets" */
#sort-topics {
  position: relative;
  display: inline;
  background: var(--neutralDark);
  margin: 10px 0;
}

.sort-form {
  width: max-content;
  background: var(--neutral);
  border: 1px solid var(--neutralDarker);
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  top: 110%;
  right: 0;
  display: none;
}

.expanded~.sort-form {
  display: block;
}

/* us */

.page-title p:nth-child(2) {display:none;}
.navigation_links_up p {display: none;}

.page-title {
    font-size: 35px;
    margin-bottom: 10px;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    text-align: center;
}

.navigation_links_up {
    text-align: center;
    background: var(--co-1grad);
    color: #fff;
    padding: 6px 18px;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}


.grille_topic {
    display: grid;
    grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: var(--spacing);
}

.topic-card {
  display: flex;
  background: var(--neutralDarker);
  border-radius: var(--radius);
  position: relative;
}

.topic-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Bandeau */
.topic-bar {
  width: 22px;
  background: var(--co-1grad);
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Contenu principal */
.topic-content {
  padding: 20px 25px;
  flex: 1;
  align-content: center;
}

/* Labels */
.topic-labels {
    position: absolute;
    top: -7px;
    right: 28px;
    left: auto;
}

.topic-type strong:not(:empty) {
    background: var(--co-2grad);
    color: white;
    padding: 3px;
    font-size: var(--little-size);
    letter-spacing: 1px;
    border-radius: var(--radius);
    text-transform: uppercase;
}

/* Titre */
.topic-title {
  color: var(--black);
  text-decoration: none;
}

.topic-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Auteur */

.topic_author {
    display: inline-block;
    font-family: var(--font-2);
    font-style: italic;
    padding: 8px;
    background: var(--co-1);
    border-radius: var(--radius);
}

.topic-author {
font-size: var(--little-size);
    text-transform: lowercase;
    color: white;
}

/* Pagination + desc */
.topic_pagination-desc { color: var(--black);
  font-size: var(--little-size);
    align-content: center;
}

/* Stats */
.topic-stats {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.stat-box {
  border: 1px solid var(--black);
  background: linear-gradient(135deg, var(--neutralDark) 33%, var(--co-1), var(--co-2));
  background-size: 350% 120%;
  transition: .7s;
  background-position: 1% 0%;
  padding: 5px;
  border-radius: var(--radius);
  font-size: 12px;
  text-align: center;
  background-color: var(--co-1);
  color: var(--black);
    text-transform: uppercase;
    font-size: 10px;
      font-weight: bold;
}

.stat-box:hover { background-position: 99% 0; }

/* Image du sujet */
.topicslist-img {
    position: absolute;
    top: 20px;
    right: 150px;
    font-size: 30px;
}

/* Avatar */

.topicslist-avatar-lastpost {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.topicslist-avatar-lastpost img {
  border-radius: 50%;
}

.topicslist-avatar-lastpost img {
object-fit: cover;
    object-position: center;
    width: 90px;
    height: 90px;
    border: 5px solid var(--co-1);
}

/* Dernier message */
.topicslist-lastpost {
    font-size: var(--little-size);
    color: var(--black);
}

/*PAGE RÉPONSE*/
@media screen and (max-width: 670px) {
  .message-edition {
    flex-direction: column !important;
}
  #smileyContainer iframe {
    width: 100% !important;
    height: 300px !important;
    overflow: auto;
}
  
  .panel dl {
    display: flex !important;
    flex-direction: column;
}
}

/* BOUTON COMPTE RP */
.fa_reputation { }
.fa_reputation>a {border: none !important}
.fa_reputation:has(.fa_positive:not(.fa_positive[title="+0 rp"])) .fa_vote.fa_plus,
.fa_reputation:has(.fa_positive:not(.fa_positive[title="+0 rp"])) .fa_voted { display: none; }
.rp_button,
.fa_positive:not(.fa_positive[title="+0 rp"])::before { display: block; width: 70px; height: 18px; text-align: center; padding: 0 5px; border-radius: var(--radius); font-size: var(--little-size); color: var(--textColor)}
.rp_button {background: var(--neutralDark); letter-spacing: 1px}
.fa_positive[title="+1 rp"]::before { content: "rp compté"; display: block; background: var(--co-2grad); color: white !important}
.fa_positive:not(.fa_positive[title="+0 rp"], .fa_positive[title="+1 rp"])::before { content: "+ d'une fois !"; display: block; background: var(--co-gradient); color: white}
.fa_count { font-size: 0; }

/****** ------------------------------------------------------------------------------
 ****** AFFICHAGE D'UN SUJET --------------------------------------------------------- ******/


/* PARTICIPANTS DU SUJET ---*/

/* Conteneur de la liste des participants au sujet */
.poster-list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
	position: relative;
	z-index: 10;
}

.poster-count {
    margin-left: 8px;
    font-family: var(--font-2);
    font-style: italic;
}



/* Avatar du participant*/
.poster {
  background: var(--poster-avatar);
  height: 30px;
  width: 30px;
  border-radius: 100%;
  margin-left: -8px;
  border: 2px solid var(--neutralDark);
  background-size: cover;
  background-position: center;
}

/* Lien de renvoi vers son profil */
.poster a {
  display: block;
  height: 100%;
}

.poster-more-list {
  display: none;
}

.poster-more {
  display: grid;
  place-items: center;
  position: relative;
}

.poster-more:hover .poster-more-list {
  display: block;
  position: absolute;
  top: 29px;
  width: 150px;
  background: var(--neutralDarker);
  padding: 10px;
  border-radius: 5px;
}

/*** ------------------------------- ***/
/*** SUJET ------------------------- ***/

.post_row {
display: flex;
    flex-direction: column;
    background: var(--neutral);
    margin-bottom: var(--spacing);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

div.post_row:nth-of-type(2) {
  border-radius: 5px 5px 0 0;
}

div.post_row:last-of-type {
  border-radius: 0 0 5px 5px;
  border-bottom: none;
}

/*première rangée profil*/
.msg_rpgiste_infos {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border: 1px solid var(--black);
    width: 100%;
  padding: 12px 20px;
  border-bottom:unset;
  border-radius: 5px 5px 0 0;
}

.rpgiste_infos_left, .rpgiste_infos_right {
    display: flex;
    gap: 4px;
}

.msg_ctnr, .naaksha_ctnr, .rpgiste_ctnr {
    font-weight: 600;
    background: var(--co-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.field-messages .field_label, .field-naaksha .field_label, .field-rpgiste .field_label, .field-cw-tw .field_label {
    display: none;
}

/**/

/*container contact + infos*/
.msg_bloc_1 {
    display: grid;
    grid-template-columns: 300px auto;
}

/*bloc gauche - contacts*/
.bloc_left_1 {
    border: 1px solid var(--black);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  border-right: unset;
  border-bottom: unset;
}

.post_contact {
    display: flex;
    gap: 8px;
  font-size: var(--l-size);
}

.post_contact a {
  transition: 0.5s all;
}

.post_contact a:hover, .post_contact a:focus {
    transform: translateY(-0.25em);
}

/*bloc droite - pseudo, rang, infos*/

.bloc_right_1 {
    border: 1px solid var(--black);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient(to left, var(--neutralDark) 50%, transparent), linear-gradient(to left, var(--co-1) 65%, var(--co-2b));
  border-bottom:unset;
}

.post_rank {
    background: var(--neutral);
    padding: 2px 4px;
    border-radius: var(--radius);
    color: var(--black);
}

.post_pseudo {
    font-family: var(--special-font);
    font-weight: 300 !important;
    font-size: var(--xl-size);
}

.post_pseudo a {
    font-family: var(--special-font);
    font-weight: 300 !important;
    font-size: var(--xl-size);
}

.post_fields {
    display: flex;
    gap: 8px;
}

.field-age .label, .field-pronom .label, .field-dimension .label, .field-surnom .label {
    display: none;
}

.field-age, .field-pronom, .field-dimension, .field-surnom {
    background: var(--neutral);
    color: var(--black);
    padding: 4px 8px;
    border-radius: var(--radius);
    text-transform: uppercase;
    font-size: var(--little-size);
	align-content: center;
}

.field-age .field_content::after {
    content: 'ans';
    margin-left: 4px;
}

.field-surnom .field_content::before {
    content: 'aka';
    margin-right: 4px;
}

/* container avatar + contenu message*/

.msg_bloc_2 {
    display: grid;
    grid-template-columns: 300px auto;
}

/*bloc avatar*/
.post_profile {
    padding: 10px;
    border: 1px solid var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
  background: var(--co-gradient2);
  border-bottom: unset;
}

.post_avatar img {
    max-width: 250px !important;
}

.bloc_av {
    position: sticky;
    top: 67px;
}

.avatar_behind {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: var(--spacing);
    opacity: 0;
    background: var(--neutralDark);
  transition: 0.5s all; 
  overflow: auto;
}

.avatar_behind:hover {
    opacity: 1;
}

h4.post-content {
    background: var(--co-2);
}
h3.post-content {
    background: var(--co-1);
}
h3.post-content, h4.post-content {
    margin: 0;
    display: inline-block;
    padding: 0px 3px;
    line-height: 150%;
    font-weight: 600;
    border-radius: var(--xs-radius);
    color: white;
    text-align: center;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.field-gameplay .label { display: none; }

/*bloc contenu message*/
/*sous bloc infos message*/
.post_details {
    padding: 8px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--neutralDark);
    width: 100%;
    border: 1px solid var(--black);
    height: 40px;
  border-left: unset;
}

a.msg_anchor {
    background: var(--co-gradient);
    padding: 8px;
    border-radius: 100%;
    font-size: 12px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
}

.post_date {
    flex-grow: 100;
    display: flex;
    align-items: center;
    gap: 8px;
}

/*message*/

.post_message { position: relative; padding-bottom: 70px;}

.post_message > div:not(.sepa_sign):not(.msg_tools):not(.like_button):not(fa_like_div):not(.signature_div) {
    padding: 50px;
}


.signature_div { text-align: center; margin-top: -10px; padding: var(--spacing); }

.sepa_sign {
	margin: 50px auto 0;
	width: 400px;
	position: relative;
}
.sepa_sign .mask {
	overflow: hidden;
	height: 20px;
}
.sepa_sign .mask:after {
	content: '';
	display: block;
	margin: -25px auto 0;
	width: 100%;
	height: 25px;
	border-radius: 125px / 12px;
	box-shadow: 0 0 8px var(--white);
}
.sepa_sign span {
	width: 35px;
	height: 35px;
	position: absolute;
	bottom: 100%;
	margin-bottom: -18px;
	left: 50%;
	margin-left: -25px;
	border-radius: 100%;
	box-shadow: 0 2px 4px var(--white);
	background: var(--co-gradient);
}
.sepa_sign span i {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	right: 4px;
	border-radius: 100%;
	border: 1px solid var(--co-2);
	outline: 1px solid var(--co-1);
	text-align: center;
	line-height: 235%;
	font-size: var(--small-size);
	text-shadow: 0px 0px 5px var(--co-2);
	color: var(--contrast);
}

/* BOUTONS D'EDITION DU MESSAGE --- */
/* Conteneur boutons d'édition */
.msg_tools {
    display: flex;
    position: absolute;
    flex-direction: column;
    top: 0;
    right: -15px;
    width: 30px;
    height: calc(100% - 40px);
    justify-content: flex-start;
    background: var(--co-gradient2);
    margin-top: 40px;
    border-radius: var(--radius);
  align-items: center;
  padding: 20px 0;
}

ul.profile-icons {
    position:sticky;
  top:97px;
}

.profile-icons a {
    color: var(--black);
}



/*UN SEUL bouton d'édition */
ul.profile-icons li {
  padding: 2px 4px;
  border-radius: 5px;
    transition: 0.5s all;
}

/* Cache les boutons pour les invités */
.profile-icons a[href=""] {
  display: none
}

/*hover d'un bouton d'édition*/
ul.profile-icons li:hover {
   transform: translateY(-0.25em);
}

/*troisième bloc — cw/tw, badges, icon/fc */
.msg_bloc_3 {
    display: grid;
    grid-template-columns: 300px auto 250px;
}

/*bloc cwtw*/
.msg_cwtw {
    border: 1px solid var(--black);
  display: flex;
  justify-content: center; 
  align-items: center;
      border-radius: 0 0 0 5px;
}

.msg_cwtw details {
    width: 250px;
}

.msg_cwtw .cwtw_ctnr {
    height: 120px;
    overflow: auto;
}

.field-cw-tw {
    padding: var(--spacing);
    font-size: var(--little-size);
    background: var(--neutral);
}

/*bloc badges*/
.msg_badges {
    border: 1px solid var(--black);
    padding: var(--spacing);
    overflow: auto;
    align-content: center;
    height: 222px;
  border-left: unset;
}

.titre_badges {
    font-size: 35px;
    margin-bottom: 10px;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    text-align: center;
}

.sstitre_badges {
    text-align: center;
    background: var(--co-1grad);
    padding: 6px 18px;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.sstitre_badges a {
  color: #fff; }

.msg_badges #list_awards { justify-content: center; }


/*bloc icon + fc*/
.msg_icon {
    border: 1px solid var(--black);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: var(--spacing);
    border-left: unset;
      border-radius: 0 0 5px 0;
      justify-content: center;
}

.feat_ctnr {
    font-family: var(--font-2);
    font-style: italic;
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.field-avatar .field_label {
    display: none;
}

/*champ icon*/
.field- {
    display: flex;
    justify-content: center;
    align-items: center;
}

.field- img:hover {
    transform: rotate(90deg);
    cursor: pointer;
    box-shadow: none;
}

.field- img {
    height: 130px;
    width: 130px;
    object-fit: cover;
    border-radius: 100%;
    outline: 1px solid var(--black);
    transition: color 0.2s ease, background 0.2s ease, transform 0.3s ease;
    outline-offset: 5px;
}

/* BOUTON LIKE --- */
/* Conteneur du bouton like */
.fa_like_list:not(:empty), .fa_dislike_list:not(:empty) { background: var(--neutral); margin: 20px 100px -10px 0; padding: 6px 10px; border-radius: var(--radius); font-size: var(--little-size); text-transform: lowercase; }
.fa_like_div {
    position: absolute;
    right: 5px;
    bottom: -30px;
    width: 100%;
}
.fa_like_div p {margin: 0}
.fa_like_tooltip {display: none; position: absolute; background: var(--co-gradient); border-radius: var(--xs-radius); z-index: 2}
.fa_like_others { position: relative; background: none; color: var(--contrast); font-weight: 600; border-bottom: 1px dotted; }
.fa_like_others:hover .fa_like_tooltip {display: inline-block}
.fa_like_tooltip a {white-space: nowrap}


.like_button {
position: absolute;
right: 50px;
bottom: 10px;
cursor: pointer;
display: flex;
gap: 5px;
  z-index: 1;
}

.like_button button img {
width: 30px;
height: 30px;
}

/* Bouton like */
.rep-button,
.rep-button:active,
.rep-button:focus {
display: flex;
min-width: 36px;
background: transparent;
color: var(--textColor);
border: none;
padding: 0;
border-radius: 5px;
font-weight: 600;
}

/*Bouton au survol*/
.rep-button:hover {
background: var(--var(--contrastLighter));
}

/* Lien "@" de mention */
a.fa-mention {
  cursor: pointer;
}

/* Mention "en ligne" */
.presence {
  display: none
}

.presence.online {
    display: inline-block;
    position: relative;
    border-radius: 5px;
    padding: 0 5px;
    margin: 0 auto;
    text-transform: lowercase;
    font-style: italic;
    font-family: var(--font-2);
    color: var(--black);
}

/*responsive*/
@media screen and (max-width: 890px) {

	.msg_bloc_1 {
    display: flex !important;
    flex-direction: column;
}

	.bloc_left_1 {
    border-right: 1px solid var(--black);
}

  .msg_bloc_2 {
    display: flex !important;
    flex-direction: column;
    border-left: 1px solid var(--black);
}
  
  .post_profile {border-left: unset !important;}
  
  .msg_bloc_3 {
    grid-template-columns: 1fr 1fr !important;
}
  
  .msg_badges {
    display: none;
}
   
}

@media screen and (max-width: 430px) {

	.post_message > div:not(.sepa_sign):not(.msg_tools):not(.like_button):not(fa_like_div):not(.signature_div) {     padding: 20px !important; }
	
  .msg_rpgiste_infos {
    align-items: center;
    flex-direction: column;
}
  
  .msg_bloc_1 {
    display: flex;
    flex-direction: column;
}
  
  .bloc_left_1 {
    border-right: 1px solid var(--black);
}
  
  .post_fields {
    flex-direction: column;
}
  
  .signature_div, .sepa_sign {
    display: none;
}
  
  .msg_bloc_3 {
    display: none;
}
  
  .msg_bloc_2 {
    border-bottom: solid 1px var(--black);
}
  
  .links_bar .buttons {height: unset;}
  
}

.fond_modo_tools {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: var(--neutralDark);
    border: 1px solid var(--black);
    border-radius: var(--radius);
    padding: var(--spacing);
    gap: 12px;
}

.fond_modo_tools label {
    display: none;
}

/* DÉCOS EVENTS */
/*contour avatar event*/
.post_avatar.yule::before{ content:""; position:absolute; inset: 0; background: url(https://www.aht.li/3946585/noel.png) no-repeat; background-size: cover; background-position: center; z-index: 1; pointer-events: none; }
.post_avatar.treat::before { content: ""; position: absolute; inset: 0; background: url(https://www.aht.li/3872728/cadre-treat.png) no-repeat; background-size: 100% auto; background-position: center; z-index: 1; pointer-events: none; width: 296px; height: 445px; margin: -10px 0 0 -15px; }
.post_avatar.treat::after { content: ""; position: absolute; inset: 0; background: url(https://www.aht.li/3872730/cadre-treat2.gif) no-repeat; background-size: 25%; background-position: center; z-index: 1; pointer-events: none; background-position-x: right; background-position-y: bottom; margin: 0 -25px -25px 0; }
.post_avatar.trick::before { content: ""; position: absolute; inset: 0; background: url(https://www.aht.li/3872727/cadre-trick.png) no-repeat; background-size: 100% auto; background-position: center; z-index: 1; pointer-events: none; width: 250px; height: 446px; margin: -10px 0 0 -22px; }
.post_avatar.trick::after { content: ""; position: absolute; inset: 0; background: url(https://www.aht.li/3872729/cadre-trick2.gif) no-repeat; background-size: 25%; background-position: center; z-index: 1; pointer-events: none; background-position-x: right; background-position-y: bottom; margin: 0 -25px -25px 0; }

/*** BLOG NEWS MISE EN PAGE ***/

#blog.news .blog_comment:not(:last-of-type) {
    margin-bottom: 20px;
}

#blog.news .blog_comment {
    position: relative;
    overflow: hidden;
    padding: 12px;
  display: flex;
}

#blog.news .comment_details .left {
    display: flex;
    flex-direction: column;
    align-items: center;
  width: max-content;
  justify-content: center;
}

#blog.news .blog_nameline {
    width: fit-content;
  display:none; 
}

#blog.news .comment_avatar {
    position: relative;
    width: 60px;
    height: 60px;
    margin-left: -12px;
    padding: 5px;
    border-radius: 0 0 50%;
      align-content: center;
    text-align: center;
}

#blog.news .comment_avatar img {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0;
      outline-offset: 3px;
    outline: 1px solid var(--black);
}

#blog.news .comment_avatar::after {
    content: '';
    position: absolute;
    top: 70px;
    left: -4px;
    width: 37px;
    height: 61px;
    border-radius: 45% 0 0 0;
}

#blog.news .blog_comment > .flex {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 20px;
    margin: 30px 0 20px 10px;
    color: white;
  width: 100%;
}

#blog.news  .blog_comment > .flex::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 32px;
    display: block;
    height: auto;
}

#blog.news .blog_comment .profile-icons {
    position: absolute;
    top: 18px;
    right: 14px;
    display: flex;
  font-size: var(--little-size)
}

#blog.news .comment_content {
    width: 100%;
}

#blog.news .news_acc-ps {
    position: absolute;
    top: 25px;
    left: 85px;
    font-size: var(--small-size);
}

#blog.news .news_post-ctnt {
    width: 100%;
    margin: 0 auto;
    font-size: var(--little-size);
}

#blog.news .news_post {
    position: relative;
    background: var(--neutralDarker);
    border-radius: 20px;
    padding: 10px;
    color: var(--contrast);
}

/*** NEWS TEST PREMIER POST ***/
.news_ctnr {
    background: var(--neutralDark);
    border-radius: var(--radius);
    overflow: hidden;
    width: 90%;
    justify-self: center;
  outline-offset: 3px;
    outline: 1px solid var(--black);
}

.news_hero {
    background: var(--co-2);
    color: var(--white);
    padding: var(--spacing);
}

.news_title {
    font-size: var(--xl-size);
    font-family: var(--special-font);
}

.news_date {
    text-transform: uppercase;
    font-weight: 900;
    font-size: var(--little-size);
}

.news_tag {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.news_tag span {
    background: var(--neutral);
    color: var(--black);
    padding: 2px 4px;
    font-size: var(--little-size);
    border-radius: var(--radius);
}

.news_desc {
    padding: var(--spacing);
    color: var(--black);
}


.news_ctnr::after {
    content: 'Laissez vos commentaire ci-dessous';
    display: block;
    height: 15px;
    font-size: var(--little-size);
    text-align: right;
    padding: 5px;
    color: white;
    border-radius: 0px 0px var(--radius) var(--radius);
    background: var(--co-2);
}

/*** ---------------------------- SMS ------------------------------- ***/
#blog {
	width: 800px;
	margin: 0 auto;
	background: var(--neutral);
	border-radius: 30px;
	position: relative;
	backdrop-filter: blur(20px);
}

#blog .container {
	background: transparent;
	position: relative;
	padding-top: 90px;
	z-index: 1;
}

#blog .page-title {
	margin: 0 auto;
	-webkit-text-fill-color: var(--contrast);
	font-size: 30px !important;
  	font-weight: 400;
}

#blog .links_bar:first-child > span:first-child a {
	color: var(--contrast);
}

#blog .links_bar:first-child {
	width: 100%;
	position: absolute;
	z-index: 2;
	padding: 30px;
	border: none;
	font-weight: 400;
	font-size: 0;
        margin: unset;
        background: unset;
}

#blog .links_bar:first-child a {
	background: none;
}

#blog .links_bar:first-child > span:first-child a:first-child::before {
	content: '\ebaf';
	font-family: var(--font-ic);
	font-size: var(--large-size);
}

#blog .links_bar:first-child > span:first-child a:last-child::before {
	content: '\ebcc';
	font-family: var(--font-ic);
	font-size: var(--large-size);
}

.sms .start-watching::before,
.sms .stop-watching::before, .news .start-watching::before,
.news .stop-watching::before  {
	font-size: var(--xxl-size);
	position: absolute;
	right: 25px;
	top: -15px;
}

#blog .container .blog_post {
	background: transparent;
}

#blog .container .blog_details {
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	border-bottom: none;
}

.blog_details ul.profile-icons {
    display: flex;
    align-items: center;
    justify-content: center;
      position: relative;
    top: 0;
}

#blog .container .blog_author {
	display: none;
}

#blog .container ul.profile-icons span {
	color: var(--contrast);
	background: transparent;
}

#blog orm {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 800px;
	height: 250px;
	margin: 0 auto;
	background-position: center;
	background-size: cover;
	-webkit-mask: linear-gradient(
		to bottom,
		var(--neutralDarker),
		var(--neutral),
		transparent
	);
	mask: linear-gradient(
		to bottom,
		var(--neutralDarker),
		var(--neutral),
		transparent
	);
	border-radius: 30px 30px 0 0;
	opacity: 0.7;
}

#blog .wrapped {
	width: calc(100% - 80px);
	margin: 0 auto 20px;
	border-radius: 20px;
}

.sms .wrapped {
	background: var(--neutral);
	border: 1px solid var(--neutral);
	padding: 40px 12px 12px;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.04), inset 0 0 10px var(--neutral);
}

.sms .like_button {
	opacity: 0;
	transition: 0.5s all;
}

.sms .flex:hover .like_button {
	opacity: 1;
}

#blog .like_button {
	position: static;
}

#blog .fa_like_div {
    width: unset;
    position: relative;
    right: unset;
    bottom: unset;
}

#blog .pagination {
	justify-content: center;
	margin-bottom: 20px;
}

.sms .has_prev {
	border: none;
	padding: 0;
}

.sms .has_prev .left {
	display: none !important;
}

/*like sur réponse à un mim*/
#blog .blog_comment .fa_like_div {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.sms .blog_comment {
	position: relative;
}

.sms .blog_comment:not(.has_prev) {
	position: relative;
	border: none;
	padding-left: 55px;
}

.sms .blog_comment:not(:first-child, .has_prev) {
	margin-top: 50px;
}

#blog .blog_online:not(:empty) {
	font-size: 0;
}

#blog .blog_online:not(:empty)::before {
	content: '';
	display: inline-block;
	margin: 0 2px 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: green;
}

.sms .blog_comment .profile-icons {
	flex-wrap: wrap;
	justify-content: end;
      display: flex;
    font-size: var(--little-size);
}

.sms .blog_comment .profile-icons span {
	background: transparent;
	color: var(--co-1);
}

.sms .blog_comment:not(.has_prev) .comment_details {
	margin-left: -51px;
	margin-bottom: -10px;
}

.sms .comment_content > div {
	display: block;
	padding: 10px;
	width: fit-content;
	border-radius: 10px;
}

.sms .blog_comment > .flex {
	position: relative;
	margin: 15px 0 5px;
	align-items: stretch;
}

.sms .blog_comment:nth-child(odd) > .flex > .comment_content > div {
	margin-left: 5px;
	background: var(--neutral);
}
.sms .blog_comment:nth-child(odd) > .flex > .comment_content > div::after {
	content: '';
	clip-path: polygon(0 100%, 100% 100%, 100% 0);
	height: 15px;
	width: 15px;
	background-color: var(--neutral);
	position: absolute;
	left: -10px;
	bottom: 13px;
}

.sms .blog_comment:not(.has_prev):nth-child(odd) .flex {
	flex-flow: row-reverse;
	justify-content: start;
}

.sms .blog_comment:not(.has_prev):nth-child(even) .flex {
	justify-content: flex-end;
}

.sms .wrapped > .blog_comment:nth-child(even) .flex .comment_content > div {
	background: var(--neutralDarker);
	margin-left: auto;
	margin-right: 60px;
}

.sms .blog_comment:nth-child(even) .flex .comment_content > div::after {
	content: '';
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	height: 15px;
	width: 15px;
	background-color: var(--neutralDarker);
	position: absolute;
	left: auto;
	right: 45px;
	bottom: 13px;
}

.sms .blog_comment:nth-child(even) .left {
	display: flex;
	flex-flow: row-reverse;
	gap: 10px;
}

.sms .comment_stats {
	align-self: start;
	height: 100%;
	margin: 0 30px;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s all;
}

.sms .flex:hover > .comment_stats {
	opacity: 1;
	visibility: visible;
}

.sms .blog_comment .fa_like_div {
	padding: 0;
	position: static;
	flex-direction: column;
	z-index: 1;
	margin-top: 2px;
	margin-left: -28px;
	margin-right: -49px;
	align-self: stretch;
	justify-content: space-between;
}

.sms .fa_like_div img {
	width: auto;
	height: 14px;
}

.sms .blog_nameline {
	flex-shrink: 0;
	display: flex;
	position: absolute;
	top: -10px;
	font-size: 10px;
}

.sms .blog_comment:nth-child(odd) .left .blog_nameline {
	left: 60px;
}

.sms .blog_comment:nth-child(even) .left .blog_nameline {
	right: 60px;
}

.sms .blog_comment .fa_like_list:not(:empty) {
	font-size: 0 !important;
	padding: 2px 4px;
	margin: 10px -10px -10px;
	border-radius: 0 0 10px 10px;
}
.sms .blog_comment > a {
	display: block;
	margin-left: 5px;
	height: fit-content;
	font-size: var(--small-size);
}
.sms .blog_comment > a span {
	color: var(--contrast) !important;
}

.sms .blog_comment .fa_like_list:not(:empty) {
	margin: 0;
}

button.rep-button .rep-nb {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    font-size: 8px;
    background: var(--neutralDark);
    border: 1px solid var(--white);
    color: var(--co-2);
    font-weight: 700;
    border-radius: var(--xs-radius);
    width: 10px;
    height: 10px;
}

.sms blockquote:has(cite) {
	position: relative;
	border: none !important;
	padding: 5px !important;
	margin: 0 0 5px 0px;
	border-radius: var(--radius);
	font-family: var(--font) !important;
	font-size: var(--little-size);
	opacity: 0.7;
}

.sms blockquote div {
	padding-left: 5px;
	border-left: 1px solid var(--co-1);
}

.sms blockquote cite {
	margin-left: 0;
	color: var(--co-1);
	font-size: 0;
}

.sms blockquote:has(cite) cite::before {
	content: '\e9d7\000020 reply to';
	background: none;
	font-family: var(--font-ic);
	font-size: var(--small-size);
	letter-spacing: 2px;
	text-transform: uppercase;
}

.sms jr {
	position: absolute;
	top: -40px;
	left: 0;
	margin: 0 auto;
	display: flex;
	gap: 20px;
	align-items: center;
	width: 580px;
	text-align: center;
	font-size: var(--small-size);
	letter-spacing: 1px;
}

.sms jr > * {
	flex-shrink: 0;
}

.sms jr::before,
.sms jr::after {
	content: '';
	display: block;
	width: inherit;
	height: 1px;
	background: var(--neutralDarker);
}

.has_prev .flex:has(jr) {
	margin-top: 90px !important;
}

.sms .comment_avatar {
	position: absolute;
	bottom: 10px;
}

.sms .blog_comment img {
	max-width: 285px;
}

.ormstory {
	position: relative;
	display: grid;
	grid-template: 455px / 260px;
	width: 260px;
	height: 455px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
}
.ormstory > * {
	grid-row: 1;
	grid-column: 1;
	z-index: 2;
}
.ormvid {
	width: 260px;
	height: 455px;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}
.ormstory > .flex {
	justify-content: space-between;
	align-items: center;
	height: 43px;
	padding: 10px;
}
.ormstory a {
	color: white !important;
}
.ormstory_live {
	z-index: 2;
	justify-self: end;
	align-self: start;
	display: block;
	padding: 3px 14px;
	border-radius: 5px;
	background-image: linear-gradient(141deg, #bf0488, #da0338);
	box-shadow: 0 0 5px #5c5c5c;
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 1px;
	color: white;
}
.ormstory_livecomm.desc {
	align-self: flex-end;
	height: 350px;
	margin: 5px 0 50px;
	box-sizing: border-box;
	padding: 265px 30px 20px 15px;
	text-align: left;
	font-size: 11px;
	text-shadow: 0 0 2px #111;
	color: white;
}
.ormstory_type {
	position: relative;
	align-self: flex-end;
	width: 80%;
	border: 1px solid var(--gray);
	border-radius: var(--radius);
	color: var(--gray);
	padding: 3px 20px;
	margin: 0 0 10px 10px;
}
.ormstory_type::after {
	content: '\eb03';
	font-family: cappuccicons;
	color: #ff0000;
	position: absolute;
	right: -32px;
	bottom: -2px;
	font-size: 21px;
}
.ormstory_flyingemoji {
	display: block;
	align-self: flex-end;
	justify-self: flex-end;
	width: 70px;
}
.ormstory_bg {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(transparent, rgb(12, 12, 12));
	z-index: 1;
}
.ormstory .tabs-onglets {
	display: flex;
	gap: 10px;
	margin: 10px;
	position: absolute;
	z-index: 3;
	width: calc(100% - 20px);
}
.ormstory .tabs-onglets a {
	display: block;
	width: 100%;
	height: 5px;
	background: white;
}

/**-----------------------------BLOG-------------------------------***/
.mim .start-watching::before,
.mim .stop-watching::before {
	content: "s'abonner";
	background: var(--neutral);
	font-family: var(--font);
	font-size: var(--normal-size);
	position: absolute;
	right: 32px;
	top: 32px;
	border: 1px solid;
	padding: 0 10px;
	border-radius: var(--radius);
}
.mim .stop-watching::before {
	content: 'abonné·e';
	color: var(--contrast);
}
.mim .container .fa_like_list:not(:empty)::before {
	content: 'suivi·e par';
	font-size: var(--little-size);
}

.fa_like_list a {
	font-size: var(--little-size);
}

#blog .fa_like_list a {
	margin-left: 5px;
}

#blog .fa_like_list a:not(:last-child)::after {
	content: ',';
}

.mim .fa_like_list:not(:empty) {
	font-size: 0 !important;
	margin: 0;
}

.mim .comment_details .left {
	display: flex;
	gap: var(--spacing);
}

.mim .blog_comment .like_button {
	position: absolute !important;
	bottom: 0;
	z-index: 1;
}

.mim .blog_comment .like_button img {
	width: 20px;
	height: 21px;
}

.mim .blog_comment {
	position: relative;
	background: var(--neutral) !important;
	overflow: hidden;
	padding: 12px;
	border-radius: 20px;
}

.mim .blog_comment:not(:last-of-type) {
	margin-bottom: 20px;
}

.mim .blog_comment > .flex {
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 20px;
	background: var(--bg-gradient);
	margin: -40px -12px 20px;
	padding: 40px;
	border-radius: 20px;
	color: white;
}

.mim .blog_comment > .flex::before {
	content: '';
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	bottom: 32px;
	display: block;
	height: auto;
}

.mim .comment_content {
	width: 100%;
}

.mim .blog_comment .profile-icons {
	position: absolute;
	top: 18px;
	right: 14px;
  	display: flex;
  font-size: var(--little-size);
}

.mim .blog_comment .profile-icons span {
	color: var(--contrast);
}

.mim .comment_avatar {
	position: relative;
	width: 70px;
	height: 70px;
	margin-left: -12px;
	padding: 5px;
	border-radius: 0 0 50%;
}

.mim .comment_avatar::after {
	content: '';
	position: absolute;
	top: 70px;
	left: -4px;
	width: 37px;
	height: 61px;
	border-radius: 45% 0 0 0;
}

.mim .comment_avatar img {
	position: absolute;
	z-index: 1;
	width: 60px;
	height: 60px;
}

.mim .like_pplist {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-right: 50px;
	border-radius: 0 0 20px 20px;
	background: var(--neutralDarker);
	text-align: left;
}

.mim_acc {
	width: calc(100% - 40px);
	max-width: 520px;
	margin: 0 auto 20px;
}
.mim_pr {
	position: relative;
	height: 60px;
	border-radius: 40px;
	z-index: 1;
}
.mim_pr img {
	object-fit: cover;
}
.mim_pr::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	width: 54px;
	height: 54px;
	border-radius: 20px;
	padding: 3px;
	background: var(--gradient);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: clear;
	mask-composite: exclude;
	animation: rotate 5s 1s linear infinite;
}
.mim_pr > img {
	margin: 7px;
	width: 46px;
	height: 46px;
	border-radius: 14px;
}
.mim_pr > .profilmim {
	flex-grow: 1;
	height: 60px;
	border-radius: 20px;
}

.profilmim {
    background: var(--neutral);
    border-radius: var(--radius);
    padding: var(--spacing);
}

.mim_grid {
	display: grid;
	grid-template: repeat(4, 104px) / repeat(4, 104px);
	gap: var(--spacing);
	padding: var(--spacing);
	border: 1px solid var(--neutralDark);
	border-radius: 20px;
}
.mim_stories > a > img {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 5px;
	object-fit: cover;
	border-radius: 50%;
	padding: 2px;
	background: var(--gradient);
	-webkit-text-fill-color: transparent;
}
.mim_grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	transition: 0.3s transform;
}
.mim_grid img:nth-child(1),
.mim_grid img:nth-child(8n) {
	grid-row: span 2;
	grid-column: span 2;
}
.mim_grid img:not(:nth-child(1), :nth-child(8n)):hover {
	transform: scale(2);
	z-index: 1;
	box-shadow: 0 0 200px var(--neutralDarker);
}

.mim_post-ctnt {
	width: 440px;
	margin: 0 auto;
}

.mim_post-ctnt .tabs-onglets a {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var(--co-2);
	border-radius: 50%;
	margin: auto 5px;
}
.mim_post-ctnt .tabs-onglets a.ongSelected {
	background: var(--co-gradient);
}

.mim .mim_acc-ps {
	position: absolute;
	top: 33px;
	left: 89px;
	font-size: var(--small-size);
}
.verified::after {
	content: '';
	display: inline-block;
	margin: 0 0 -3px 5px;
	width: 15px;
	height: 15px;
	background: url(https://www.aht.li/3861205/verif.png);
	background-size: cover;
}
.mim_post {
	position: relative;
	background: var(--neutralDarker);
	border-radius: 20px;
	padding: 10px;
	color: var(--contrast);
}
.mim_comms {
	width: fit-content;
	background: var(--neutralDarker);
	color: var(--contrast);
	border-radius: 0 0 0 var(--radius);
	font-size: var(--little-size);
}
.mim_post .pic {
	width: 100%;
	border-radius: 13px;
}

.tags {
	position: relative;
	height: fit-content;
}
.tags::after {
	content: 'none';
}
.tags .toolcnt::after {
	content: '';
	visibility: hidden;
	position: absolute;
	width: 1px;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -10px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--neutralDarker) transparent transparent transparent;
	opacity: 0;
	transition: opacity 0.6s;
}
.tags .toolcnt {
	margin: 0;
}
.tags:hover .toolcnt::after {
	visibility: visible;
	opacity: 1;
}
.tags::after {
	content: none;
}

.mim_stories {
	overflow: auto;
}
.mim_stories a {
	flex-shrink: 0;
	text-align: center;
	font-size: var(--little-size);
}
.mim_stories::-webkit-scrollbar {
	height: 1px !important;
}

/* RESPONSIVE */
@media screen and (max-width: 1440px) { 
#blog {
	width: 600px !important;
}
  
  #blog orm {
    width: 600px !important; }
  
  .sms jr { width: 380px !important; }
}


@media screen and (max-width: 430px) { 

      #blog {
        width: 100% !important;
    }
  
  #blog orm {
        width: 100% !important;
    }
  .mim_post-ctnt {
    width: 100% !important;
    margin: 0 auto;
}
  
  #blog.news .blog_comment .profile-icons {
    top: 0px;
  }
  
  
}


/*** ------------------------------- ***/
/***  AFFICHAGE D'UN BLOG ---------- ***/

.blog_post {
background: var(--neutral);
display: grid;
grid-template-rows: auto auto;
border-radius: 5px;
}

.blog_details {
padding: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--neutralDark);
}

.blog_author {
flex-grow: 100;
}

.blog-type:not(:empty) {
    background: var(--co-2grad);
    color: white;
    padding: 3px;
    font-size: var(--little-size);
    letter-spacing: 1px;
    border-radius: var(--radius);
    text-transform: uppercase;
}

/*** ------------------------------- ***/
/*** COMMENTAIRES D'UN BLOG -------- ***/

.comment_avatar img {
object-fit: cover;
object-position: center;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 0;
}

.comment_details {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.comment_details .left {
flex-grow: 100;
}

/*** ------------------------------- ***/
/*** SONDAGE ----------------------- ***/

.poll {
  background: var(--neutral);
  border-radius: 5px;
  margin-bottom: 10px;
}

.head_poll {
  padding: 10px;
  border-bottom: 1px solid var(--neutralDark);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.poll_list {
  display: grid;
  grid-template-columns: 220px auto;
}

.poll_option {
  padding: 10px 20px 0 10px;
  border-right: 1px solid var(--neutralDark);
  text-align: right;
}

.poll_vote {
  padding: 10px 10px 0 20px;
  display: flex;
  align-items: center;
}

.poll_send {
  margin-left: 220px;
  padding: 20px 10px 20px 20px;
  border-left: 1px solid var(--neutralDark);
}

.poll_vote:nth-child(2),
.poll_option:first-child {
  padding-top: 20px;
}

.votes-users-list {
  justify-content: start;
  margin: 20px 0 0;
}

/* REPONSE RAPIDE --- */
/*supression de la mention "réponse rapide" */
.quickreply div.h3 {
  display: none;
}

/*centrer la réponse rapide*/
.quickreply {
}

/* Retire le cadre de la réponse rapide pour les invités */
#quickreply_content:empty {
  display: none;
}


/*** ------------------------------- ***/
/*** EDITEUR DE TEXTE -------------- ***/
/* Editeur de texte */
.sceditor-container {
  border: var(--border) !important;
  background-color: var(--neutral) !important;
}

/* Barre d'outils de l'éditeur de texte*/
div.sceditor-toolbar {
  background: var(--neutralDarker) !important;
  border-bottom: var(--border) !important;
}

/* Conteneur des groupes d'outils */
div.sceditor-group {
  background: var(--neutralDark) !important;
  border-bottom: var(--border) !important;
}

/* Bouton d'un outil */
a.sceditor-button {
  height: 26px !important;
  /*ne pas retirer*/
  width: 26px !important;
  /*ne pas retirer*/
}

/* Bouton d'un outil au survol ou actif*/
.sceditor-button.active,
.sceditor-button:active,
.sceditor-button:hover,
.sceditor-button.hover {
  background: var(--neutral) !important;
  box-shadow: none !important;
  border: none !important;
  outline: 1px solid var(--neutralDarker);
}

/* Conteneur de la zone de texte */
.sceditor-container iframe,
.sceditor-container textarea {
  background-color: var(--neutral) !important;
  /*ne pas supprimer*/
  width: 100% !important;
  margin: 0 !important;
  padding: 5px !important;
  /*ne pas supprimer*/
  min-height: 250px !important;
}

.sceditor-container textarea:focus {
  outline: none
}

/*Boîte Smiley*/
html#sceditor_smilies,
body#sce_smilies_body {
  background: transparent !important;
}



/*** ------------------------------- ***/
/*** SONDAGE ----------------------- ***/

.poll {
  background: var(--neutral);
  border-radius: 5px;
  margin-bottom: 10px;
}

.head_poll {
  padding: 10px;
  border-bottom: 1px solid var(--neutralDark);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.poll_list {
  display: grid;
  grid-template-columns: 220px auto;
}

.poll_option {
  padding: 10px 20px 0 10px;
  border-right: 1px solid var(--neutralDark);
  text-align: right;
}

.poll_vote {
  padding: 10px 10px 0 20px;
  display: flex;
  align-items: center;
}

.poll_send {
  margin-left: 220px;
  padding: 20px 10px 20px 20px;
  border-left: 1px solid var(--neutralDark);
}

.poll_vote:nth-child(2),
.poll_option:first-child {
  padding-top: 20px;
}

.votes-users-list {
  justify-content: start;
  margin: 20px 0 0;
}

/*Boîte Smiley*/
body#sce_smilies_body {
	background: transparent !important;
}

div.sceditor-container,
body div.sceditor-group,
a.sceditor-button:hover,
a.sceditor-button.hover {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--radius) !important;
}

#quickEmojInternal {
	width: 240px !important;
	height: 250px !important;
	min-height: auto !important;
	border-radius: var(--xs-radius);
	background: var(--neutralDarker);
}

#smilies_categ select {
    background: var(--co-gradient);
    border: none;
    color: white;
    text-transform: lowercase;
    width: 99%;
    text-align: center;
    border-radius: var(--radius);
}

#smileyContainer iframe {
    height: 581px;
    background: var(--neutralDarker);
    padding: var(--spacing);
    border-radius: var(--radius);
}

#sceditor_smilies {
	color: gray !important;
	outline: none !important;
}

#smilies_categ select {
	width: 100%;
	background: transparent;
	border: none;
	padding-bottom: 5px;
	color: gray;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	border-bottom: 1px solid;
}
/*** ------------------------------- ***/
/*** PAGE D'ENVOI D'UN MESSAGE ----- ***/

.message-edition {
  display: flex;
  flex-direction: row;
  /* flex-direction: row-reverse; -- pour smileys à droite */
  gap: 15px;
  /*espace entre la zone de texte et la boîte à smileys*/
}

/* Prévisualisation d'un message */
#preview {
background: var(--neutral);
    padding: 10px;
    border: var(--border);
    border-radius: 5px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#preview .inner .postbody {
    margin: var(--spacing) !important;
}