/* === ROOT & GLOBAL === */
:root {
  /* fonts */
--font1: 'Poppins', sans-serif;
--font2: 'Motest', serif;
--font3: 'Motest1375', sans-serif;
--font4: 'DM Mono', sans-serif;
/* neutrals */
--white:#f3f3f3;
--white1:#e0e0e0;
--white3:#E9EBED;
--dark:#1C1A1F;
--dark1:#292929;
--dark2:#232322;
--dark3:#3d3d3d;
--dark5:#4c4c4c80;
--dark4:#636363;
--accent1: #7d4d7d;
--accent2: #7901c8;
--accent3: #7b309a;
--accent4: #e68d16;
--accent5: #da9334;
--accent6: #d29b52;
/* groups */
--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:#BAA37E;
/* effects */
--grad1:linear-gradient(150deg,var(--accent1),var(--accent3),var(--accent6) 80%);
--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-12 {--groups: var(--war);}
.gid-13 {--groups: var(--conv);}
.gid-14 {--groups: var(--merce);}
.gid-15 {--groups: var(--gang);}
.gid-1 {--groups: var(--guests);}

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

.row.forum-item, li.row.forum-2, li.row.forum-7 {
background: #1c1a1f;
}

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


/* Fonts */
@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");}

/* Browser */
::-webkit-scrollbar {
    background-color: var(--dark3);
    height: 8px;
    width: 6px;
    border: 3px solid var(--dark);
}
::-webkit-scrollbar-thumb {
    background-color: var(--accent1);
    height: auto;
    width: 11px;
    background: var(--grad1);
    border-radius: 15px;
}
::-webkit-scrollbar-track {
  background: var(--dark1);
}
::selection { background: var(--accent2); color: var(--white1);}

/* Reset and global styling */
* {
    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
    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 */
a:link, a:active {color: white; text-decoration: none;}
a:visited {color:white; text-decoration: none;}
a:hover {color: white; text-decoration: none;}

/* === LAYOUT CONTAINERS === */
#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;
}
/* === COMPONENTS === */
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);
}
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);
}
/* form elements */
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
}
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)
}
.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;
}

/* === UTILITIES & ENHANCEMENTS === */
/* SCRIPTS */
#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;
}

/* EFFECTS */
@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;}
}
@keyframes fadein {
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes hxafter {
    0% {opacity: 0} 50% {opacity: 0} 51% {opacity: 1} 100% {opacity: 1}
}
.gradient-text {
    background-color: red;
    background-image: var(--grad4);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent
}

/** HEADER **/
#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;
}
.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 {}
.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; }
.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);
}
.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);*/
}
.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;}
.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;}

.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;
	background: #c9c2d2;
border: 1px solid #3D3D3D;
}
.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; }*/

.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 }
.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;
}

.linksnheader a { background:var(--dark); border:1px solid #a04593; 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: #a04593} .linksnheader a:hover i {color: var(--dark); transition: 1s } 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);}
.btn-neon { background-color: transparent; border: 2px solid color:var(--accent1); box-shadow: 0 0 5px color:var(--accent2); transition: all .3s } .btn-neon:hover { background-color: red); /* box-shadow: 0 0 20px var(--accent4),0 0 40px var(--accent4),0 0 60px var(--accent4); text-shadow: 0 0 5px rgba(0,0,0,0.2);*/ /* letter-spacing: 3px */}
    
.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: #a04593;
}

/* tes règles existantes */
.linksnheader a i {color: #a04593 }
.linksnheader a:hover i {color: white; transition: 1s }
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 */
}



.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;
}
.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: var(--grad3) }
.tab1links a:nth-child(odd) i {color:white}
.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: var(--grad1); padding: 0 5px; border-radius: 3px }
.tab1descri p a i {color: var(--accent3); background: transparent }
.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 }
.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 }


/** GUIDEBOOK **/
.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; }
.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;}
.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:var(--grad1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--white);}
.temita a { grid-area: 1 / 2 / 2 / 3; color:#7d4d7d; font-family:var(--font4); font-size:1em; text-decoration:none; display:flex; align-items:center; line-height:120%; height:30px; margin-top:1px; overflow:hidden;}
.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%;}
.temiautor a { font-size: 1em; font-family:var(--font1); line-height:100%; }
#comments_scroll_div:after { display:none!important; }
.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; }
.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);}
.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;}
.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;}
.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;}
.news-slider { grid-area: 1 / 2 / 2 / 3; width: 590px; height: 50px; overflow: hidden; position: relative; }
.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;}
.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);}
.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:#7d4d7d; font-size:10px; margin-top:2px;}
/******************/
.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;
}
.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;}
.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; }
.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);}
.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; }
.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;}
.credits { grid-area: 2 / 1 / 3 / 2; border:1px solid var(--dark3); border-radius:0 10px 10px 0; 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); }
.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;}
/** Pop out */
.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;}
.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; }
.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);}

/* === FORUM & CATEGORY STYLES === */
.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;
}
.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 **/
.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;
}
ul.topiclist.forums {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 645px);
    grid-gap: 10px;
}
ul.topiclist li {margin: 0;}
.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;
}
.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;}
.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;
}
.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;
}
.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);
}
.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;
}
.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;
}
.row .forumreplyicon {
    grid-area: 2 / 1 / 3 / 2;
    width: 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 56px;
    margin-left: 25px;
}

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

.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;
}
.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;
}

