feuille de CSS

:root{
   --fond: #B2A3E0;
/*MESSAGES*/
.silence {
   display: flex;
   flex-wrap: wrap;
}
/*Titre du sujet*/
.post-title {
    text-align: center;
    font-family: "Montserrat", sans-serif;
    text-transform: lowercase;
    font-size: 25px;
    color: #C6C0FA;
    margin: 0;
    padding: 10px 0 30px;
    letter-spacing: -1px;
    text-shadow: -1px 1px 0 #ccc;
}
/*Corps du message*/
.post {
    background: #FCFAFF;
}
.post-left {
    width: 250px;
}
.post-right {
    flex: 1;
}
/*Boutons en bas de post */
.post-bottom {
    flex: 100%;
    position: relative;
}
.post-bottom div {
    display: inline-block;
    margin: 10px 15px 10px 0;
}
.post-bottom div:first-child {
    display: inline-block;
    margin-left: 15px;
}
.post-bottom div a {
    position: relative;
    text-decoration: none !important;
}
.post-bottom div a:after {
    content: "Profil";
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    border: 1px solid #ccc;
    padding: 0px 8px;
    color: #9f9f9f;
    height: 16px;
    line-height: 16px;
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.post-bottom div a:hover:after {
    border: 1px solid #8d8d8d;
    color: #595959;}
.post-bottom .btn-pm a:after {
    content: "Mp";}
.post-bottom .btn-mail a:after {
    content: "Mail";}
.post-bottom .btn-link a:after {
    content: "click";}
/*Apparence du "en ligne" */
.post-bottom .online:empty {
   display: none;}
.online img {
    display: none;}
.online:before {
    content: "\f2a9";
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-family: Ionicons;
    font-size: 40px;
    color: #d2d2d2;}
/*Haut du post*/
.post-top {
    flex: 100%;
    height: 80px;
    background: rgb(198,191,245);
    background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
    border-bottom: 5px solid #dbc0e8;
    position: relative;}
/*Rang*/
.rank {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 1px;
    font-family: "Roboto", sans-serif;
    font-size: 9px;
    left: 30px;
    top: 45px;}
/*Pseudo*/
.post-name {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    position: absolute;
    left: 30px;
    top: 10px;}
/*Boutons éditer, citer, etc.*/
.post-btn {
    text-align: right;
    position: absolute;
    right: 5px;
    bottom: 15px;}
.post-btn img, .post-bottom img {
    display: none;}
.post-btn div {
    display: inline-block;
    margin: 0 5px;}
.post-btn div a:before {
    content: "\f11d";
    display: inline-block;
    height: 35px;
    width: 35px;
    border: 1px solid #A586B4;
    border-radius: 50%;
    font-family: Ionicons;
    text-align: center;
    line-height: 35px;
    font-size: 20px;
    color: #A586B4;
    background: #dbc0e8;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;}
.post-btn div a:hover:before {
    background: #f5f5f5;}
.post-btn .btn-edit a:before {
    content: "\f2bf";}
.post-btn .btn-delete a:before {
    content: "\f252";}
.post-btn .btn-ip a:before {
   content: "\f149";}
.post-btn .btn-report a:before {
    content: "\f100";}
/*Avatar*/
.post-profil {
    width: 200px;
    margin: 25px auto;
    position: relative;
    overflow: hidden;}
/*Infos du profil au survol*/
.profil-hover {
    height: 400px;
    width: 200px;
    position: absolute;
    background: #d7d7d7;
    top: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;}
.post-profil:hover .profil-hover {
    top: 0;}
.profil-hover-content {
    height: 100%;
    background: #fff;
    overflow: auto;
    font-family: "Roboto", sans-serif;
    font-size: 11px;}
.profil-hover-content div {
    margin: 5px 0;}
.profil-hover-content div .label {
    display: block;
    text-transform: lowercase;
    font-size: 8px;
    letter-spacing: 1px;}
.profil-hover-content div .label span {
    color: #9F9F9F!important;}
.postdetails {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 7px;
    letter-spacing: 1px;
    color: #999;
    margin-top: 5px;
    display: inline-block;}
.postdetails i {
    font-size: 14px;
    color: #424242;
    vertical-align: text-bottom;}
/*PERSONNALISATION DU QEEL PAR AWFUL*/
/*Le bloc du QEEL*/
#qeel {
    width: 900px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background: #E9DFFF;
    padding: 20px;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    color: #000;
}
#qeel a, #qeel a:hover, #qeel a:active {
    text-decoration: none!important;
}
/*Titre du QEEL*/
#qeel h2 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
    background: rgb(198,191,245);
    background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
    color: #fff;
    margin: -20px -20px 20px;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: lowercase;
    font-size: 20px;
    padding: 10px;
}
/*Les titres des boîtes*/
#qeel h3 {
    background: #9B89D6;
    color: #fff;
    margin: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
    padding: 2px 8px;
    font-weight: 500;
}
.qeel-left {
    height: 180px;
    width: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-right: 10px;
}
/*Blocs des stastistiques messages et membres*/
.qeel-stats div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #F6F2FF;
    height: 30px;
    line-height: 30px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-bottom: 5px;
    font-family: "Roboto Condensed", sans-serif;
    padding-right: 10px;
    font-size: 13px;
}
.qeel-stats div i {
    background: #9B89D6;
    color: #fff;
    width: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: auto;
    font-size: 15px;
}
/*Bloc de la liste des connectés*/
.qeel-online {
    width: 350px;
    height: 180px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-right: 10px;
    text-transform: lowercase;
}
.qeel-online .qeel-online-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-right: 10px;
    overflow: auto;
    border: 10px solid #F6F2FF;
    background: #F6F2FF;
    font-size: 13px;
    text-transform: lowercase;
}
/*Bloc statistique des connectés*/
.qeel-online-stats {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: lowercase;
    font-size: 13px;
    margin-bottom: 5px;
}
/*Bloc des connectés des dernières 24h*/
.qeel-last-24 {
    background: #F6F2FF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.qeel-last-24 .qeel-online-content{
    overflow: auto;
    margin: 10px;
    text-transform: lowercase;
    padding-right: 5px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.qeel-last-24 .qeel-online-content table {
    border-collapse: collapse;
}
.qeel-last-24 .qeel-online-content td {
    padding: 0;
    background: transparent;
}
.qeel-last-24 .qeel-online-content .gensmall {
    font-family: "Roboto", sans-serif;
}
.qeel-right {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.qeel-right > div:first-child {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: 10px;
    text-transform: lowercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.qeel-welcome h3 {
    margin:0 0 10px!important;
}
/*Bloc du lien vers Discord*/
.qeel-discord a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: "Roboto Condensed", sans-serif;
    background: #E9DFFF;
    color: #000;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.qeel-discord:hover a {
    color: #fff;
}
.qeel-discord a i {
    font-size: 50px;
    margin: 10px;
    color: #8BA7FE;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.qeel-discord:hover a i {
    color: #fff;
}
.qeel-discord a div {
    font-size: 15.5px;
    line-height: 1;
}
.qeel-discord a div b {
    display: block;
    font-size: 30px;
    color: #8BA7FE;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.qeel-discord:hover a div b {
    color: #fff;
}
/*Blocs des liens top 20 posteurs, supprimer cookies, etc*/
.qeel-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.qeel-links a {
    height: 40px;
    width: 40px;
    background: #9B89D6;
    color: #FFFEBE;
    text-align: center;
    font-size: 12px;
    text-transform: lowercase;
    box-sizing: border-box;
    border: 1px solid #9B89D6;
    box-shadow: 3px 0 0 #9B89D6 inset, -3px 0 0 #9B89D6 inset, 0 3px 0 #9B89D6 inset, 0 -3px 0 #9B89D6 inset;
    position: relative;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.qeel-links a:hover {
    color: #4e4e4e;
}
.qeel-links a div {
    position: absolute;
    right: 50px;
    white-space: nowrap;
    color: #1e1e1e;
    background: #fff;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 10px;
    height: 10px;
    line-height: 10px;
    padding: 2px 5px;
    top: calc(50% - 7px);
    pointer-events: none;
    -webkit-transform: translate(30px,0);
            transform: translate(30px,0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.qeel-links a div:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    right: -5px;
    top: 3.5px;
}
.qeel-links a:hover div {
    -webkit-transform: translate(0,0);
            transform: translate(0,0);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/***********************************
*** CATEGORIES ET FORUMS PAR AWFUL***
**********************************/
.forum-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    margin: 0px -10px;
}
.forum-links a {
    text-decoration: none!important;
    color: #bababa;
    font-size: 10px;
    transition: color 0.3s;
    border: 2px solid #dedede;
    padding: 0 10px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    display: block;
    height: 15px;
    line-height: 17px;
}
.forum-links a:hover {
    color: #595959;
}
.forum-linkssmall {
    height: 20px;
    margin-top: 15px;
}
.forum-linkssmall a {
    font-size: 10px;
}
/***********************************
*** CATEGORIES ET FORUMS ***
**********************************/
.cate-titre {
    height: 100px;
    background: rgb(198,191,245);
    background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
    margin: 0px -10px;
    line-height: 100px;
    text-align: right;
}
.cate-titre h2 {
    margin: 0;
    color: #fff;
    display: inline-block;
    padding-right: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    position: relative;
    text-transform: lowercase;
    text-shadow: 1px 1px 0px #332347;
}
.cate-titre h2::after {
    content: "";
    height: 1px;
    width: 100px;
    background: #fff;
    position: absolute;
    left: -110px;
    top: 50%;
}
.forum-wrap {
    margin: 0px -10px;
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    justify-content: space-between;
    background: #FCFAFF;
    font-family: 'Roboto', sans-serif;
    position: relative;
    border-bottom: 1px solid #F0E9FF;
}
.forum-wrap a {
    text-decoration: none!important;
}
.forum-wrap > div:first-child {
    min-width: 150px;
    max-width: 150px;
    height: 150px;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #fff;
}
.forum-wrap > div:first-child img {
    width: 100%;
    height: 100%;
}
.forum-wrap > div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    min-width: 480px;
    max-width: 480px;
}
.forum-title {
    flex: 100%;
    height: 30px;
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #F0E9FF;
    box-sizing: border-box;
    padding-bottom: 5px;
}
.forum-title a {
    font-family: arial, sans-serif;
    color: #dbc0e8 !important;
    letter-spacing: -2px;
    font-size: 25px;
    text-shadow: 1px 1px 0 #b6b6b6;
    transition: color 0.3s;
    line-height: 20px;
    font-weight: bold;
}
.forum-title a:hover {
    color: #EED7F9 !important;
}
.forum-desc {
    height: 110px;
    padding: 10px;
    box-sizing: border-box;
    background: #FCFAFF;
    flex: 1;
}
.forum-desc > div {
    height: 100%;
    overflow: auto;
    text-align: justify;
    font-size: 11px;
    line-height: 14px;
    padding-right: 10px;
    box-sizing: border-box;
    color: #595959;
}
.forum-desc > div > img {
    width: 135px;
    height: 135px;
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 7.5px;
}
.sous-forums {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    font-size: 0;
    overflow: auto;
    height: 110px;
}
.sous-forums:empty {
    display: none;
}
.sous-forums a {
    background: #dbc0e8;
    height: 20px;
    text-transform: lowercase;
    margin-bottom: 5px;
    line-height: 20px;
    text-align: center;
    color: #A586B4;
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    transition: color 0.3s;
}
.sous-forums a:hover {
    color: #fff;
}
.forum-wrap > div:last-child {
    min-width: 170px;
    max-width: 170px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.forum-img {
    background: #FCFAFF;
    height: 30px;
    margin-bottom: 10px;
}
.forum-last {
    font-size: 10px;
    flex: 1;
}
.forum-last > span {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 0;
    justify-content: space-between;
    padding-top: 10px;
}
.forum-last > span > div, .forum-last > span > strong {
    border: 1px solid #FCFAFF;
    font-size: 11px;
    text-transform: lowercase;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    line-height: 27px;
    height: 25px;
    white-space: nowrap;
    background: #F6F2FF;
    text-align: center;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
.forum-last > span > br, .forum-last > span > div:last-child {
    display: none;
}
.forum-last-link > strong::before {
    content: "par ";
    font-weight: normal;
}
.forum-stats {
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    align-self: flex-end;
    flex: 1;
    text-align: right;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

/*dark mode*/

[data-theme="dark"]{
--fond: #000000;
/*MESSAGES*/
.silence {
display: flex;
flex-wrap: wrap;
}
/*Titre du sujet*/
.post-title {
text-align: center;
font-family: "Montserrat", sans-serif;
text-transform: lowercase;
font-size: 25px;
color: #C6C0FA;
margin: 0;
padding: 10px 0 30px;
letter-spacing: -1px;
text-shadow: -1px 1px 0 #ccc;
}
/*Corps du message*/
.post {
background: #FCFAFF;
}
.post-left {
width: 250px;
}
.post-right {
flex: 1;
}
/*Boutons en bas de post */
.post-bottom {
flex: 100%;
position: relative;
}
.post-bottom div {
display: inline-block;
margin: 10px 15px 10px 0;
}
.post-bottom div:first-child {
display: inline-block;
margin-left: 15px;
}
.post-bottom div a {
position: relative;
text-decoration: none !important;
}
.post-bottom div a:after {
content: "Profil";
text-transform: uppercase;
font-family: "Roboto", sans-serif;
font-size: 8px;
letter-spacing: 1px;
border: 1px solid #ccc;
padding: 0px 8px;
color: #9f9f9f;
height: 16px;
line-height: 16px;
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-bottom div a:hover:after {
border: 1px solid #8d8d8d;
color: #595959;}
.post-bottom .btn-pm a:after {
content: "Mp";}
.post-bottom .btn-mail a:after {
content: "Mail";}
.post-bottom .btn-link a:after {
content: "click";}
/*Apparence du "en ligne" */
.post-bottom .online:empty {
display: none;}
.online img {
display: none;}
.online:before {
content: "\f2a9";
position: absolute;
right: 10px;
bottom: 10px;
font-family: Ionicons;
font-size: 40px;
color: #d2d2d2;}
/*Haut du post*/
.post-top {
flex: 100%;
height: 80px;
background: rgb(198,191,245);
background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
border-bottom: 5px solid #dbc0e8;
position: relative;}
/*Rang*/
.rank {
position: relative;
text-transform: lowercase;
letter-spacing: 1px;
font-family: "Roboto", sans-serif;
font-size: 9px;
left: 30px;
top: 45px;}
/*Pseudo*/
.post-name {
font-family: "Montserrat", sans-serif;
font-size: 30px;
position: absolute;
left: 30px;
top: 10px;}
/*Boutons éditer, citer, etc.*/
.post-btn {
text-align: right;
position: absolute;
right: 5px;
bottom: 15px;}
.post-btn img, .post-bottom img {
display: none;}
.post-btn div {
display: inline-block;
margin: 0 5px;}
.post-btn div a:before {
content: "\f11d";
display: inline-block;
height: 35px;
width: 35px;
border: 1px solid #A586B4;
border-radius: 50%;
font-family: Ionicons;
text-align: center;
line-height: 35px;
font-size: 20px;
color: #A586B4;
background: #dbc0e8;
-webkit-transition: all 0.3s;
transition: all 0.3s;}
.post-btn div a:hover:before {
background: #f5f5f5;}
.post-btn .btn-edit a:before {
content: "\f2bf";}
.post-btn .btn-delete a:before {
content: "\f252";}
.post-btn .btn-ip a:before {
content: "\f149";}
.post-btn .btn-report a:before {
content: "\f100";}
/*Avatar*/
.post-profil {
width: 200px;
margin: 25px auto;
position: relative;
overflow: hidden;}
/*Infos du profil au survol*/
.profil-hover {
height: 400px;
width: 200px;
position: absolute;
background: #d7d7d7;
top: 100%;
text-align: center;
box-sizing: border-box;
padding: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;}
.post-profil:hover .profil-hover {
top: 0;}
.profil-hover-content {
height: 100%;
background: #fff;
overflow: auto;
font-family: "Roboto", sans-serif;
font-size: 11px;}
.profil-hover-content div {
margin: 5px 0;}
.profil-hover-content div .label {
display: block;
text-transform: lowercase;
font-size: 8px;
letter-spacing: 1px;}
.profil-hover-content div .label span {
color: #9F9F9F!important;}
.postdetails {
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
font-size: 7px;
letter-spacing: 1px;
color: #999;
margin-top: 5px;
display: inline-block;}
.postdetails i {
font-size: 14px;
color: #424242;
vertical-align: text-bottom;}
/*PERSONNALISATION DU QEEL PAR AWFUL*/
/*Le bloc du QEEL*/
#qeel {
width: 900px;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: #E9DFFF;
padding: 20px;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
color: #000;
}
#qeel a, #qeel a:hover, #qeel a:active {
text-decoration: none!important;
}
/*Titre du QEEL*/
#qeel h2 {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
background: rgb(198,191,245);
background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
color: #fff;
margin: -20px -20px 20px;
font-family: "Roboto Condensed", sans-serif;
text-transform: lowercase;
font-size: 20px;
padding: 10px;
}
/*Les titres des boîtes*/
#qeel h3 {
background: #9B89D6;
color: #fff;
margin: 0;
font-family: "Roboto Condensed", sans-serif;
font-size: 12px;
padding: 2px 8px;
font-weight: 500;
}
.qeel-left {
height: 180px;
width: 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 10px;
}
/*Blocs des stastistiques messages et membres*/
.qeel-stats div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #F6F2FF;
height: 30px;
line-height: 30px;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 5px;
font-family: "Roboto Condensed", sans-serif;
padding-right: 10px;
font-size: 13px;
}
.qeel-stats div i {
background: #9B89D6;
color: #fff;
width: 30px;
line-height: 30px;
text-align: center;
margin-right: auto;
font-size: 15px;
}
/*Bloc de la liste des connectés*/
.qeel-online {
width: 350px;
height: 180px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 10px;
text-transform: lowercase;
}
.qeel-online .qeel-online-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 10px;
overflow: auto;
border: 10px solid #F6F2FF;
background: #F6F2FF;
font-size: 13px;
text-transform: lowercase;
}
/*Bloc statistique des connectés*/
.qeel-online-stats {
font-family: "Roboto Condensed", sans-serif;
text-transform: lowercase;
font-size: 13px;
margin-bottom: 5px;
}
/*Bloc des connectés des dernières 24h*/
.qeel-last-24 {
background: #F6F2FF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: auto;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.qeel-last-24 .qeel-online-content{
overflow: auto;
margin: 10px;
text-transform: lowercase;
padding-right: 5px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.qeel-last-24 .qeel-online-content table {
border-collapse: collapse;
}
.qeel-last-24 .qeel-online-content td {
padding: 0;
background: transparent;
}
.qeel-last-24 .qeel-online-content .gensmall {
font-family: "Roboto", sans-serif;
}
.qeel-right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.qeel-right > div:first-child {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 10px;
text-transform: lowercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.qeel-welcome h3 {
margin:0 0 10px!important;
}
/*Bloc du lien vers Discord*/
.qeel-discord a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: "Roboto Condensed", sans-serif;
background: #E9DFFF;
color: #000;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.qeel-discord:hover a {
color: #fff;
}
.qeel-discord a i {
font-size: 50px;
margin: 10px;
color: #8BA7FE;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.qeel-discord:hover a i {
color: #fff;
}
.qeel-discord a div {
font-size: 15.5px;
line-height: 1;
}
.qeel-discord a div b {
display: block;
font-size: 30px;
color: #8BA7FE;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.qeel-discord:hover a div b {
color: #fff;
}
/*Blocs des liens top 20 posteurs, supprimer cookies, etc*/
.qeel-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.qeel-links a {
height: 40px;
width: 40px;
background: #9B89D6;
color: #FFFEBE;
text-align: center;
font-size: 12px;
text-transform: lowercase;
box-sizing: border-box;
border: 1px solid #9B89D6;
box-shadow: 3px 0 0 #9B89D6 inset, -3px 0 0 #9B89D6 inset, 0 3px 0 #9B89D6 inset, 0 -3px 0 #9B89D6 inset;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.qeel-links a:hover {
color: #4e4e4e;
}
.qeel-links a div {
position: absolute;
right: 50px;
white-space: nowrap;
color: #1e1e1e;
background: #fff;
font-family: "Roboto Condensed", sans-serif;
font-size: 10px;
height: 10px;
line-height: 10px;
padding: 2px 5px;
top: calc(50% - 7px);
pointer-events: none;
-webkit-transform: translate(30px,0);
transform: translate(30px,0);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.qeel-links a div:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #fff;
position: absolute;
right: -5px;
top: 3.5px;
}
.qeel-links a:hover div {
-webkit-transform: translate(0,0);
transform: translate(0,0);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/***********************************
*** CATEGORIES ET FORUMS PAR AWFUL***
**********************************/
.forum-links {
display: flex;
justify-content: space-around;
align-items: center;
height: 50px;
margin: 0px -10px;
}
.forum-links a {
text-decoration: none!important;
color: #bababa;
font-size: 10px;
transition: color 0.3s;
border: 2px solid #dedede;
padding: 0 10px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
display: block;
height: 15px;
line-height: 17px;
}
.forum-links a:hover {
color: #595959;
}
.forum-linkssmall {
height: 20px;
margin-top: 15px;
}
.forum-linkssmall a {
font-size: 10px;
}
/***********************************
*** CATEGORIES ET FORUMS ***
**********************************/
.cate-titre {
height: 100px;
background: rgb(198,191,245);
background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
margin: 0px -10px;
line-height: 100px;
text-align: right;
}
.cate-titre h2 {
margin: 0;
color: #fff;
display: inline-block;
padding-right: 50px;
font-family: 'Montserrat', sans-serif;
font-size: 25px;
position: relative;
text-transform: lowercase;
text-shadow: 1px 1px 0px #332347;
}
.cate-titre h2::after {
content: "";
height: 1px;
width: 100px;
background: #fff;
position: absolute;
left: -110px;
top: 50%;
}
.forum-wrap {
margin: 0px -10px;
display: flex;
box-sizing: border-box;
padding: 10px;
justify-content: space-between;
background: #FCFAFF;
font-family: 'Roboto', sans-serif;
position: relative;
border-bottom: 1px solid #F0E9FF;
}
.forum-wrap a {
text-decoration: none!important;
}
.forum-wrap > div:first-child {
min-width: 150px;
max-width: 150px;
height: 150px;
box-sizing: border-box;
padding: 6px;
border: 1px solid #fff;
}
.forum-wrap > div:first-child img {
width: 100%;
height: 100%;
}
.forum-wrap > div:nth-child(2) {
display: flex;
flex-wrap: wrap;
min-width: 480px;
max-width: 480px;
}
.forum-title {
flex: 100%;
height: 30px;
display: flex;
margin-bottom: 10px;
border-bottom: 1px solid #F0E9FF;
box-sizing: border-box;
padding-bottom: 5px;
}
.forum-title a {
font-family: arial, sans-serif;
color: #dbc0e8 !important;
letter-spacing: -2px;
font-size: 25px;
text-shadow: 1px 1px 0 #b6b6b6;
transition: color 0.3s;
line-height: 20px;
font-weight: bold;
}
.forum-title a:hover {
color: #EED7F9 !important;
}
.forum-desc {
height: 110px;
padding: 10px;
box-sizing: border-box;
background: #FCFAFF;
flex: 1;
}
.forum-desc > div {
height: 100%;
overflow: auto;
text-align: justify;
font-size: 11px;
line-height: 14px;
padding-right: 10px;
box-sizing: border-box;
color: #595959;
}
.forum-desc > div > img {
width: 135px;
height: 135px;
position: absolute;
left: 10px;
top: 10px;
padding: 7.5px;
}
.sous-forums {
flex: 1;
margin-left: 10px;
display: flex;
flex-direction: column;
font-size: 0;
overflow: auto;
height: 110px;
}
.sous-forums:empty {
display: none;
}
.sous-forums a {
background: #dbc0e8;
height: 20px;
text-transform: lowercase;
margin-bottom: 5px;
line-height: 20px;
text-align: center;
color: #A586B4;
font-size: 11px;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
transition: color 0.3s;
}
.sous-forums a:hover {
color: #fff;
}
.forum-wrap > div:last-child {
min-width: 170px;
max-width: 170px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.forum-img {
background: #FCFAFF;
height: 30px;
margin-bottom: 10px;
}
.forum-last {
font-size: 10px;
flex: 1;
}
.forum-last > span {
display: flex;
flex-direction: column;
height: 100%;
font-size: 0;
justify-content: space-between;
padding-top: 10px;
}
.forum-last > span > div, .forum-last > span > strong {
border: 1px solid #FCFAFF;
font-size: 11px;
text-transform: lowercase;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
line-height: 27px;
height: 25px;
white-space: nowrap;
background: #F6F2FF;
text-align: center;
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
.forum-last > span > br, .forum-last > span > div:last-child {
display: none;
}
.forum-last-link > strong::before {
content: "par ";
font-weight: normal;
}
.forum-stats {
font-size: 11px;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
align-self: flex-end;
flex: 1;
text-align: right;
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
/*fin dark mode*/
/*toggle*/
.theme-switch-wrapper {
display: inline-block;
align-items: center;
position: fixed;
z-index: 99;
right: 0;}

.theme-switch-wrapper em {
font-size: 1rem;
text-transform: lowercase;
font-weight: 600;
letter-spacing: 1px;
opacity: 0.6;}
.theme-switch {
display: inline-block;
height: 20px;
position: relative;
width: 40px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #54CA7A;
}

input:focus + .slider {
box-shadow: 0 0 1px #54CA7A;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
a { text-decoration: none; }

.quote{
padding-left: 5px;/*marge intérieure*/
background-color: #dbc0e8;/*couleur de fond*/
color:#000;
font: 'arial', sans-serif;
text-transform: lowercase;
text-align: justify;
border: none;/*suppression des bordures*/
border-left: 3px solid #CEAEDD !important;}
.code{
padding-left: 5px;/*marge intérieure*/
text-transform: lowercase;
text-align: justify;
color:#000;
font: 'arial', sans-serif;
background-color: #fff;/*couleur de fond*/
border: none;/*suppression des bordures*/
border-left: 3px solid #CEAEDD !important;}
.spoiler{
padding-left: 5px;/*marge intérieure*/
color:#000;
text-align: justify;
font: 'arial', sans-serif;
text-transform: lowercase;
background-color: #dbc0e8;/*couleur de fond*/
border: none;/*suppression des bordures*/
border-left: 3px solid #CEAEDD !important;}


body {cursor: url('https://i.servimg.com/u/f12/20/46/05/68/nat91110.gif'), auto;}
a:hover{cursor: url('https://i.servimg.com/u/f96/20/47/58/71/pointe10.gif'),auto;}

.boutonhautbas {
bottom: 40px;
right: 10px; /* remplacez right par left pour afficher les boutons à gauche */
position: fixed;
z-index: 100;
}

@import url('https://fonts.googleapis.com/css?family=Hind+Siliguri:400,700|Raleway:400,900');
.wrap-pred {
width: 500px;
height: 400px;
overflow: hidden;
margin: auto;
position: relative;
font-family: 'Hind Siliguri', sans-serif;
color:#000;
}
.avatar-pred {
position: absolute;
width: 250px;
height: 400px;
}
.infos-pred {
width: 250px;
height: 400px;
background-color: #F0E9FF;
position: absolute;
top: -400px;
transition: all 0.3s;
}
.wrap-pred:hover .infos-pred {
top: 0;
}
.name {
position: absolute;
left: 250px;
top: 0;
}
.infos-pred h2 {
color:#000;
font-size: 24px;
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-transform: lowercase;
text-align: center;
margin: 150px 0 0;
}
.infos-pred h3 {
color:#000;
font: 200 11px 'Raleway', sans-serif;
text-transform: lowercase;
text-align: center;
margin: 0 0 15px 0;
}
.infos-pred h4 {
font: 900 15px 'Raleway', sans-serif;
text-transform: lowercase;
margin: 0;
padding: 10px 10px 0;
letter-spacing: 1px;
}
.icon {
position: absolute;
margin-left: 75px;
transform: translate(0, -100%);
transition: all 0.4s;
width: 100px;
height: 100px;
}
.wrap-pred:hover .icon {
transform: translate(0, 0);
}
.nm {
transform: translate(0, 0);
transition: all 0.4s;
}
.wrap-pred:hover .nm {
transform: translate(0, -40px);
}
.statut {
font: 25px 'Raleway', sans-serif;
text-transform: lowercase;
text-align: center;
border: 2px solid #000;
width: 70%;
margin: auto;
transform: translate(0, 0);
transition: all 0.4s;
}
.libre {
color: #87BA85;
border-color: #87BA85;
}
.reserve {
color: #FFB279;
border-color: #FFB279;
}
.pris {
color: #F35454;
border-color: #F35454;
}
.wrap-pred:hover .statut {
transform: translate(0, -300px);
}
.hover-pred {
width: 80%;
margin: auto;
line-height: 140%;
text-transform: lowercase;
font-size: 12px;
letter-spacing: 1px;
transform: translate(0, 200px);
transition: all 0.4s;
}
.wrap-pred:hover .hover-pred {
transform: translate(0, -50px);
}
.cara {
height: 170px;
overflow: auto;
}
.hist {
height: 140px;
width: 90%;
line-height: 130%;
font-size: 12px;
text-align: justify;
overflow: auto;
margin: auto;
padding: 5px;
}
.cara ul {
padding: 0;
margin: 0
}
.cara ul li {
list-style-type: none;
background-color: #E4DBFF;
margin: 2px 0;
font-size: 12px;
padding: 0 5px;
}
.cara ul li:nth-child(even) {
text-align: left;
}
.pred-credit {
position: absolute;
right: 5px;
bottom: 5px;
}
.pred-credit a {
text-decoration: none !important;
font-size: 9px;
text-transform: lowercase;
letter-spacing: 1px;
color: #bababa !important;
}
/* LES COULEURS */
.kit-wrap {
background: #F6F2FF;
}
.kit-wrap, .kit {
border: 1px solid #F0E9FF;
}
.kit-head {
background: #F0E9FF;
}
.kit-head h2, .kit-head h3 {
color: #fff;
}
.kit-head h2 {
text-shadow: -1px 1px 0 #000;
}
.kit-head h3 {
text-shadow: -1px 0 0 #000;
}
.kit-padd {
background: #F0E9FF;
}
.kit, .kit-txt, .kit-avatar {
background: #fff;
}
.kit-txt h4, .kit-title {
color: #dbc0e8;
}
.kit-txt h4:after {
background: #ededed;
}
.kit-faceclaim .kit-txt div, .kit-app .kit-info .kit-txt div {
border-bottom: 1px solid #d4d4d4;
}
.kit-faceclaim .kit-txt div b, .kit-faceclaim .kit-txt div a {
color: #aeaeae;
}
.kit-avatar {
border: 1px solid #d4d4d4;
}
/* STYLE GÉNÉRAL kit fiches */
.kit-wrap {
width: 500px;
margin: 0 auto 20px;
box-sizing: border-box;
padding: 20px;
font-family: 'Overpass', sans-serif;
position: relative;
}
.kit-wrap a,.kit-wrap a:hover ,.kit-wrap a:active {
text-decoration: none;
}
.kit {
padding: 3px;
margin-bottom: 4px;
width: 100%;
}
.kit-head {
height: 125px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
line-height: 1.3em;
}
.kit-head > img {
position: absolute;
}
.kit-head h2, .kit-head h3 {
margin: 0;
text-transform: lowercase;
letter-spacing: 1px;
position: relative;
}
.kit-head h2 {
font-weight: bold;
font-size: 24px;
}
.kit-head h3 {
font-size: 12px;
font-family: 'Share Tech Mono', monospace;
font-weight: normal;
letter-spacing: 2px;
}
.kit-padd {
padding: 10px;
}
.kit-txt {
padding: 40px 60px;
text-align: justify;
font-size: 12px;
}
.kit-txt h4 {
text-align: center;
margin: 0 0 30px;
text-transform: lowercase;
letter-spacing: 1px;
font-size: 15px;
position: relative;
}
.kit-txt h4:after {
content: "";
height: 1px;
width: 100px;
position: absolute;
bottom: -10px;
left: calc(50% - 50px);
}
.kit-title {
font-family: 'Share Tech Mono', monospace;
font-weight: bold;
text-transform: lowercase;
font-size: 15px;
letter-spacing: 1px;
margin-right: 8px;
}
.kit-credit {
width: 100%;
text-align: center;
position: absolute;
bottom: -20px;
left: 0;
}
.kit-credit a {
font-family: 'Share Tech Mono', monospace;
color: #ccc;
text-transform: lowercase;
letter-spacing: 1px;
font-size: 7px;
text-decoration: none!important;
}
/* ANNONCE */
.kit-annonce {
width: 350px;
padding: 0px;
border: 0;
background: transparent;
}
.kit-annonce .kit-txt {
padding: 40px;
}
/* FICHE DE PRÉSENTATION */
.kit-app {
width: 500px;
display: flex;
flex-wrap: wrap;
}
.kit-app .kit-info {
width: 200px;
margin-right: 4px;
height: 300px;
}
.kit-app .kit-info .kit-txt {
overflow: auto;
padding: 10px;
}
.kit-app .kit-info .kit-txt div {
margin: 3px 0 0;
padding: 2px 10px;
}
.kit-app .kit-info .kit-txt div .kit-title {
display: block;
font-weight: normal;
}
.kit-app .kit:nth-child(3) {
flex: 1;
height: 300px;
}
.kit-app .kit-info .kit-txt,.kit-app .kit:nth-child(3) .kit-padd,.kit-app .kit:nth-child(3) .kit-txt, .kit-app .kit-player .kit-txt {
height: 100%;
box-sizing: border-box;
}
.kit-app .kit:nth-child(3) .kit-txt,.kit-app .kit-player .kit-txt {
overflow: auto;
padding: 20px 30px;
}
.kit-avatar {
padding: 3px;
height: 100px;
width: 100px;
}
.kit-player {
height: 100px;
flex: 1;
margin-left: 4px;
}
.kit-last{
margin-bottom: 0;
}
/* divinités */
.roadannexe1, .roadannexe1 *{ box-sizing:border-box; }
.roadannexe1{ margin:0 auto; width:450px; font-family:var(--font1); }
.roadannexe1 br{ display:none; }
.roadannexe1 img{ object-fit:cover; }

:root{
--font1:'Arial', sans-serif;

--degvert:#7DB884;
--cvert:rgba(150,217,157,1);

--degrose:#E8A2D5;
--crose: #c996d9;

--degrouge:#D16D75;
--crouge:rgba(217,150,150,1);

--degbleu:#70B6C7;
--cbleu:rgba(150,194,217,1);
}
/* Titre du nom */

.roadannexe1 .roadnom1{ background:linear-gradient(90deg, rgba(59,59,59,1) 0%, rgba(166,166,166,1) 35%, rgba(240,240,240,1) 100%);
width:85%; padding:15px; z-index:10; display:block; text-align:center;
font-size:16px; font-weight:900; text-transform:lowercase;
color:#000000; position:relative; letter-spacing:2px; bottom:-10px; margin:0 auto; }

/* Image et infos */

.roadannexe1 .roadflex1{ position:relative; z-index:1;
display:flex; justify-content:space-between; align-items:center; }
.roadannexe1 .roadflex1 img{ padding:5px; border:5px solid #f0f0f0;
width:200px; height:320px; position:relative; z-index:8; }
.roadannexe1 .roadflex1 .roadflexinfo1{ width:240px; }
.roadannexe1 .roadflex1 .roadflexinfo1 span{ display:flex; align-items:center; font-size:13px;
margin:7px 0; position:relative; left:-15px; z-index:12; }
.roadannexe1 .roadflex1 .roadflexinfo1 div{ font-size:12px; line-height:12px; background:white; padding:5px; width:60%; }
.roadannexe1 .roadflex1 .roadflexinfo1 span strong{ color:#000000;
background:linear-gradient(90deg, rgba(59,59,59,1) 0%, rgba(166,166,166,1) 35%, rgba(240,240,240,1) 100%);
padding:5px; display:inline-block; text-transform:lowercase; letter-spacing:3px;
text-align:center; font-size:11px; min-width:100px;
}

/* Histoire */
.roadannexe1 .roadflexstory1{ margin:10px 0; }
.roadannexe1 .roadtitle2{ display:block; padding:5px;
background:linear-gradient(90deg, rgba(59,59,59,1) 0%, rgba(166,166,166,1) 35%, rgba(240,240,240,1) 100%);
font-weight:600; position:relative; left:15px; top:5px; color:#ffffff; }
.roadannexe1 .roadflexstory1 .roadcontent{ background:white; padding:15px;
border:1px solid; text-align:justify; height:100px; overflow:auto; }
.roadannexe1 .roadflexstory1 .roadcontent br{ display:block; }

/* Vert */
.roadannexe1.roadvert .roadnom1,
.roadannexe1.roadvert .roadflex1 .roadflexinfo1 span strong,
.roadannexe1.roadvert .roadtitle2{ background:var(--degvert); color:#ffffff; }

.roadannexe1 .roadflexstory1 .roadcontent{ border-color:var(--cvert); }

/* Rose */
.roadannexe1.roadrose .roadnom1,
.roadannexe1.roadrose .roadflex1 .roadflexinfo1 span strong,
.roadannexe1.roadrose .roadtitle2{ background:var(--degrose); color:#ffffff; }

.roadannexe1 .roadflexstory1 .roadcontent{ border-color:var(--crose); }


/* Rouge */
.roadannexe1.roadrouge .roadnom1,
.roadannexe1.roadrouge .roadflex1 .roadflexinfo1 span strong,
.roadannexe1.roadrouge .roadtitle2{ background:var(--degrouge); color:#ffffff; }

.roadannexe1 .roadflexstory1 .roadcontent{ border-color:var(--crouge); }

/* Bleu */
.roadannexe1.roadbleu .roadnom1,
.roadannexe1.roadbleu .roadflex1 .roadflexinfo1 span strong,
.roadannexe1.roadbleu .roadtitle2{ background:var(--degbleu); color:#ffffff; }

.roadannexe1 .roadflexstory1 .roadcontent{ border-color:var(--cbleu); }

/*PERSONNALISATION AFFICHAGE DES MESSAGES PAR AWFUL*/
.silence {
display: flex;
flex-wrap: wrap;
}
/*Titre du sujet*/
.post-title {
text-align: center;
font-family: "Montserrat", sans-serif;
text-transform: lowercase;
font-size: 25px;
color: #C6C0FA;
margin: 0;
padding: 10px 0 30px;
letter-spacing: -1px;
text-shadow: -1px 1px 0 #ccc;
}
/*Corps du message*/
.post {
background: #FCFAFF;
}
.post-left {
width: 250px;
}
.post-right {
flex: 1;
}
/*Boutons en bas de post */
.post-bottom {
flex: 100%;
position: relative;
}
.post-bottom div {
display: inline-block;
margin: 10px 15px 10px 0;
}
.post-bottom div:first-child {
display: inline-block;
margin-left: 15px;
}
.post-bottom div a {
position: relative;
text-decoration: none !important;
}
.post-bottom div a:after {
content: "Profil";
text-transform: uppercase;
font-family: "Roboto", sans-serif;
font-size: 8px;
letter-spacing: 1px;
border: 1px solid #ccc;
padding: 0px 8px;
color: #9f9f9f;
height: 16px;
line-height: 16px;
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-bottom div a:hover:after {
border: 1px solid #8d8d8d;
color: #595959;
}
.post-bottom .btn-pm a:after {
content: "Mp";
}
.post-bottom .btn-mail a:after {
content: "Mail";
}
.post-bottom .btn-link a:after {
content: "click";
}
/*Apparence du "en ligne" */
.post-bottom .online:empty {
display: none;
}
.online img {
display: none;
}
.online:before {
content: "\f2a9";
position: absolute;
right: 10px;
bottom: 10px;
font-family: Ionicons;
font-size: 40px;
color: #d2d2d2;
}
/*Haut du post*/
.post-top {
flex: 100%;
height: 80px;
background: rgb(198,191,245);
background: linear-gradient(90deg, rgba(198,191,245,1) 0%, rgba(219,192,232,1) 49%, rgba(198,191,245,1) 100%);
border-bottom: 5px solid #dbc0e8;
position: relative;
}
/*Rang*/
.rank {
position: relative;
text-transform: lowercase;
letter-spacing: 1px;
font-family: "Roboto", sans-serif;
font-size: 9px;
left: 30px;
top: 45px;
}
/*Pseudo*/
.post-name {
font-family: "Montserrat", sans-serif;
font-size: 30px;
position: absolute;
left: 30px;
top: 10px;
}
/*Boutons éditer, citer, etc.*/
.post-btn {
text-align: right;
position: absolute;
right: 5px;
bottom: 15px;
}
.post-btn img, .post-bottom img {
display: none;
}
.post-btn div {
display: inline-block;
margin: 0 5px;
}
.post-btn div a:before {
content: "\f11d";
display: inline-block;
height: 35px;
width: 35px;
border: 1px solid #A586B4;
border-radius: 50%;
font-family: Ionicons;
text-align: center;
line-height: 35px;
font-size: 20px;
color: #A586B4;
background: #dbc0e8;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-btn div a:hover:before {
background: #f5f5f5;
}
.post-btn .btn-edit a:before {
content: "\f2bf";
}
.post-btn .btn-delete a:before {
content: "\f252";
}
.post-btn .btn-ip a:before {
content: "\f149";
}
.post-btn .btn-report a:before {
content: "\f100";
}
/*Avatar*/
.post-profil {
width: 200px;
margin: 25px auto;
position: relative;
overflow: hidden;
}
/*Infos du profil au survol*/
.profil-hover {
height: 400px;
width: 200px;
position: absolute;
background: #d7d7d7;
top: 100%;
text-align: center;
box-sizing: border-box;
padding: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-profil:hover .profil-hover {
top: 0;
}
.profil-hover-content {
height: 100%;
background: #fff;
overflow: auto;
font-family: "Roboto", sans-serif;
font-size: 11px;
}
.profil-hover-content div {
margin: 5px 0;
}
.profil-hover-content div .label {
display: block;
text-transform: lowercase;
font-size: 8px;
letter-spacing: 1px;
}
.profil-hover-content div .label span {
color: #9F9F9F!important;
}
.postdetails {
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
font-size: 7px;
letter-spacing: 1px;
color: #999;
margin-top: 5px;
display: inline-block;
}
.postdetails i {
font-size: 14px;
color: #424242;
vertical-align: text-bottom;
}

.selectCode { float:right; text-transform: lowercase; cursor:pointer; }
div.cont_code { clear: right; }

/************ DÉBUT TYPO PERSONNALISÉ ************/

s1 { font-family: Arial !important; text-decoration: none; box-shadow: inset 0px -5px 0px rgb(194, 160, 249); }
s2 { font-family: Arial !important; text-decoration: none; box-shadow: inset 0px -5px 0px rgb(216, 172, 232); }
s3 { font-family: Arial !important; text-decoration: none; box-shadow: inset 0px -5px 0px rgb(185, 175, 249); }

p1 { font-family: Arial !important; text-decoration: none; border-bottom: dotted 2px #C2A0F9; }
p2 { font-family: Arial !important; text-decoration: none; border-bottom: dotted 2px #D8ACE8; }
p3 { font-family: Arial !important; text-decoration: none; border-bottom: dotted 2px #B9AFF9; }

i1 { font-family: Arial !important; font-style:italic !important; color: #C2A0F9; }
i2 { font-family: Arial !important; font-style:italic !important; color: #D8ACE8; }
i3 { font-family: Arial !important; font-style:italic !important; color: #B9AFF9; }

b1 { font-family: Arial !important; font-weight: bold !important; color: #C2A0F9 !important; }
b2 { font-family: Arial !important; font-weight: bold !important; color: #D8ACE8 !important; }
b3 { font-family: Arial !important; font-weight: bold !important; color: #B9AFF9 !important; }

cad1 { font-family: Arial !important; color: #ffffff; padding: 2px; background: #C2A0F9; }
cad2 { font-family: Arial !important; color: #ffffff; padding: 2px; background: #D8ACE8; }
cad3 { font-family: Arial !important; color: #ffffff; padding: 2px; background: #B9AFF9; }

t1 { font-family: Arial !important; font-weight: bold !important; text-transform: uppercase; color: #C2A0F9 !important; letter-spacing: 3px; }
t2 { font-family: Arial !important; font-weight: bold !important; text-transform: uppercase; color: #D8ACE8 !important; letter-spacing: 3px; }
t3 { font-family: Arial !important; font-weight: bold !important; text-transform: uppercase; color: #B9AFF9 !important; letter-spacing: 3px; }

c1 { font-family: Arial !important; color: #C2A0F9 !important; }
c2 { font-family: Arial !important; color: #D8ACE8 !important; }
c3 { font-family: Arial !important; color: #B9AFF9 !important; }
/*CONNEXION RAPIDE*/
/*Import de la police*/
@import url('https://fonts.googleapis.com/css?family=Roboto|Montserrat:900');
form.connexion-rapide {
width: 500px;
background: #E9DFFF;
margin: 10px auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px 0;
font-family: "Roboto", sans-serif;
border: 1px solid #fff;
}
form.connexion-rapide h2 {
margin: 0 0 25px;
text-align: center;
text-transform: lowercase;
font-family: "Montserrat", sans-serif;
font-size: 20px;
letter-spacing: 1px;
}
form.connexion-rapide div,
form.connexion-rapide > input{
position: relative;
width: 60%;
margin: auto;
}
form.connexion-rapide .input-connexion {
margin-bottom: 15px;
}
form.connexion-rapide input.post {
height: 30px;
box-sizing: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
font-family: "Montserrat", sans-serif;
border: 0;
background: transparent;
border-bottom: 1px solid #cb79e0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #cb79e0 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #cb79e0 4%);
background-position: -300px 0;
background-size: 100%;
background-repeat: no-repeat;
font-size: 13px;
width: 100%;
}
form.connexion-rapide input.post:focus {
outline: none;
background-position: 0 0;
}
form.connexion-rapide .input-connexion label {
position: absolute;
transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
font-size: 12px;
color: #999;
line-height: 30px;
pointer-events: none;
}
form.connexion-rapide input.post:focus + label,
form.connexion-rapide input.post.rempli + label{
color: #cb79e0;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
form.connexion-rapide input.post::-webkit-input-placeholder {
-webkit-transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
font-size: 12px;
}
form.connexion-rapide input.post:focus::-webkit-input-placeholder {
color: #cb79e0;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
form.connexion-rapide div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
form.connexion-rapide div input {
margin: 0px 10px 0px 0px;
}
form.connexion-rapide div span {
text-transform: lowercase;
font-size: 13px;
letter-spacing: 1px;
}
form.connexion-rapide > input[type="submit"] {
margin-top: 10px;
font-family: "Montserrat", sans-serif;
text-transform: lowercase;
padding: 5px 0;
border: 2px solid #fff;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
form.connexion-rapide > input[type="submit"]:hover {
border: 2px solid #fff;
}
/*CUSTOMISATION DE LA BOITE DE RÉCEPTION PAR AWFUL*/
/*Boite MP*/
#mp {
font-family: 'Roboto', sans-serif;
background: #F6F2FF;
}
/*Header*/
.mp-header {
align-items: center;
display: flex;
justify-content: space-between;
padding: 10px;
background: #a9a4d6;
color: #FCFAFF;
}
/*Liens du header*/
.mp-links {
display: flex;
}
.mp-links div {
margin-right: 10px;
text-transform: lowercase;
font-size: 13px;
font-weight: bold;
}
.mp-links div:last-child {
margin-right: 0px;
}
.mp-links div a {
font-weight: normal;
color: #757575;
transition: color 0.3s ease-in-out;
}
.mp-links div a:hover {
color: #ccc;
}
/*Barre de pourcentage*/
.mp-percent {
font-size: 10px;
width: 250px;
}
.mp-percent > div {
background: #444;
width: 100%;
margin-top: 5px;
}
.mp-percent > div > div {
background: #a16bdb;
display: inline-block;
}
/*Corps de la boîte*/
.mp-body {
padding: 15px;
}
.mp-body-head {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.mp-body-head select {
border: 1px solid #aaa;
}
.mp-body-head input{
font-size: 11px!important;
}
/*Bouton nouveau*/
#mp a[href="/privmsg?mode=post"]::before {
content: "Nouveau";
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 900;
text-transform: uppercase;
transition: color 0.3s ease-in-out;
color: #dbc0e8;
}
#mp a[href="/privmsg?mode=post"]:hover::before {
color: #A586B4;
}
#mp a[href="/privmsg?mode=post"] img {
display: none;
}
/*Item MP*/
.mp-item {
background: #fefefe;
padding: 10px;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: space-between;
border-left: 3px solid #b0b0b0;
}
.mp-item + .mp-item {
margin-top: 8px;
}
.mp-item.new-mp {
border-left: 3px solid #a16bdb;
}
.mp-item > img {
display: none;
}
.mp-item > div > div:first-child {
font-size: 11px;
margin-bottom: 5px;
}
.mp-item > div > div:first-child > a:first-child {
margin-right: 5px;
color: #1d1d1d;
font-weight: bold;
border-right: 1px solid #ccc;
padding-right: 5px;
}
.mp-item > div > div:nth-child(2) {
text-transform: uppercase;
color: #aaa;
font-size: 9px;
letter-spacing: 1px;
}
.mp-bottom-btn {
padding: 10px 10px 0px;
display: flex;
justify-content: flex-end;
}
.mp-bottom-btn input, .mp-body-head input{
transition: all 0.3s ease-in-out;
border: 1px solid #aaa;
font-family: inherit;
text-transform: uppercase;
font-size: 9px;
color: #414141;
cursor: pointer;
background: #e9e9e9;
}
.mp-bottom-btn input:hover, .mp-body-head input:hover{
border: 1px solid #848080;
}
.mp-bottom {
align-items: center;
padding: 10px;
display: flex;
font-size: 10px;
}
.mp-bottom a + div {
margin-left: 10px;
}
.mp-bottom a + div strong {
color: #a16bdb;
}
.mp-bottom div:last-of-type {
margin-left: auto;
}
.mp-bottom div:last-of-type a {
color: #575757;
transition: all 0.3s ease-in-out;
}
.mp-bottom div:last-of-type a:hover {
color: #999;
}
.mp-bottom div:last-of-type a:last-child {
margin-left: 10px;
}
.mp-empty {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #969696;
}
/* FOND LISTE DES MEMBRES */
.bgLMBER {
background:rgba(255,255,255,0.4); /* MODIFIABLE */
}
/* TITRE LISTE DES MEMBRES */
.tleLMBER {
margin-bottom:25px; width:auto; padding:20px 0;
font-family:Arial; text-transform:uppercase; font-size:32px; text-align:center;
background:#A38FE3; color:#E9E2FF; /* MODIFIABLE */
}
/* BLOC LISTE DES MEMBRES */
#LMBER {
margin:auto; width:660px; text-align:center;
}
/* BLOC MEMBRE */
#MBER {
float:left; margin:15px 10px 10px;
width:200px; height:405px; font-family:Arial;
}
/* BLOC PSEUDONYME */
#nameLMBER {
position:absolute; z-index:3; margin-top:-10px; margin-left:85px;
width:100px; height:auto;
}
/* OMBRES BLOC PSEUDONYME */
.triLMBER {
position:absolute; z-index:2; margin-top:-10px; margin-left:80px;
width:0; height:0; border-style:solid; border-width:0 0 15px 5px; border-color:transparent;
border-bottom-color:#E9E2FF; /* MODIFIABLE */
}
.triRMBER {
position:absolute; margin-top:-10px; margin-left:185px;
width:0; height:0; border-style:solid; border-width:15px 0 0 5px; border-color:transparent;
border-left-color:#E9E2FF; /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER {
width:80px; padding:10px 10px 0;
text-align:center; text-transform:uppercase;
background:#D9CEFF; /* MODIFIABLE */
}
/* IMAGES MP * WWW */
.btnLMBER {
margin-top:5px; text-align:center;
}
/* POINTE PSEUDONYME */
.triMBER {
width:0; height:0; border-style:solid; border-width:20px 50px 0 50px; border-color:transparent;
border-top-color:#E9E2FF; /* MODIFIABLE */
}
/* AVATAR */
.imgLMBER img {
position:absolute; z-index:2; margin-left:-100px;
width:200px; height:400px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
.imgLMBER {
width:200px; height:400px; overflow:hidden;
}
.imgLMBER div {
position:relative;
width:200px; height:400px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div {
width:190px; height:145px; padding:5px; overflow:hidden;
font-size:11px; text-align:center;
background:grey; color:grey; /* MODIFIABLE - COULEURS PAR DEFAUT */
transition:transform 0.15s linear; -webkit-transition:transform 0.15s linear;
}
.imgLMBER:hover div div {
transform:translateY(320px); -webkit-transform:translateY(320px);
}
.imgLMBER:hover img {
transform:translateY(-85px); -webkit-transform:translateY(-85px);
}
/* INFORMATIONS */
.imgLMBER div div span {
display:inline-block; vertical-align:top; height:17px; padding-top:3px;
text-align:center; text-transform:uppercase; font-size:10px;
background:rgba(250,250,250,0.6); /* MODIFIABLE */
}
/* NAVIGATION LISTE DES MEMBRES */
.pageLMBER {
margin:auto; width:640px;
color:black; /* MODIFIABLE */
text-align:left; text-transform:uppercase; font-size:10px; font-family:Arial;
}
.pageLMBER a {
color:black; /* MODIFIABLE */
font-family:Arial;
}
/* FORMULAIRE RECHERCHE LISTE DES MEMBRES */
.btmLMBER {
margin-top:15px; padding:15px 0;
background:#212121; /* MODIFIABLE */
text-align:center;
}
/* INTITULES FORMULAIRE RECHERCHE LISTE DES MEMBRES */
.formLMBER span {
display:inline-block; vertical-align:bottom; margin-top:1px;
height:17px; padding:2px 5px 0;
background:lightgrey; color:black; /* MODIFIABLE */
text-transform:uppercase; font-size:10px; text-align:center; font-family:Arial;
}
.formLMBER input, select {
border:none !important;
height:19px; padding:0;
text-transform:uppercase; font-size:10px; font-family:Arial;
}
/* BOUTON OK LISTE DES MEMBRES */
.formLMBER .liteoption {
padding:0 5px 0 2px;
background:lightgrey; color:black; /* MODIFIABLE */
text-transform:uppercase; font-weight:bold;
}
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900');
body {
position: relative;
overflow-x: hidden;
}
#sidebar {
position: absolute;
top: 0;
left: -200px;
height: 100%;
width: 300px;
background: #F6F2FF;
box-sizing: border-box;
padding: 40px;
font-family: 'Source Sans Pro', sans-serif;
z-index: 999;
}
#sidebar.medium {
width: 250px;
padding: 30px;
}
#sidebar.right {
right: 0;
left: initial !important;
}
#sidebar.right #sidebar-trigger {
left: 10px;
right: initial !important;
}
#sidebar.right.medium {
padding: 30px 10px 30px 40px;
}
#sidebar a, #sidebar a:hover, #sidebar a:active {
text-decoration: none!important;
}
#sidebar a,#sidebar a:hover,#sidebar a:active {
text-decoration: none;
}
#sidebar a {
color: #808080;
outline: none;
transition: color 0.3s ease-in;
}
#sidebar a:hover {
color: #808080 !important;
}
#sidebar-trigger {
position: absolute;
right: 10px;
top: 15px;
display: block;
height: 21px;
width: 25px;
}
#sidebar-trigger span {
display: block;
width: 25px;
height: 3px;
border-radius: 8px;
background: #a9a4d6;
position: relative;
margin-top: 8px;
}
#sidebar-trigger span:after,#sidebar-trigger span:before {
content:"";
width: 25px;
height: 3px;
border-radius: 8px;
background: #a9a4d6;
position: absolute;
transition: all 0.2s;
}
#sidebar-trigger span:after {
margin-top: 8px;
}
#sidebar-trigger.active span:after {
transform: rotate(-45deg);
margin-top: 0px;
}
#sidebar-trigger span:before {
margin-top: -8px;
}
#sidebar-trigger.active span:before {
transform: rotate(45deg);
margin-top: 0px;
}
#sidebar-trigger.active span {
background-color: transparent;
transition: all 0.2s;
}
#sidebar h2 {
color: #a9a4d6;
text-transform: lowercase;
margin: 0 0 20px;
font-weight: normal;
font-size: 25px;
letter-spacing: 1px;
position: relative;
}
#sidebar h2:after {
content: "";
height: 2px;
width: 20px;
position: absolute;
left: 0;
bottom: -7px;
background: #f2f2f2;
}
#sidebar .sidebar-txt {
color: #BDB9E7;
text-align: justify;
font-size: 11px;
position: relative;
}
#sidebar .sidebar-txt.contexte {
margin-bottom: 40px;
}
#sidebar .sidebar-txt.contexte:after {
content: "";
height: 1px;
width: 100px;
position: absolute;
left: 0;
bottom: -20px;
background: #F6F2FF;
}
#sidebar.medium .sidebar-txt.contexte {
margin-right: 10px;
}
#sidebar .title {
text-transform: lowercase;
letter-spacing: 2px;
color: #BDB9E7;
margin-bottom: 15px;
font-size: 11px;
}
#sidebar .sidebar-block {
margin-bottom: 20px;
}
#sidebar ul {
padding: 0;
list-style-type: none;
}
#sidebar #liens a {
color: #f5f5f5;
font-size: 12px;
outline: none;
line-height: 1.9;
transition: color 0.3s ease-in;
display: inline-block;
background: #424242;
padding: 0 10px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
margin-right: 4px;
margin-bottom: 4px;
}
#sidebar ul li a:hover {
color: #808080 !important;
}
#sidebar #partenaires a {
display: inline-block;
padding: 3px;
height: 50px;
border: 1px solid #ccc;
margin: 0 5px 7px 0;
}
#sidebar.medium #partenaires a {
margin: 0 2px 5px 0;
}
#sidebar #staff .staff-info {
position: relative;
overflow: hidden;
height: 50px;
margin-bottom: 6px;
}
#sidebar.medium #staff .staff-info {
height: 50px;
width: 190px;
}
#sidebar #staff .staff-info img {
height: 50px;
width: 220px;
}
#sidebar.medium #staff .staff-info img {
height: 50px;
width: 190px;
}
#sidebar #staff .staff-info .staff-tooltip {
background: #BDB9E7;
color: #4d4d4d;
height: 100%;
width: 100%;
position: absolute;
top: 100%;
left: 0;
text-align: center;
font-size: 12px;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
}
#sidebar #staff .staff-info:hover .staff-tooltip {
top: 0;
opacity: 1;
visibility: visible;
}
#sidebar #staff .staff-tooltip h3 {
text-transform: lowercase;
margin: 10px 0 0;
font-size: 12px;
letter-spacing: 1px;
}
#sidebar #top-site div {
width: 20%;
display: inline-block;
text-align: justify;
}
#sidebar #top-site div a:before {
content: "";
background:rgb(219,192,232);
background: radial-gradient(circle, rgba(219,192,232,1) 0%, rgba(169,164,214,1) 96%);
height: 20px;
width: 20px;
position: absolute;
transform: rotate(45deg);
transition: all 0.4s;
}
#sidebar #top-site div a:hover:before {
background: #6d67a1;
}
/* PROFIL */
/* PSEUDO STATUT MESSAGES SUJETS */
.profil_header {
width: 850px;
margin: 2% auto;
background: #C6C0FA;
padding: 2%;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
color: #F6F2FF;
line-height: 1.5;
font-size: 14px;
}

.profil_header::after {
display: block;
content: "";
clear: both;
}

.profil_pseudo_statut {
float: left;
}

.profil_pseudo {
font-family: 'Berkshire Swash', cursive;
font-weight: normal;
font-size: 19px;
letter-spacing: 1px;
}

.profil_stats {
float: right;
}

.profil_stats a {
display: inline-block;
background: rgba(0,0,0,.2);
width: 100px;
text-align: center;
margin: 0 10px;
padding: 5% 0;
color: #F0E9FF;
}

/* CONTENU */
.profil_content {
width: 850px;
margin: 0 auto 2%;
font-family: 'Oswald', sans-serif;
color: #A586B4;
line-height: 1.5;
font-size: 14px;
display: flex;
}

/* Contact */
.profil_contact {
background: #C6C0FA;
padding: 2%;
text-align: center;
box-sizing: border-box;
height: 320px;
margin: 0 2%;
}

.profil_contact a {
display: block;
margin: 10px 0;
}

.profil_contact .field_uneditable {
font-size: 0;
}

/* Bloc infos */
.profil_infos {
background: #F0E9FF;
width: 70%;
box-sizing: border-box;
height: 320px;
padding: 2%;
overflow: auto;
}

.profil_infos div {
display: inline-block;
}

a.credit_profil {
text-align: right;
text-transform: lowercase;
font-size: 9px;
display: block;
font-family: 'Oswald', sans-serif;
}

.bodylinewidth {
width: 850px;
}