/****** ------------------------------------------------------------------------------
 ****** GÉNÉRALITÉS ------------------------------------------------------------------ 
 ****** Sélecteurs généraux s'appliquant à plusieurs reprises sur tout le forum ******/

/* SCROLL ---*/

/* S'applique à TOUS les éléments du forum*/
* {
  box-sizing: border-box;
}

@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--neutralDarker) var(--co-gradient);
	}
}

::-webkit-scrollbar {width: 6px;
	height: 2px;}

/* Rail */
::-webkit-scrollbar-track-piece {background-color: var(--base-1);}

/* Poignée */
::-webkit-scrollbar-thumb {background: var(--co-gradient);
	border: 1.5px solid var(--base-1);}


/*** ------------------------------- ***/
/*** TOUTES LES PAGES --------------- ***/

/* FOND DU FORUM ---*/

body:not(#sceditor_smilies body) {
    margin: 0 !important;
    font-family: var(--font);
    font-size: var(--normal-size);
    line-height: 1.5 !important;
    color: var(--textColor);
  background: var(--neutralDark);
    text-align: justify;
}

/* STRUCTURE PRINCIPALE ---*/
.main_forum {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--texture), var(--base-gradient);
    background-size: 50px, cover;
    background-attachment: fixed;
    background-blend-mode: overlay;
  min-width: 0;
  min-height: 100vh;
  z-index: 0;
}

/* Conteneur de toutes les sous-sections
 * comme les encadrés d'options, de rappel, etc... */
.panel {
    background: var(--neutral);
    border-radius: 5px;
    padding: var(--spacing);
  margin-bottom: 10px;
}

.panel#postingbox {
    background: none;
}

/* BOUTON CHANGEMENT DE THEME ---*/
@media (prefers-color-scheme: dark) {
  .color-scheme-toggle .dark {
    display: none;
  }
}

@media (prefers-color-scheme: light) {
  .color-scheme-toggle .light {
    display: none;
  }
}

.color-scheme-toggle,
[data-color-scheme="light"] .color-scheme-toggle .dark,
[data-color-scheme="dark"] .color-scheme-toggle .light {
  display: block;
  width: 100%;
}

[data-color-scheme="dark"] .color-scheme-toggle .dark,
[data-color-scheme="light"] .color-scheme-toggle .light {
  display: none;
}

.color-scheme-toggle {
    background-color: var(--neutralDark);
    font-size: 1.6rem;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    text-align: center;
    color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px !important;
      margin-bottom: 12px;
  border: 1px solid var(--black);
}

.color-scheme-toggle:hover {
  color: var(--accentClr);
}

/*** ----------------------------------- ***/
/*** LIENS ET TEXTE -------------------- ***/

/* LIENS DU FORUM --- */
a {
  font-weight: 600;
  text-decoration: none;
  color: var(--contrast);
}

/* Emoji mis par défaut de FA
 * Les réduire les rend moins horribles à voir */
.emojione {
  width: 19px !important;
}

/*BODY, INPUTS, CODES/SPOILERS/HIDE...*/
/*** ------------------------------- ***/

/* BALISES DE MESSAGE : spoiler, code, quote... */

/* Balise code, spoiler et hide*/
.codebox {
display: block;
width: 90%;
max-width: 50vw;
margin: 0 auto;
position: relative;
}

/* Contenu code, spoiler et hide*/
.codebox dd:not(.hidecode dd) {
background: var(--neutralDark);
border-radius: 5px;
padding: 5px;
overflow: hidden auto;
max-height: 250px;
}

/* Nom de balise "code, spoiler" */
.codebox dt {
font-size: var(--little-size);
font-weight: 700;
letter-spacing: 1px;
color: var(--co-2);
transition: all .5s;
text-transform: uppercase;
}

/* bouton "copier" */
.copyCode {
position: absolute;
    top: 0;
    right: 35px;
    color: var(--co-2);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--little-size);
}

code:not(.codebox code), .code {
background: var(--neutralDarker);
padding: 1px 2px;
border: 1px solid var(--base-2);
border-radius: var(--xs-radius);
color: var(--co-2);
text-shadow: 0 0 3px;
}

code span::before {font-size:var(--small-size);margin:0}

