/* ================================================================
   THEME "DISCLOSED" — FEUILLE DE STYLE GLOBALE (version optimisée)
   ================================================================
   Ce fichier reprend le CSS d'origine à l'identique visuellement.
   Modifications apportées lors du nettoyage :
     - Ajout de commentaires de section/bloc dans tout le fichier
       pour faciliter la navigation et la maintenance.
     - Suppression des blocs strictement dupliqués (même sélecteur,
       mêmes propriétés répétées deux fois).
     - Fusion des règles qui redéfinissaient un même sélecteur avec
       des propriétés complémentaires (non conflictuelles).
     - Suppression du code mort / invalide (déclarations CSS mal
       formées qui étaient de toute façon ignorées par le navigateur).
     - Correction d'un point-virgule manquant dans la règle `body`
       qui empêchait la couleur de texte (`color`) de s'appliquer.
   Aucun changement de rendu visuel n'est attendu, hormis la
   correction ci-dessus (qui restaure un comportement qui était
   déjà voulu par le code d'origine).
   ================================================================ */

/* ============================================================
   1. VARIABLES GLOBALES (:root)
   Palette de couleurs, polices et dégradés réutilisés partout.
   ============================================================ */
:root {
  /* fonts */
--font1: 'Poppins', sans-serif;      /* police de texte courante */
--font2: 'Motest', serif;            /* police "display" (titres) */
--font3: 'Motest1375', sans-serif;   /* police "display" alternative (gros titres) */
--font4: 'DM Mono', sans-serif;      /* police monospace (stats / dates) */
/* neutrals */
--white:#ECEAF3;
--white1:#e0e0e0;
--white3:#E9EBED;
--dark:#1C1A1F;
--dark1:#292929;
--dark2:#232322;
--dark3:#3d3d3d;
--dark5:#4c4c4c80;   /* gris semi-transparent (fonds de badges de rang) */
--dark4:#636363;
/* accents */
--accent1: #56319A;  /* violet principal */
--accent2: #7901c8;  /* violet/magenta vif */
--accent3: #7b309a;  /* violet secondaire */
--accent4: #BCDF4D;  /* vert-jaune néon */
--accent5: #BCDF4D;  /* vert-ajuen néon */
--accent6: #BCDF4D;  /* alias de --accent4, utilisé dans --grad1 */
/* groups : couleur associée à chaque grade/groupe de membres */
--guests: #888888;
--admin: #D29B52;
--helix:#241146;
--ethereal:#7DD186;
--inde:#C7B790;
--sanguis:#4D4A9A;
--tech:#8C52FF;
--stra:#B366FF;
--ethe:#59A368;
--war:#70CF98;
--conv:#9FE6B3;
--merce:#9C8662;
--gang:#7A674D;
--citi:#a3e170;
/* effects */
--grad1:linear-gradient(45deg,var(--accent1),var(--accent6) 100%);
--grad2:linear-gradient(90deg,var(--dark),var(--dark) 80%);
--grad3:linear-gradient(-90deg,var(--accent1),var(--dark) 80%);
--grad4:linear-gradient(45deg, #D29B52, #7901C9);
--fondocate:linear-gradient(45deg, var(--accent2), var(--accent3), var(--accent4) 80%);
}
/* groups */
.gid-4 {--groups: var(--admin);}
.gid-8 {--groups: var(--sanguis);}
.gid-9 {--groups: var(--tech);}
.gid-10 {--groups: var(--stra);}
.gid-11 {--groups: var(--ethe);}
.gid-16 {--groups: var(--citi);}
.gid-12 {--groups: var(--war);}
.gid-13 {--groups: var(--conv);}
.gid-14 {--groups: var(--merce);}
.gid-15 {--groups: var(--gang);}
.gid-1 {--groups: var(--guests);}

/* ============================================================
   2. IMAGE DE COUVERTURE DE PROFIL (.posth-cover)
   Choisit l'image de fond selon la valeur du champ personnalisé
   "cover" sélectionné par le membre dans son profil.
   ============================================================ */
/* Valeur "mer" dans la boîte de sélection */
.posth-cover.cover-mer {
  background-image: url(../../../images/covers/mer.jpg);
    filter: brightness(0.2) opacity(0.5); width:100%;
}

/* Valeur "foret" */
.posth-cover.cover-foret {
    background-image: url(https://images.unsplash.com/photo-1526779259212-939e64788e3c?fm=jpg);
}

/* Valeur "ville" */
.posth-cover.cover-ville {
    background-image: url(../../../images/covers/ville.jpg);
}

/* Valeur "neon" */
.posth-cover.cover-neon {
    background-image: url(../../../images/covers/neon.jpg);
}

/* Valeur "retro" */
.posth-cover.cover-retro {
    background-image: url(../../../images/covers/retro.jpg);
}

/* Fond de secours pour les vignettes de forum (voir aussi la section
   "FORUM & CATEGORY STYLES" plus bas pour le détail de .row) */
.row.forum-item, li.row.forum-2, li.row.forum-7 {
background: #1c1a1f;
}

/* ============================================================
   3. CASES À COCHER PERSONNALISÉES
   ============================================================ */
/* Style général pour tous les checkbox */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 18px;
    height: 18px;
    border: 2px solid #8a66ff; /* Couleur de bordure */
    border-radius: 4px; /* carré arrondi */
    background-color: #1c1a1f;
    cursor: pointer;
    position: relative;
}

/* Couleur quand coché */
input[type="checkbox"]:checked {
    background-color: white; /* Couleur "checked" */
    border-color: #b499ff;
}

/* Ajout d'un petit ✓ custom */
input[type="checkbox"]:checked::after {
    content: "✔";
    color: black;
    font-size: 12px;
    position: absolute;
    top: -1px;
    left: 2px;
}


/* ============================================================
   4. POLICES CUSTOM (@font-face)
   ============================================================ */
@font-face { font-family: "Motest1375"; src: url(https://files.jcink.net/uploads2/entouragethemes/Mostest_1375.otf) format("opentype"); }
@font-face {font-family: "Motest"; src: url(https://files.jcink.net/uploads2/entouragethemes/MostestVF.ttf) format("truetype");}

/* ============================================================
   5. SCROLLBAR / SÉLECTION DE TEXTE (spécifique navigateur)
   ============================================================ */
::-webkit-scrollbar {
    background-color: var(--dark3);
    height: 8px;
    width: 6px;
    border: 3px solid var(--dark);
}
::-webkit-scrollbar-thumb {
    background-color: var(--accent1);
    height: auto;/* --- base --- */
#thread .thread_status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none !important;
    font-size: 16px !important;
}
/* Police FA 7 FREE */
#thread .thread_status::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    line-height: 1;
    content: "\f4ad"; /* comment-dots — remplace l'ancien "commenting" (f27a), retiré depuis la v5 */
}
/* --- NOUVEAUX MESSAGES --- */
#thread .thread_status.newfolder::before,
#thread .thread_status.newhotfolder::before,
#thread .thread_status.dot_newfolder::before,
#thread .thread_status.dot_newhotfolder::before {
    content: "\f4ad"; /* comment-dots (solid) */
    font-weight: 900;
    color: #a45cff; /* violet flashy */
}
/* --- ANCIENS MESSAGES / LUS --- */
#thread .thread_status.folder::before,
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_folder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "\f4ad"; /* comment-dots (regular/light look) */
    font-weight: 400;
    color: #777;
}
/* --- SUJET POPULAIRE (nouveau) --- */
#thread .thread_status.newhotfolder::before,
#thread .thread_status.dot_newhotfolder::before {
    content: "\f06d"; /* fire */
    font-weight: 900;
    color: #ff4d4d;
}
/* --- SUJET POPULAIRE (ancien) --- */
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "\f7e4"; /* fire-flame-curved */
    font-weight: 900;
    color: #ffaa44;
}
/* --- SUJET FERMÉ --- */
#thread .thread_status.closefolder::before {
    content: "\f023"; /* lock */
    font-weight: 900;
    color: #ff4545;
}
/* --- LISTE DES SUJETS : icône + petit dot --- */
#thread .thread_status[class*="dot_"] {
    position: relative;
    padding-right: 6px;
}
#thread .thread_status[class*="dot_"]::after {
    content: "\f192"; /* circle-dot */
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #BCDF4D;
}
/* Légende : "Vous avez participé à ce sujet" → dot seul */
.thread_status_dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.thread_status_dot::before {
    content: "\f192"; /* circle-dot */
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
    font-size: 13px;
    color: #BCDF4D;
}
/* Masquer l'icône de sujet populaire (nouveau & ancien) */
#thread .thread_status.newhotfolder::before,
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_newhotfolder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "" !important;
}
/* Masquer aussi l'icône dans la légende */
.thread_legend .thread_status.newhotfolder::before,
.thread_legend .thread_status.hotfolder::before {
    content: "" !important;
}
.forumreplylast .lastreplyinfo {
    display: block;
}
    width: 11px;
    background: var(--grad1);
    border-radius: 15px;
}
::-webkit-scrollbar-track {
  background: var(--dark1);
}
::selection { background: var(--accent2); color: var(--white1);}

/* ============================================================
   6. RESET & STYLES GLOBAUX
   ============================================================ */
/* Désactive les transitions par défaut du navigateur : chaque
   composant réactive ses propres transitions au cas par cas
   (voir les règles `transition:` un peu partout dans ce fichier). */
* {
    transition-duration: 0ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1)
}
*,:before,:after {
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
html {scroll-behavior: smooth;}
body {
    line-height: 1.4;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #151515;
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-attachment: fixed;
    background-size: 90%;
    background-position: center;
    /* NOTE: point-virgule manquant ci-dessus dans le fichier d'origine
       ("background-position: center color: #d6d6d6") : la déclaration
       `background-position` devenait invalide et `color` n'était donc
       jamais appliqué. Corrigé pour que la couleur de texte par défaut
       (#d6d6d6) s'applique bien au corps de page. */
    color: #d6d6d6;
    font-family: 'Poppins', 'Montserrat', 'Roboto', Arial, Sans-Serif;
    font-size: 11px;
    height: 100%;
    text-rendering: optimizeLegibility;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
/* Links : blanc dans tous les états (pas de style visited/hover distinct) */
a:link, a:active {color: white; text-decoration: none;}
a:visited {color:white; text-decoration: none;}
a:hover {color: white; text-decoration: none;}

/* ============================================================
   7. CONTENEURS DE MISE EN PAGE (wrapper / container)
   ============================================================ */
#wrapper {
    margin: 0 auto;
    padding: 0;
    width: 1372px;
    background: #151515;
}
#container {
    color: var(--white1);
    text-align: left;
    line-height: 1.4;
    margin: 0 auto;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    min-width: 990px;
    width: 1300px;
}
/* ============================================================
   8. COMPOSANTS DE FORMULAIRE (boutons, champs, select)
   ============================================================ */
/* Bouton générique (dégradé violet -> vert-jaune) */
button,input[type="submit"],a.button,.button {
  background: var(--grad1);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--font2);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}
button:hover,input[type="submit"]:hover,a.button:hover {
  background: var(--accent1);
  color: var(--white);
  filter: brightness(1.1);
}
/* Champs texte / mot de passe / email / textarea / select */
input[type="text"],input[type="password"],input[type="email"],textarea,select {
  background-color: var(--dark2);
  color: var(--white1);
  border: 1px solid var(--dark3);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--font1);
  font-size: 14px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
input:focus,textarea:focus,select:focus {
  outline: none;
  border-color: var(--accent1);
  background-color: var(--dark1);
}
/* Redéfinition spécifique du <select> (fond sombre, bordure accentuée) */
select {
    background-color: var(--dark);
    border-color: var(--accent1);
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
    font-family: var(--font1),'Roboto',sans-serif;
    font-weight: 400;
    padding: 8px 0 7px;
    vertical-align: middle
}
/* Skin des boutons natifs du forum (.button1/.button2 = classes générées
   par le logiciel de forum) : fond sombre + bordure violette au repos,
   qui s'illumine au survol (règle suivante). */
input[type="submit"],.button,.button1,.button2 {
    background-color: var(--dark);
    color: var(--white)!important;
    border-radius: 10px!important;
    box-shadow: 0 0 0;
    font-family: var(--font1);
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid var(--accent1);
    transition: 1s
}

input[type="submit"]:hover,.button:hover,.button1:hover,.button2:hover {
    background-color: var(--accent1);
    box-shadow: 0 0 19px var(--accent1),0 0 5px var(--accent1);
    transition: 1s
}

input[type="submit"][class^="ion-"]:before,.button[class^="ion-"]:before,.button1[class^="ion-"]:before,.button2[class^="ion-"]:before {
    font-size: 17px;
    margin-right: 12px;
    vertical-align: -2px;
    color: var(--accent2)
}
/* Barre d'outils générique (ex : en-tête de liste avec recherche) */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dark1);
  border-bottom: 1px solid var(--dark3);
  padding: 10px 20px;
  border-radius: 10px;
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.searchbar input[type="text"] {
  width: 200px;
}

.searchbar button {
  background: var(--accent1);
  border-radius: 8px;
  color: var(--white);
  padding: 6px 12px;
  font-size: 13px;
}

/* ============================================================
   9. UTILITAIRES & ENHANCEMENTS DIVERS
   ============================================================ */
/* Tooltip généré par un script tiers (survol des liens, mentions...) */
#s-m-t-tooltip {
    max-width: 300px;
    z-index: 99999999999!important;
    margin: 24px 14px 7px 12px;
    border-radius: 35px;
    padding: 8px;
    background: var(--dark1);
    border: 1px solid var(--dark2);
    font-family: var(--font1),Calibri,Verdana,Geneva,sans-serif;
    font-size: 10px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--white1);
    font-weight: 600;
}