/* forum 1 */
.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;
}
.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-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(150deg,var(--accent1) -37%,var(--accent3)60%,var(--accent6) 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;
}
/** CAT TABS HEADER */
.forum-panel .row .forumdescri {width: 560px;}
.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;}
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 ***/
#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://placehold.co/620x400/333/666.png);}
.forum-12 .forumimaback {background-image: url(https://i.pinimg.com/736x/65/ae/f4/65aef4ab936f58580ead15b0ebbf7778.jpg);}
.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);}

/*** THREAD DISPLAY ***/
div#thread {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
.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;
}
.float_right a.button i {
    padding: 0 10px 0 0;
    font-size: 20px;
}
.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;
}
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;
}
.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;
}
/*** SUBFORUM OVERRIDES ***/
.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: -58px;
    position: relative;
    mix-blend-mode: lighten;
    z-index: 2;
}
.subforum-display .row .forumsvg700 {display: none;}
.subforum-display .row .forumimaback {display: none;}
/*** POST NEW THREAD ***/
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;
}

/*** SHOWTHREAD ***/
.showthread {
    width: 98%;
    margin: 0 auto;
}
td#posts_container {
    background: transparent;
}
.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;
}
.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);}
  
.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';}
.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;}    
    
/*** 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;
}
.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);}

.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%;}

.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; }

.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: 180px; width: 209px; display: flex; align-items: center; justify-content: center; font-size: 50px; line-height:40px; font-family: var(--font3); color: var(--groups);}    
.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;}    
    
.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: -94px; 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;}    

.mcontenbody {min-height:540px; border: 2px solid var(--dark1); border-radius: 10px 0 0 10px; margin-left: 10px; margin-right:5px;padding: 30px;}
.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);}

.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; }
.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; }
.mpostfooter {
    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;
}
.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;
}
    
.post { border: 0; box-shadow: 0 0 0;}  
.postbody { margin: 0; padding: 25px; text-align: justify;}
.postbody .content { color: var(--white1); text-align: justify;}

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

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


.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); }
  
.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; }

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

/* 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 */
.notiffi-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #e74c3c;
    color: #fff;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}


/* Pastille de compteur */
.notiffi-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #e74c3c;
    color: #fff;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}

/* POPUP — version large / immersive */
.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;
}

/* styles page complète etc. (inchangés) */
.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;
}


/* --- BLOC IMAGE AU CENTRE (colonne 2) --- */

/* 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: linear-gradient(232deg, #7F7258 15%, #7901C9 40%, #D29B52 100%);
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); */
    overflow: visible;
    isolation: isolate;
}

/* 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: 0px;
    right: -200px;
    width: 800px;
    height: 600px;
    background-image: url(https://i.imgur.com/t2nKFMb.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;
}

/* badge */
.notiffi-count {
  position: absolute;
  top: -5px;
  right: -8px;
  background: var(--accent1);
  color: white;
  padding: 1px 4px;
  border-radius: 10px;
  font-size: 9px;
}

.text1imagefille {
    cursor: pointer;
}


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

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

.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 */
.news-slider::-webkit-scrollbar {
    width: 6px;
}

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

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


.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;
}

.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;
}


/* ============ 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 */

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

}

.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;
}

/* CARD PROFIL PRINCIPALE */
.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;
}


/* CARD PROFIL PRINCIPALE */
.ucp-profile-card {
    background: #1C1A1F !important;
    border: 1px solid #3D3D3D !important;
}

.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;
}

/* Card profil : fond + bordure demandés */
.ucp-profile-card {
    background: #1C1A1F !important;
    border: 1px solid #3D3D3D !important;
}

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


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


.ucp-avatar-preview-inner {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

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

.ucp-avatar-preview-inner {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

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

/* =============================== */
/* 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, #D29B52, #7901C9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

..fa-solid, .fas {
    margin-top:1.5px;
}

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

/* --- NAVBAR --- */

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

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

.titresujetdisclosed {
    text-transform:uppercase;
color:white;
background: #121212;
border-radius: 15px;
        padding: 20px;
    border: 1px solid #3D3D3D;
    width: 97%;
    margin-left: 20px;
}

/* --- 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 PRO 6.2 */
#thread .thread_status::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    line-height: 1;
    content: "\f27a"; /* BULLE par défaut */
}

/* --- 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: "\f27a"; /* fa-message (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: "\f27a"; /* fa-message (regular/light look) */
    font-weight: 400;
    color: #777;
}

/* --- SUJET POPULAIRE (nouveau) --- */
#thread .thread_status.newhotfolder::before,
#thread .thread_status.dot_newhotfolder::before {
    content: "\f06d"; /* fa-fire */
    font-weight: 900;
    color: #ff4d4d;
}

/* --- SUJET POPULAIRE (ancien) --- */
#thread .thread_status.hotfolder::before,
#thread .thread_status.dot_hotfolder::before {
    content: "\f7e4"; /* fa-fire-flame-curved */
    font-weight: 900;
    color: #ffaa44;
}

/* --- SUJET FERMÉ --- */
#thread .thread_status.closefolder::before {
    content: "\f023"; /* fa-lock */
    font-weight: 900;
    color: #ff4545;
}

/* --- LISTE DES SUJETS : icône + petit dot --- */
#thread .thread_status[class*="dot_"] {
    position: relative;
    padding-right: 6px; /* pour l'espace du dot */
}

#thread .thread_status[class*="dot_"]::after {
    content: "\f192"; /* fa-circle-dot */
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    position: absolute;
    right: -5px; /* ajuste finement */
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #00d4ff;
}

/* 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"; /* fa-circle-dot */
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: 13px;
    color: #00d4ff;
}

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

/* Overlay spécifique aux notifications */
.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;
}


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