dl.codebox {background-color: var(--neutralDarker);border-left: 4px solid var(--co-2);border-radius: var(--radius);padding: 10px;}
dl.codebox dt {border-bottom: 1px solid var(--co-2);position: inherit;}
dl.codebox::before { color: var(--base-5) }
dl.codebox code { color: var(--textColor); font-family: var(--font); font-size: 14px; line-height: 20px; text-shadow: none; border: none; }
dl.codebox::before {
color: var(--base-5);
}
dl.codebox:not(.hidecode)::before {
content: "\ea11";
position: absolute;
right: 10px;
top: 8px;
display: inline-block;
font-family: var(--font-ic);
color: var(--co-1);
speak: none;
font-style: normal;
}

div.cont_code {
clear: right;
}

/* Spoiler */
.hidebox.spoiler {
}

/* spoiler fermé */
.spoiler_content {
display: none;
}

/* spoiler ouvert */
.spoiler_content.hidden {
display: block;
}

/*code dans les profils*/

#wombat .codebox {padding: 3px 5px}

#wombat dl.codebox:not(.hidecode)::before {
    content: "\e9e4";
    position: static;
    font-family: var(--font-ic);
    font-size: 6px !important;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--co-gradient);
    color: white;
    float: left;
    letter-spacing: 0;
    font-weight: bold;
    text-align: center;
    width: 12px;
    height: 12px;
    }

#wombat .codebox dd:not(.hidecode dd) {
    background: none;
    padding: 0 3px 0 0;
}

#wombat dl.codebox dt {
    border: none;
    font-size: var(--small-size);
    line-height: 120%;
}

#wombat .spoiler_content {
    font-size: var(--inter-size);
    line-height: 115%;
}

/* Citation contenu */

blockquote:has(cite) {
margin-bottom: 5px;
padding: 15px 0 15px 15px;
font-size: var(--inter-size);
border-left: 1px solid var(--co-1);
position: relative;
background-color: var(--neutral);
border-radius: 5px;
}

blockquote:has(cite)::before {
content: '\00201D';
right: 0;
color: var(--co-1);
position: absolute;
font-size: var(--xxl-size);
top: -30px;
}

/* Citation mention "... a écrit" */
blockquote cite {
display: block;
font-style: normal;
text-transform: uppercase;
font-size: var(--little-size);
letter-spacing: 1px;
}

/* Citation pseudo */
blockquote cite a {
text-decoration: none !important;
}

blockquote2 {display: block; margin: 0 20px}
blockquote3 {display: block; margin: 0 40px; border-left: 1px solid var(--co-2); padding-left: 20px}
.flex>blockquote {border-left: 1px solid var(--co-2); padding-left: 20px; font-family: courier new;}

/* Hide */
.codebox.hidecode dd {
background: transparent;
opacity: 0.8;
}


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

/*** PAGE DE CONNEXION ------------- ***/

/* Centrer les pages de connexion */
form[name="form_login"],
form[name="form_login"]~.panel {
  text-align: center;
}

form[name="form_login"] .content {
  display: grid;
  justify-content: center;
  justify-items: center;
}

#main-content:has(.fld_connexion) {
display: flex;
gap: var(--spacing);
}

#main-content:has(.fld_connexion)>form,
#main-content:has(.fld_connexion)>div {
display: flex;
flex-direction: column;
justify-content: center;
}

#main-content:has(.fld_connexion)>form {width: 60%}
#main-content:has(.fld_connexion)>div {width: 40%}

.panel:has(.fld_connexion) .h3,
.panel:has(a[href="/register"]) .h3 {font-size: 0}

.panel:has(.fld_connexion) .h3,
.panel:has(a[href="/register"]) .h3 {font-size: 0}

.panel:has(.fld_connexion),
.panel:has(a[href="/register"]) {
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
outline-offset: 3px;
outline: 1px solid var(--black);
}

form { margin-bottom: 0; }

.panel:has(.fld_connexion) a,
.panel:has(a[href="/register"]) a {
    border: solid 1px var(--black);
    text-decoration: none;
    color: var(--black);
    text-align: right;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--neutralDark) 33%, var(--co-1), var(--co-2));
    background-size: 350% 120%;
    transition: .7s;
    background-position: 1% 0%;
    background-color: var(--co-1);
    padding: 5px;
    font-size: var(--little-size)
}