/* Animations réutilisables (marquee de texte, apparitions...) */
@keyframes slide {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    15%,30% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    45%,60% {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%)
    }
    75%,90% {
        -webkit-transform: translateY(-300%);
        transform: translateY(-300%)
    }
    100% {
        -webkit-transform: translateY(-400%);
        transform: translateY(-400%)
    }
}
@-webkit-keyframes slide {
 0%{ -webkit-transform: translateY(0); transform: translateY(0); }
 15%,30%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); }
 45%,60%{ -webkit-transform: translateY(-200%); transform: translateY(-200%); }
 75%,90%{ -webkit-transform: translateY(-300%); transform: translateY(-300%); }
 100%{ -webkit-transform: translateY(-400%); transform: translateY(-400%); }
}
@keyframes slideleft {
  0% {left:0; }
  100% {left:-728px;}
}
@keyframes slideup {
  0% {bottom:-25px;}
  100% {bottom:0;}
}
@keyframes fadein {
  0% {opacity:0;}
  100% {opacity:1;}
}
/* (le @keyframes "fadein" était dupliqué à l'identique deux fois : doublon supprimé) */
@keyframes hxafter {
    0% {opacity: 0} 50% {opacity: 0} 51% {opacity: 1} 100% {opacity: 1}
}
/* Texte avec image/dégradé "découpé" dans les lettres (background-clip: text) */
.gradient-text {
    background-color: red;
    background-image: url(https://i.pinimg.com/1200x/4a/e8/a3/4ae8a37fdedaf4fc8a930eef46f06dc7.jpg);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent
}

.gradient-text2 {
    background-color: red;
    background:var(--grad1);
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent
}

/* ============================================================
   10. EN-TÊTE DU SITE (#page-header)
   Barre de navigation principale : mini-avatar/switcher de compte,
   menu (.mnav), icônes de nav, bouton scroll haut/bas (.updown) et
   grand visuel d'accueil à onglets (.mheader / .contab1...).
   ============================================================ */
#page-header {position: relative;}

.top-name {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.top-name i {
    color: var(--dark4);
    font-size: 18px;
    margin-right: 6px;
}
/* Grille avatar + menu, en haut de page */
.nav-switch {
    height: 90px;
    width: 64vw;
    overflow: hidden;
    display: grid;
    grid-template-columns: 65px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
}
.navswitchtop {}
/* Avatar utilisateur découpé (mask SVG en forme de badge) dans le switcher de compte */
.swiconuser { grid-area: 1 / 1 / 2 / 2; width:65px; height:90px; border-radius:5px; background:black; overflow:hidden; object-fit: cover;
-webkit-mask-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2080%20120%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M12.3%2C118.9c-2.7%2C2.5-6.9%2C2.8-9.7%2C0.4C1.1%2C118%2C0%2C116%2C0%2C113.6V7.4C0%2C3.3%2C3.3%2C0%2C7.4%2C0h56.4c4.1%2C0%2C7.4%2C3.3%2C7.4%2C7.4v53.8c0%2C2.5-1.1%2C4.9-2.9%2C6.6L12.3%2C118.9z%22/%3E%3C/svg%3E);
mask-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2080%20120%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M12.3%2C118.9c-2.7%2C2.5-6.9%2C2.8-9.7%2C0.4C1.1%2C118%2C0%2C116%2C0%2C113.6V7.4C0%2C3.3%2C3.3%2C0%2C7.4%2C0h56.4c4.1%2C0%2C7.4%2C3.3%2C7.4%2C7.4v53.8c0%2C2.5-1.1%2C4.9-2.9%2C6.6L12.3%2C118.9z%22/%3E%3C/svg%3E);
-webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;} 
.swiconuser img { width: 100%; filter:greyscale(1);}
.navswitchtop:hover .switcheru button { opacity: 1; transition: 1s; transform:translateY(0);} 
.switcheru { grid-area: 1 / 1 / 2 / 2; height:60px; width:60px; z-index:1; display:flex; align-items:center; justify-content:center;}
.switcheru button { transform:translateY(-80px); height:35px; width:35px; background:var(--dark); color:var(--white); font-size:15px; display:flex; align-items:center; justify-content:center; border-radius:5px; transition:1s; opacity:0; }
/* Barre de menu principale (dégradé sombre) */
.mnav {
    width: 89.5%;
    background: var(--grad2);
    height: 50px;
    border-radius: 5px 10px 25px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 10px;
    border: 1px solid var(--dark3);
}
/* Logo/icône du nom de forum dans la barre de menu */
.fnameico {
display: inline;
    background-image: url(https://i.imgur.com/Dd0CFPs.png);
    /* background-size: 50%; */
    background-repeat: no-repeat;
    background-position: 50%;
    /* background-color: #685584; */
    border-radius: 100px;
    /* height: 80px; */
    width: 105px;
    padding: 10px;
    /* filter: invert(1);*/
}
/* Icônes de navigation (liste horizontale) : effet de "contour" au survol.
   NOTE : ce sélecteur .mnav-icons est redéfini plus loin (section navbar,
   avec la variante liens+labels) — les deux versions coexistent selon le
   balisage HTML réellement utilisé (liste <li> ici, liens <a> plus bas). */
.mnav-icons { display:flex; gap:40px; color:var(--accent2); list-style:none;}
.mnav-icons li i { transition:0.5s linear; } a.mainmenu img { display: none;}
.mnav-icons li:hover i { -webkit-text-stroke: 1px; -webkit-text-fill-color: transparent; transition:0.5s linear; -webkit-animation: swell 0.1s cubic-bezier(0.68, -0.55, 0.25, 1.55) 1; animation: swell 0.1s cubic-bezier(0.68, -0.55, 0.25, 1.55) 1;}
/* Menu déroulant blanc (sous-navigation contextuelle) */
.navigation {
    position: absolute;
    left: 100px;
    top: 50px;
    background: white;
    border-radius: 0 0 10px 10px;
    padding: 8px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: var(--font2);
    text-transform: uppercase;
    font-size: 10px;
    color:black;
}
.mnav a.fname, a.fname {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    color: black;
    text-decoration: none;
    transition: 1s;
}
a.fname:hover {color:black;}
.navigation .fa-solid {opacity: 1; margin: 0 4px;}
span.active {color:black;}

/* Bouton flottant "remonter/descendre" la page, devient fixe au scroll (.is-fixed) */
.updown {
    z-index: 999999!important;
    transition: 1s;
    width: 45px;
    height: 145px;
    position: absolute;
    right: 50px;
    top: 275px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-right:-10px;
}
.updown.is-fixed {
    position: fixed;
    top: 92px;
    right: 20px;
}
div#scroll-controls button {background: transparent;}
.updownsvg { grid-area: 1 / 1 / 2 / 2; }
/*.updown.stickym { right: 50px; top: 50px; transition: 1s;}*/
.updownnav { grid-area: 1 / 1 / 2 / 2; z-index:1; display:flex; flex-flow:column; align-items:center; color:var(--white); gap:20px; justify-content:center; padding-left:3px; font-size:15px;}
/*.sticky-nav { width:90%; position:fixed; top:-10px; z-index:99999!important; left:0; right:0; margin:auto; padding:5px 0; transition:1s; }*/

/* Grand visuel d'accueil avec onglets (.tab-links) et contenu par onglet
   (.contab1 = présentation, .tab1staff = équipe, .tab1links = liens rapides) */
.mheader {width: 1300px; height: 645px; margin: 20px auto; border-radius: 20px; padding: 0 5px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0; grid-row-gap: 0 }
.mheadersvg {grid-area: 1 / 1 / 2 / 2 }
.mheader svg {fill: var(--dark); stroke: var(--dark3); fill-opacity: 1; stroke-opacity: 1; stroke-width: 1px }
.mheader-slider {grid-area: 1 / 1 / 2 / 2; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 35px; grid-column-gap: 0; grid-row-gap: 0 }
.header-slider {grid-area: 1 / 1 / 2 / 2; margin: 20px 20px 5px }
.header-navslider {grid-area: 2 / 1 / 3 / 2; padding-left: 295px }
.tab-content {display: none; width: 100%; height: 100% }
.tab-content.active {display: block }
.tab-links li {display: inline-block; cursor: pointer; margin: 0 5px; background: var(--dark4); height: 10px; width: 10px; border-radius: 25px; transition: 1s }
.tab-links li.active {width: 40px; background-color: var(--accent3); transition: 1s }
/* Onglet "présentation" : nom du forum en vertical + liens + description + staff */
.contab1 {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 200px 400px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    background-image: var(--fondotab1);
    background-repeat: no-repeat;
    background-size: 34%;
    background-position: 155px 91px
}
.tab1name {grid-area: 1 / 1 / 2 / 2 }
.tab1name h5 figuri {
    display: block;
    height: 35px;
    width: 35px;
    background-image: url(https://i.servimg.com/u/f22/20/61/57/05/recurs10.png);
    position: absolute;
    transform: translate(296px,-39px);
    background-size: contain
}
.tab1name h5 {
    font-size: 28px;
    color: #fff;
    display: block;
    width: 500px;
    height: 50px;
    transform: rotate(-90deg) translate(-321px,-214px);
    font-family: var(--font3);
    text-transform: uppercase
}
.tab1name .linksnheader {
    width: 500px;
    height: 50px;
    transform: rotate(-90deg) translate(-270px,-150px);
    font-family: var(--font1);
    text-transform: uppercase;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: Space-between;
    text-shadow: 1px 1px 5px black;
}

/* Boutons de liens rapides dans l'en-tête (.linksnheader) et bouton
   "néon" générique (.btn-neon), avec sa variante active/glitch (.acti).
   NETTOYAGE : ce bloc contenait, dans le fichier d'origine, plusieurs
   redéfinitions successives des mêmes sélecteurs (probablement issues
   d'itérations successives) :
     - un premier `.btn-neon` invalide (`border: 2px solid color:var(...)`,
       parenthèse en trop sur `background-color: red)`) qui était de toute
       façon ignoré par le navigateur → supprimé ;
     - `.linksnheader a i` et `a.btn-neon.acti` déclarés deux fois à
       l'identique → doublon supprimé ;
     - `.linksnheader a:hover i` déclaré deux fois avec une couleur
       différente (var(--dark) puis white) : la seconde règle gagnait
       déjà la cascade, seule cette valeur finale (white) est conservée. */
.linksnheader a { background:var(--dark); border:1px solid #44365E; border-radius:10px; font-family:Var(--font2); color:var(--white); width:240px; padding:10px 15px; text-decoration:none; display:flex; align-items:center; justify-content:space-between; transition:1s;}

.linksnheader a i {color: #44365E; }
.linksnheader a:hover i {color: white; transition: 1s }

/* Bouton néon (contour transparent, se remplit au survol) */
.btn-neon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    cursor: pointer;
    background-color: transparent;
    color: #fff;
    transition: all .3s;
    font-family: inherit;
}

.btn-neon:hover {
    background-color: #44365E;
}

/* Variante "active" du bouton néon : image de fond façon glitch */
a.btn-neon.acti {
    background-image:url(https://i.pinimg.com/736x/ca/99/cb/ca99cb81dcc035d19478adf113154d87.jpg);
    background-size: cover;
    border: 1px solid white;
    filter: contrast(0.80);
}

/* Optionnel : petit style pour la label pendant le glitch */
.glitch-text .label {
    display: inline-block;
    min-width: 70px; /* pour éviter que le bouton saute trop */
}



/* Colonne centrale de l'onglet "présentation" (visuel + légende).
   NOTE : .tab1image est redéfini plus loin dans le fichier (section
   "BLOC IMAGE AU CENTRE") avec des propriétés complémentaires (taille,
   fond, bordure) qui viennent s'ajouter à celles ci-dessous — les deux
   blocs ont été laissés séparés pour ne pas risquer de changer l'ordre
   de cascade sur les propriétés communes. */
.tab1image {
    grid-area: 1 / 2 / 2 / 3;
    visibility: visible;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 100px;
    grid-column-gap: 0;
    grid-row-gap: 0
}
.text1image {
    grid-area: 1 / 1 / 2 / 2;
    visibility: visible;
    pointer-events: none;
    width: 200px;
    height: 100px;
    background-image: var(--fig1);
    background-size: 100%;
    background-position: 50%;
    transform: translate(194px,520px);
    background-repeat: no-repeat
}
.text1info {
    text-transform: uppercase;
    grid-area: 2 / 1 / 3 / 2;
    font-family: Var(--font1);
    font-size: 15px;
    letter-spacing: 4px;
    padding-top: 20px;
    color: var(--white1);
    line-height: 150%;
    font-weight: 600;
    padding-left: 5px;
        z-index:8;
}
.text1info span.gradientete {
    display: flex;
    width: fit-content;
    background: #151417;
    border-radius: 10px;
    padding: 7px 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: -15px;
    font-family: var(--font2);
    font-size: 15px;
    font-weight: 100;
    margin-bottom: 14px;
    border: 2px solid #3D3D3D;
}
/* Colonne de droite de l'onglet : liens rapides (.tab1links) */
.tab1right {
    grid-area: 1 / 3 / 2 / 4;
    display: grid;
    grid-template-columns: 295px 1fr;
    grid-template-rows: repeat(2,1fr);
    grid-column-gap: 0;
    grid-row-gap: 0
}
.tab1links {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    flex-flow: column;
    gap: 10px;
    margin-left: 0;
    padding-top: 15px;
    padding-right: 15px
}
.tab1links a {
    height: 35px;
    border: 1px solid var(--dark3);
    border-radius: 5px;
    padding: 10px;
    color: var(--white);
    font-family: var(--font2);
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #151417;
}
.tab1links a i {
    font-size: 16px;
    color: white;
    transition: .5s linear
}
.tab1links a:hover i {
    -webkit-text-stroke: .5px;
    -webkit-text-fill-color: transparent;
    transition: .5s linear;
    -webkit-animation: swell .1s cubic-bezier(0.68,-0.55,0.25,1.55) 1;
    animation: swell .1s cubic-bezier(0.68,-0.55,0.25,1.55) 1
}
.tab1links a:hover {background-image:url(https://i.pinimg.com/1200x/4a/e8/a3/4ae8a37fdedaf4fc8a930eef46f06dc7.jpg); color:black; background-size:cover;}
.tab1links a:nth-child(odd) i {color:white}
/* Texte de description du forum (colonne de gauche) */
.tab1descri {grid-area: 1 / 1 / 3 / 2; margin-top: 90px; padding: 0 10px }
.tab1descri h5 {color: var(--accent1); font-family: var(--font3); font-size: 14px }
.tab1descri h5 b {
    font-family: var(--font3);
    font-size: 15px;
    color: var(--accent2);
    display: block
}

.tab1descri p {
    font-family: var(--font1);
    line-height: 156%;
    color: var(--white);
    text-align: justify;
    font-size: 11px;
    padding-right: 15px;
    margin-right: 5px;
    margin-top: 20px;
    overflow: hidden;
    height: 420px;
    margin-bottom: -10px
}

.tab1descri p b {display: block; margin-bottom: 10px }
.tab1descri p i {background-image:url(https://i.imgur.com/FwNihtm.jpeg); padding: 0 5px; border-radius: 3px; color: #1c1a1f; font-weight:bold;}
.tab1descri p a i {color: var(--accent3); background: transparent }
/* Grille des membres du staff mis en avant (mosaïque irrégulière via grid-area) */
.tab1staff {
    grid-area: 2 / 2 / 3 / 3;
    margin-top: -30px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(5,1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px
}
.staff.uno {grid-area: 1 / 1 / 3 / 3 }
.tab1staff::before {
    content: '[ STAFF ]';
    font-family: var(--font2);
    color: var(--white);
    letter-spacing: 2px;
    margin-left: -22px
}
.staff.dos {grid-area: 2 / 2 / 4 / 4; margin: -20px 15px -20px -15px }
.staff.tres {grid-area: 3 / 1 / 5 / 3; margin-top: 25px; margin-bottom: -25px; margin-left: 15px }
.staff.cuatro {grid-area: 4 / 2 / 6 / 4; margin: 5px -15px -5px 25px }
.staff.cuatro::before {content: ''; height: 75px; width: 100px; background: var(--fig2); position: absolute; transform: translate(-113px,64px); /* background-size: 100%; */ background-repeat: no-repeat }
.staff {
    width: 200px;
    height: 125px;
    border-radius: 10px;
    outline: 1px solid var(--dark4);
    background-image: url(https://placehold.co/200x125/222/999.png);
    color: #fff;
    box-shadow: 0 0 10px var(--dark);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    overflow: hidden
}
.staffhide {
    grid-area: 1 / 1 / 2 / 2;
    background: linear-gradient(90deg,var(--accent1),transparent 80%);
    padding: 20px;
    font-family: var(--font2);
    font-size: 12px;
    opacity: 0;
    transition: 1s
}
.staffhide h5 {font-size: 15px }
.staffhide a {
    font-size: 20px;
    color: var(--accent4);
    margin-bottom: 15px;
    display: block
}
.staff:hover .staffhide {opacity: 1; transition: 1s }
/* Widget "Topsites" (annuaire de sites partenaires) */
.topsites-widget {
    width: 1275px;
    margin: 0 auto 20px;
    height: 70px;
    border-radius: 10px;
    border: 1px solid var(--dark3);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
        background: #1C1A1F;
}
.topsites-left a {
    transition: 1s;
    background: #1C1A1F;
    border: 1px solid var(--white);
   /* outline: 3px solid vaR(--accent2);*/
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 5px;
    font-family: var(--font3);
    color: var(--white)
}
.topsites-left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}
.topsites-right a {transition: 1s }
.topsites-right {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-left: 15px
}
.topsites-right img {
    transition: 1s;
    border: 1px solid var(--dark3);
    border-radius: 5px;
    width: 100px;
    height: 50px
}
.topsites-widget a:hover {transform: scale(1.1); transition: 1s }


/* ============================================================
   11. WIDGET "GUIDEBOOK" (page d'accueil)
   3 colonnes : derniers commentaires du guestbook (.guide-replies),
   liens/évènements du forum (.guide-links / .guide-events / .guide-news),
   membre du mois (.guide-win) et recherche rapide (.guide-search).
   ============================================================ */
.guidebook-widget { width: 1300px; margin: 0 auto 0; display: grid; grid-template-columns: 400px 500px 400px; grid-template-rows: 320px 59px 230px; grid-column-gap: 0px; grid-row-gap: 0px; }
/* Colonne 1 : derniers messages du guestbook */
.guide-replies { grid-area: 1 / 1 / 2 / 2; padding:20px; margin-right:-50px; border:2px solid var(--dark2); border-radius:20px 0 0 20px; border-right:0; gap:10px; display:flex; flex-flow:column;}
/* Une entrée de commentaire du guestbook, avec icône colorée selon le groupe (--group-color) */
.temita { background:linear-gradient(75deg, #1c1a1f, var(--dark)); border-radius:10px; border:2px solid var(--dark3); padding:10px; height:70px; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 32px 15px; grid-column-gap: 15px; grid-row-gap: 0px;margin-bottom: 10px;}

.temicon {
    grid-area: 1 / 1 / 3 / 2;
    background: linear-gradient(135deg, var(--group-color, var(--accent1)), color-mix(in srgb, var(--group-color, var(--accent1)) 50%, black));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

/* Signature de l'auteur du commentaire, colorée par groupe */
.temiautor a {
    font-size: 1em;
    font-family: var(--font1);
    line-height: 100%;
    color: var(--group-color, var(--white));
}
.temiautor { grid-area: 2 / 2 / 3 / 3; font-size:0.75em; color:var(--white); font-family:var(--font1); text-transform:uppercase; display: flex; align-items: center; justify-content: flex-end; gap: 5px; line-height:100%;}
/* (le second `.temiautor a` était un doublon sans propriété nouvelle : supprimé) */
#comments_scroll_div:after { display:none!important; }
/* Colonne 2 : visuel illustratif + gros liens (Discord, règlement...) */
.guide-links { grid-area: 1 / 2 / 2 / 3; border-top:2px solid var(--dark2); border-bottom:2px solid var(--dark2); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 120px; grid-column-gap: 0px; grid-row-gap: 0px; }
.guide-image { grid-area: 1 / 1 / 3 / 2; height: 320px; width: 100%; background: var(--fondoguide); background-size: 80%; background-position:66px 68%; background-repeat: no-repeat; margin-top: -1px; filter:grayscale(1);}
.guide-biglinks { grid-area: 2 / 1 / 3 / 2; position:relative; z-index:2; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; margin-left:40px; margin-right:-40px; }a.guidelink { grid-area: 1 / 1 / 3 / 2; font-family:var(--font3); padding-top:15px; line-height:100%; font-size:45px; color:var(--white); word-break:break-all; width:400px; text-transform:uppercase; text-decoration:none; text-shadow: 0 0 2px var(--dark);}a.discordlink { grid-area: 2 / 1 / 3 / 2; font-size:10px; background:var(--dark); border:1px solid var(--accent4); height:27px; border-radius:5px; color:var(--white); font-family:var(--font1); text-decoration:none; width:fit-content; padding:0 15px; display:flex; align-items:center; justify-content:center; letter-spacing:5px; text-transform:uppercase; font-weight:700; transform:translate(25px,27px); }a.biglinkicon { grid-area: 1 / 2 / 3 / 3; background:var(--grad1); border-radius:100px; height:80px; width:80px; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:30px; transform:translate(-58px,48px); border:1px solid var(--dark); position:relative; z-index:1;}
.guide-links::after { content: ""; position: absolute; width: 100px; height: 320px; transform: skewX(-10deg) translate(450px, -2px); background: var(--dark1);}
/* Colonne 3 : prochains évènements */
.guide-events { grid-area: 1 / 3 / 2 / 4; background:var(--dark1); border-radius:0 20px 20px 0; position:relative; z-index:1; display: grid; grid-template-columns: 1fr; grid-template-rows: 70px 1fr 120px; grid-column-gap: 0px; grid-row-gap: 5px;}
.guide-events h6 { grid-area: 1 / 1 / 2 / 2; display:flex; align-items:center; justify-content:flex-end; font-family:var(--font3); font-size:22px; text-transform:uppercase; line-height:100%; color:#c9c2d2; text-align:right; margin-right:25px; margin-left:-20px; word-spacing:-10px; font-weight:100;}
.event-text { grid-area: 2 / 1 / 3 / 2; font-family:var(--font1); font-size:0.9em; color:var(--white); text-align:justify; margin-right:20px;}
.event-text a { background:var(--grad1); border-radius:5px; text-decoration:none; padding:1px 5px; color:var(--dark); text-transform:uppercase; font-weight:600; font-size:0.8em;}
.event-ima { grid-area: 3 / 1 / 4 / 2; border-radius:10px; margin-right:15px; margin-left:-25px; margin-bottom:15px; border:2px solid var(--dark1); background-size:cover; background-position:center;}
/* Bandeau "news" défilant en bas du widget (scrollbar masquée sur tous
   navigateurs — les 2 déclarations scrollbar-width/::-webkit-scrollbar
   qui étaient séparées plus bas dans le fichier d'origine ont été
   fusionnées ici directement dans .guide-news). */
.guide-news {grid-area: 2 / 1 / 3 / 3; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; height:60px; overflow:hidden; padding:8px 8px; border-radius:10px; background:#323135; border:1px solid var(--dark3); margin-top:15px; scrollbar-width: none; /* Firefox */}
.guide-news::-webkit-scrollbar { display: none; /* Chrome / Edge */ }
.news-icon { grid-area: 1 / 1 / 2 / 2; background:#d29b52; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:5px; color:var(--white); font-size:22px;}
/* Piste défilante des actus (voir aussi plus bas dans le fichier une
   redéfinition complémentaire de .news-slider pour l'affichage vertical
   avec une fine scrollbar visible — cette redéfinition n'entre pas en
   conflit car `display:none` ci-dessous reste prioritaire) */
.news-slider {
  grid-area: 1 / 2 / 2 / 3;
  width: 590px;
  height: 50px;
  overflow-y: scroll;  /* était hidden */
  position: relative;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE ancien */
}

.news-slider::-webkit-scrollbar {
  display: none;                  /* Chrome / Edge / Safari */
}
.news-slider ul { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 1s ease;}
.news-slider li { height:40px; flex: 0 0 600px; font-family:var(--font1); color:var(--white); font-size:0.9em; padding: 3px 115px 5px 0; box-sizing: border-box; margin:0 2px; line-height:150%; overflow:hidden;}
.news-slider li b { background:var(--grad1); padding:1px 5px; border-radius:3px;}

/* Fond décoratif + bloc "membre du mois" */
.guide-back { grid-area: 2 / 1 / 4 / 4; background-image:url(https://i.imgur.com/VZahfvQ.png); background-size:100%; background-position:50%; background-repeat:no-repeat; margin-top:-24px;}/* WINNER OF MONTH */.guide-win { grid-area: 3 / 1 / 4 / 2; position:relative; z-index:1; display: grid; margin-top:25px; height:165px; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding:10px; border-radius:10px 0 0 10px; background:linear-gradient(45deg, var(--dark1), transparent 70%); }
.win-ima { grid-area: 1 / 1 / 3 / 2; border:1px solid var(--dark3); padding:10px; border-radius:10px; background:#1b191e; margin-bottom:4px;}
.winner-ima { background-size:cover; border-radius:10px; border:1px solid var(--dark3); height:100%; width:100%;}
.win-title { grid-area: 2 / 2 / 3 / 3; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; align-items:center; justify-content:center; padding:20px;}
.win-title h6 { grid-area: 1 / 1 / 2 / 2; color:var(--dark3); font-size:30px; font-family:var(--font3); text-transform:uppercase; line-height:100%;}
.win-title b { grid-area: 1 / 1 / 2 / 2; font-size:10px; text-align:center; font-family:var(--font2); letter-spacing:2px; text-transform:uppercase; color:var(--white); position:relative; z-index:1;}
.win-name { grid-area: 1 / 2 / 2 / 3; display: grid; grid-template-columns: 65px 1fr; grid-template-rows: 1fr; grid-column-gap: 10px; grid-row-gap: 0px;}
.win-name i { grid-area: 1 / 1 / 2 / 2; font-size:50px; color:var(--accent1); margin-left:20px; margin-top:20px;}
.win-name h6 { grid-area: 1 / 2 / 2 / 3; display:flex; flex-flow:Column; align-items:center; justify-content:center; color:var(--white); font-family:var(--font1); font-size:30px; text-transform:uppercase; line-height:100%; padding-top:10px;}
.win-name h6 b { color:Var(--accent2);}
/* Grille de recherche rapide par thème (mini-vignettes .gsearch) */
.guide-search { grid-area: 2 / 2 / 4 / 4; position:relative; z-index:1; display:flex; flex-flow:row wrap; gap:10px; padding:30px 15px; margin-left:180px;}
.gsearch { width:129px; height:205px; background:red; border-radius:10px; outline:1px solid var(--dark3); border:5px solid var(--dark); display: grid; grid-template-columns: 1fr; grid-template-rows: 30px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.gsearch:hover a { transform:scale(1.5) translate(1px, 1px); transition:1s;}
.gsearch:hover .search-text { background:linear-gradient(0deg, var(--dark) 50%, transparent); transition:1s;}
.gsearch a { grid-area: 1 / 1 / 2 / 2; background:var(--grad1); transition:1s; height:30px; width:30px; border-radius:5px 0; color:var(--white); display:flex; align-items:center; justify-content:center; font-size:15px;}
.search-text { grid-area: 2 / 1 / 3 / 2; font-family:var(--font1); transition:1s; font-size:12px; line-height:100%; padding:0 10px 10px; text-align:center; color:var(--white); background:linear-gradient(0deg, var(--dark) 20%, transparent); text-transform:uppercase; display:flex; align-items:center; justify-content:flex-end; flex-flow:column;}
.search-text b { font-family:var(--font2); color:#624691; font-size:10px; margin-top:2px;}
/* ============================================================
   12. WIDGET STATISTIQUES DU FORUM (.mystats)
   4 colonnes x 2 rangées : connectés (.onlinenow), image (.imagestats),
   groupes (.groupblock), derniers inscrits (.lastuserblock), records de
   connexion (.pastblock), crédits (.credits) et affiliés (.affiliates).
   ============================================================ */
.mystats {
    width: 1300px;
    border-radius: 35px;
    margin: 70px auto 10px;
    min-height: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 300px 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border: 1px solid var(--dark3);
    position: relative;
	    background: #1c1a1f;
	    margin-top: -80px;
}
/* Liste des membres actuellement connectés */
.onlinenow {grid-area: 1 / 1 / 2 / 4; background: url(https://i.servimg.com/u/f22/20/61/57/05/recurs14.png); width: 900px; background-repeat: no-repeat; background-size: 830px; overflow: hidden; border-top-left-radius: 30px; background-position: -2px -2px; display: grid; grid-template-columns: 581px 1fr; grid-template-rows: 50px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.onlinenow h5 { grid-area: 1 / 1 / 2 / 2; font-family:var(--font2); height:90px; font-size:31px; line-height: 26px; font-weight:100; color:var(--accent1); padding-top:20px; padding-left:20px; width:265px;}
.onlinenow h6 {grid-area: 1 / 2 / 2 / 3; font-family: var(--font2); font-size: 12px; font-weight: 500; color: var(--dark3); padding-top: 10px; text-transform: uppercase; position: relative; z-index: 1; letter-spacing: 2px; margin-left: -308px; }
.nowonline {padding: 28px 20px; }
.loggednames { font-size: 16px; margin-top: 5px;}
.loggedicon img { width: 100%;}
.loggedicon { width: 65px; height: 90px; overflow: hidden; outline: 1px solid var(--groups); border: 1px solid var(--dark); border-radius: 5px;}
/* Illustration décorative à droite du bloc "connectés" */
.imagestats { grid-area: 1 / 3 / 2 / 4; }
.statima { width: 280px; height: 350px; background-image: var(--figure5); background-size: 92%; background-repeat: no-repeat; background-position: 0 0px; margin-top: -25px; margin-left: -65px; }
/* Aperçu des groupes de membres (3 x 3 badges de couleur) */
.groupblock { grid-area: 1 / 4 / 2 / 5; display: grid;grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 20px; padding-top:25px; margin-left:-130px; margin-right:30px;}
.mgroup.one { grid-area: 1 / 1 / 2 / 2; }
.mgroup.two { grid-area: 2 / 1 / 3 / 2; }
.mgroup.three { grid-area: 3 / 1 / 4 / 2; }
.mgroup { width:100%; border:1px solid var(--dark3); border-radius:10px; display:flex; flex-flow:column; align-items:center;}
.mgroup h5 { font-family:var(--font2); font-size:12px; letter-spacing:5px; background:var(--dark); margin-top:-8px; color:var(--white1); }
.sgroup { display:flex; gap:5px; padding:10px; align-items:center; justify-content:space-between;}
.groups { width:130px; background:#333; border-radius:5px; height:45px; display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--font2); text-transform:uppercase; color:var(--white); }
.mgroup.one .groups:nth-child(1) { background: linear-gradient(45deg, var(--sanguis), transparent);}
.mgroup.one .groups:nth-child(2) { background: linear-gradient(45deg, var(--tech), transparent);}
.mgroup.one .groups:nth-child(3) { background: linear-gradient(45deg, var(--stra), transparent);}
.mgroup.two .groups:nth-child(1) { background: linear-gradient(45deg, var(--ethe), transparent);}
.mgroup.two .groups:nth-child(2) { background: linear-gradient(45deg, var(--war), transparent);}
.mgroup.two .groups:nth-child(3) { background: linear-gradient(45deg, var(--conv), transparent);}
.mgroup.three .groups:nth-child(1) { background: linear-gradient(45deg, var(--merce), transparent);}
.mgroup.three .groups:nth-child(2) { background: linear-gradient(45deg, var(--gang), transparent);}
.mgroup.three .groups:nth-child(3) { background: linear-gradient(45deg, var(--citi), transparent);}
/* Dernier(s) membre(s) inscrit(s) */
.lastuserblock { grid-area: 2 / 1 / 3 / 2; display: grid; grid-template-columns: repeat(2, 1fr); margin-top:-4px; grid-template-rows: 1fr 70px; grid-column-gap: 0px; grid-row-gap: 10px; margin-left:15px; background:linear-gradient(45deg, var(--dark1), #090909); border-radius:0 0 20px 20px; margin-bottom:15px; position:relative; z-index:1; border: 1px solid var(--dark3); border-top:0;}
.lastuserinsc { grid-area: 1 / 1 / 2 / 3; background-image:url(https://i.servimg.com/u/f22/20/61/57/05/recurs15.png); background-size:100%; margin:0 10px; background-position:0 -20px; background-repeat:no-repeat; display: grid; grid-template-columns: 1fr 138px; grid-template-rows: 1fr; grid-column-gap: 10px; grid-row-gap: 0px; }
.lastinscname { grid-area: 1 / 1 / 2 / 2; display:flex; padding-top:10px; padding-left: 15px; flex-flow:column; gap:5px; font-family:var(--font4); font-size:12px; text-transform:uppercase;}
.newestext { font-size: 0;}
.newestext strong { font-weight: 500;}
.newestext a { font-family:var(--font3); font-size:15px; line-height:17px; height:100px; width:140px; margin-right:-15px; overflow:hidden; word-break:break-all; display:flex; align-items:center; justify-content:center;    color: var(--groups);}
.lastinscavi { grid-area: 1 / 2 / 2 / 3; background:#333; height:174px; overflow:hidden; margin:10px 10px 15px 15px; border-radius:10px; border:1px solid var(--dark3);}
.lastinscavi img { width:100%; }
.datausers {position: absolute; display: flex; flex-flow: column; padding: 0 15px; font-family: var(--font2); font-size: 12px; gap: 5px; bottom: 45px; z-index: 99; left: 24px; }
.datausers h5 { margin-top: -43px; color: var(--accent2); margin-bottom: 20px; text-transform: uppercase; line-height: 15px; font-size: 15px; width: 130px;}
.mstatdatos { display: flex; font-family: var(--font1); color: var(--white); text-transform: uppercase; justify-content: space-between; font-weight: 500;}
.mstatdatos strong, .mstatdatos span { font-weight: 500; padding: 0 3px;}
.statdata {text-align: center; font-family: var(--font1); color: var(--accent4); display: flex; align-items: center; }
.statdata b, .statdata strong {font-size: 8px; padding: 0 2px; text-transform: uppercase; color: var(--white1); font-weight: 500; letter-spacing: 2px; margin: 0 10px 0 4px; }
/* Record de connexion + texte explicatif */
.pastblock { grid-area: 2 / 2 / 3 / 3; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 50px; grid-column-gap: 0px; grid-row-gap: 0px; margin-bottom:15px; margin-right:-30px;}
.pastonlines { grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 30px 1fr; grid-column-gap: 0px;grid-row-gap: 0px; padding:20px;}
.pastonlines h5 { grid-area: 1 / 1 / 2 / 2; font-family:Var(--font4); color:var(--accent2); text-transform:uppercase; letter-spacing:4px;}
.pastconect { grid-area: 2 / 1 / 3 / 2; text-align:justify; font-family:var(--font1); font-size:12px;}
/* Bloc crédits du thème (logo + lien vers le concepteur) */
.credits { grid-area: 2 / 1 / 3 / 2; margin-left:-20px;display: grid; grid-template-columns: 90px 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px;}
.credis { grid-area: 1 / 1 / 2 / 2; display:flex; align-items:center; justify-content:flex-end; }
.credis img { width:30px;}
.mcredis {grid-area: 1 / 2 / 2 / 3; display: flex; flex-flow: column; font-family: var(--font2); color: var(--white1); font-size: 8px; text-transform: uppercase; justify-content: center; margin-left: 10px; padding: 8px 0;}
.mcredis a.ento {color: var(--accent1); text-decoration: 0; margin-top: 4px;}
.cre2 { position:absolute; margin-left:240px; font-size:13px; color:var(--accent1); margin-top:-29px;}
.cre2 a { color:Var(--accent4); }
/* Bloc affiliés (logos des forums partenaires) */
.affiliates { grid-area: 2 / 3 / 3 / 5; display: grid; grid-template-columns: 1fr; grid-template-rows: 75px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding-top:20px; padding-left:40px;}
.affiliates h5 { grid-area: 1 / 1 / 2 / 2; font-family:var(--font3); color:var(--accent1); font-size:30px; font-weight:100; line-height: 32px; text-transform: uppercase;}
.maffis { grid-area: 2 / 1 / 3 / 2; }
.affie-block { display: flex; flex-flow: row wrap; gap: 8px 20px; padding: 5px; overflow:hidden; }
.affie-block img { width: 100px; height: 40px; border-radius: 5px; outline: 1px solid var(--dark3);}
.forum_legend {display: none;}

/* ============================================================
   13. POPUP DE CRÉDITS DU THÈME (fenêtre modale native du forum)
   ============================================================ */
/* Masque le modal générique du logiciel de forum : remplacé par
   le popup custom .CreditosEXT ci-dessous */
.modal-content, .popous { display: none!important; }
#fade-background { position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: 9999999!important;}
#modal-window { position: fixed; top: 10%; width: 800px; background-color: transparent; margin: 40px auto; left: 0; right: 0; z-index: 99999999!important;}
/* Petit lien "crédits" flottant qui ouvre le popup */
.cre2 .modal-link {background: var(--dark2); border: 1px solid var(--dark3); display: flex; align-items: center; justify-content: center; font-family: var(--font2); gap: 15px; width: 95px; padding: 7px 6px; color: var(--white); border-radius: 5px; text-transform: uppercase; text-decoration: none; transition: 1s linear; margin-top: 30px; margin-left: -55px; font-size: 8px; }
.cre2 a i { color: var(--accent5); font-size: 15px; }
/* Contenu du popup de crédits */
.CreditosEXT { width: 800px; height:500px; padding: 20px; background: var(--dark); background-size: 200%; margin: 0 0px; border: 5px solid var(--dark); outline: 1px solid var(--dark2); border-radius: 5px;}
.headCre { padding:0 10px 10px; font-family:var(--font4); color:var(--white1); font-size:1.8rem;}
.headCre:nth-child(3) { margin-top: 20px; }
.headCre i { color:var(--accent1); font-size:15px; padding-right:10px;}
.textCre { background: var(--dark); outline: 1px solid var(--dark2); border-radius: 10px;min-height:200px; padding:20px; text-align:justify; font-size:1.2rem; font-family:var(--font1); color:var(--white2); overflow:auto; line-height:2rem;}
.textCre a { text-decoration: none; color: var(--accent1); font-weight: bolder; border-bottom: 1px solid var(--dark2); padding: 0px;}
.textCre b { color:var(--accent1); font-family: var(--font1);}

/* ============================================================
   14. FORUM & CATEGORY STYLES
   En-tête de catégorie (bandeau titre + icône), puis mise en page
   des forums en cartes (.row) avec vignette, description et stats.
   ============================================================ */
/* En-tête de catégorie : masqué par défaut, sauf pour la 1ère catégorie (#cat1) */
.topiclist .header {
display: none!important;height: 0;
    border: 1px solid var(--dark3);
    border-radius: 30px;
    align-items: center;
	background: #323135;
}
div#cat1 .header{display: flex!important;height: 100px; margin-bottom:20px;}
.topiclist .header .table-title {
    width: 50%;
    padding-left: 30px;
}
ul.topiclist dd.dterm h2, ul.topiclist dt h2, .table-title, .table-title h2 {
    display: inline;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 15px;
}
.table-title, .table-title h2 {
    display: inline;
    font-size: 1em;
}
.topiclist .header .table-title b {
    font-family: var(--font3);
    position: absolute;
    font-size: 66px;
    color: #181818;
}
.topiclist .header .table-title span {
    position: relative;
    z-index: 1;
    font-family: var(--font3);
    color: var(--white);
    margin-left: 25px;
}
/* Bandeau coloré à droite de l'en-tête de catégorie (dégradé + icône skew) */
.table-title-back {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 80px;
    gap: 20px;
    background: var(--grad1);
    height: 100%;
    border-radius: 50px 30px 30px 50px;
}
.ttb-icon {
    border: 1px solid var(--white1);
    height: 80px;
    color: var(--dark);
    display: flex;
    align-items: center;
    width: 70px;
    justify-content: center;
    border-radius: 10px;
    transform: skewX(-10deg);
}
.forabg .header i {
    display: inline-block;
    font-size: 1.8rem;
}
.ttb-icon i {
    transform: skewX(10deg);
}


/** FORUM LAYOUT — liste des forums sous forme de cartes **/
.forabg, #tabbed-cats-section {
    clear: both;
    padding: 0;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
}
ul.forums {
    background-image: none;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
    transition-duration: 360ms;
}
ul.topiclist {
    list-style-type: none;
    margin: 0;
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-repeat: repeat-x;
    color: #d6d6d6;
}
/* Grille de forums : 2 colonnes de 645px */
ul.topiclist.forums {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 645px);
    grid-gap: 10px;
}
ul.topiclist li {margin: 0;}
/* Carte "forum" : image de fond en haut, titre + stats en bas (via grid-area) */
.row {
    height: 400px;
    border: 1px solid var(--dark3);
    border-radius: 16px;
    display: grid;
    grid-template-columns: 162px 1fr 236px;
    grid-template-rows: 200px 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
}
/* Bloc titre + dernier message + compteur, superposé en bas de la carte */
.row .forumname {
    grid-template-areas: "link nums"
        "last nums";
    z-index: 1;
    height: 140px;
    width: 475px;
    position: absolute;
    bottom: 0;
    left: 160px;
    font-family: var(--font1);
    color: var(--white);
    font-size: 20px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 90px;
    grid-template-rows: 60px 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-transform:uppercase;
}
.forumname > a {
    grid-area: link;
    max-width: 200px;
}
a.forumtitle {transition: 1s;}
a.forumtitle:hover {
  text-shadow: 0 0 9px var(--white);
  transition: 1s;
  filter: blur(2px);
}
.row .forumdescri {width: 670px; height: 240px;}
/* Infos du dernier message posté dans ce forum */
.row .forumreplylast {
    min-width: 200px;
    margin-right: -10px;
    font-family: var(--font1);
    font-size: 11px;
    color: var(--white1);
    text-transform: uppercase;
    grid-area: last;
}
.row .forumreplylast a.last-topic {
  font-family: Var(--font4);
  font-size: 14px;
  font-weight: 700;
}
/* Compteur de sujets/messages, colonne fixe à droite du titre */
.row .forumcount {
    position: absolute;
    bottom: -5px;
    width: 90px;
    height: 112px;
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 5px;
    justify-content: center;
    padding: 10px 0;
    grid-area: nums;
}
.row .countopic {
    background: #2a272e;
    width: 100%;
    font-size: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 80%;
    border-radius: 5px;
}
/* Description du forum, en haut de la carte */
.row .forumdescri {
    grid-area: 1 / 1 / 2 / 3;
    font-family: var(--font1);
    font-size: 12px;
    color: var(--white1);
    padding: 20px 55px 20px 20px;
    text-align: justify;
    line-height: 150%;
    overflow: hidden;
    width: 670px;
}
.row .forumdescri strong {
  background: var(--grad1);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--white);
}
/* Petits tags de sous-forums / liens rapides dans la description */
.in-forum-links {
  display: flex;
  gap: 5px;
  flex-flow: row wrap;
  margin: 13px 0 0;
}
.in-forum-links a {
  border: 1px solid var(--white1);
  border-radius: 10px;
  padding: 2px 10px;
  transition: 1s;
}
.in-forum-links a:hover {
  border: 1px solid var(--accent1);
  transition: 1s;
}
/* Bouton "fiche" (lien vers une fiche de RP par ex.) */
.fiche-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 28px;
    background: var(--grad1);
    border-radius: 10px;
    margin-top: 6px;
    font-family: var(--font2);
    color: var(--white) !important;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 15px;
}
/* Miniature/icône du dernier message posté */
.row .forumreplyicon {
    grid-area: 2 / 1 / 3 / 2;
    width: 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 56px;
    margin-left: 25px;
}

/* Avatar du dernier posteur avec bordure en dégradé colorée par son groupe
   (technique du double masque : le pseudo-élément ::before crée l'anneau
   dégradé, l'image réelle est recentrée par-dessus). */
/* CONTAINER */
.lastpostavatar {
    position: relative;
    width: 120px;              /* ← adapte la taille ici */
    height: 120px;             /* carré parfait */
    border-radius: 10px;      /* arrondi externe */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* BORDURE DÉGRADÉE */
.lastpostavatar::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px;             /* ← épaisseur du cadre dégradé */
    border-radius: inherit;
    
    /* Dégradé dynamique basé sur la couleur du groupe */
    background: linear-gradient(
        135deg,
        var(--group-color),
        color-mix(in srgb, var(--group-color) 50%, black)
    );

    /* Rend le centre transparent pour laisser l'avatar visible */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}

/* IMAGE INTERNE – jamais tronquée */
.lastpostavatar img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 12px);   /* correspond à padding*2 */
    height: calc(100% - 12px);
    transform: translate(-50%, -50%);
    border-radius: 6px;         /* arrondi interne optionnel */
    object-fit: cover;          /* remplit sans déformer */
    object-position: center;    /* toujours centré */
    display: block;
}

/* Décor SVG en fond de la section basse de la carte */
.row .forumsvg700 {
    grid-area: 2 / 1 / 3 / 4;
    width: 645px;
    background-image: url(https://i.servimg.com/u/f22/20/61/57/05/subfor12.png);
    background-size: 100% 83%;
    background-repeat: no-repeat;
    background-position: 0px 34px;
    margin-left: -1px;
    margin-right: -1px;
    margin-top: 6px;
}
.row .forumimaback {
    grid-area: 1 / 3 / 2 / 4;
}
/* Illustration décorative propre à chaque forum, positionnée en fond
   (l'image utilisée dépend de la variable --figureN définie par forum) */
.row .foruimab {
    background-size: 80%;
    width: 350px;
    height: 300px;
    position: absolute;
    background-position: 24px 0;
    visibility: visible;
    pointer-events: none;
    background-repeat: no-repeat;
    margin-left: -226px;
    margin-top: -5px;
}

/* --- Surcharges visuelles propres à certains forums (par ID) --- */
.forum-2 .foruimab {background-image: var(--figure1);}
.forum-7 .foruimab {background-image: var(--figure3);}
.row.forum-item.forum-5 .forumdescri {width: 500px;}

.forum-item.forum-20 > div {
    position: relative;
    z-index: 2;
}
/* Catégorie 3 : forums de largeurs asymétriques (800px + 495px) */
.cate3 ul.cat-forums {grid-template-columns: 800px 495px;}
.forum-5 .foruimab {
    background-image: var(--figure2);
    height: 400px;
    width: 500px;
    margin-left: -155px;
    margin-top: -5px;
    filter: grayscale(1);
}

li.row.forum-2, li.row.forum-7 {overflow: hidden;}
li.row.forum-2 .foruimab, li.row.forum-7 .foruimab {
    filter: grayscale(1);
    right: -72px;
}
li.row.forum-2 .forumdescri, li.row.forum-7 .forumdescri {width: 425px;}

/* Forum 20 : mise en page entièrement custom (bandeau diagonal skewX,
   titre pivoté à la verticale, description en encart flottant) —
   redéfinit quasiment tous les éléments de .row pour ce forum précis. */
.forum-item.forum-20::after {
	transform: skewX(12deg);
	border-top-left-radius: 85px;
	border-bottom-right-radius: 70px;
	content: "";
	display: block;
	background: var(--dark);
	border: 1px solid var(--dark3);
	width: calc(100% + 140px);
	height: 100%;
	position: absolute;
	top: 0;
	left: -65px;
}

li.row.forum-20.forum-item .forumname>a {
	background: var(--grad1);
	position: absolute;
	top: -93px;
	right: -262px;
	transform: rotate(90deg);
	width: 400px;
	text-align: center;
	padding: 20px 0;
	max-width: 400px;
}

li.row.forum-20.forum-item .forumname>a::after {
	content: "";
	display: block;
	width: 50%;
	background: linear-gradient(89deg, rgb(96 66 147) 10%, rgb(118, 103, 130) 60%, rgb(139 139 114) 123%);
	height: 48px;
	position: absolute;
	bottom: -14px;
	left: -10px;
	border-bottom-right-radius: 20px;
	filter: url(../../../#round);
	clip-path: polygon(100% 0, 100% 70%, 90% 100%, 0 100%, 0 0);
	z-index: -1;
}

.row.forum-20 .forumsvg700 {
	background: unset;
}

.forum-20 .forumcount {
	width: 100px;
	bottom: 20px;
	right: 50px;
}

.forum-20 .countopic {
	flex-direction: row;
	gap: 10px;
	background: var(--dark);
	filter: brightness(1.5);
}

.forum-item.forum-20>div.forumreplyicon {
	margin: 0;
	position: absolute;
	top: 60px;
	right: 25px;
}

.forum-item.forum-20>.forumname {
	position: absolute;
	left: 130px;
	width: 355px;
}

.forum-item.forum-20 .forumdescri {
	width: 390px;
	padding: 20px;
	position: absolute;
	left: -5px;
	top: 20px;
	height: 200px;
	overflow: auto;
	background: var(--dark);
	border-radius: 10px;
}

.forum-20 .forumreplylast {
	position: absolute;
	top: -39px;
	left: 22px;
	width: 180px;
	padding: 22px 0;
	height: 108px;
}

.forum-20 .forumreplylast>a {
	font-size: 24px;
	color: var(--white);
	display: block;
	-webkit-background-clip: unset;
	background-color: unset;
	background-image: unset;
	-webkit-text-fill-color: unset;
}

.forum-20 .forumreplylast>.lastreplyinfo {
	background: var(--dark);
	display: inline-block;
	padding: 6px 10px;
}

.forum-20 .lastpost-title {
    font-size: 11px;
}

.row.forum-20 {
    border-color: transparent;
}
/* ============================================================
   15. CATÉGORIES À ONGLETS (#tabbed-cats-section)
   Grand bandeau visuel (#tabbed-cat-header) surmontant une liste de
   forums filtrable par onglet (.tabs / .cat-tab).
   ============================================================ */
.forum-panel .row .forumdescri {width: 560px;}
/* Onglets de sélection de catégorie */
.tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: end;
}
.tabs > div {
    padding: .4rem .8rem;
    cursor: pointer;
    border-radius: 6px;
    font-family: var(--font2);
    font-size: 13px;
    color: var(--white);
    font-weight: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    gap: 5px;
    padding-left: 50px;
}
div#tabbed-cats-section {margin-top: 20px;}
/* Bandeau visuel en haut de la section à onglets (image + titre encart) */
div#tabbed-cat-header {
    height: 250px;
    background-color: var(--dark);
    border-radius: 16px;
    border: 1px solid var(--dark3);
    margin-bottom: 15px;
    background-image: url(https://i.servimg.com/u/f22/20/61/57/05/40604910.jpg);
    background-size: 100%;
    position: relative;
}
div#tabbed-cat-header h5 {
    font-family: var(--font3);
    font-size: 25px;
    color: var(--white);
    background: var(--grad1);
    height: 100px;
    margin: auto;
    padding: 20px 30px;
    border-radius: 10px;
    position: absolute;
    width: 60%;
    bottom: 50px;
    right: 50px;
    text-align: center;
}
div#tabbed-cat-header h5 strong {display: block;}
div#tabbed-cat-header h5 em {
    font-size: 12px;
    font-family: var(--font2);
    color: var(--white);
    letter-spacing: 6px;
    text-transform: uppercase;
    background-color: var(--dark);
    border-radius: 5px;
    font-weight: 100;
    padding: 5px 20px;
    display: inline-block;
    font-style: normal;
    text-align: center;
}
div#tabbed-cat-header::after {
    content: "";
    display: block;
    width: 275px;
    height: 249px;
    background-image: var(--figure4);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0;
    margin-left: 0;
    border-bottom-left-radius: 20px;
}
div#tabbed-cat-description desc {width: 250px;height: 125px;font-family: var(--font1);font-size: 12px;color: var(--white);text-align: justify;display: block;position: absolute;top: 100px;left: 195px;}
div#tabbed-cats-nav {position: absolute; top: 0; right: 0;}
.tabs > div.active {background: linear-gradient(45deg, var(--dark), var(--accent1));}
.cat-tab:nth-child(1){background-color: var(--dark1);}
.cat-tab:nth-child(2){background-color: var(--dark2);}
.cat-tab:nth-child(3){background-color: var(--dark1);}
.cat-tab:nth-child(4){background-color: var(--dark3);}
.cat-tab:nth-child(5){background-color: #444;}

/*** TAB DISPLAY : bascule visuelle entre panneaux de forums par onglet ***/
/* Masqué tant que le script JS n'a pas initialisé les onglets (évite un flash) */
#tabbed-cats-section {visibility:hidden;}
.tab-cat-forums-div,.forum-panel {will-change: opacity, transform;}
.tab-cat-forums-div {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 190px;
}
.tab-cat-forums-div .forum-panels {min-width: 0; position: relative;  height: 400px;  overflow: hidden;}
.tab-cat-forums-div .forum-panel {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.row.forum-item {/* overflow: hidden; */}
.forum-panels .forumimaback {width: 570px;height: 398px;position: absolute;top: 0;right: 0;border-top-left-radius: 50px;border-bottom-left-radius: 200px; border-top-right-radius: 14px; border-bottom-right-radius: 14px; background-image:url(https://i.pinimg.com/736x/65/ae/f4/65aef4ab936f58580ead15b0ebbf7778.jpg);}
.forum-16 .forumimaback {background-image: url(https://placehold.co/620x400/333/666.png);}
/* Rail vertical de sélection de forum au sein d'une catégorie à onglets */
.tab-cat-forums-div .forum-tabs-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    background: var(--dark1);
    gap: 10px;
    border: 1px solid var(--dark3);
    border-radius: 15px;
    padding: 15px;
}
.tab-cat-forums-div .forum-tabs-rail .forum-tab {
    width: 100%;
    height: 25%;
    display: flex;
    cursor: pointer;
    border-radius: 11px;
    align-items: center;
    justify-content: Center;
    background: var(--dark3);
    font-size: 14px;
    font-family: var(--font2);
    line-height: 20px;
    padding: 0 20px;
    color: Var(--white);
    text-align: center;
}
.tab-cat-forums-div .forum-tabs-rail .forum-tab.active {background-color: var(--accent1);}

/* ============================================================
   16. AFFICHAGE DE LA LISTE DES SUJETS (#thread)
   Barre de titre du forum (.thread-nav), options de tri, légende
   des icônes, puis une rangée par sujet (.thread-row) avec avatar,
   titre, stats et infos du dernier message.
   ============================================================ */
/*** THREAD DISPLAY ***/
div#thread {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
/* Barre de titre : nom du forum à gauche, bouton "nouveau sujet" à droite */
.thread-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    overflow: hidden;
    background: var(--dark1);
    border: 1px solid var(--dark3);
    border-radius: 25px;
    align-items: center;
}
.thread-nav .float_left {padding-left: 20px;}
.thread-nav strong {
    font-family: var(--font3);
    font-size: 30px;
}
.thread-nav .float_left > div {
    text-transform: uppercase;
    font-size: 7px;
    font-weight: 700;
}
.thread-nav .float_right {
    border-radius: 50px 0 0 50px;
    background: var(--grad1);
    background-position: top left;
    padding: 20px 40px 20px 50px;
}
.float_right a.button {
    background: var(--dark);
    border: 1px solid var(--accent1);
    font-size: 9px;
    line-height: 20px;
    display: flex;
	justify-content: center;
}
.float_right a.button i {
    padding: 0 10px 0 0;
    font-size: 20px;
}
/* Options de tri des sujets (date, réponses...) */
.sortoptions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
    top: 14px;
    left: 20px;
}
.sortoptions span {
    background: var(--dark1);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
}
.sortoptions span.orderarrow {
    background: var(--dark3);
    position: relative;
    right: -10px;
}
.thread-display {
    display: grid;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--dark1);
    border-radius: 5px;
    color: var(--white3);
    padding: 20px;
    text-align: center;
}
/* Légende des icônes de statut de sujet (nouveau, fermé, populaire...) */
dl.thread_legend {
    display: flex;
    gap: 4px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
dl.thread_legend dd {
    background: var(--dark2);
    color: var(--dark4);
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 6px;
}
.thread-tools {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 20px 0 0 0;
}
/* Une ligne = un sujet : avatar (.L1), titre+stats (.L2), dernier post (.L3) */
.thread-row {
  position: relative;
    width: 100%;
    border: 1px solid var(--dark3);
    height: 150px;
    display: grid;
    grid-template-columns: 160px 1fr 200px;
    grid-template-rows: 150px;
    grid-column-gap: 30px;
    grid-row-gap: 0px;
    margin: 10px 0;
    border-radius: 10px !important;
}
.thread-row > input {position: absolute; filter: invert(0.9); top: 8px; left: 8px;}
.L1 {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: center;
    padding-left: 5px;
    justify-content: center;
}
.L1 .row-avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
}
.L1 .row-avatar a {width: inherit;}
.L1 .row-avatar a img {
    width: inherit;
    width: -webkit-fill-available;
}
.L2 {
    grid-area: 1 / 2 / 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40px 65px;
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    margin: 20px 0 10px;
}
.L2 .row-title {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: center;
    font-family: var(--font4);
    transition: 1s;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0 !important;
    text-decoration: none;
    word-break: break-word;
}
.L2 .row-title a {
    text-shadow: 0 0 5px var(--accent2), 0 0 8px var(--accent3), 0 0 10px var(--accent1);
    color: var(--white1);
}
.L2 .stats {
    grid-area: 2 / 1 / 3 / 2;
    display: flex;
    flex-flow: column;
    gap: 5px;
    font-size: 9px;
    text-transform: uppercase;
    font-family: var(--font1);
    color: var(--white1);
    letter-spacing: 1px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.L2 .stats span i {
    border: 1px solid var(--dark3);
    padding: 5px;
    color: var(--accent1);
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.L3 {
    grid-area: 1 / 3 / 2 / 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: 15px;
}
.L3 .row-posted {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(45deg, transparent, var(--dark1));
    border-radius: 5px;
    font-size: 20px;
    padding-right: 16px;
}
.L3 .row-numbers > div {
    width: 100%;
    border-radius: 5px;
    background: var(--grad1);
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    text-transform: uppercase;
    font-family: var(--font1);
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--white1);
    height: 30px;
    padding: 0 15px;
}
/* ============================================================
   17. SOUS-FORUMS (surcharge compacte de .row pour les sous-forums)
   Réutilise .row mais en 2 colonnes et en format réduit (120px de haut).
   ============================================================ */
.subforum-display {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: 122px;
}
.subforum-display .row {
    grid-template-rows: 1fr;
    grid-template-areas: "icon forumname subdesc";
    height: 120px;
    margin: 0 20px;
    grid-template-columns: 120px 345px 1fr;
    z-index: 2;
    background: var(--dark);
    max-width: 600px;
}
.subforum-display .forum-item::after {
    content: "";
    display: block;
    background: var(--grad1);
    background-position: top left;
    width: 40px;
    height: 120px;
    position: absolute;
    right: -18px;
    border-radius: 0 20px 20px 0;
    z-index: 0;
}
.subforum-display .row .forumreplyicon {
    grid-area: icon;
    width: 120px;
    height: 130px;
    margin: 0;
}
.subforum-display .row .forumname {
    padding-top: 0;
    grid-area: forumname;
    grid-template-columns: unset;
    grid-template-rows: unset;
    height: 120px;
    width: unset;
    position: unset;
}
.subforum-display .row .forumname > a {
    height: 45px;
    line-height: 45px;
    padding-left: 20px;
    max-width: unset;
}
.subforum-display .row .forumreplylast {
    width: 350px;
    height: 72px;
    padding-left: 20px;
}
.subforum-display .row .forumcount {
    grid-area: nums;
    left: 12px;
    bottom: 0;
    filter: brightness(1.25);
    opacity: 0;
    transition: 0.5s ease;
}
.subforum-display .row:hover .forumcount {opacity: 1;}
.subforum-display .row .forumdescri {
    grid-area: subdesc;
    padding: 16px;
    font-size: 9px;
    height: 116px;
    width: 180px;
    overflow: auto;
    margin: 0 0 0 0;
    left: -88px;
    position: relative;
    mix-blend-mode: lighten;
    z-index: 2;
}
.subforum-display .row .forumsvg700 {display: none;}
.subforum-display .row .forumimaback {display: none;}
/* ============================================================
   18. FORMULAIRE "NOUVEAU SUJET" / PAGES GÉNÉRIQUES (#page-wrapper)
   ============================================================ */
div#page-wrapper {
    width: 90%;
    margin: 0 auto;
    border: 1px solid var(--dark1);
    border-radius: 10px;
    padding: 20px;
}
div#page-wrapper table {
    width: 100%;
}
div#page-title {
    color: var(--white);
    margin: 10px 0;
    padding: 10px 5px;
    overflow: hidden;
    position: relative;
    font-size: 25px;
    font-weight: 500;
    font-family: var(--font1);
    background: var(--dark2);
    text-align: center;
    border-radius: 10px;
    text-transform: uppercase;
    border: 1px solid var(
    --accent3);
}
div#page-title > i {
    background: var(--grad1);
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px 30px;
}
.tborder{position: relative;}
table.tborder tr td {
    background: var(--dark2);
    color: var(--white3);
    padding: 10px;
}
table.tborder tr:nth-child(odd) td {
    background: var(--dark1);
}
table.tborder tr td > strong {
    color: var(--accent4);
}
.tborder form[action="forumdisplay.php"] {
    float: right;
    position: relative;
    top: -20px;
    right: 10px;
  zoom: 0.8;
}
#page-wrapper > form > div:nth-child(7) {
    background: var(--dark2);
    border-radius: 10px;
    padding: 20px;
}

/* ============================================================
   19. PAGE D'UN SUJET (#posts_container) — en-tête + fil de messages
   ============================================================ */
/*** SHOWTHREAD ***/
.showthread {
    width: 98%;
    margin: 0 auto;
}
td#posts_container {
    background: transparent;
}
/* Carte de message (3 colonnes : avatar / contenu / actions latérales) */
.post {
    width: 100%;
    min-height: 500px;
    border: 1px solid var(--dark3);
    border-radius: 15px;
    margin: 20px auto;
    display: grid;
    padding: 15px;
    grid-template-columns: 310px 1fr 50px;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
/* Bandeau de titre du sujet (chemin de navigation + bouton d'actions) */
.subheader { width:100%; overflow:hidden;  background: transparent; border: 1px solid var(--dark3); height:120px; border-radius:15px; display: grid; grid-template-columns: 1fr 400px; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }

.subheader-info { grid-area: 1 / 1 / 2 / 2; display: flex; flex-flow: column; align-items: flex-start; justify-content: center; padding-left: 30px; }
.subheader-info h5 { font-family:var(--font2); font-size:25px; text-transform:uppercase; color:var(--accent1); }
.sub-header-path b { display: none;}
.sub-header-path a { letter-spacing:2px; font-size: 10px; font-family: var(--font1); text-transform: uppercase; color: var(--white1);}
  
/* Bandeau coloré (dégradé) à droite du titre de sujet */
.tabletitle-back { grid-area: 1 / 2 / 2 / 3; display: flex; flex-flow:column; align-items: flex-end; justify-content: center; padding-right: 30px; gap: 5px; background: var(--grad1); height: 100%; border-radius: 0; }
.tabletitle-back::after { content: ""; position: absolute; width: 100px; height: 120px; transform: skewX(-10deg) translate(-317px, 0px); border-bottom-left-radius: 50px; background: var(--grad1); background-size: 495% !important; background-position: top left;}
.ion-edit:before { content: "\f11c"; font-family: 'FontAwesome';}
/* Barre d'actions basse (répondre, s'abonner...) */
.sub-header-bot { height: 50px; background: var(--dark); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 1px solid var(--dark3); margin-top: 10px;}

.topic-actionsi.bottom { display: flex; width: 100%; height: 90px; align-items: center; justify-content: space-around; color: var(--white1); background: var(--dark1); border: 1px solid var(--dark3); margin-bottom: 20px; border-radius: 10px;}    
    
/* ============================================================
   20. AFFICHAGE D'UN MESSAGE (#posts .post)
   Carte détaillée : bandeau de couverture + pseudo (.mpostheader),
   panneau avatar/niveau (.mavatar, .miavatar, .mLevel), corps du
   message (.mcontenbody, .postbody) et pied avec triggers (.mpostfooter).
   ============================================================ */
/*** POSTVIEW ***/
#posts .post {
    width: 100%;
    min-height: 500px;
    border: 1px solid var(--dark3);
    border-radius: 15px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 310px 1fr 40px;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    padding: 15px;
}
/* Bandeau de couverture + pseudo/rang, en haut de la carte (pleine largeur) */
.mpostheader {grid-column: -1/ 1; border:1px solid var(--dark3); background: var(--dark3); border-radius:10px; display: grid; grid-template-columns: 1fr 400px; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; overflow:hidden;}

.posthead-left { grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.posth-cover { grid-area: 1 / 1 / 2 / 2; overflow:hidden; height:200px; }
.posth-cover img { filter: brightness(0.2) opacity(0.5); width:100%; }
.posth-name { grid-area: 1 / 1 / 2 / 2; position:relative; z-index:1; display: grid; grid-template-columns: 1fr; grid-template-rows: 60px 40px; grid-column-gap: 0px; grid-row-gap: 10px; align-items:center; justify-items:center; margin:auto;}

.posth-cover {
    background-image: url(https://placehold.co/1000x250/222/FFFFFF.png);
    background-size: cover;
    background-position: center center;
}

.posth-cover[style*="background-image:url(../../../);"] {
    /* si jamais rien, tu peux ajuster ici */
}


.NameUser { grid-area: 1 / 1 / 2 / 2; font-family:var(--font3); font-size:20px; }
.rankg { grid-area: 2 / 1 / 3 / 2; border:1px solid var(--groups); text-transform:uppercase; background:var(--dark5); border-radius:5px; width:400px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:11px; letter-spacing:5px; font-family:var(--font1);}

/* Panneau de droite du bandeau : crédits / nb messages / lien permanent */
.posthead-right { grid-area: 1 / 2 / 2 / 3; background:linear-gradient(99deg, var(--accent3) 20%, var(--groups)); display: grid; grid-template-columns: 1fr 180px; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding-right:0px; }
.posthead-right::after { content: ""; position: absolute; margin-top: 0px; margin-left: -45px; width: 75px; height: 198px; transform: skewX(-15deg);
 border-bottom-left-radius: 40px; border-top-left-radius: 20px; background: var(--accent3); background-size: 100% !important; background-position: 0% -119%; }
    
.posth-field { grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; padding-left:20px; align-items:center; justify-items:flex-end; margin:25px 0;}

.campx { border-bottom:1px solid var(--dark); height:30px; text-transform:uppercase; font-family:var(--font1); font-size:11px; color:var(--white); display:flex; align-items:center; justify-content:space-between; padding-right:10px;}
.campx i { height:30px; width:30px; background:var(--dark); border-radius:5px 5px 0 5px; display:flex; align-items:center; justify-content:center; margin-bottom:-1px; margin-left:-20px;}
.campx.credits { grid-area: 1 / 1 / 2 / 2; width:70%;} .campx e { display:flex; gap:4px; }
.campx.posts { grid-area: 2 / 1 / 3 / 2; width:80%;}
.campx.perma { grid-area: 3 / 1 / 4 / 2; width:90%;} .campx.perma a { color:var(--white); } .campx.perma i { margin-top: -1px;}
.lois span.label { display:none; }

.posth-avi { grid-area: 1 / 2 / 2 / 3; width:150px; height:150px; border:2px solid var(--dark); border-radius:10px; margin-top:25px; overflow:hidden;}
.posth-avi img { width:100%; height: 100%;}

/* Corps du message : avatar (col. 1), texte (col. 2), icônes d'actions (col. 3) */
.mpostbody { grid-area: 2 / 1 / 3 / 2; display: grid; grid-template-columns: 310px 1fr 50px; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }

/* Panneau avatar : au survol, l'avatar s'estompe et laisse place à la
   barre de niveau (.mLevel) grâce à une pile de calques superposés
   (.circlehidden / .Avatar / .mLevel occupent tous la même grid-area). */
.mavatar { min-height:540px; overflow:hidden; margin-bottom: -5px;}
.avatarcont { background:linear-gradient(40deg, var(--dark1), var(--groups)); padding-top: 5px; border-radius:10px; height:550px; width:310px; display:flex; align-items:flex-start; justify-content:center;}
.miavatar { outline:2px solid var(--dark); border-radius:10px; width:300px; height:500px; overflow:hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.miavatar:hover .circlehidden { opacity:1; transition:1s; transform:translateY(0px); } 
.miavatar:hover .mLevel { opacity:1; transition:1s; transition-delay:1s;} 
.miavatar:hover .Avatar { opacity:0.5; transition:1s; }    
    
.circlehidden { grid-area: 1 / 1 / 2 / 2; opacity:0; transition:1s; transition-delay:1s; filter:opacity(0.7); transform:translateY(-100px); background: linear-gradient(5deg, var(--groups), var(--dark1)); width: 100%; height: 400px; z-index: 1; position: relative; clip-path: circle(70% at 50% 30%); border-radius: 10px;}    
.Avatar { grid-area: 1 / 1 / 2 / 2; width:300px; height:500px; transition:1s; border-radius:10px; overflow:hidden; } .Avatar img { width:100%; height:100%; }
.mLevel { grid-area: 1 / 1 / 2 / 2; opacity:0; transition:1s; z-index:1; position:relative; width:300px; height:300px; overflow: hidden; border-radius: 10px; display: flex; flex-flow: column; gap: 10px; align-items: center; justify-content: center; }
.levelnumber { height: 130px; width: 209px; display: flex; flex-flow: column; gap: 6px; align-items: center; justify-content: center; font-family: var(--font3); color: var(--groups);}
.levelnumber .lois.level { font-size: 42px; line-height:40px; }

/* Titre de la lignée choisie + capacité débloquée au niveau actuel, sous le chiffre de niveau */
.lvldesc { width: 85%; text-align: center; font-family: var(--font1); color: var(--white1); }
.lvldesc strong { display:block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--white); font-weight: 600; }
.lvldesc span { display:block; font-size: 10px; opacity: .75; margin-top: 2px; }

/* Bio courte éditable par le membre (remplace l'ancienne "Power Level Gauge") */
.mLevel h5 { font-family: var(--font3); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--groups); font-weight: 100; }
.mnotes {
    width: 70%;
    max-height: 52px;
    overflow-y: auto;
    background: var(--dark);
    border: 2px solid var(--dark2);
    border-radius: 10px;
    outline: 1px solid var(--groups);
    padding: 6px 10px;
    font-family: var(--font1);
    font-size: 11px;
    line-height: 1.35;
    color: var(--white1);
    text-align: center;
}
.mnotes:empty::before { content: "—"; opacity: .4; }

/* Anciennes règles de la barre de progression : plus utilisées dans postbit.html
   depuis le remplacement par .mnotes, conservées telles quelles au cas où
   elles seraient référencées ailleurs. */
.levelbarr { width: 70%; height: 40px; overflow:hidden; background: var(--dark); border: 2px solid var(--dark2); border-radius: 10px; outline: 1px solid var(--groups);}
.levelbar { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }

.levelbarr strong { grid-area: 1 / 1 / 2 / 2; z-index:1; position:relative; font-size:20px; color:var(--white); font-family:var(--font1);      display: flex; justify-content: center; align-items: center; font-weight: 100; }
.barrita { grid-area: 1 / 1 / 2 / 2; width: 100%; height: 40px; overflow: hidden;}    
.levelbarra { background: var(--grad1); height: 40px; border-radius: 5px;}    
    
/* Badge de rang sous l'avatar */
.avatarank {
 width: 304px; height: 100px; background-image: url(https://i.servimg.com/u/f22/20/61/57/05/figran10.png); display: flex; align-items: center; justify-content: center;
 background-size: 100%; background-repeat: no-repeat; position: relative; z-index: 1; margin-top: -15px; border-radius: 10px; margin-left: 3px;}
.avatarank .lois { height: 48px; background: var(--dark); display: flex; align-items: center; justify-content: center; width: 93%; margin-top: 20px; font-family: var(--font2); font-size: 15px; color: var(--white); text-transform: uppercase; letter-spacing: 5px; border-radius: 5px;}    

/* Zone de texte du message */
.mcontenbody {min-height:540px; border: 2px solid var(--dark1); border-radius: 10px 0 0 10px; margin-left: 10px; margin-right:5px;padding: 30px;}
/* Colonne d'icônes d'actions (3ᵉ colonne du post : citer, modifier, etc.) */
.miconspost { background:var(--dark1); margin-left:-10px; border-radius:10px; display:flex; flex-flow:column; padding:35px 0; align-items:center; justify-content:flex-start; gap:50px;}
.leis, .miconspost a { color: var(--groups);}

/* Pied de carte : titre des "triggers" (déclencheurs de RP) + liste des tags.
   NETTOYAGE : `.mpostfooter` était déclaré deux fois — la seconde occurrence
   ne faisait qu'ajouter `grid-column: -1/ 1` (pour étendre le bloc sur toute
   la largeur) par-dessus les mêmes propriétés déjà posées par la première.
   Fusionné ici en une seule règle, résultat final inchangé. */
.mpostfooter { grid-area: 3 / 1 / 4 / 2; border:1px solid var(--dark3); border-radius:5px; display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding:10px; grid-column: -1/ 1; }
.mpostfooter h5 { grid-area: 1 / 1 / 2 / 2; color:var(--groups); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-family:var(--font3); display:flex; align-items:center; justify-content:center; font-weight:100; padding-top:2px; }
.mpostfooter h5 i { padding-left:10px; font-size:20px; margin-top:-2px; }
/* Tags des triggers déclenchés dans ce message */
.mtrigger {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 10px;
}
.mtrigger span {
    background: var(--dark2);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
}
    
/* Neutralise la bordure/ombre par défaut du logiciel de forum sur .post
   (la carte utilise déjà sa propre bordure définie plus haut) */
.post { border: 0; box-shadow: 0 0 0;}
.postbody { margin: 0; padding: 25px; text-align: justify;}
.postbody .content { color: var(--white1); text-align: justify;}

/* ============================================================
   21. PAGE DE PROFIL PUBLIC (.Myprofile)
   Colonne gauche (.prof-left) : avatar + infos rapides + icônes.
   Colonne droite (.prof-right) : couverture, citation, niveau, bio,
   inventaire, avatar complet, récompenses, triggers.
   ============================================================ */
/** PROFILE **/
.Myprofile { width:100%; min-height:600px; border:1px solid var(--dark3); border-radius:10px; overflow:hidden; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }

/* Colonne gauche : fond coloré selon le groupe du membre (--groups) */
.prof-left {
    grid-area: 1 / 1 / 2 / 2;
    border-radius: 0 20px 20px 0;
    background:var(--groups);
    display: grid;
    grid-template-columns: 200px;
    grid-template-rows: 200px 1fr 150px;
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    padding: 25px 25px;
}
.prof-avito {
    grid-area: 1 / 1 / 2 / 2;
    border: 2px solid var(--dark);
    border-radius: 10px;
    overflow: hidden;
    width: 200px;
    height: 200px;
}
.prof-avito img { width:100%; height:100%; }
.prof-data { grid-area: 2 / 1 / 3 / 2; display:flex; flex-flow:column; gap:10px; }
.p-data { border-bottom: 1px solid var(--dark); height: 30px; text-transform: uppercase; font-family: var(--font1); font-size: 11px; color: var(--white); display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.p-data i { height: 30px; width: 30px; background: var(--dark); border-radius: 5px 5px 0 5px; display: flex; align-items: center; justify-content: center; margin-bottom: -1px; margin-left:0px; }
.p-data e { display: flex; gap: 5px;}
/* Icônes de contact/réseaux sociaux du membre */
.prof-icons { grid-area: 3 / 1 / 4 / 2; display: flex; flex-flow: row wrap; gap: 9px; padding: 10px; align-items: center; justify-content: center; border: 1px solid var(--dark); border-radius: 10px; }
.prof-icons dd, .prof-icons a { height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; background: var(--dark); border-radius: 10px; font-size: 20px;}

.p-data.admin a { display: flex; align-items: center; justify-content: center; background: var(--dark); width: 100%; border-radius: 5px; padding: 5px;}
.p-data.admin { border: 0; padding: 0;}  
/******/
/* Colonne droite : grille 3 colonnes x 4 rangées pour tous les widgets du profil */
.prof-right {
    grid-area: 1 / 2 / 2 / 3;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 310px;
    grid-template-rows: 200px 300px 200px 50px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
/* Bandeau de couverture pleine largeur : citation à gauche, pseudo/rang au
   milieu, jauge de niveau (cercle découpé) à droite */
.prof-cover { grid-area: 1 / 1 / 2 / 4; border:1px solid var(--dark3); border-radius:10px; overflow:hidden;
display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 50px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.p-cover { grid-area: 1 / 1 / 3 / 3; filter:brightness(0.2) opacity(0.5);} .p-cover img { width:100%; }
  
.prof-quote { grid-area: 1 / 1 / 2 / 2; z-index:1; margin:10px; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.prof-quote i { grid-area: 1 / 1 / 2 / 2; background:var(--groups); height:30px; width:30px; color:var(--white); border-radius:5px; display:flex; align-items:center; justify-content:center; }
.prof-quote p { grid-area: 1 / 2 / 2 / 3; width:350px; font-size:12px; color:var(--white); height:35px; overflow:hidden;}
  
.prof-name { grid-area: 2 / 1 / 3 / 2; z-index:1;  display:flex; align-items:center; justify-content:center; flex-flow:column;}
.Username { font-family:var(--font3); font-size:20px; display:flex; align-items:center; justify-content:center; height:60px; }
.mrango { border:1px solid var(--groups); border-radius:5px; text-transform:uppercase; background:var(--dark5); height:40px; width:60%; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:12px; letter-spacing:5px; }

.prof-level { grid-area: 1 / 2 / 3 / 3; z-index:1; display: grid;
grid-template-columns: 1fr; grid-template-rows:100px 30px 70px; grid-column-gap: 0px; grid-row-gap: 0px; }

.p-levelback { grid-area: 1 / 1 / 4 / 2; clip-path: circle(66.3% at 70% 50%); background:var(--groups); }
.p-level { grid-area: 1 / 1 / 2 / 2; z-index:1; font-size:40px; font-family:var(--font3); padding-left:70px; color:white; display:flex; align-items:center; justify-content:center;}
.prof-level h5 { grid-area: 2 / 1 / 3 / 2; z-index:1; font-family:var(--font1); padding-left:70px; text-transform:uppercase; font-weight:500; font-size:15px; color:Var(--white); display:flex; align-items:center; justify-content:center;}
.p-levelbar { grid-area: 3 / 1 / 4 / 2; z-index:1; width:60%; margin-left: 95px; height: 40px; overflow: hidden; background: var(--dark); border: 2px solid var(--dark2); border-radius: 10px; outline: 1px solid var(--groups);
display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.muek.levelbar { grid-area: 1 / 1 / 2 / 2; z-index:1;  display:flex; align-items:center; justify-content:center; color:var(--white);  }  
.barrita { grid-area: 1 / 1 / 2 / 2;  width: 100%; height: 40px; overflow: hidden; }
.levelbarra { background: var(--grad1); height: 40px; border-radius: 5px;}
.p-levelbar img { display:none; }


/* Biographie du membre */
.prof-bio { grid-area: 2 / 1 / 3 / 2; border:1px solid var(--dark3); border-radius:10px; display: grid;     overflow: auto; padding-right: 5px;
grid-template-columns: 1fr; grid-template-rows: 40px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding:20px 15px 15px; }
.prof-bio h5 { grid-area: 1 / 1 / 2 / 2; font-family:var(--font3); color:var(--groups); font-size:13px; font-weight:100; text-transform:uppercase; }
.p-bio { grid-area: 2 / 1 / 3 / 2; text-align:justify; font-family:Var(--font1); color:var(--white); font-size:12px; line-height:150%;}
.p-bio strong { color:var(--groups); }
  
/* Inventaire du membre (liste défilante d'objets) */
.prof-inve { grid-area: 2 / 2 / 3 / 3; border:1px solid var(--dark3); border-radius:10px; display: grid;
grid-template-columns: 1fr; grid-template-rows: 40px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding:20px 15px 15px; }
.prof-inve h5 { grid-area: 1 / 1 / 2 / 2; font-family:var(--font3); color:var(--groups); font-size:13px; font-weight:100; text-transform:uppercase; }
.p-inventary { grid-area: 2 / 1 / 3 / 2; }
.p-inventary .field_uneditable ul { overflow: auto; height: 225px; display: flex; flex-flow: column; gap: 5px; padding-right: 5px; }  
.p-inventary .field_uneditable ul li { background: var(--dark1); border-radius: 5px; font-size: 11px; padding: 10px; text-align: justify; line-height: 110%; color: var(--white1); }
.p-inventary .field_uneditable ul li strong { color:var(--groups); font-weight:500; }

/* Grand avatar affiché à droite, avec badge de sous-rang en bas */
.prof-avatar { grid-area: 2 / 3 / 4 / 4; background:linear-gradient(40deg, var(--dark1), var(--groups)); border-radius:5px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding:4px;}
.inavatar { grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 465px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }

.mavatar { grid-area: 1 / 1 / 2 / 2; width:300px; height:500px; overflow:hidden; border-radius:5px;} .mavatar img { width:100%; }
.subrank { grid-area: 2 / 1 / 3 / 2; width: 300px; height: 100px;
    background-image: url(https://i.servimg.com/u/f22/20/61/57/05/figran10.png);
    display: flex; align-items: center; justify-content: center; background-size: 100%; background-repeat: no-repeat;
    position: relative; z-index: 1; margin-top: -50px; border-radius: 10px; }
.subrank .field_uneditable { height: 45px; background: var(--dark); display: flex; align-items: center; justify-content: center; width: 93%;
    margin-top:15px; font-family: var(--font2); font-size: 15px; color: var(--white); text-transform: uppercase; letter-spacing: 5px; border-radius: 5px; }
.muek span.label { display:none; }
  
  
/* Trophées / récompenses obtenues (liste d'images défilante) */
.prof-awards { grid-area: 3 / 1 / 4 / 3; border:1px solid var(--dark3); border-radius:10px;display: grid;
grid-template-columns: 1fr; grid-template-rows: 40px 1fr; grid-column-gap: 0px; grid-row-gap: 0px; padding:20px 15px 15px;; }
.prof-awards h5 { grid-area: 1 / 1 / 2 / 2; font-family:var(--font3); color:var(--groups); font-size:13px; font-weight:100; text-transform:uppercase; }
.p-awards { grid-area: 2 / 1 / 3 / 2; }
.p-awards tr { display: flex; flex-flow:row wrap; gap:8px; height: 130px; overflow: auto; padding-right: 10px; margin-top: -10px;} 
.p-awards tr img { width:50px; height:50px; border-radius:5px; }
  
/* Bandeau bas pleine largeur : liste des triggers (déclencheurs de RP) du membre */
.prof-trigger { grid-area: 4 / 1 / 5 / 4; border:1px solid var(--dark3); border-radius:10px; display: grid;
grid-template-columns: 200px 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 0px; padding:15px; }

.prof-trigger h5 { grid-area: 1 / 1 / 2 / 2; color: var(--groups); padding-top:2px; text-transform: uppercase; letter-spacing: 2px; line-height: 100%; font-family: var(--font3); display: flex; align-items: center; justify-content: center; font-weight: 100; gap:10px; }
.p-trigger { grid-area: 1 / 2 / 2 / 3; } .prof-trigger h5 i { font-size: 20px; vertical-align: 5px; margin-top: -2px;}
.p-trigger .field_uneditable { display: flex; gap: 10px; justify-content: start; align-items: center; overflow:hidden;}
.p-trigger .field_uneditable strong {
    background: linear-gradient(45deg, var(--dark1), var(--groups));
    border-radius: 5px;
    font-size: 11px;
    padding: 2px 10px;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 500;
    font-family: var(--font1);
}
.p-inventary .field_uneditable ul::-webkit-scrollbar-thumb, .p-bio::-webkit-scrollbar-thumb, .p-awards tr::-webkit-scrollbar-thumb { background:linear-gradient(45deg, var(--accent1), var(--groups)); }
table.profile-options td{vertical-align: top;}
/* ============================================================
   22. LISTE DES MEMBRES (.MemberList)
   Grille de cartes membre (.Member), + variante tableau classique
   utilisée ailleurs (tr.mluser).
   ============================================================ */
/** MEMBERLIST **/
.MemberList {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--dark3);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    justify-items: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    background: var(--dark1);
}
.MemberList .Member {
    width: 320px;
    background: linear-gradient(15deg, var(--dark) 40%, var(--groups));
    height: 520px;
    border-radius: 10px;
    padding: 10px;
}
.MemberList .bodymember {
    display: flex;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.MemberList .bodymember > a {
    border: 1px solid var(--groups);
    border-radius: 5px;
    font-size: 20px;
    color: var(--groups);
    font-family: var(--font1);
    align-self: center;
    padding: 10px;
    margin: 4px;
    background: var(--dark1);
}
.MemberList .Username {
    border-radius: 0;
    position: relative;
    z-index: 1;
    display: flex;
    font-weight: 100;
    align-items: flex-end;
    justify-content: center;
    padding: 0 20px 10px;
    background: linear-gradient(0deg, var(--dark1), transparent);
    font-family: var(--font4);
    line-height: 33px;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 248px;
}
.MemberList .datamember {
    display: flex;
    flex-flow: column;
    gap: 5px;
    padding: 10px 20px;
    background: var(--dark1);
}
.MemberList .campex {
    border: 1px solid var(--groups);
    border-radius: 5px;
    font-size: 11px;
    color: var(--white);
    font-family: var(--font1);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.MemberList .campex b {
    color: var(--groups);
}
/* Variante "tableau" de la liste des membres (arrière-plan = avatar) */
tr.mluser {
    background-size: cover;
    background-position: 0 30%;
    background-blend-mode: overlay;
    background-color: var(--dark1);
}
tr.mluser td.trow1 {background: transparent!important;}
td.trow1:nth-child(1) img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: 0 -60px;
}
/* ============================================================
   23. PIED DE PAGE (#footer)
   ============================================================ */
div#footer {
    display: grid;
    grid-template-columns: 500px 1fr 250px;
    align-items: center;
    align-content: center;
    justify-items: stretch;
    background: var(--dark);
    padding: 20px;
    border-radius: 35px;
    border: 1px solid var(--dark3);
    width: 1300px;
    margin: 0px auto 20px;
}
div#footer ul.menu.bottom_links {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4px;
}
div#footer ul.menu.bottom_links a {
    border-radius: 5px;
    padding: 6px;
    color: var(--white);
    font-size: 11px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dark);
    filter: brightness(1.25);
}
div#footer ul.menu.bottom_links li:last-of-type {grid-column: -1 / 1;}
div#footer .mid {
    text-align: center;
    color: var(--white);
}
div#footer .right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
}
div#footer form#theme_select {
    display: grid;
    grid-template-columns: 1fr 54px;
}

/* ============================================================
   24. SYSTÈME DE NOTIFICATIONS (cloche + popup + page dédiée)
   Bouton cloche avec pastille de compteur, panneau popup listant les
   dernières notifications, et une variante "page complète" paginée
   avec filtres. NOTE : cette section contenait plusieurs redéfinitions
   successives des mêmes sélecteurs (`.notiffi-count`, `.nav-notif-btn`,
   `.mnav-icons`, `.nav-label`...) — elles ont été fusionnées ci-dessous
   quand elles ne faisaient qu'ajouter des propriétés complémentaires,
   en gardant la valeur finale telle qu'appliquée par le navigateur.
   ============================================================ */
/* Bouton cloche dans ta nav */
.nav-notificaciones {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.nav-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.nav-notif-btn i.fa-bell {
    font-size: 16px;
}

/* Pastille de compteur (fusion des 3 déclarations dupliquées/étendues du
   fichier d'origine ; les valeurs ci-dessous sont celles réellement
   appliquées au final, la dernière déclaration gagnant sur les
   propriétés qu'elle redéfinit) */
.notiffi-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--accent1);
    color: white;
    border-radius: 10px;
    padding: 1px 4px;
    font-size: 9px;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}

/* POPUP — version large / immersive */
/* Popup centré à l'écran, ouvert/fermé via la classe .open (transition de fondu) */
.notiffi-panel {
    position: fixed;
    top: 50%;
    left: 50%;

    /* GROS POPUP */
    width: 800px;
    max-width: 95vw;
    height: 400px;
    max-height: 85vh;

    background: #1C1A1F;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0,0,0,.85);
    overflow: hidden;
    z-index: 999999;

    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -48%);
    transition: opacity .3s ease, transform .3s ease;
}

.notiffi-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

/* Header plus large */
.notiffi-header-bar {
    padding: 15px 20px;
    background: #141414;
    border-bottom: 1px solid #333;
    font-size: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Croix pour fermer */
.notiffi-close {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 26px;
    cursor: pointer;
    padding: 0;
}

.notiffi-close:hover {
    color: #fff;
}

/* Liste qui occupe TOUT le reste */
.notiffi-list {
    height: calc(100% - 60px); /* 60px = header */
    overflow-y: auto;
    padding: 10px 0;
}

/* Items plus aérés dans un grand panneau */
.notiffi-item {
    padding: 14px 20px;
    font-size: 14px;
}


.notiffi-item:last-child {
    border-bottom: none;
}

.notiffi-unread {
    background: rgba(255,255,255,0.03);
}

.notiffi-avatar {
    margin-right: 8px;
}

.notiffi-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.notiffi-body {
    flex: 1;
}

/* Titre + badge */
.notiffi-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.notiffi-title a {
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}

/* Badge type */
.notiffi-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    line-height: 1.6;
}

/* Couleurs par type */
.notiffi-badge-pm {
    background: #3498db;
    color: #fff;
}
.notiffi-badge-reply {
    background: #2ecc71;
    color: #fff;
}
.notiffi-badge-mention {
    background: #9b59b6;
    color: #fff;
}
.notiffi-badge-quote {
    background: #f1c40f;
    color: #000;
}
.notiffi-badge-default {
    background: #7f8c8d;
    color: #fff;
}

.notiffi-message {
    margin-top: 2px;
    color: #ccc;
}

.notiffi-meta {
    margin-top: 2px;
    font-size: 10px;
    color: #999;
}

.notiffi-loading,
.notiffi-empty,
.notiffi-error {
    padding: 10px;
    text-align: center;
    font-size: 12px;
}

/* Page dédiée "Toutes les notifications" (liste paginée + filtres) */
.notiffi-page {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px 24px;
    background: rgba(10,10,18,0.9);
    border-radius: 12px;
    border: 1px solid rgba(120,120,180,0.7);
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
}

.notiffi-page-title {
    margin: 0 0 15px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.notiffi-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    margin-bottom: 15px;
    font-size: 13px;
}

.notiffi-filters label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notiffi-filters select {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #555;
    background: #111;
    color: #eee;
}

.notiffi-filters button {
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #7f5af0, #2cb67d);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.notiffi-filters button:hover {
    filter: brightness(1.08);
}

.notiffi-list-page .notiffi-item {
    border-radius: 8px;
    margin-bottom: 6px;
}

.notiffi-pagination {
    margin-top: 15px;
    text-align: center;
}

.notiffi-title-icon i {
    font-size: 10px;
    color: #fff;
    opacity: 0.9;
}

.notiffi-title-icon i:hover {
    opacity: 1;
}

.notiffi-badge-followed {
    background: #1abc9c;
    color: #fff;
}


/* ============================================================
   25. VISUEL CENTRAL DE L'ONGLET D'ACCUEIL (2ᵉ passe) + NAV ICÔNES
   Complète .tab1image (section 10) avec un cadre/fond dédié, ajoute le
   personnage qui déborde du cadre (.text1imagefille) et les chiffres
   qui s'affichent devant (.tab1digits). Ajoute aussi une variante de la
   navigation (.mnav-icons, .nav-notificaciones, .nav-notif-btn) pour un
   balisage en liens <a> avec icône + petit label sous l'icône : ces
   sélecteurs existent déjà plus haut (section 10) pour un balisage en
   liste <li> ; les deux définitions coexistent volontairement car elles
   s'appliquent à des variantes de markup différentes du même menu.
   ============================================================ */

/* Chiffres dynamiques */
.tab1digits {
    position: absolute;
    left: 32px;
    bottom: 150px;
    width: 65%;
    font-family: "DM Mono","Fira Code",monospace;
    font-size: 13px;
    line-height: 1.6;
    color: white;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    pointer-events: none;
    white-space: normal;
    z-index: 2; /* passe devant le fond, derrière la fille */
}

  .tab1image {
    grid-area: 1 / 2 / 2 / 3;
    position: relative;
    align-self: center;
    justify-self: center;
    width: 420px;
    height: 555px;
    border-radius: 30px;
    padding: 18px 22px;
    margin-top: 63px;
    margin-right: 58px;
    background-image: url(https://i.imgur.com/FwNihtm.jpeg);
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); */
    overflow: visible;
    isolation: isolate;
	  background-size: cover;
}

/* cadre fin à l'intérieur */
.tab1image::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 24px;
    border: 2px solid rgba(255,255,255,0.55);
    opacity: .85;
    pointer-events: none;
}


/* --- IMAGE DE LA FILLE QUI DÉPASSE --- */
.text1imagefille {
    position: absolute;
    bottom: -2px;
    right: -175px;
    width: 800px;
    height: 600px;
    background-image: url(https://i.imgur.com/fXiETmM.png);
    background-size: cover;
    background-position: center;
    /* border-radius: 40px; */
    z-index: 5;
}

.fondinfostexte {
background: hsl(0deg 1% 16% / 0%);
    border-radius: 10px;
    height: 60px;
    width: 250px;
    padding: 10px;
    margin-top: -10px;
    margin-left: 135px;
    text-shadow: 1px 1px 15px black;
}

.mnav-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mnav-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 11px;
}

.mnav-icons a i {
  font-size: 16px;
  line-height: 1;
}

.mnav-icons a .nav-label {
  margin-top: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
    margin-bottom: -5px;
}

/* Si tu veux que le bloc login/register garde son fond spécial */
.guest-auth-block {
  display: flex;
  gap: 8px;
  padding: 3px 5px;
  border-radius: 5px;
}

.guest-auth-block a {
  color: #fff;
}

.nav-notificaciones {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-notif-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.nav-notif-btn i {
  font-size: 18px; /* ajuste selon ton design */
}

.nav-label {
  margin-top: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
    margin-bottom:-5px;
}

/* wrapper de l'icône + compteur */
.notif-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* (le badge .notiffi-count correspondant a été fusionné plus haut, avec
   les valeurs finales de la cascade — voir section 24) */

.text1imagefille {
    cursor: pointer;
}


/* ============================================================
   26. POPUPS GÉNÉRIQUES (.modal et variante .dc-modal)
   Deux systèmes de popup au même comportement (overlay + contenu
   centré), utilisés par différents scripts du site.
   ============================================================ */
/* --- POPUP GENERAL --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.active {
  display: flex;
}

/* Overlay */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
}

/* Contenu */
.modal-content {
  position: relative;
  background: #121212;
  color: #ddd;
  padding: 30px;
  width: min(600px, 90%);
  border-radius: 12px;
  z-index: 10;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Bouton de fermeture */
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  color: #fff;
  font-size: 32px;
  border: none;
  cursor: pointer;
}

/* Style interne */
.modal-inner h2 {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: #fff;
}

.modal-inner p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.modal-inner hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #333;
}


/* --- POPUP DIS/CLOSED (variante utilisée par le script "disclosed") --- */
.dc-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999999999; /* très au-dessus de tout */
}

.dc-modal.dc-active {
  display: flex;
}


.dc-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }


/* Contenu */
.dc-modal-content {
  position: relative;
  background: #0d0d10;
  color: #ddd;
  padding: 30px 30px 25px;
  width: min(650px, 90%);
  border-radius: 14px;
  z-index: 1;
  box-shadow: 0 0 40px rgba(0,0,0,0.7);
}

/* Bouton de fermeture */
.dc-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  color: #fff;
  font-size: 32px;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* Texte interne */
.dc-modal-inner h2 {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: #fff;
}

.dc-modal-inner p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.dc-modal-inner hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #333;
}

/* ============================================================
   27. DÉFILEMENT VERTICAL DU GUIDEBOOK (marquee)
   Fait défiler en boucle le contenu dupliqué de .guide-replies.
   ============================================================ */
/* Viewport du guidebook : zone visible */
.guide-marquee {
    overflow: hidden;
    height: 315px;
    position: relative;
    margin-top: -20px;
}

/* Contenu qui va défiler */
.guide-marquee-inner {
    display: flex;
    flex-direction: column;
    /* l’animation sera ajoutée après duplication du contenu */
    animation: guidebook-scroll 25s linear infinite;
}

/* Pause au survol de la zone */
.guide-marquee:hover .guide-marquee-inner {
    animation-play-state: paused;
}

/* Animation verticale */
@keyframes guidebook-scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* NOTE : redéfinition additionnelle de .news-slider (voir section 11) —
   `max-height` ne prend effet que si le contenu dépasse la `height: 50px`
   déjà fixée plus haut, donc sans incidence visuelle actuellement. La
   scrollbar personnalisée ci-dessous (6px, pouce gris) reste par contre
   invisible dans les faits : la règle plus haut `::-webkit-scrollbar {
   display: none; }` est encore active et prioritaire sur les navigateurs
   Chrome/Edge/Safari (elle masque la scrollbar quelle que soit sa largeur). */
.news-slider {
    max-height: 80px; /* hauteur visible */
    overflow-y: auto; /* scroll vertical */
    overflow-x: hidden; /* désactive le scroll horizontal */
    padding-right: 5px;
}

/* Option : un scroll propre (voir note ci-dessus : actuellement sans effet visuel) */
.news-slider::-webkit-scrollbar {
    width: 6px;
}

.news-slider::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

.news-slider::-webkit-scrollbar-track {
    background: transparent;
}


/* ============================================================
   28. POPUP DE CONNEXION (.login-modal)
   ============================================================ */
.login-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9999;
  font-family: inherit;
}

.login-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
}

.login-modal-content {
  position: relative;
  background: #121212;
  padding: 2rem;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  z-index: 1;
  box-shadow: 0 0 30px rgba(0, 0, 0, .75);
  color: #ffffff;
}

.login-modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.login-modal-close {
  position: absolute;
  top: .5rem;
  right: .8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #ccc;
  cursor: pointer;
}

.login-field {
  margin-bottom: 1rem;
}

.login-field label {
  display: block;
  font-size: .9rem;
  margin-bottom: .25rem;
}

.login-field input[type="text"],
.login-field input[type="password"] {
  width: 100%;
  padding: .5rem .6rem;
  border-radius: 6px;
  border: 1px solid #333;
  background: #181824;
  color: #ffffff;
}

.login-field input:focus {
  outline: none;
  border-color: var(--accent1, #e91e63);
}

.login-remember label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
}

.login-actions {
  margin-top: 1rem;
}

/* Bouton de connexion en dégradé marron/violet/orange */
.login-submit-btn {
  width: 100%;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: linear-gradient(232deg, #7F7258 15%, #7901C9 40%, #D29B52 100%);
  color: #fff;
     transition: all .3s;
}

.login-submit-btn:hover {
    background: linear-gradient(232deg, #7F7258 15%, #7901C9 40%, #D29B52 100%);
    letter-spacing: 3px;
}

.login-links {
  margin-top: .8rem;
  font-size: .8rem;
  text-align: center;
}

.login-links a {
  color: var(--accent2, #ffca28);
  text-decoration: none;
     transition: all .3s;
}

.login-links a:hover {
letter-spacing: 3px;
}

/* Pour Chrome / Edge / Opera */
.login-remember input[type="checkbox"]:checked {
    accent-color: white; /* ta couleur */
    color:black;
}


/* ================================================================
   29. TABLEAU DE BORD USERCP (#usercp-dashboard)
   Panneau utilisateur (paramètres de compte) : sidebar de navigation
   + carte utilisateur/stats à gauche, contenu (profil, avatar, notes...)
   à droite. Variables --ucp-* dédiées à ce module.
   ================================================================ */
/* ============ USERCP DASHBOARD BASE ============ */

:root {
    --ucp-bg: #050509;
    --ucp-bg-alt: #0b0b12;
    --ucp-card-bg: #11111b;
    --ucp-border: rgba(255, 255, 255, 0.05);
    --ucp-neon-primary: #a54c90;
    --ucp-neon-secondary: white;
    --ucp-text-main: #f5f5ff;
    --ucp-text-muted: #9b9bb3;
    --ucp-radius-lg: 18px;
    --ucp-transition-fast: 0.18s ease-out;
    --ucp-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* wrapper */

#usercp-dashboard {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    background: #1C1A1F;
    padding: 24px;
    border-radius: 20px;
    margin: 30px auto;
    max-width: 1300px;
    position: relative;
    overflow: hidden;
    border:1px solid #3D3D3D;
}

/* glitch pseudo-lignes */
#usercp-dashboard::before,
#usercp-dashboard::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 100% 32px;
    mix-blend-mode: soft-light;
    opacity: 0.4;
    pointer-events: none;
}

/* ============ SIDEBAR ============ */

.ucp-sidebar {
    background: #151417;
    border-radius: var(--ucp-radius-lg);
    border: 1px solid #3D3D3D;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.ucp-logo {
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ucp-text-muted);
    display: flex;
    gap: 4px;
    font-weight: 600;
}

.ucp-logo-mark {
    color: var(--ucp-neon-primary);
}
.ucp-logo-mark.alt {
    color: var(--ucp-neon-secondary);
}

/* user card */

.ucp-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #3D3D3D;
}

.ucp-avatar-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden; /* <---- important */
    position: relative;
}


.ucp-avatar-wrapper img {
    height: 60px;
    width: 60px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 100%;
    margin-top:5px;
    /* margin-right: 15px !important; */
}

.ucp-user-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ucp-username {
    color: var(--ucp-text-main);
    font-size: 16px;
    font-weight: 600;
}
.ucp-user-title {
    color: var(--ucp-neon-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.ucp-user-id {
    color: var(--ucp-text-muted);
    font-size: 11px;
}

/* quick stats */

/* Mini-cartes de stats rapides dans la sidebar */
.ucp-quick-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* (la valeur `1fr 1fr` déclarée puis aussitôt remplacée, ainsi que
       l'accolade fermante orpheline juste après ce bloc dans le fichier
       d'origine, ont été supprimées : aucune incidence visuelle) */
}

.ucp-stat {
    background: rgba(10, 10, 20, 0.95);
    border-radius: 12px;
    padding: 8px 9px;
    border: 1px solid var(--ucp-border);
}

.ucp-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ucp-text-muted);
    margin-bottom: 4px;
}
.ucp-stat-value {
    font-size: 14px;
    color: var(--ucp-text-main);
    font-weight: 600;
}

/* nav */

.ucp-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ucp-nav-section {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ucp-text-muted);
    opacity: 0.75;
}

.ucp-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--ucp-text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    position: relative;
    transition: background var(--ucp-transition-fast), border var(--ucp-transition-fast), transform var(--ucp-transition-fast), color var(--ucp-transition-fast);
}

.ucp-nav-bullet {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.ucp-nav-link:hover {
    background: rgba(255, 60, 241, 0.07);
    border-color: #3D3D3D;
    color: var(--ucp-text-main);
    transform: translateX(2px);
}

.ucp-nav-link:hover .ucp-nav-bullet {
    background: var(--ucp-neon-primary);
    box-shadow: 0 0 8px rgba(255, 60, 241, 0.9);
}

/* active (MyBB met souvent une classe ou style, adapte si besoin) */
.ucp-nav-link.active,
.ucp-nav-link.selected {
    background: linear-gradient(90deg, rgba(255, 60, 241, 0.27), rgba(70, 227, 255, 0.15));
    border-color: rgba(255, 60, 241, 0.8);
    color: var(--ucp-text-main);
}

/* footer */

.ucp-sidebar-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--ucp-border);
}
.ucp-small {
    font-size: 10px;
    color: var(--ucp-text-muted);
}

/* ============ MAIN CONTENT ============ */

.ucp-main {
    background: #151417;
    border-radius: var(--ucp-radius-lg);
    border: 1px solid #3D3D3D;
    padding: 18px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.ucp-main-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.ucp-title {
    margin: 0;
    font-size: 20px;
    color: var(--ucp-text-main);
}

.ucp-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ucp-text-muted);
}

.ucp-header-actions {
    display: flex;
    gap: 8px;
}

/* Buttons */

.ucp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ucp-transition-fast), border var(--ucp-transition-fast), box-shadow var(--ucp-transition-fast), transform var(--ucp-transition-fast), color var(--ucp-transition-fast);
}

.ucp-btn.primary {
    background: linear-gradient(232deg, #7F7258 15%, #7901C9 40%, #D29B52 100%);
    color: white;
    border-color: #3D3D3D;
}

.ucp-btn.ghost {
    background: transparent;
    border-color: #3D3D3D;
    color: var(--ucp-text-main);
}

.ucp-btn:hover {
    transform: translateY(-1px);
}

/* content area */

.ucp-content {
    margin-top: 4px;
}

/* Dashboard grid (home) */

.ucp-grid-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.ucp-card {
    background: #1c1a1f;
    border-radius: 16px;
    border: 1px solid #3D3D3D;
    padding: 12px 12px 11px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
.ucp-card.wide {
    grid-column: 1 / -1;
}

.ucp-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at top, #151515, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.ucp-card:hover::before {
    opacity: 1;
}

.ucp-card-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ucp-text-muted);
    margin: 0 0 8px;
}

.ucp-card-body {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: var(--ucp-text-main);
}

/* overview blocks */

.ucp-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.ucp-overview-block {
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid #3D3D3D;
    background: rgb(21 20 23);
}

.ucp-overview-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ucp-text-muted);
    margin-bottom: 4px;
}
.ucp-overview-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--ucp-neon-secondary);
}

/* list content from MyBB tables */

.ucp-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.ucp-list th,
.ucp-list td {
    padding: 6px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-align: left;
}

.ucp-list th {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 10px;
    color: var(--ucp-text-muted);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
    #usercp-dashboard {
        grid-template-columns: 1fr;
        padding: 14px;
        margin: 16px auto;
    }

    .ucp-main-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ucp-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .ucp-sidebar {
        order: -1;
    }
}

.ucp-nav-plus {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ucp-neon-primary);
    margin-right: 8px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ucp-nav-link:hover .ucp-nav-plus {
    transform: rotate(90deg) scale(1.2);
    color: var(--ucp-neon-secondary);
}

.ucp-notepad-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #11111b;
    padding: 10px;
    font-size: 12px;
    color: var(--ucp-text-main);
    resize: vertical;
}

.ucp-notepad-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.usercp_container {
    margin: 5px;
     padding: 0px!important;
   border:none!important;
}

/* ================================================================
   30. CARTE "PROFIL" DE L'USERCP — ATTENTION, ZONE À REVOIR
   ================================================================
   Le fichier d'origine contient ICI trois vagues successives de règles
   pour la même carte de profil (probablement des itérations gardées
   sans nettoyer les précédentes) : `.ucp-profile-card` était répété
   3 fois à l'identique (fusionné en une seule règle ci-dessous, sans
   risque), mais `.ucp-profile-col`, `.ucp-profile-block(-title/-body)`,
   `.ucp-profile-actions` et les styles d'input y sont chacun déclarés
   2 à 3 fois avec des approches de mise en page différentes (colonnes
   en grille de cartes, puis en cellules de tableau, puis en flexbox).
   Ces règles se cumulent dans la cascade (le navigateur applique un
   mélange des trois), ce qui fonctionne visuellement tel quel mais est
   fragile : elles n'ont PAS été fusionnées ici par prudence (un mauvais
   choix de "valeur gagnante" changerait le rendu). Recommandé : tester
   dans le navigateur puis supprimer manuellement les deux plus anciennes
   vagues une fois confirmé laquelle est réellement utilisée par le HTML.
   ================================================================ */