.panel:has(.fld_connexion) a:hover,
.panel:has(a[href="/register"]) a:hover {
    background-position: 99% 0%;
}

#bottom.links_bar {
    width: fit-content;
    background-color: var(--neutral);
    border: 1px solid var(--black);
    font-size: var(--small-size);
    text-transform: lowercase;
    padding: 5px 10px;
	justify-self: center;
}

/* onglets dans les messages */
.msg_ong_contenu > div.ongContent {
    display: block;
}

.msg_ong_contenu > div:not(.ongContent) {
	display: none;
}

/* KEYFRAMES ET ANIMATIONS */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--co-2);
    }

    70% {
        box-shadow: 0 0 0 10px var(--co-2c);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.bounce {
animation: mini-bounce 1.5s ease infinite alternate;
top: 10px;
position: relative;
}
@keyframes mini-bounce {
0% {
top: 0;
}
100% {
top: 5px;
}
}
@keyframes bounce {
0% {
top: 0;
}
100% {
top: 10px;
}
}
@keyframes rev-bounce {
0% {
top: 10px;
}
100% {
top: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes fromtop {
0% {
opacity: 0;
transform: translateY(-20%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes frombottom {
0% {
opacity: 0;
transform: translateY(20%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes comein {
0% {
    clip-path: circle(0% at 50% 50%);
}
100% {
    clip-path: circle(200% at 50% 50%);
}
}

/* Barre d'outils de l'éditeur de texte*/

.sceditor-toolbar {
	background: var(--neutralDarker) !important;
	margin: 0 !important;
	padding: 7px 0 !important;
	border-radius: var(--radius) var(--radius) 0 0 !important;
	border-bottom: 1px solid var(--white) !important;
	text-align: center;
}

.sceditor-dropdown a:hover {
	background: var(--co-1) !important;
}

.sceditor-mention-user {
	background: var(--neutralDark) !important;
	border-color: var(--neutralDark) !important;
}

.sceditor-mention-user:hover {
	background: var(--neutralDark) !important;
	color: var(--textColor) !important;
}

.sceditor-mention-user img {
	border: none !important;
	margin: 0 10px 0 -3px !important;
}

div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	width: 100%;
}

div.sceditor-dropdown .button {
	background: var(--co-1) !important;
	color: white !important;
	border: none !important;
	font-weight: 600 !important;
}

div.sceditor-dropdown .button:hover {
	color: var(--co-1) !important;
	background: var(--neutralDark) !important;
}

/* icone menu edition */
.sceditor-toolbar .sceditor-button {
	text-indent: 0;
	padding: 1px !important;
	width: 32px !important;
	height: 32px !important;
}

.sceditor-toolbar .sceditor-button div {
	font-family: FontAwesome;
	font-weight: normal;
	line-height: 30px;
	width: 100%;
	height: 100%;
	background: var(--co-gradient) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent;
	font-size: 0;
}

.sceditor-toolbar .sceditor-button div::before {
	font-size: var(--normal-size) !important;
}

/* bold */
.sceditor-button-bold div:before {
	content: '\f032';
}

/* italic */
.sceditor-button-italic div:before {
	content: '\f033';
}

/* underline */
.sceditor-button-underline div:before {
	content: '\f0cd';
}

/* strike */
.sceditor-button-strike div:before {
	content: '\f0cc';
}

/* text align left */
.sceditor-button-left div:before {
	content: '\f036';
}

/* text align center */
.sceditor-button-center div:before {
	content: '\f037';
}

/* text align right */
.sceditor-button-right div:before {
	content: '\f038';
}

/* text align justify */
.sceditor-button-justify div:before {
	content: '\f039';
}

/* bullet list */
.sceditor-button-bulletlist div:before {
	content: '\f0ca';
}

/* ordered list */
.sceditor-button-orderedlist div:before {
	content: '\f0cb';
}

/* horizontal rule */
.sceditor-button-horizontalrule div:before {
	content: '\f2d1';
}

/* quote */
.sceditor-button-quote div:before {
	content: '\f10d';
}

/* code */
.sceditor-button-code div:before {
	content: '\f121';
}

/* spoiler */
.sceditor-button-faspoiler div:before {
	content: '\f066';
}

/* hide */
.sceditor-button-fahide div:before {
	content: '\f070';
}

/* table */
.sceditor-button-table div:before {
	content: '\f0ce';
}

/* host an image */
.sceditor-button-servimg div:before {
	content: '\f0ee';
}

/* insert an image */
.sceditor-button-image div:before {
	content: '\f03e';
}

/* insert a link */
.sceditor-button-link div:before {
	content: '\f0c1';
}

/* embed a post */
.sceditor-button-embed div:before {
	content: '\f019';
}

/* youtube */
.sceditor-button-youtube div:before {
	content: '\f16a';
}

/* dailymotion */
.sceditor-button-dailymotion div:before {
	content: '\f008';
}

/* header */
.sceditor-button-headers div:before {
	content: '\f1dc';
}

/* flash */
.sceditor-button-flash div:before {
	content: '\f0e7';
}

/* font size */
.sceditor-button-size div:before {
	content: '\f034';
}

/* font color */
.sceditor-button-color div:before {
	content: '\f1fb';
}

/* font family */
.sceditor-button-font div:before {
	content: '\f031';
}

/* remove formatting */
.sceditor-button-removeformat div:before {
	content: '\f12d';
}

/* mention a user */
.sceditor-button-mention div:before {
	content: '\f1fa';
}

/* button more */
.sceditor-button-more div:before {
	content: '\f196';
}

/* sub script */
.sceditor-button-subscript div:before {
	content: '\f12c';
}

/* super script */
.sceditor-button-superscript div:before {
	content: '\f12b';
}

/* scroll horizontal */
.sceditor-button-fascroll div:before {
	content: '\f07e';
}

/* scroll vertical */
.sceditor-button-faupdown div:before {
	content: '\f07d';
}

/* WoW */
.sceditor-button-fawow div:before {
	content: '\f118';
}

/* random */
.sceditor-button-farand div:before {
	content: '\f074';
}

/* emoticon */
.sceditor-button-emoticon div:before {
	content: '\f5b8';
}

/* emoticon */
a.sceditor-button.sceditor-button-twemojifa {
	display: none !important;
}
.sceditor-button-twemoji div:before {
	content: '\f584';
}

/* date */
.sceditor-button-date div:before {
	content: '\f133';
}

/* time */
.sceditor-button-time div:before {
	content: '\f017';
}

/* paste text */
.sceditor-button-pastetext div:before {
	content: '\f0ea';
}

/* switch editor mode */
.wysiwygMode .sceditor-button-source div:before {
	content: '\f204';
}

.sourceMode .sceditor-button-source div:before {
	content: '\f205';
}

/* bouton sauvegarde */
#save_button div::before {
	content: '\f0c7';
	font-weight: bold;
}
#savec {
	position: relative;
}
.save-bloc {
	z-index: 999;
	padding: 5px;
	background: #efefef url(https://2img.net/i/fa/prosilver/bg_button.gif)
		repeat-x;
	display: none;
	top: 20px;
	left: 0px;
	position: absolute;
	white-space: nowrap;
}
.save-bloc select {
	background: var(--white);
	margin-bottom: 5px;
}
.save-bloc div {
	cursor: pointer;
	color: var(--textColor);
}
.save-bloc > div {
	overflow: auto;
	max-height: 300px;
	background: var(--white);
	padding: 10px !important;
	border-radius: var(--xs-radius);
}
#saves span {
	background: var(--co-gradient);
	text-transform: uppercase;
	font-size: var(--small-size);
	font-weight: 600;
	padding: 2px 5px;
	border-radius: var(--radius);
	color: white;
}

/* COULEURS DANS LES CODES */
/*** COPY CODES ***/
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
	color: var(--co-1) !important;
}

.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-type,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
	color: var(--textColor) !important;
}

.hljs-title,
.hljs-section,
.hljs-name {
	color: var(--co-2) !important;
}

/* Conteneur de la zone de texte */
.sceditor-container iframe,
.sceditor-container textarea {
	border-radius: 0 0 var(--radius) var(--radius);
	min-height: 250px !important;
	background-color: var(--neutralDark) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	width: 100% !important;
	margin: 0 !important;
	padding: 5px !important;
	min-height: 300px !important;
	line-height: 175%;
	font-size: var(--normal-size) !important;
}

/* Autre champs de texte */
textarea {
    background: var(--neutralDark);
    border: var(--border);
    border-radius: var(--radius);
    color: var(--textColor) !important;
}

/* dropdown */
div.sceditor-dropdown {
	border: none !important;
	margin-top: 45px !important;
	background: var(--neutralDarker) !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.editeur .h3 {
	display: none;
}

#message-box {
	width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
#quick_reply #textarea_content,
#message-box #textarea_content {
	background: var(--body-img) center;
	background-size: cover;
	border-radius: var(--radius) !important;
}

#quick_reply #textarea_content {
	overflow: inherit;
}

#message-box textarea {
	min-height: 500px !important;
}

/* compteur de mots */
div#compteur-mots {
	text-align: center;
	font-weight: 400;
	padding: 8px 0;
	text-transform: uppercase;
	font-size: var(--xs-size);
	letter-spacing: 1px;
}

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