.ucp-profile-card {
    background: #1C1A1F !important;
    border: 1px solid #3D3D3D !important;
}

.ucp-profile-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* FIELDSETS */

.ucp-fieldset {
    border: 1px solid #3D3D3D;
    border-radius: 14px;
    padding: 12px 14px 10px;
    background: #18161B;
    margin: 0 0 10px;
}

.ucp-fieldset legend {
    padding: 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ucp-text-muted);
}

.ucp-fieldset legend span {
    background: #1C1A1F;
    padding: 2px 6px;
    border-radius: 999px;
}

/* TABLE INTERNE */
.ucp-profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ucp-profile-table td {
    padding: 4px 2px;
}

/* INPUTS / SELECT / TEXTBOX */
.ucp-profile-table input.textbox,
.ucp-profile-table select,
.ucp-profile-table textarea {
    background: #111015;
    border: 1px solid #3D3D3D;
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--ucp-text-main);
    font-size: 12px;
}

.ucp-profile-table input.textbox:focus,
.ucp-profile-table select:focus,
.ucp-profile-table textarea:focus {
    outline: none;
    border-color: var(--ucp-neon-primary);
    box-shadow: 0 0 8px rgba(255, 60, 241, 0.3);
}

/* COLONNES CUSTOM / CONTACT / AWAY */
.ucp-profile-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.ucp-profile-col {
    background: #18161B;
    border-radius: 14px;
    border: 1px solid #3D3D3D;
    padding: 10px 12px;
}

/* ACTIONS */
.ucp-profile-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}


/* (2ᵉ vague de règles pour .ucp-profile-card — voir avertissement section 30 ;
   la déclaration background/border étant identique, elle n'a pas été
   répétée ici) */
.ucp-profile-card .ucp-card-body {
    padding-top: 14px;
}

/* TABLE GLOBALE DU PROFIL */
.ucp-profile-table {
    width: 100%;
    border-collapse: collapse;
}

/* COLONNES GAUCHE / DROITE */
.ucp-profile-col {
    vertical-align: top;
    padding: 6px 8px;
}

/* BLOCS DANS CHAQUE COLONNE */
.ucp-profile-block {
    background: #18161B;
    border: 1px solid #3D3D3D;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.ucp-profile-block-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ucp-text-muted);
    margin-bottom: 6px;
}

.ucp-profile-block-body {
    font-size: 12px;
    color: var(--ucp-text-main);
}

/* INPUTS / SELECT / TEXTAREA dans le profil */
.ucp-profile-card input.textbox,
.ucp-profile-card select,
.ucp-profile-card textarea {
    background: #111015;
    border: 1px solid #3D3D3D;
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--ucp-text-main);
    font-size: 12px;
}

.ucp-profile-card input.textbox:focus,
.ucp-profile-card select:focus,
.ucp-profile-card textarea:focus {
    outline: none;
    border-color: var(--ucp-neon-primary);
    box-shadow: 0 0 8px rgba(255, 60, 241, 0.35);
}