div.sceditor-dropdown a,
div.sceditor-dropdown a:link,
div.sceditor-dropdown label {
	color: var(--textColor) !important; }

/*** ------------------------------- ***/
/*** TEXTES, BALISES, ETC ---------- ***/

/* Lien-tag des utilisateurs */
.mentiontag {
}

/*** ------------------------------- ***/
/*** ELEMENTS FLOTTANTS ------------ ***/

/* Fenêtre popup "recherche" */
.overview {
    background: var(--neutralDark);
    outline-offset: 5px;
    outline: 1px solid var(--black);
    border-radius: 5px;
    border: var(--border);
    padding: var(--spacing);
    position: fixed !important;
    top: 50% !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
}

/* Bouton rechercher */
.overview button[type='submit'] {
    border-radius: var(--xs-radius);
    margin-left: 5px;
    background: linear-gradient(135deg, var(--neutralDark) 33%, var(--co-1), var(--co-2));
    background-size: 350% 120%;
    transition: .7s;
    background-position: 1% 0%;
    background-color: var(--co-1);
      color: var(--black);
}

.overview button[type='submit']:hover 
{background-position: 99% 0;}

.overview .input-wrap input[type="text"] {
width: 100%;
}

.overview .input-wrap {margin-bottom: 5px;display: flex;}

.overview a {
display: block;
margin: var(--spacing) auto 0;
padding: 2px 5px;
border: 1px solid var(--co-1);
border-radius: var(--xs-radius);
width: fit-content;
}

/* Boîte "recherche un utilisateur" */
#find_username {
display: none;
position: fixed;
left: 50%;
width: 450px;
margin-left: -225px;
top: 50%;
margin-top: -125px;
background-color: var(--neutral);
padding: 10px;
border: var(--border);
border-radius: 5px;
}

/* Notiffi CSS */
/* Cache la toolbar défaut */
#fa_toolbar {
display: none;
}

/* Bouton de notification */
#notiffi_button {
  cursor: pointer;
  background: var(--co-2grad);
  color: white;
  border-radius: var(--radius);
  text-transform: uppercase;
    font-size: var(--inter-size);
    font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  position: fixed;
  z-index: 99;
  top: 58px;
  right: 16px;
  height: 35px;
}

/* Conteneur du nombre de notification non lues REMPLI */
.unread_count {
  position: relative;
  background: var(--co-1);
  border-radius: 5px;
  width: 25px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  scale: 1;
  opacity: 1;
  aspect-ratio: 1;
  transition: scale ease-out .2s;
}

/* Conteneur du nombre de notification non lues VIDE */
.unread_count:empty {
  position: absolute;
  scale: 0;
  opacity: 0;
  transition: all ease-out .2s;
}



/* Menu des notifications FERMÉ */
#notiffi_panel {
    --menuSize: 500px;
    width: var(--menuSize);
    position: fixed;
    z-index: 11;
    top: 49px;
    height: 100%;
    right: calc(var(--menuSize) * -1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    border-left: 1px solid var(--black);
    padding: 15px;
    padding-top: 60px;
    opacity: 0;
    visibility: hidden;
    transition: all ease .7s;
    background: linear-gradient(to bottom, var(--neutralDark) 50%, transparent), linear-gradient(to bottom, var(--co-1) 65%, var(--co-1b));
  padding-bottom: 60px;
}

/* Menu des notifications OUVERT */
#notiffi_panel.open {
  right: 0;
  visibility: visible;
  opacity: 1;
}