/* BOUTON EN BAS */
.ucp-profile-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

/* (3ᵉ vague de règles pour .ucp-profile-card — voir avertissement section 30) */
/* Grid principal */
.ucp-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

/* Colonnes */
.ucp-profile-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Blocs internes */
.ucp-profile-block {
    background: #18161B;
    border: 1px solid #3D3D3D;
    border-radius: 14px;
    padding: 10px 12px;
}

.ucp-profile-block-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ucp-text-muted);
    margin-bottom: 6px;
}

.ucp-profile-block-body {
    font-size: 12px;
    color: var(--ucp-text-main);
}

/* Rangée date de naissance */
.ucp-profile-bday-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Champs dans la card profil */
.ucp-profile-card input.textbox,
.ucp-profile-card select,
.ucp-profile-card textarea {
    background: #111015;
    border: 1px solid #3D3D3D;
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--ucp-text-main);
    font-size: 12px;
}

.ucp-profile-card input.textbox:focus,
.ucp-profile-card select:focus,
.ucp-profile-card textarea:focus {
    outline: none;
    border-color: var(--ucp-neon-primary);
    box-shadow: 0 0 8px rgba(255, 60, 241, 0.35);
}

/* Bouton de validation */
.ucp-profile-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

/* TITRES (h2, titres de bloc, labels d'input) */
.ucp-card-title,
.ucp-profile-block-title,
.ucp-profile-block label,
.ucp-card-body label,
fieldset legend,
.ucp-profile-block .smalltext strong {
    font-family: 'Rajdhani', 'Orbitron', 'Eurostile', sans-serif !important;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #b7b4ff; /* violet pâle futuriste */
    text-shadow: 0 0 4px rgba(158, 114, 253, 0.5);
}