/* Conteneur des notifications */
.all_notifications {
  width: 100%;
  overflow: auto;
  max-height: 100%;
  background: var(--neutral);
  padding: 10px;
  border-radius: var(--radius);
  -ms-overflow-style: none;
  scrollbar-width: none;

  /* Désactive la barre de défilement dans le contenenur */
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Conteneur des notifications VIDE */
.no_notification {
  text-align: center;
  font-style: italic;
}

/* Conteneur du footer du menu
  (voir toutes les notifications, marquer comme lu, tout supprimer) */
.notiffi_manage {
  width: 100%;
      font-size: var(--inter-size);
      text-align: center;
}

/* Conteneur des bouton d'action des notifications */

  /* Bouton d'action */
  button {
    padding: 2px 10px;
    background: var(--transparent);
    border-radius: 5px;
            font-size: var(--inter-size);
  }

/* Apparence d'une notification */
.notif_text {
    font-size: var(--little-size);
}

.notification {
  display: flex;
  gap: 15px;
  margin-bottom: 5px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: border .2s;
  animation: notiffiFadeIn 0.3s ease-in-out;

  /* Notification au survol */
  &:hover {
    border-color: var(--neutralDarker);
  }
}

/* Animation d'apparition des notifications */
@keyframes notiffiFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Apparence d'une notification NON LUE */
.notification.unread {
  background-color: var(--neutral);
}

/* Conteneur des détails de la notification (avatar, icone) */
.notif_details {
  position: relative;
  align-self: start;
}

/* Conteneur de l'avatar */
.notif_avatar {
  background: var(--neutral);
  height: 55px;
  border-radius: var(--radius);
  aspect-ratio: 1;

  /* Image de l'avatar */
  & img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
  }
}

/* Icone du type de la notification */
.notif_icon {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--neutralDarker);
  width: 18px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 10px;
}

/* Icone lorsque la notification est non lue */
.notification.unread .notif_icon {
  color: var(--neutral);
  background: var(--accentClr);
}

/* Conteneur du texte et la date de la notification */
.notif_content {
  width: 100%;
}

/* Date de la notification */
.notif_time {
  font-size: var(--little-size);
  opacity: .8;
  margin-top: 5px;
}

/* Bouton de suppression de la notification */
.notif_close {
  background: transparent;
  align-self: start;
  font-size: 18px;
  line-height: 0;
  opacity: 0;
  border-radius: 100px;
  aspect-ratio: 1;
  padding: 2px;
  transition: all .3s;
}

/* Affiche le bouton de suppression au survol de la notification */
.notification:hover .notif_close {
  opacity: 1
}

/* Alerte d'une notification */
.notification.alert {
  position: fixed;
  width: 400px;
  align-items: center;
  z-index: 99;
  bottom: 10px;
  right: 10px;
  background: var(--neutralDarker);
  transform: translateY(100%);
  opacity: 0;
  filter: blur(5px);
  transition: all .5s ease-in-out;
}

.notification.alert.up {
  transform: translateY(0%);
  opacity: 1;
  filter: blur(0);
  transition: all .5s ease-in-out;
}

.alert_close {
  background: var(--neutral);
  font-size: 18px;
  line-height: 0;
  border-radius: 100px;
  aspect-ratio: 1;
  padding: 2px;
}

/*** ------------------------------- ***/
/*** ANNONCES DEFILANTES ----------- ***/

/* Barre défilante */
.module {
  border-radius: 5px;
  border: var(--border);
  margin: 10px 0;
  padding: 4px 8px;
}

/* 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;
}

/*** --------------------------------------- ***/
/*** BOUTONS D'INTERACTION ET BARRE DE TEXTE ***/

/* CHAMPS DE TEXTE ---*/
input:is([type="text"], [type="password"], .inputbox),
textarea { border: none;
    border-radius: 5px;
    background: var(--neutralDark);
    color: var(--textColor);
    font-size: var(--normal-size);
    padding: 2px 6px;
}

/* Au focus */
:focus:is(input:is([type="text"], [type="password"], .inputbox), textarea) {
  outline: none;
  border: 1px solid var(--accentClr);
}

/* BOUTONS D'INTERACTION --- *
 * Envoyer, prévisualiser, sauvegarder, aller,... */
input:is([type="submit"], [type="button"], [type="hidden"], [type="reset"]), .button, button {
      border: solid 1px var(--black);
    text-decoration: none;
    color: var(--black);
    text-align: right;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--neutralDark) 33%, var(--co-1), var(--co-2));
    background-size: 350% 120%;
    transition: .7s;
    background-position: 1% 0%;
    background-color: var(--co-1);
  padding: 5px;
}

/* Au survol */
:hover:is(input:is([type="submit"], [type="button"], [type="hidden"], [type="reset"]), .button) {
  background-position: 99% 0;
}

/* Boutons désactivés */
:disabled:is(input:is([type="submit"], [type="button"], [type="hidden"], [type="reset"]), .button) {
  opacity: .5;
  filter: saturate(1);
  cursor: not-allowed;
}

:disabled:hover:is(input:is([type="submit"], [type="button"], [type="hidden"], [type="reset"]), .button) {
  color: inherit;
}

.submit-buttons {
    margin-top: 15px;
    text-align: center;
}

.quickmod {
  margin-bottom: 20px;
}

/* MENUS DEROULANTS --- */
select {
    background: var(--neutral);
    border: none;
    border-radius: var(--radius);
    font-size: var(--normal-size);
    padding: 0 7px;
    color: var(--textColor);
}

select:focus-visible {
  outline: 1px solid var(--accentClr);
}


/*** ------------------------------- ***/
/*** ELEMENTS ESTHETIQUES ---------- ***/

/* Contenur général qui sert généralement de fond et/ou de contour*/
.container {
  background: var(--neutral);
  padding: 10px;
  border-radius: 5px;
}

/* Barre de séparation */
.separator {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--neutralDark);
  clear: both;
  height: 1px;
  width: 100%;
}

hr {
  border: none;
  border-top: var(--border);
}

/* Titre d'un toggle */
summary {
  cursor: pointer;
}

/* Conteneur moins large (les historiques des messages essentiellement) */
.wrapped {
  width: 80%;
  margin: 10px auto;
  clear: both;
}

/* Image/avatar réduit */
.mini_img img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  margin-right: 10px;
  background: var(--neutralDark);
}

/* Permet d'aligner un élément à droite ou à gauche */
.right {
  float: right;
}

.left {
  float: left;
}

.clear {
  clear: both;
}

/* Barre de gestion 
 * Contient des boutons ou des liens spéciaux */
.links_bar {
margin: 25px 0;
    border: 1px solid var(--black);
    border-radius: 5px;
    clear: both;
    align-items: center;
    gap: 5px;
    background: var(--neutralDark);
    display: flex;
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--little-size);
}

/* problème alignement bas de page sujet*/
.links_bar .buttons {
   margin: unset; 
}

.links_bar.linkspa, .links_bar.linksqeel {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr 1fr;
    padding: 3px;
    text-transform: lowercase;
}

.links_bar.linkspa a, .links_bar.linksqeel a {
    text-align: center;
    font-size: var(--little-size);
}

/* supprime si vide */
.links_bar:empty {
  display: none;
}

/* Lien spécial mis en avant */
.specials_links a,
a.specials_links {
  background: var(--neutralDark);
  padding: 2px 6px;
  border-radius: 5px;
}

/* Suppression des liens vides */
.specials_links a:empty,
a.specials_links:empty {
  display: none;
}

/*** ------------------------------- ***/
/*** PAGINATIONS -------------------- ***/

.pagination {
    flex-grow: 1;
    display: flex;
    gap: 3px;
  align-items: center;
}

/*lien unique vers les pages numérotées*/
.pagination span a {
    border: solid 1px var(--black);
    padding: 0px 7px;
    background-color: var(--neutralDarker);
    border-radius: var(--xs-radius);
}

/*survol des liens uniques des pages*/
.pagination span a:hover {
  font-weight: 600;
}

/*lien actif : page sur laquelle vous vous trouvez */
.pagination span strong {
padding: 0px 7px;
    background: var(--black);
    color: var(--white);
    border-radius: var(--xs-radius);
    border: solid 1px var(--white) !important;
}

span.page-sep {
    font-size: 0;
      margin-left: 2px;
}

/*suppression de l'image-lien "aller à la page suivante" */
.page-topic span a:last-child,
.pag-img {
  display: none;
}