.ucp-profile-block-body label,
.ucp-profile-block-body .smalltext,
.ucp-profile-col label {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #d4d4e3;
}

.ucp-profile-block-body strong {
    color: #f08cff;
    font-weight: 600;
}

.ucp-profile-block-body span.smalltext,
.ucp-profile-block-body label {
    color: #c7c6d9;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.ucp-profile-block-body span.smalltext strong {
    color: #ff72ff;
}

/* === TITRES DE CHAMPS (Cover Image, User Icon, Bio...) === */

.ucp-profile-block-body .field-title,
.ucp-profile-col .field-title,
.ucp-profile-block-body label.field-title {
    display: inline-block;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #c7b4ff;
    border: 1px solid rgba(140, 120, 255, 0.25);
    margin-bottom: 6px;
    margin-top: 12px;
}

/* Variation si tu veux un léger glow */
.ucp-profile-block-body .field-title.glow {
    box-shadow: 0 0 8px rgba(140, 120, 255, 0.25);
}

/* Conteneur des champs custom */
.ucp-customfields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Un champ custom */
.ucp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Label : "Cover Image", "User Icon", "Bio", "Vos Triggers" */
.ucp-field-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #c7b4ff;
    border: 1px solid rgba(140, 120, 255, 0.3);
}

/* Input / textarea à l’intérieur de ce bloc */
.ucp-field-input input,
.ucp-field-input textarea,
.ucp-field-input select {
    width: 100%;
    background: #131218;
    border: 1px solid #3D3D3D;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #ffffff;
}

/* Texte descriptif sous le champ */
.ucp-field-desc {
    font-size: 11px;
    color: #8f8ea8;
}


/* Dans le bloc "Informations complémentaires",
   on masque l'ancien rendu MyBB (labels / descriptions en double) */
.ucp-customfields > .smalltext,
.ucp-customfields > br {
    display: none;
}

.ucp-customfields > span.smalltext,
.ucp-customfields > div.smalltext {
    display: none;
}

/* Conteneur du tableau des champs custom dans la card profil */
.ucp-profile-card table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* Colonne label (Cover Image, User Icon, Bio, etc.) */
.ucp-profile-card .trow2 strong {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #c7b4ff;
}

/* Texte descriptif sous le label (ex : “CI”, explication de Bio etc.) */
.ucp-profile-card .trow2 .smalltext {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #8f8ea8;
}

/* Inputs / textarea dans la colonne de droite */
.ucp-profile-card .trow2 input.textbox,
.ucp-profile-card .trow2 textarea,
.ucp-profile-card .trow2 select {
    width: 100%;
    background: #131218;
    border: 1px solid #3D3D3D;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #ffffff;
}


/* ============================================================
   31. PAGE "CHANGER D'AVATAR" DE L'USERCP
   ============================================================ */
/* Card avatar : même skin que le reste */
.ucp-avatar-card {
    background: #1C1A1F;
    border: 1px solid #3D3D3D;
}

/* Layout 2 colonnes : aperçu / formulaire */
.ucp-avatar-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
}

/* Bloc aperçu */
.ucp-avatar-preview-block {
    background: #18161B;
    border: 1px solid #3D3D3D;
    border-radius: 14px;
    padding: 12px 14px;
    text-align: center;
}

.ucp-avatar-preview-inner img {
    max-width: 100%;
    border-radius: 10px;
}

.ucp-avatar-note {
    margin-top: 8px;
    font-size: 11px;
    color: #8f8ea8;
}

/* Bloc formulaire */
.ucp-avatar-form-block .ucp-field {
    margin-bottom: 14px;
}

.ucp-avatar-form-block {
    width: 100%;
}

.ucp-field-checkbox {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.ucp-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #d6d4e6;
}

.ucp-checkbox-label input[type="checkbox"] {
    margin: 0;
}


/* NETTOYAGE : `.ucp-avatar-preview-inner` était déclaré deux fois (la
   seconde redéfinissait `min-height` à 140px et ajoutait la disposition
   en colonne) : fusionné ci-dessous avec les valeurs finales. */
.ucp-avatar-preview-inner {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px;
}

.ucp-avatar-empty {
    font-size: 12px;
    color: #8f8ea8;
    text-align: center;
}

.ucp-avatar-preview-img {
    width: 260px;
    height: 360px;
    object-fit: cover;
    border-radius: 18px;
}


/* Par défaut, on cache le texte “Aucun avatar” */
.ucp-avatar-empty {
    display: none;
    font-size: 12px;
    color: #8f8ea8;
}

/* Si l’avatar est vide (src=""), on cache l’image et on montre le texte */
.ucp-avatar-preview-img[src=""],
.ucp-avatar-preview-img:not([src]) {
    display: none;
}

.ucp-avatar-preview-img[src=""] + .ucp-avatar-empty,
.ucp-avatar-preview-img:not([src]) + .ucp-avatar-empty {
    display: block;
}

/* Limiter la largeur des selects “single line” dans le UserCP
   NOTE : max-width est ici à 10px, ce qui semble être une valeur
   provisoire/erronée (un select ne peut pas être plus fin que son
   contenu) — laissé tel quel pour ne pas changer le rendu actuel,
   mais probablement à corriger côté design (ex: 160px ?). */
.ucp-options select {
    max-width: 10px;   /* Ajuste ici si tu veux plus petit ou plus large */
    width: 100%;
}

/* Spécifiquement pour la ligne DST si tu veux être plus strict */
.ucp-options .ucp-field select#dstcorrection {
    max-width: 10px;
}

/* Select plus compact pour la correction heure d'été */
.ucp-select-short {
    width: auto !important;
    max-width: 320px;
    display: inline-block;
}


.ucp-field-input input, .ucp-field-input textarea, .ucp-field-input select {
    width:auto;
}

/* ================================================================
   32. TABLEAU DE BORD MODÉRATION (ModCP)
   Reprend le skin de l'UserCP (mêmes tons sombres/violets) pour les
   tableaux et le dashboard de modération.
   ================================================================ */
/* === TABLES GLOBALES DU MODCP === */

.modcp-card .tborder,
.modcp-card table {
    width: 100%;
    border-collapse: collapse;
    background: #18161b;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #3d3d3d;
}

/* En-têtes */
.modcp-card .thead,
.modcp-card thead tr {
    background: linear-gradient(90deg, #2a2433, #211f2a);
}

.modcp-card .thead strong,
.modcp-card thead th {
    font-family: 'Rajdhani','Orbitron',sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #d5cfff;
}

/* Lignes & cellules */
.modcp-card .trow1,
.modcp-card .trow2,
.modcp-card tbody tr {
    background: #18161b;
}

.modcp-card .trow1:nth-child(even),
.modcp-card .trow2:nth-child(even),
.modcp-card tbody tr:nth-child(even) {
    background: #15141a;
}

.modcp-card td,
.modcp-card th {
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid #25232b;
}

/* Dernière ligne sans bordure dure */
.modcp-card tbody tr:last-child td {
    border-bottom: none;
}

/* Liens dans le modcp */
.modcp-card a {
    color: #bfa7ff;
}
.modcp-card a:hover {
    color: #ff8cff;
}

/* Boutons / inputs dans le modcp */
.modcp-card input.textbox,
.modcp-card select,
.modcp-card textarea {
    background: #131218;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
    padding: 6px 9px;
    color: #fff;
    font-size: 13px;
}

.modcp-card input.button,
.modcp-card input[type="submit"] {
    border-radius: 999px;
    padding: 6px 18px;
    border: none;
    background: linear-gradient(90deg, #ff9a5a, #ff4fd8);
    color: #fff;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
}

.modcp-card input.button:hover,
.modcp-card input[type="submit"]:hover {
    filter: brightness(1.1);
}

.modcp-nav .ucp-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.modcp-nav .ucp-nav-link:hover {
    background: rgba(255,255,255,0.04);
}

     /* Layout du dashboard modération */
.modcp-content .ucp-card {
    background: #1C1A1F;
    border: 1px solid #3D3D3D;
}

.modcp-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.modcp-panel {
    background: #18161B;
    border-radius: 14px;
    border: 1px solid #3D3D3D;
    padding: 10px 12px;
}

.modcp-panel-title {
    font-family: 'Rajdhani','Orbitron',sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #c7b4ff;
    margin-bottom: 8px;
}

/* Tables à l’intérieur du ModCP (dashboard) */
.modcp-content .tborder,
.modcp-content .modcp-table {
    width: 100%;
    border-collapse: collapse;
    background: #18161B;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #3D3D3D;
}

.modcp-content .thead,
.modcp-content .tcat,
.modcp-content .modcp-table tr:first-child {
    background: linear-gradient(90deg, #272233, #201f2a);
}

.modcp-content .thead strong,
.modcp-content .tcat strong,
.modcp-content .modcp-table th {
    font-family: 'Rajdhani','Orbitron',sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #e2ddff;
}

.modcp-content .trow1,
.modcp-content .trow2,
.modcp-content .modcp-table td {
    background: #18161B;
    font-size: 13px;
    color: #e3e1f2;
}

.modcp-content .trow1 td,
.modcp-content .trow2 td,
.modcp-content .modcp-table td,
.modcp-content .modcp-table th {
    padding: 7px 10px;
    border-bottom: 1px solid #26242f;
}

.modcp-content .trow1:nth-child(even),
.modcp-content .trow2:nth-child(even) {
    background: #15141A;
}

.modcp-content .modcp-table tr:last-child td {
    border-bottom: none;
}

/* Liens dans les tables ModCP */
.modcp-content a {
    color: #bfa7ff;
}
.modcp-content a:hover {
    color: #ff8cff;
}

/* Textarea des notes */
.modcp-content .ucp-textarea {
    width: 100%;
    background: #131218;
    border-radius: 10px;
    border: 1px solid #3D3D3D;
    padding: 10px;
    color: #fff;
    resize: vertical;
}

.forum-item.forum-20 > .forumname {
    z-index:99;
}

/* ================================================================
   33. STYLE DU "DERNIER MESSAGE" (liste des forums) + NAVBAR STICKY
   ================================================================ */
/* =============================== */
/* PSEUDO DU DERNIER POSTEUR       */
/* =============================== */

.lastpost-username {
    color: var(--group-color);
    font-weight: 600;
}

/* =============================== */
/* FLECHE DEVANT LE TITRE          */
/* =============================== */

.lastpost-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* Icône carré blanche avec flèche ↗ */
.lastpost-arrow {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Flèche noire */
.lastpost-arrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    transform: rotate(45deg); /* ↗ */
    position: relative;
    top: -1px;
}


/* =============================== */
/* TEXTE DU TITRE DU LASTPOST      */
/* =============================== */

.lastpost-title strong {
    font-weight: 700;
    color: red; /* ou ta couleur de texte normale */
}

.lastpost-title strong {
    background: linear-gradient(45deg, #BCDF4D, #BCDF4D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* NOTE : sélecteur `..fa-solid` invalide (double point) dans le fichier
   d'origine — toute la règle est donc actuellement ignorée par le
   navigateur (une liste de sélecteurs CSS classique est entièrement
   rejetée si un seul de ses sélecteurs est invalide). Non corrigé ici
   pour ne pas ajouter un `margin-top: 1.5px` qui ne s'applique pas
   actuellement ; à corriger volontairement si l'effet est désiré :
   `.fa-solid, .fas { margin-top: 1.5px; }` */
..fa-solid, .fas {
    margin-top:1.5px;
}

.lastpost-username a {
    color: var(--group-color) !important;
    font-weight: 600;
}

/* --- NAVBAR --- */
/* Barre de nav qui se détache et devient fixe en haut de l'écran au scroll
   (classe .mnavbar-sticky ajoutée par JS) */
/* NAVIGATIONAL */ .mnavbar { height: 70px; width: 908px; display: flex; gap: 0px; position: absolute; top: 1vh; left: 36.5%; transform: translateX(-50%); z-index: 999; transition: 1s; color: var(--white); }
/* état normal, dans le header */ .mnavbar, .nav-switch { /* ne touche PAS à tes propriétés existantes si tu en as déjà */ transition: all 0.3s ease; } /* tu peux aussi adapter un peu la disposition interne si besoin */ .mnavbar.mnavbar-sticky .mnav { width: 100%; justify-content: space-between; } /* si tu veux serrer un peu la hauteur en mode sticky */ .mnavbar.mnavbar-sticky .mnav-icons a i { /* ex : icônes un poil plus petites en sticky */ /* font-size: 14px; */ } /* état normal */ .mnavbar { transition: all 0.2s ease; } /* état sticky (après scroll) */ .mnavbar.mnavbar-sticky { position: fixed; width: 1285px!important; left: 50%; z-index: 9999; }
.mnavbar.mnavbar-sticky .nav-switch {width: 100%;}

/* ============================================================
   34. AVATAR DU DERNIER MESSAGE (liste des sujets d'un forum)
   ============================================================ */
/* Cadre avatar lastpost sur la liste des sujets */
body.forumdisplay .row-avatar-threads {
    border: 2px solid var(--group-color, #666); /* couleur = groupe, fallback #666 */
    border-radius: 8px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Avatar dedans : carré / rectangulaire propre */
body.forumdisplay .row-avatar-threads img {
    width: 80px;          /* ajuste à ta maquette */
    height: 80px;
    object-fit: cover;
    border-radius: 4px;   /* 0 si tu veux un carré strict */
    display: block;
}

.float_right a.button {
    width: 155px;
        font-family: var(--font1);
        margin-left: 15px;
}

/* Encart de titre de sujet en haut de la page de discussion */
.titresujetdisclosed {
    text-transform:uppercase;
color:white;
background: #121212;
border-radius: 15px;
        padding: 20px;
    border: 1px solid #3D3D3D;
    width: 97%;
    margin-left: 20px;
}

/* ============================================================
   35. ICÔNES DE STATUT DE SUJET (nouveau / lu / populaire / fermé)
   Remplace les images de statut par défaut du logiciel de forum par
   des icônes Font Awesome (via ::before / ::after sur .thread_status).
   ============================================================ */
/* --- base --- */
#thread .thread_status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none !important;
    font-size: 16px !important;
}
/* Police FA 7 FREE */
#thread .thread_status::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    line-height: 1;
    content: "\f4ad"; /* comment-dots — remplace l'ancien "commenting" (f27a), retiré depuis la v5 */
}
/* --- NOUVEAUX MESSAGES --- */
#thread .thread_status.newfolder::before,
#thread .thread_status.newhotfolder::before,
#thread .thread_status.dot_newfolder::before,
#thread .thread_status.dot_newhotfolder::before {
    content: "\f4ad"; /* comment-dots (solid) */
    font-weight: 900;
    color: #a45cff; /* violet flashy */
}
/* --- ANCIENS MESSAGES / LUS --- */
#thread .thread_status.folder::before,
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_folder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "\f4ad"; /* comment-dots (regular/light look) */
    font-weight: 400;
    color: #777;
}
/* --- SUJET POPULAIRE (nouveau) --- */
#thread .thread_status.newhotfolder::before,
#thread .thread_status.dot_newhotfolder::before {
    content: "\f06d"; /* fire */
    font-weight: 900;
    color: #ff4d4d;
}
/* --- SUJET POPULAIRE (ancien) --- */
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "\f7e4"; /* fire-flame-curved */
    font-weight: 900;
    color: #ffaa44;
}
/* --- SUJET FERMÉ --- */
#thread .thread_status.closefolder::before {
    content: "\f023"; /* lock */
    font-weight: 900;
    color: #ff4545;
}
/* --- LISTE DES SUJETS : icône + petit dot --- */
#thread .thread_status[class*="dot_"] {
    position: relative;
    padding-right: 6px;
}
#thread .thread_status[class*="dot_"]::after {
    content: "\f192"; /* circle-dot */
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #BCDF4D;
}
/* Légende : "Vous avez participé à ce sujet" → dot seul */
.thread_status_dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.thread_status_dot::before {
    content: "\f192"; /* circle-dot */
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
    font-size: 13px;
    color: #BCDF4D;
}
/* Masquer l'icône de sujet populaire (nouveau & ancien) */
#thread .thread_status.newhotfolder::before,
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_newhotfolder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "" !important;
}
/* Masquer aussi l'icône dans la légende */
.thread_legend .thread_status.newhotfolder::before,
.thread_legend .thread_status.hotfolder::before {
    content: "" !important;
}
.forumreplylast .lastreplyinfo {
    display: block;
}

/* Fond assombri derrière le popup de notifications (section 24) */
.notiffi-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
  z-index: 99998;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.notiffi-overlay.open {
  opacity: 1;
  pointer-events: auto;
}


/* ================================================================
   36. FORMULAIRE D'INSCRIPTION MULTI-ÉTAPES (.dc-register-card)
   Barre de progression (.dc-reg-progress), étapes affichées une par
   une (.dc-reg-step / .dc-reg-step-active), champs de formulaire et
   navigation précédent/suivant (.dc-reg-nav).
   ================================================================ */
/* DC REGISTER */
.dc-register-card {                /* prend toute la largeur disponible du wrapper */
     width: 100%;
    max-width: none;            /* supprime toute limite */
    margin: 10px 0;       /* optionnel : limite haute si tu veux */
    background: #1c1a1f;
    border-radius: 16px;
    border: 1px solid #3D3D3D;
    padding: 22px 24px 26px;
    box-sizing: border-box;     /* pour que le padding ne dépasse pas */
}


.dc-register-title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
}

/* Progression */
.dc-reg-progress { margin-bottom: 20px; }
.dc-reg-progress-bar {
    height: 3px;
    width: 0;
    background: linear-gradient(90deg,#e6ff7f,#ff8e8e);
    border-radius: 999px;
    transition: width .3s ease;
}
.dc-reg-progress-steps {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-top: 6px;
    opacity: .7;
}

/* Steps */
.dc-reg-steps { min-height: 260px; }
.dc-reg-step { display: none; animation: dc-step-fade .25s ease; }
.dc-reg-step-active { display: block; }

@keyframes dc-step-fade {
    from { opacity:0; transform: translateY(4px); }
    to   { opacity:1; transform: translateY(0); }
}

.dc-reg-step h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 4px;
}
.dc-reg-step-desc {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 16px;
}

/* Champs */
.dc-field { margin-bottom: 14px; }
.dc-field-half { display:flex; gap:10px; }
.dc-field-half > div { flex:1; }

.dc-field label {
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    margin-bottom:4px;
}

.dc-field input,
.dc-field select,
.dc-field textarea {
    width:100%;
    padding:7px 9px;
    border-radius:8px;
    border:1px solid rgba(180,180,180,.25);
    background:rgba(10,10,20,.95);
    color:#f3f5ff;
    font-size:13px;
}

.dc-field input:focus,
.dc-field select:focus,
.dc-field textarea:focus {
    outline:none;
    border-color:#e6ff7f;
    box-shadow:0 0 0 1px rgba(230,255,127,.4);
}

.dc-smalltext { font-size:12px; opacity:.8; }

/* Checkboxes */
.dc-checkbox-line label {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
}
.dc-checkbox-line input { width:auto; }

/* Divers */
.dc-separator {
    border:0;
    border-top:1px solid rgba(255,255,255,.06);
    margin:18px 0;
}
.dc-subtitle {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.16em;
    margin-bottom:4px;
}

/* Navigation */
.dc-reg-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:22px;
    gap:8px;
    flex-wrap:wrap;
}

.dc-btn {
    border-radius:999px;
    padding:7px 16px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    border:1px solid rgba(200,200,200,.5);
    background:rgba(15,15,25,.9);
    cursor:pointer;
}
.dc-btn:hover { filter:brightness(1.08); }

.dc-btn-ghost {
    background:transparent;
    border-style:dashed;
    opacity:.9;
}

.dc-btn-primary {
    background:linear-gradient(120deg,#e6ff7f,#ff8e8e);
    border-color:transparent;
}

/* Responsive */
@media (max-width:600px){
    .dc-register-card{ padding:18px 14px 20px; }
    .dc-field-half{ flex-direction:column; }
}