body {
    margin: 0;
    background: linear-gradient(90deg, #c7bdea 0%, #ffffff 15%, #ffffff 85%, #c7bdea 100%);
    background-color: white;
    transition: background 1s;
}
@media screen and (max-width:1750px) {
    body {
	background: linear-gradient(90deg, #dcd7ef 0%, #ffffff 10%, #ffffff 90%, #dcd7ef 100%);
    }
}
@media screen and (max-width:1950px) {
    body {
	background: linear-gradient(90deg, #dcd7ef 0%, #ffffff 15%, #ffffff 85%, #dcd7ef 100%);
    }
}
@media screen and (max-width:1500px) {
    body {
	background: none;
    }
}
body, h1, h2, h3 {
    font-family: 'Poppins', Verdana;
    font-size: 14px;
}
.clear {
    clear: both;
}
.xs-hidden-submit {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
a.xs-link {
    color: black;
    transition: color 0.3s;
}
a.xs-link:hover {
    color: #e24852;
}

#xs-modal-background {
    padding: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: rgba(181, 123, 97, 0.75);
}
#xs-modal-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    z-index: 1000;
    margin: 0;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    background-color: transparent;
}
.xs-modal-window {
    background-color: white;
    border-radius: 10px;
    font-family: 'Poppins', Verdana;
    font-size: 1em;
    color: black;
    margin-bottom: 100px; /* rehausse un peu la fenetre */
}
html[data-support="mobile"] .xs-modal-window {
    margin-bottom: 0;
}
.xs-modal-window > * {
    padding: 0 25px;
}
.xs-modal-window .header {
    background-color: rgb(242, 244, 245);
    font-size: 1.2em;
    border-radius: 10px 10px 0 0;
    margin-bottom: 25px;
    color: #444444;
    text-align: center;
    font-weight: bold;
    border-bottom: solid 1px #999999;
    font-smooth: never;
    -webkit-font-smoothing : none;
    padding: 15px 10px;
}
.xs-modal-window .close-button {
    float: right;
    color: #808080;
    font-size: 1.2em;
}
.xs-modal-window .close-button:hover {
   color: #444444;
 }
.xs-modal-window .header .title {
     cursor: default;
}
.xs-modal-window form {
    margin-bottom: 25px;
}
.xs-modal-window form .input-wrapper {
    max-width: 350px;
    width: 100%
    height: 50px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: solid 1px #999999;
    padding: 10px;
    box-sizing: border-box;
}
.xs-modal-window form .input-wrapper input {
    border: 0;
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 1.2em;
}
.xs-modal-window form .input-wrapper input::-webkit-input-placeholder,
.xs-modal-window form .input-wrapper input:-moz-placeholder,
.xs-modal-window form .input-wrapper input::-moz-placeholder,
.xs-modal-window form .input-wrapper input:-ms-input-placeholder,
.xs-modal-window form .input-wrapper input::placeholder,
.xs-modal-window form .input-wrapper input[placeholder] {
    color: black;
    opacity: 1;
}
.xs-modal-window form button {
    background-color: #1b0c4d;
    border-radius: 5px;
    max-width: 350px;
    width: 100%;
    height: 50px;
    color: white;
    border: none;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
}
.xs-modal-window form button:hover {
    background-color: #ff525d;
}
.xs-modal-window form button.disabled {
    background-color: #cccccc !important;
}
.xs-modal-window .bottom {
    margin-bottom: 20px;
    text-align: center;
}
.xs-modal-window a {
    font-weight: bold;
    color: #1b0c4d;
}
.xs-modal-window a:hover {
    color: #ff525d;
}
.xs-modal-window a.forgot-password {
    display: block;
    margin-bottom: 20px;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 5px;
}
.xs-modal-window#xs-modal-window-devenir-auteur {
    max-width: 600px;
}
.xs-modal-window#xs-modal-window-devenir-auteur ul {
    padding-left: 50px;
}
.xs-modal-window#xs-modal-window-devenir-auteur h5 {
    font-size: 1em;
}
.xs-modal-window#xs-modal-window-webcam-api {
    max-width: 600px;
}
.xs-modal-window#xs-modal-window-webcam-api .content {
    padding: 0 25px;
    margin-bottom: 20px;
}
@-webkit-keyframes activeinput {
  0%   { background-color: #1b0c4d; }
  100% { background-color: #e24852; }
}
@-moz-keyframes activeinput {
  0%   { background-color: #1b0c4d; }
  100% { background-color: #e24852; }
}
@-o-keyframes activeinput {
  0%   { background-color: #1b0c4d; }
  100% { background-color: #e24852; }
}
@keyframes activeinput {
  0%   { background-color: #1b0c4d; }
  100% { background-color: #e24852; }
}
.xs-modal-window#xs-modal-window-webcam-api .bottom input {
    padding: 15px;
    border: 0;
    background-color: #1b0c4d;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}
.xs-modal-window#xs-modal-window-webcam-api .bottom input:focus {
    animation: activeinput infinite 1s alternate ease-out;
}
.xs-modal-window#xs-modal-window-webcam-api .bottom input:hover {
    animation: none !important;
    background-color: #e24852;
    text-decoration: underline;
}
.xs-modal-window#xs-modal-window-webcam-api .conditions {
    text-align: justify;
    height: 0;
    opacity: 0;
    transition: opacity 0.5s;
    overflow: hidden;
    font-size: 0.9em;
    font-family: arial;    
}
.xs-modal-window#xs-modal-window-webcam-api .conditions.visible {
    margin: 20px 0;
    height: auto;
    opacity: 1;
}

@-webkit-keyframes blink {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes blink {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes blink {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes blink {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

aside .xs-box ::-webkit-scrollbar {
    width: 8px;
    margin-left: 5px;
}
aside .xs-box ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
}
aside .xs-box ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    transition: background-color 0.3s;
}
aside .xs-box:hover ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 1);
}
#show-short-texts-button.on {
    background-color: #7b082d;
    color: #fbf9ff !important;
}
/**
 * DISCLAIMER
 */
@keyframes disclaimer-animation {
    from {top: -500px;}
    to {top: 0px;}
}
#disclaimer {
    position: absolute;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;/*rgba(0, 0, 0, .9);*/
    z-index: 999;
    animation-name: disclaimer-animation;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    background-size: cover;
    background-position: center;    
    padding: 0 10px;
}
html[data-support="mobile"] #disclaimer {
    display: flex;
    align-items: center;
}
#disclaimer_window {
    max-width: 530px;
    margin: 0 auto;
    background-color: white;
    margin-top: 200px;
    margin-top: 20vh !important;
    border-radius: 10px;
    background-color: rgba(255,255,255,.9);
    padding: 10px 10px 20px 10px;
    text-align: center;
}
html[data-support="mobile"] #disclaimer_window {
    margin: 0 !important;
}
#disclaimer_window_header {
    text-align: center;
}
#disclaimer_window_header_logo {
    background-image: url(../images/logo-fond-transparent.png);
    width: 140px;
    height: 80px;
    display: inline-block;    
}
#disclaimer_window_header_subtitle {
    display: block;
    font-family: 'Abril Fatface', cursive;
    cursor: default;
    text-align: center;
    font-size: 16px;
    color: #1B0C4D;
}
#disclaimer_text {
    clear: left;
    color: #1b0c4d;
    font-family: arial;
    font-size: 14px;
    text-align: center;
    padding: 10px 30px;
}
html[data-support="mobile"] #disclaimer_text {
    padding: 10px 20px;
}
#disclaimer_text p {
    margin: 0;
    font-size: 13px;
}
#disclaimer_text_1:before {
    content: "XStory-fr.com est un site pr\00E9 sentant de nombreuses histoires, et de nombreux contenus \00E0  caract\00E8 re \00E9 rotique.";
}
#disclaimer_text_2:before {
    content: "Ce site ne convient pas \00E0  un public mineur.";
}
#disclaimer_text_3:before {
    content: "En entrant, vous d\00E9 clarez \00EA tre en \00E2 ge l\00E9 gal de visionner ce type de contenus.";
}
#disclaimer_text_4:before {
    content: "Vous acceptez \00E9 galement l'utilisation de cookies pour vous proposer des contenus et services adapt\00E9 s \00E0  vos centres d'int\00E9 r\00EA ts.";
    opacity: .5;
}
#disclaimer_text p#disclaimer_text_4 {
    margin-top: 30px;
}
html[data-support="mobile"] #disclaimer_text p#disclaimer_text_4 {
    margin-top: 15px;
}
#disclaimer_enter_button .csa-18 {
    display: inline-block;
    background: url(../images/csa-18.png);
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: 10px;
}
#disclaimer_enter_button {
    background: #1b0c4d;
    color: white;
    padding: 13px 40px;
    border-radius: 10px;
    display: inline-block;
    font-weight: bold;
    transition: background-color 0.3s;
    cursor: pointer;
    margin-top: 50px;
    text-decoration: none;
}
html[data-support="mobile"] #disclaimer_enter_button {
    margin-top: 25px;
}

#disclaimer_enter_button:hover {
    background-color: #DE2F3A;
} 

/**
 * HEADER
 */
#xs-header, #xs-footer {
    width: 100%;
    /*width: 100vw;*/
    height: 70px;
    background-color: #1b0c4d;
    background-image: linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.25) 100%);
}
#xs-header-content, #xs-footer-content, #xs-page {
    width: 1200px;
    margin: 0 auto;
}
#xs-header #xs-logo {
    background-image: url(../images/logo-fond-transparent.png);
    background-size: cover;
    width: 121px;
    height: 80px;
    display: inline-block;
    float: left;
    margin-top: -4px;
    margin-right: 10px;
    margin-bottom: -10px;
}
#xs-header #xs-subtitle {
    display: inline;
    color: white;
    font-size: 23px;
    font-family: 'Abril Fatface', cursive;
    line-height: 70px;
    cursor: default;
}
#xs-header #xs-header-leftpart {
    float: left;
}
#xs-header-leftpart .signup-button {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 6px;
    text-align: center;
    background: #dfd9f2;
    color: #1b0c4d;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    height: 72px;
}
#xs-header-leftpart .signup-button .small {
    line-height: 5px;
}
#xs-header #xs-header-rightpart {
    float: right;
}

#xs-header #xs-searchbox-shadow {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    width: 100vw !important;
    height: 100%;
    height: 100vh !important;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
#xs-header #xs-searchbox {
    margin-top: 19px;
    float: left;
    position: relative;
}
#xs-header #xs-searchbox #xs-search-field {
    border: none;
    outline: none;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
    border-top: solid 1px transparent;
    border-left: solid 1px transparent;
    border-bottom: solid 1px transparent;
    float: left;
    width: 260px;
    height: 16px
}
@media screen and (max-width:999px) {
    #xs-header #xs-searchbox #xs-search-field {
	width: 160px;
    }
}
#xs-header #xs-searchbox #xs-search-button {
    font-family: 'FontAwesome';
    height: 28px;
    padding: 0 15px;
    border-left: none;
    border-top: solid 1px transparent;
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.3s;
    width: 42px;
}
#xs-header #xs-searchbox #xs-search-button.searching {
    color: transparent;
    background-image: url(../images/search-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.xs-search-results-box {
    position: absolute;
    right: 0;
    top: 30px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px);
    z-index: 2;
    display: none;
    width: 880px;
}
@media screen and (max-width:1099px) {
    .xs-search-results-box {
        width: 430px;
    }
}
.xs-search-results-box .xs-search-results-column {
    width: 430px;
}
.xs-search-results-box .xs-search-results-column-1 {
    float: left;
}
.xs-search-results-box .xs-search-results-column-2 {
    float: right;
}
.xs-search-results-box .xs-search-results-list {
    width: 430px;
}
.xs-search-results-box .xs-search-results-list > li {
    background-color: white;
}
.xs-search-results-box .xs-search-results-list,
.xs-search-results-box .xs-search-results-list > li > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.xs-search-results-box .xs-search-results-list h4 {
    padding: 2px;
    text-align: center;
    font-weight: bold;
    background-color: #1b0c4d;
    font-size: 11px;
    margin: 0 0 5px 0;
    color: white;
    clear: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-histoires li {
    padding-left: 10px;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-categories li {
    padding-left: 10px;
    margin-bottom: 10px;
    clear: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-categories li a {
    font-weight: bold;
    color: #333333;
    line-height: 60px;
    transition: color 0.3s;
    text-decoration: none;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-categories li a:hover {
    color: #e24852 !important;
}

.xs-search-results-box .xs-search-results-list .xs-search-results-type-membres .xs-search-results-sublist li {
    clear: left;
    height: 60px;
    padding-left: 10px;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-membres .xs-search-results-sublist li .xs-search-results-membre-logo {
    width: 50px;
    height: 50px;
    float: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-membres .xs-search-results-sublist li .xs-search-results-membre-username {
    margin-left: 60px;
    display: block;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85em;
    line-height: 25px;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-membres .xs-search-results-sublist li .xs-search-results-membre-status {
    margin-left: 60px;
    color: #666666;
    font-size: 0.75em;    
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-rencontre li {
    padding-left: 10px;
    clear: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-rencontre li img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    float: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-rencontre li .xs-search-results-type-rencontre-title {
    margin-left: 60px;
    height: 50px;
    display: block;
    font-weight: bold;
    text-decoration: none;
    color: black;
    font-size: 0.9em;
    transition: color 0.3s;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-rencontre li .xs-search-results-type-rencontre-title:hover {
    color: #e24852;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum li {
    padding: 0 10px 10px 10px;
    clear: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-text {
    margin-left: 60px;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-text-content {
    height: 2.3em;
    overflow: hidden;
    display: block;
    line-height: 1.2em;
    font-size: 0.9em;
    padding-top: 0.2em;
    margin-bottom: 0.2em;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-text-infos {
    font-size: 0.8em;
    color: #666666;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-text-infos a {
    color: #666666;
    transition: color 0.3s;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-text-infos a:hover {
    color: black;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon {
    width: 50px;
    height: 50px;
    background-image: url(//www.xstory-fr.com/forum/img/salons.png);
    float: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-15 { background-position: 0  -33px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-16 { background-position: 0 -151px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-25 { background-position: 0 -269px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-22 { background-position: 0 -387px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-28 { background-position: 0 -505px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-30 { background-position: 0 -623px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-29 { background-position: 0 -741px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-32 { background-position: 0 -859px; }
.xs-search-results-box .xs-search-results-list .xs-search-results-type-forum .xs-forum-icon.xs-forum-categorie-31 { background-position: 0 -977px; }

.xs-search-results-box .xs-search-results-list .xs-search-results-more-button {
    display: block;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #1b0c4d;
    font-weight: bold;
    font-size: 12px;
    border-top: solid 2px rgba(113, 0, 42, 0.4);
    padding-bottom: 10px;
    transition: background-color 0.3s, color 0.3s;
    clear: left;
}
.xs-search-results-box .xs-search-results-list .xs-search-results-more-button:hover {
    background-color: #1b0c4d;
    color: white !important;
    text-decoration: underline;
}
.xs-search-highlighted {
    font-weight: bold;
    background-color: transparent;
    color: inherit;
}
.xs-search-results-box .xs-search-results-type-webcam .xs-search-results-sublist li {
    text-align: center;
}
#xs-header #xs-header-sign-in-up-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dfd9f2;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    right: 10px;
}
#xs-header #xs-header-sign-in-up-button::before {
    content: "\f007";
    font-family: FontAwesome;
    color: #1b0c4d;
    font-size: 16px;
}
#xs-header #xs-header-signin-button,
#xs-header #xs-header-signup-button {
    float: left;
    height: 28px;
    margin-left: 20px;
    margin-top: 19px;
    font-size: 12px;
    padding: 0 31px;
    border: solid 1px #a69fbd;
    background-color: white;
    transition: background-color 0.3s;
    cursor: pointer;
    border-radius: 5px;
    color: #1b0c4d;
}
#xs-header #xs-header-signup-button {
    margin-right: 10px;
}
#xs-header #xs-searchbox #xs-search-button:hover,
#xs-header #xs-header-signin-button:hover,
#xs-header #xs-header-signup-button:hover {
    background-color: #fbf9ff;
}
#xs-header #xs-header-user-options,
#xs-header #xs-header-username,
#xs-header #xs-header-notifications {
    float: left;
    color: white;
    line-height: 70px;
    position: relative;
}
#xs-header #xs-header-user-options > i.fa.fa-caret-down,
#xs-header #xs-header-notifications-icon i.fa {
    line-height: 70px;
}
#xs-header #xs-header-notifications:hover #xs-header-notifications-icon {
    opacity: 0.8;
}
#xs-header #xs-header-avatar {
    width: 40px;
    margin-top: 15px;
}
#xs-header #xs-header-avatar-link {
    float: left;
    margin: 0 10px 0px 30px;
}
#xs-header #xs-header-username {
    margin-right: 5px
}
#xs-header #xs-header-user-options {
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}
#xs-header #xs-header-notifications-icon {
    font-size: 20px;
    cursor: pointer;
    padding-right: 20px;
}
#xs-header #xs-header-notifications-count {
    position: absolute;
    top: 9px;
    left: 10px;
    background-color: #e24852;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    line-height: 27px;
    text-align: center;
    font-weight: bold;
    font-size: 0.75em;
    border: solid 1px white;
    cursor: pointer;
}
#xs-header #xs-header-notifications-count:empty {
    display: none;
}
#xs-header #xs-header-notifications-bg {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
#xs-header #xs-header-notifications-box::before {
    right: 18px;
    position: absolute;
    top: -9px;
    width: 15px;
    height: 15px;
    background-color: white;
    border-left: solid 1px black;
    border-top: solid 1px black;
    transform: rotate(45deg);
    content: "";
}
#xs-header #xs-header-notifications-box {
    display: none;
    position: absolute;
    top: 55px;
    right: 0;
    background-color: white;
    color: black;
    z-index: 3;
    line-height: normal;
    width: 500px;
    border-radius: 10px;
    border: solid 1px #1b0c4d;
    padding: 10px;
}
#xs-header #xs-header-notifications-box > h2 {
    margin: 0;
}
#xs-header #xs-header-notifications-box > ul {
    padding: 0;
    list-style: none;
    display: block; /* table incompatible avec overflow sous FF et IE */
    margin: 0;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    height: 50vh;
    min-height: 200px;
    max-height: 600px;
}
#xs-header #xs-header-notifications-box > ul > li {
    display: table-row;
    margin-bottom: 5px;
    cursor: default;
    font-family: Helvetica;
    background-color: #fff6fa;
    font-weight: bold;
    font-size: 0.95em;
}
#xs-header #xs-header-notifications-box > ul > li.xs-notification-lue {
    background-color: transparent;
    font-weight: normal;
    font-size: 1em;
}
#xs-header #xs-header-notifications-box > ul > li:hover {
    background-color: #fffbfd;
}
#xs-header #xs-header-notifications-box > ul > li a {
    color: #1b0c4d;
    transition: color 0.3s;
}
#xs-header #xs-header-notifications-box > ul > li a:hover {
    color: #e24852;
}
#xs-header #xs-header-notifications-box .xs-notification-icon,
#xs-header #xs-header-notifications-box .xs-notification-text {
    display: table-cell;
}
#xs-header #xs-header-notifications-box .xs-notification-icon {
    padding: 0 10px;
    color: #e24852;
    font-size: 1.3em;
}
#xs-header #xs-header-notifications-box .xs-notification-text {
    padding: 10px 0;
    border-bottom: solid 1px #e4e4e4;
}
#xs-header #xs-header-notifications-box .xs-notifications-buttons a {
    display: inline-block;
    width: 49%;
    text-align: center;
    line-height: 40px;
    margin-top: 10px;
    color: black;
    font-weight: bold;
    transition: color 0.3s;
}
#xs-header #xs-header-notifications-box .xs-notifications-buttons a:hover {
    color: #e24852;
}
#xs-header #xs-header-notifications-box ::-webkit-scrollbar {
    width: 15px;
    margin-left: 5px;
}
#xs-header #xs-header-notifications-box ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
}
#xs-header #xs-header-notifications-box ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    transition: background-color 0.3s;
}
#xs-header #xs-header-notifications-box:hover ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 1);
}

#xs-header #xs-header-user-menu {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 2;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}
#xs-header #xs-header-user-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255, 251, 235, .97) !important;
    background-color: rgb(255, 251, 235);
    background-image: linear-gradient(120deg, rgba(255, 255, 255, .97), rgba(255, 251, 235, .97));
    -moz-box-shadow: 7px 7px 20px 0px #cfcfcf;
    -webkit-box-shadow: 7px 7px 20px 0px #cfcfcf;
    -o-box-shadow: 7px 7px 20px 0px #cfcfcf;
    box-shadow: 7px 7px 20px 0px #cfcfcf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=135, Strength=20);
    border-radius: 10px;
}
#xs-header #xs-header-user-menu-spacer {
    display: block;
    height: 25px;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    z-index: -1;
    pointer-events: none;
}
#xs-header #xs-header-user-menu-spacer::before {
    content: "\f0d8";
    font-family: 'FontAwesome';
    font-size: 29px;
    margin-right: 10px;
    color: #fffdf3;
    position: absolute;
    top: -15px;
    right: 12px;
}
#xs-header #xs-header-user-menu li {
    line-height: initial;
}
#xs-header #xs-header-user-menu li a {
    color: black;
    text-decoration: none;
    transition: color 0.3s;
    display: block;
    padding: 10px 20px 10px 10px;
    white-space: nowrap;
    line-height: normal;
}
#xs-header #xs-header-user-menu li a:hover {
    color: #e24852;
}
#xs-header #xs-header-user-menu li a i {
    margin-right: 5px;
    width: 12px;
    text-align: center;
}
#xs-header #xs-header-user-options:hover #xs-header-user-menu {
    height: auto;
    overflow: visible;
    opacity: 1;
}
/**
 * FOOTER
 */
#xs-footer {
    padding: 40px 0;
    height: auto;
}
#xs-footer #xs-footer-logo {
    background-image: url(../images/logo-fond-transparent.png);
    background-size: cover;
    width: 92px;
    height: 60px;
    margin-bottom: 20px;
    float: left;
}
#xs-footer #xs-footer-logo-subtitle {
    display: inline;
    color: white;
    font-size: 21px;
    font-family: 'Abril Fatface', cursive;
    line-height: 51px;
    vertical-align: middle;
    margin-left: 7px;
    margin-top: -7px;
    cursor: default;
}
#xs-footer-tools {
    width: 100%;
    display: flex;
    margin-top: 20px;
}
#xs-footer .xs-footer-tool {
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-align: center;
    display: inline;
    flex: 1;
}
#xs-footer .xs-footer-tool:hover {
    text-shadow: 2px 2px black;
}
#xs-footer .xs-footer-tool span {
    -moz-text-decoration-color: transparent;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s, -moz-text-decoration-color 0.3s;
}
#xs-footer .xs-footer-tool:hover span {
    text-decoration: underline;
    -moz-text-decoration-color: white;
    text-decoration-color: white;
}

#xs-footer-tools-left .xs-footer-tool {
    margin-right: 30px;
}
#xs-footer-tools-right .xs-footer-tool {
    margin-left: 30px;
}

#xs-footer .xs-footer-tool i {
    font-size: 35px;
    display: block;
    margin-bottom: 5px;
}


.histoire-categorie-small {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(../images/categories16x16_v6.png);
}
.histoire-categorie-small-1  { background-position:      0 0 }
.histoire-categorie-small-2  { background-position:  -100% 0 }
.histoire-categorie-small-3  { background-position:  -200% 0 }
.histoire-categorie-small-4  { background-position:  -300% 0 }
.histoire-categorie-small-5  { background-position:  -400% 0 }
.histoire-categorie-small-6  { background-position:  -500% 0 }
.histoire-categorie-small-7  { background-position:  -600% 0 }
.histoire-categorie-small-8  { background-position:  -700% 0 }
.histoire-categorie-small-9  { background-position:  -800% 0 }
.histoire-categorie-small-10 { background-position:  -900% 0 }
.histoire-categorie-small-11 { background-position: -1000% 0 }
.histoire-categorie-small-12 { background-position: -1100% 0 }
.histoire-categorie-small-13 { background-position: -1200% 0 }
.histoire-categorie-small-14 { background-position: -1300% 0 }

.histoire-categorie-medium {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    background-image: url(../images/categories32x32_v6.png);
}
.histoire-categorie-medium-1  { background-position:      0 0 }
.histoire-categorie-medium-2  { background-position:  -100% 0 }
.histoire-categorie-medium-3  { background-position:  -200% 0 }
.histoire-categorie-medium-4  { background-position:  -300% 0 }
.histoire-categorie-medium-5  { background-position:  -400% 0 }
.histoire-categorie-medium-6  { background-position:  -500% 0 }
.histoire-categorie-medium-7  { background-position:  -600% 0 }
.histoire-categorie-medium-8  { background-position:  -700% 0 }
.histoire-categorie-medium-9  { background-position:  -800% 0 }
.histoire-categorie-medium-10 { background-position:  -900% 0 }
.histoire-categorie-medium-11 { background-position: -1000% 0 }
.histoire-categorie-medium-12 { background-position: -1100% 0 }
.histoire-categorie-medium-13 { background-position: -1200% 0 }
.histoire-categorie-medium-14 { background-position: -1300% 0 }

/**
 * MENU
 */
#xs-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#xs-menu {
    width: 100%;
    margin: 0 0 20px 0;
}
#xs-menu,
#xs-menu li.xs-level-1 {
    height: 40px;
}
#xs-menu li.xs-level-1 {
    position: relative;
    display: block;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
    width: 16.66666%;
    float: left;
    z-index: 1;
    border-bottom: dashed 1px #d4d4d4;
}
#xs-menu li.xs-level-1 a {
    display: block;
    color: black;
    text-decoration: none;
    font-size: 1.3em;
    font-family: 'Oswald';
    transition: color 0.3s;
    height: 50px;
    overflow: hidden;
}
#xs-menu li.xs-level-1 a:hover {
    color: #e24852;
}
#xs-menu li.xs-level-1:hover > a {
    color: #e24852;
}
#xs-menu li.xs-level-1 > a i {
    transition: font-size 0.2s;
}
#xs-menu li.xs-level-1:hover > a i {
    font-size: 1.2em;
}

#xs-menu li.xs-level-1:hover ul.xs-level-2 {
    height: auto;
    opacity: 1;
}
#xs-menu ul.xs-level-2 {
    position: absolute;
    top: 40px;
    margin-top: -1px;
    left: 0;
    overflow: hidden;
    height: 0;
    line-height: 40px;
    opacity: 0;
    transition: opacity .5s;
    border-left: solid 2px #1b0c4d;
    box-sizing: border-box;
    z-index: 1;
    padding-bottom: 10px;
    background-color: rgba(255, 251, 235, .97) !important;
    background-color: rgb(255, 251, 235); /*IE8*/
    background-image: linear-gradient(120deg, rgba(255, 255, 255, .97), rgba(255, 251, 235, .97));

    -moz-box-shadow: 7px 7px 20px 0px #cfcfcf;
    -webkit-box-shadow: 7px 7px 20px 0px #cfcfcf;
    -o-box-shadow: 7px 7px 20px 0px #cfcfcf;
    box-shadow: 7px 7px 20px 0px #cfcfcf;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=135, Strength=20);
}
#xs-menu li.xs-level-2 {
    text-align: left;
    width: 250px;
    padding: 0px 20px;
}
#xs-menu li.xs-level-2 a {
    font-size: 1.1em;
    display: block;
    max-height: 4vh;
    min-height: 25px;
}
#xs-menu a.xs-special-link {
    color: #bb0a3a !important;
    transition: color 0.3s;
}
#xs-menu a.xs-special-link:hover {
    color: #ff3f73 !important;
}
@media screen and (max-height:680px) {
    #xs-menu li.xs-level-2 a {
        max-height: 2em;
    }
}
/**
 * TEMPLATE
 */
body.template-main {
    text-align: left;
}
#xs-page-background {
    z-index: 0;
    pointer-events: none;
    background-color: white;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, white 3%, white 97%, rgba(255,255,255,0) 100%);
    width: 1350px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -675px;
}
html[data-support="mobile"] #xs-page-background {
    display: none;
}
html[data-support="mobile"] body:not(.darkmode--activated) {
    background: none;
}
#xs-content {
    float: left;
    width: 850px;
}
#xs-content.xs-full-width-content {
    width: 100% !important;
}
#xs-sidebar {
    float: right;
    width: 350px;
    padding-left: 20px;
    box-sizing: border-box;
}
#xs-footer {
    clear: both;
}
@media screen and (max-width:1199px) {
    #xs-header-content, #xs-footer-content, #xs-page {
        width: 1100px;
    }
    #xs-content {
        width: 750px;
    }
}
@media screen and (max-width:1099px) {
    #xs-header-content, #xs-footer-content, #xs-page {
        width: 1000px;
    }
    #xs-content {
        width: 650px;
    }
}
@media screen and (max-width:1000px) {
    #xs-header-content, #xs-footer-content, #xs-page {
        width: 100%;
        min-width: 650px;
    }
    #xs-content {
        width: 100%;
    }
    #xs-header #xs-subtitle{
        display: none;
    }
    #xs-sidebar {
        width: 100%;
        clear: left;
        float: none;
        padding-top: 50px;
        padding-left: 0;
    }
    div[id^="daStaticDiv_"] {
	display: none !important;
    }
}
@media screen and (max-width:680px) {
    #xs-menu li.xs-level-1 a {
        font-size: 1.1em;
    }
}
div[id^="daStaticDiv_"][style*="z-index"] {
    z-index: 10 !important;
}

.xs-box {
    border: solid 3px #1b0c4d;
    box-sizing: border-box;

    -moz-box-shadow: 3px 3px 5px 0px rgba(150, 33, 76, 0.34);
    -webkit-box-shadow: 3px 3px 5px 0px rgba(150, 33, 76, 0.34);
    -o-box-shadow: 3px 3px 5px 0px rgba(150, 33, 76, 0.34);
    box-shadow: 3px 3px 5px 0px rgba(150, 33, 76, 0.34);
    filter:progid:DXImageTransform.Microsoft.Shadow(color=rgba(150, 33, 76, 0.34), Direction=135, Strength=5);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /*padding: 10px;*/
    margin: 0 0 15px 0;
    position: relative;

    transition: background-color 0.2s;
}
.xs-noborder-box {
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    background-color: transparent !important;
    overflow: hidden;
}
.xs-half-box {
    width: 49%;
    float: left;
    margin-right: 1%;
}
.xs-half-box + .xs-half-box {
    margin-right: 0;
    margin-left: 1%;
}
html[data-support="mobile"] .xs-half-box {
    width: 100%;
    float: none !important;
    margin: 0 !important;
}
.xs-half-box ul.xs-histoires > li {
    width: auto;
}
.xs-box-title {
    /*
    background-color: white;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, white 40%, white 60%, rgba(255,255,255,0) 100%);
    */
    position: absolute;
    top: -15px;
    left: 10px;
    padding: 5px 10px;
    vertical-align: bottom;
    font-family: 'Abril Fatface';
    font-size: 17px;
    /*text-transform: uppercase;*/
    display: inherit;
    font-weight: normal;
    margin: 0;
}
.xs-box-options {
    float: right;
    margin-top: -11px;
    /*background-color: white;*/
    margin-right: 10px;
    font-size: 0.85em;
    line-height: 0.85em;
    padding: 0 10px;
}
.xs-box-content {
    padding: 10px;
}
.xs-box-button {
    border-top: solid 1px #444444;
    display: block;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    color: #444444;
    /*background-color: white;*/
    border-radius: 0 0 7px 7px;
}
.xs-box-button:hover {
    color: white;
    background-color: #1b0c4d;
}
.xs-box-button-primary {
    float: left;
    width: 75%;
    border-right: solid 1px #aaaaaa;
    box-sizing: border-box;
    border-radius: 0 0 0 7px;
}
.xs-box-button-secondary {
    float: right;
    width: 25%;
    border-radius: 0 0 7px 0;
}
.xs-noborder-box .xs-box-content {
    padding-left: 0;
    padding-right: 0;
}
#xs-sidebar .xs-box {
    margin-bottom: 30px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    filter: inherit;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    /*padding-top: 10px;*/
}
#xs-sidebar .xs-box .xs-box-button {
    border-radius: 6px;
}


/**
 * SECTION HISTOIRES
 */
.xs-section-home-message {
    margin-bottom: 30px;
    display: none;
}
.xs-section-home-message .xs-box-content {
    font-size: 0.85em;
}
.xs-section-home-message .xs-close-box-button {
    float: right;
    margin-top: -5px;
    font-size: 1.4em;
    color: black;
}
.xs-section-home-message .xs-info {
    text-align: right;
    display: block;
    font-size: 0.85em;
    margin-top: 10px;
    font-style: italic;
}

/**
 * SECTION HISTOIRES
 */
.xs-section-histoires .xs-box-content {
    padding: 20px 30px 0 30px;
}
.xs-section-histoires .xs-box-options #xs-box-show-short-option {
    height: 0.85em;
}
ul.xs-histoires {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.xs-histoires > li.xs-histoire-1-columns {
    width: 100%;
}
ul.xs-histoires > li {
    display: inline-block;
    width: 49%;
    margin-bottom: 10px;
    vertical-align: top;
    padding-right: 20px;
    box-sizing: border-box;
}
.xs-histoire {
    position: relative;
}
.xs-histoire .xs-categorie, 
.xs-histoire .xs-type,
.xs-histoire .xs-score-wrapper {
    float: left;
    clear: left;
    width: 60px;
    margin-right: 10px;
    text-align: center;
}
.xs-histoire .xs-categorie {
    height: 60px;
    background-image: url(../images/icones60x60_v6.png);
    border: solid 1px #aaaaaa;
    border-radius: 10px;
    transition: border-color 0.4s;
}
.xs-histoire .xs-categorie:hover {
    border-color: #e24852;
}
.xs-histoire .xs-titre:visited {
    color: #636363;
}
.xs-histoire .xs-categorie-1  { background-position:      0 0 }
.xs-histoire .xs-categorie-2  { background-position:  -100% 0 }
.xs-histoire .xs-categorie-3  { background-position:  -200% 0 }
.xs-histoire .xs-categorie-4  { background-position:  -300% 0 }
.xs-histoire .xs-categorie-5  { background-position:  -400% 0 }
.xs-histoire .xs-categorie-6  { background-position:  -500% 0 }
.xs-histoire .xs-categorie-7  { background-position:  -600% 0 }
.xs-histoire .xs-categorie-8  { background-position:  -700% 0 }
.xs-histoire .xs-categorie-9  { background-position:  -800% 0 }
.xs-histoire .xs-categorie-10 { background-position:  -900% 0 }
.xs-histoire .xs-categorie-11 { background-position: -1000% 0 }
.xs-histoire .xs-categorie-12 { background-position: -1100% 0 }
.xs-histoire .xs-categorie-13 { background-position: -1200% 0 }
.xs-histoire .xs-categorie-14 { background-position: -1300% 0 }
.xs-histoire .xs-type {
    color: #888888;
    font-size: 0.7em;
    font-style: italic;
    display:none;
}
.xs-histoire .xs-score-wrapper {
    margin-top: -8px;
    text-align: center;
    pointer-events: none;
}
.xs-histoire .xs-score {
    font-weight: bold;
    font-size: 0.8em;
    color: white;
    background-color: #1b0c4d;
    border-radius: 5px;
    display: inline;
    padding: 0 3px;
}
.xs-histoire.xs-histoire-type-short,
.xs-histoire.xs-histoire-type-short .xs-titre {
    color: #b58c74;
}
.xs-histoire .xs-titre {
    display: inline;
    margin-bottom: 5px;
    overflow: hidden;
    font-family: 'Oswald';

    font-size: 1.2em;
    text-decoration: none;
    color: #333333;
    padding-top: 2px;

    transition: color 0.3s;
}
.xs-histoire .xs-titre:hover {
    color: #e24852 !important;
}
.xs-histoire .xs-titre:visited {
    color: #636363;
}
.xs-histoire .xs-titre::first-letter {
    text-transform: uppercase;
}

.xs-histoire .xs-infos {
    white-space: nowrap;
    font-size: 0.8em;
    color: #666666;
    margin-left: 70px;
}
.xs-histoire .xs-infos div {
    display: inline;
}
.xs-histoire .xs-infos span {
    white-space: normal;
}
.xs-histoire .xs-infos .xs-auteur a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s;
}
.xs-histoire .xs-infos .xs-auteur a:hover {
    color: #e24852;
    text-decoration: underline;
}
.xs-histoire .xs-infos .xs-infos-private-status.error {
    color: red;
}
.xs-histoire .xs-infos .xs-infos-private-status.warning {
    color: #DD6F00;
}
.xs-histoire .xs-nb-chapitres {
    white-space: nowrap;
    font-size: 0.8em;
    font-style: italic;
}
.xs-histoire .xs-sub-chapitres {
    display: none;
    position: absolute;
    left: 70px;
    top: 2em;
    margin: 0;
    padding: 10px 40px;
    list-style: none;
    background: white;
    z-index: 1;
    -moz-box-shadow: 3px 3px 5px 0px #c0c0c0;
    -webkit-box-shadow: 3px 3px 5px 0px #c0c0c0;
    -o-box-shadow: 3px 3px 5px 0px #c0c0c0;
    box-shadow: 3px 3px 5px 0px #c0c0c0;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=135, Strength=5);
    opacity: 0.95;
}
html[data-support="mobile"] .xs-histoire .xs-sub-chapitres {    
    padding: 10px 2px;
}
.xs-histoire .xs-sub-chapitres a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
.xs-histoire .xs-sub-chapitres a:hover {
    color: #e24852;
    text-decoration: underline;
}
.xs-histoire .xs-sub-chapitres a:visited {
    color: #636363;
}
.xs-histoire .xs-sub-chapitres li {
    white-space: nowrap;
}
.xs-histoire .xs-sub-chapitres li time {
    width: 80px;
    display: inline-block;
    font-size: 0.8em;
}
.xs-histoire .xs-sub-chapitres li .xs-sub-chapitre-likes {
    display: inline;
    font-size: 0.8em;
}
.xs-histoire .xs-sub-chapitres li .xs-sub-chapitre-soustitre {
    font-size: 0.85em;
    font-style: italic;
    text-align: right;
}
.xs-histoire p.xs-histoire-text {
    font-size: 0.8em;
    line-height: 1.1em;
    margin: 0 0 0 70px;
    text-align: justify;
    color: #505050;
    background-color: #f4f4f4;
    padding: 5px;
}
.xs-histoire .xs-medaille {
    position: absolute;
    top: 1px;
    left: 1px;
    cursor: pointer;    
    transition: opacity .6s;
}
.xs-histoire .xs-medaille:hover {
    opacity: 0;
}

ul.xs-histoires-small .xs-titre {
    display: inline;
    font-family: 'Oswald';
    font-size: 0.9em;
    text-decoration: none;
    color: black;
    transition: color 0.3s;
}
ul.xs-histoires-small .xs-titre:hover {
    color: #e24852;
}
ul.xs-histoires-small .xs-titre::first-letter {
    text-transform: uppercase;
}
ul.xs-histoires-small .xs-score {
    font-size: 0.8em;
    display: inline;
    white-space: nowrap;
}

/**
 * SECTION VALIDATION
 */
.xs-section-validation {
    color: white;
}
.xs-section-validation .xs-box-title {
    background: transparent;
    width: 100%;
    text-align: center;
    top: 10px;
    left: 0;
    padding: 0;
}
.xs-section-validation .xs-box-content {
    background-color: #1b0c4d; 
    width: 100%; 
    padding: 60px 20px 20px 20px;
    box-sizing: border-box;
}
.xs-section-validation a.xs-link {
    color: white;    
    transition: color 0.3s;
}
.xs-section-validation a.xs-link:hover {
    color: #ff525d;
}
.xs-section-validation #categorieHistoireValidation {
    height: 28px;
}
.xs-section-validation #refreshValidation {
    font-size: 0.8em;
    margin-top: 20px;
    display: inline-block;
}
.xs-section-validation button {
    height: 28px;
    font-family: Poppins;
    font-size: 13px;
    padding: 0 20px;
    border: none;
    background-color: white;
    transition: background-color 0.3s;
    cursor: pointer;
    border-radius: 2px;
    margin: 30px 20px 10px 0;
    display: inline-block;
}
.xs-section-validation button:hover {
    background-color: #fbf9ff;
}
/**
 * SECTION FORUM
 */
.xs-section-forum .xs-box-content {
    padding: 20px 30px 0 30px;
}
.xs-section-forum ul.xs-forum-topics {
    padding: 0;
    margin: 0;
    list-style: none;
}
.xs-section-forum ul.xs-forum-topics li {
    display: inline-block;
    float: left;
    width: 49%;
    margin-bottom: 15px;
    vertical-align: top;
    padding-right: 20px;
    box-sizing: border-box;
}
html[data-support="mobile"] .xs-section-forum ul.xs-forum-topics li {
    padding-right: 0;
}

.xs-section-forum .xs-forum-topics .xs-forum-categorie {
    display: block;
    float: left;
    width: 60px;
    height: 60px;
    border: solid 4px transparent;
    border-radius: 5px;
    transition: border-color 0.4s;
}
.xs-section-forum .xs-forum-topics .xs-forum-categorie:hover {
    border-color: #e24852;
}
.xs-section-forum .xs-forum-topics .xs-forum-categorie-15 { background-color: #a5003c; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-16 { background-color: #c90092; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-25 { background-color: #6f00af; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-22 { background-color: #0088ae; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-28 { background-color: #65af00; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-30 { background-color: #ae6000; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-29 { background-color: #c40a00; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-32 { background-color: #000000; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-31 { background-color: #f2f2f2; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie .xs-forum-icon {
    width: 52px;
    height: 52px;
    background-image: url(//www.xstory-fr.com/forum/img/salons.png);
    margin: 4px;
}
.xs-section-forum .xs-forum-topics .xs-forum-categorie-15 .xs-forum-icon { background-position: 0  -33px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-16 .xs-forum-icon { background-position: 0 -151px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-25 .xs-forum-icon { background-position: 0 -269px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-22 .xs-forum-icon { background-position: 0 -387px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-28 .xs-forum-icon { background-position: 0 -505px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-30 .xs-forum-icon { background-position: 0 -623px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-29 .xs-forum-icon { background-position: 0 -741px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-32 .xs-forum-icon { background-position: 0 -859px; }
.xs-section-forum .xs-forum-topics .xs-forum-categorie-31 .xs-forum-icon { background-position: 0 -977px; }

.xs-section-forum .xs-forum-topics .xs-forum-timestamp,
.xs-section-forum .xs-forum-topics .xs-forum-title,
.xs-section-forum .xs-forum-topics .xs-forum-postscount {
    display: table-cell !important;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2em;
}
.xs-section-forum .xs-forum-topics .xs-forum-timestamp {
    width: 50px;
    text-align: center;
    font-size: 0.7em;
}
.xs-section-forum .xs-forum-topics .xs-forum-title {
    height: 60px;
    overflow: hidden;
    /*font-family: 'Oswald';*/
    font-size: 1.2em;
    text-decoration: none;
    color: #333333;
    transition: color 0.3s;
}
.xs-section-forum .xs-forum-topics .xs-forum-title:hover {
    color: #e24852;
}

.xs-section-forum .xs-forum-topics .xs-forum-postscount {
    padding-left: 5px;
    font-size: 0.82em;
    white-space: nowrap;
}

/**
 * SECTION RANDOM
 */
.xs-section-random {
    color: white;
}
.xs-section-random .xs-box-title {
    background: transparent;
    width: 100%;
    text-align: center;
    top: 10px;
}
.xs-section-random .xs-box-content {
    background-color: #1b0c4d; 
    width: 100%; 
    padding: 60px 20px 20px 20px;
}
.xs-section-random .xs-random-image {
    margin: 30px 40px 0 20px;
    border-radius: 100%;
    background-color: white;
    color: black;
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    float: left;
}
.xs-section-random .xs-random-image i {
    padding-top: 30px;
    padding-left: 5px;
    font-size: 42px;
}
.xs-section-random.loading .xs-random-image {
    -webkit-animation:spin .6s linear infinite;
    -moz-animation:spin .6s linear infinite;
    animation:spin .6s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.xs-section-random .xs-random-form-fields {
    display: block;
    overflow: hidden;
}
.xs-section-random .xs-random-form-field {
    display: block;
    margin-bottom: 10px;
}
.xs-section-random .xs-random-form-fields label {
    float: left;
    width: 90px;
}
.xs-section-random .xs-random-form-fields .xs-random-form-input-wrapper {
    overflow: hidden;
    background-color: white;
    border-radius: 5px;
    padding: 5px;
    margin-right: 40px;
    transition: background-color 0.3s;
}
.xs-section-random .xs-random-form-fields .xs-random-form-input-wrapper:hover {
    background-color: #fbf9ff;
}

.xs-section-random .xs-random-form-fields .xs-random-form-input-wrapper .xs-random-form-input {
    border: none;
    width: 100%;
    outline: none;
    transition: background-color 0.3s;
}
.xs-section-random .xs-random-form-fields .xs-random-form-input-wrapper:hover .xs-random-form-input {
    background-color: #fbf9ff;
}
.xs-section-random .xs-random-form-fields .xs-random-form-input-wrapper:hover select.xs-random-form-input option {
    background-color: white;
}
.xs-section-random form .xs-random-form-buttons {
    text-align: center;
}
.xs-section-random form button {
    height: 28px;
    font-family: Poppins;
    font-size: 13px;
    padding: 0 20px;
    border: none;
    background-color: white;
    transition: background-color 0.3s;
    cursor: pointer;
    border-radius: 2px;
    margin: 30px 20px 10px 0;
    display: inline-block;
}
.xs-section-random form button:hover {
    background-color: #fbf9ff;
}
.xs-section-random .xs-random-results {
    clear: both;
    padding-top: 20px;
}
.xs-section-random .xs-random-results:empty {
    padding-top: 0;
}

.xs-section-random .xs-random-results a {
    color: white;
}
.xs-section-random .xs-random-results a i {
    margin-right: 4px;
}
.xs-section-random .xs-random-results ul {
    margin: 0;
    list-style: none;
    padding-left: 160px;
}
html[data-support="mobile"] .xs-section-random .xs-random-results ul {
    padding: 0 10px;
}
.xs-section-random .xs-random-results li {
    margin-bottom: 10px;
}
.xs-section-random .xs-random-results .xs-random-histoire-titre {
    display: inline;
    font-family: 'Oswald';
    font-size: 1.1em;
    text-decoration: none;
    transition: color 0.3s;
}
.xs-section-random .xs-random-results .xs-random-histoire-titre:hover {
    color: #ff525d;
}
.xs-section-random .xs-random-results .xs-random-histoire-titre::first-letter {
    text-transform: uppercase;
}
.xs-section-random .xs-random-results .xs-random-histoire-score {
    font-size: 0.8em;
    display: inline;
    white-space: nowrap;
}

/**
 * SECTION MES HISTOIRES
 */
.xs-section-mes-histoires {
    background-color: #fbf9ff;
}
.xs-section-mes-histoires h3 {
    margin-top: 30px;
}
.xs-section-mes-histoires .xs-histoires {
    max-height:	200px;
    overflow: auto;
}
.xs-section-mes-histoires .xs-histoires ::-webkit-scrollbar {
    width: 20px;
    margin-left: 5px;
}
.xs-section-mes-histoires .xs-histoires ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
}
.xs-section-mes-histoires .xs-histoires ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    transition: background-color 0.3s;
}
.xs-section-mes-histoires .xs-histoires:hover ::-webkit-scrollbar-thumb {
    background-color: #1b0c4d;
}

/**
 * SECTION TUTOS
 */
.xs-section-tutoriels a {
    color: black;
    transition: color 0.3s;
}
.xs-section-tutoriels a:hover {
    color: #e24852;
}

/**
 * SECTION PRESENTATION
 */
.xs-section-presentation article {
    text-align: justify;
}

/**
 * SECTION CLASSEMENT
 */
.xs-box.xs-section-classement {
    border-radius: 0;
    border: none;
    /*background-color: #1b0c4d;*/
    color: #1b0c4d;
}
.xs-box.xs-section-classement ol {
  list-style: none;
  counter-reset: classement-counter;
}
.xs-box.xs-section-classement ol li {
    counter-increment: classement-counter;
    position: relative;
    display: flex;
}
.xs-box.xs-section-classement ol li::before {
    content: counter(classement-counter);
    color: #1B0C4D5C;
    font-size: 20px;
    font-family: 'Abril Fatface';
    position: absolute;
    top: -4px;
    left: -40px;
    width: 40px;
    padding-right: 10px;
    box-sizing: border-box;
    text-align: right;
}
.xs-box.xs-section-classement ol li a.xs-sidebar-titre {
    flex: 1;
}

.xs-box.xs-section-classement li {
    margin-bottom: 4px;
}
.xs-box.xs-section-classement a {
    /* color: white; */
    width: 245px;
    overflow: hidden;
    display: inline-block;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*font-weight: bold;*/
    vertical-align: middle;
}
.xs-box.xs-section-classement a .histoire-categorie-small {
    vertical-align: middle;
}
.xs-box.xs-section-classement .xs-box-title {
    /*background-color: #fbf9ff;*/
    background-image: none;
    color: #1b0c4d;
    position: static;
}
html[data-support="mobile"] .xs-box-content {
    padding: 0;
}

html[data-support="mobile"] #xs-sidebar {
    padding: 0 10px;
    box-sizing: border-box;
}
html[data-support="mobile"] #xs-sidebar .border-around-marker + .xs-box {
    width: 100%;
}
#xs-sidebar .border-around-marker + .xs-box::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: solid 2px #DE2F3A;
    border-radius: 6px;
}
#xs-sidebar .border-around-marker.alt + .xs-box::before {
    border-color: #b8b3ca;
    background: #fbf9ff;
}
#xs-sidebar .border-around-marker + .xs-box {
    position: relative;
    padding-bottom: 10px;
    width: 330px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    /*overflow: hidden;*/
}
#xs-sidebar .border-around-marker:not(.alt) + .xs-box .xs-box-title {
    color: #DE2F3A;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
}
#xs-sidebar .border-around-marker + .xs-box .xs-box-content {
    padding: 0;
}
#xs-sidebar .border-around-marker + .xs-box * {
    position: relative;
}

#xs-sidebar .xs-box-title .heart,
#xs-sidebar .xs-box-title .nice-book,
#xs-sidebar .xs-box-title .nice-books,
#xs-sidebar .xs-box-title .nice-trophee,
#xs-sidebar .xs-box-title .nice-comment,
#xs-sidebar .xs-box-title .nice-comments,
#xs-sidebar .xs-box-title .nice-game {
    display: inline;
    font-size: 32px;
    margin-right: 10px;
    vertical-align: middle;
}


aside ol {
    margin: 0;
}
aside .xs-sidebar-titre {
    display: inline;
    /*font-family: 'Oswald';*/
    font-size: 12px;
    text-decoration: none;
    color: #1b0c4d;
    transition: color 0.3s;
}
aside .xs-sidebar-titre:hover {
    color: #ff525d;
}
aside .xs-sidebar-titre::first-letter {
    text-transform: uppercase;
}
aside .xs-sidebar-score {
    font-size: 10px;
    display: inline;
    white-space: nowrap;
    color: #6F6298;
    vertical-align: middle;
    font-weight: bold;
    padding-left: 5px;
}

/**
 * SECTION COMMENTAIRES
 */
.xs-box.xs-section-commentaires {
    border: none;
    /*background-color: #1b0c4d;*/
    color: #1b0c4d;
}
.xs-box.xs-section-commentaires a {
    /*color: white;*/
    /*font-weight: bold;*/
}
.xs-box.xs-section-commentaires .xs-box-title {
    /*background-color: #fbf9ff;*/
    background-image: none;
    color: #1b0c4d;
    position: static;
}
ul.xs-commentaires {
    padding: 0;
    margin: 10px 0 0 0;
    list-style: none;
}
ul.xs-commentaires li {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    box-sizing: border-box;
    margin-bottom: 8px;
}

aside .xs-sidebar-timestamp,
.xs-commentaires .xs-commentaires-title,
.xs-commentaires .xs-commentaires-postscount {
    display: table-cell !important;
    display: inline-block;
    vertical-align: top;
    line-height: 1.2em;
}
aside .xs-sidebar-timestamp {
    width: 50px;
    text-align: center;
    font-size: 0.7em;
    padding-top: 2px;
    float: left;
    color: #6F6298;
    text-align: left;
}
.xs-commentaires .xs-commentaires-title {
    overflow: hidden;
    font-size: 12px;
    text-decoration: none;
    color: #1b0c4d;/*#333333;*/
    transition: color 0.3s;
    /*font-family: 'Oswald';*/
    text-align: left;
}
.xs-commentaires .xs-commentaires-title:hover {
    color: #ff525d;
}
.xs-commentaires .xs-commentaires-title::first-letter {
    text-transform: uppercase;
}
.xs-commentaires .histoire-categorie-small {
    display: inline-block;
    float: left;
    margin-right: 5px;
}

.xs-commentaires .xs-commentaires-postscount {
    padding-left: 5px;
    font-size: 0.82em;
    white-space: nowrap;
    padding-top: 2px;
    display: inline !important;
    font-weight: normal;
}

/* SECTION JEU DU JOUR */
.xs-box.xs-section-game {
    color: #1b0c4d;
}
.xs-box.xs-section-game .xs-box-title {
    /*background-color: #fbf9ff;*/
    background-image: none;
    color: #1b0c4d;
    position: static;
}
html[data-support="mobile"] .xs-box.xs-section-game .xs-box-content {
    padding: 0;
}


/**
 * DIVERS
 */
a.xs-webcam-change {
    color: #1b0c4d;    
}
a.xs-webcam-change:hover {
    text-decoration: none;
}
a.xs-webcam-change:hover:before {
    content: "\f062";
    font-family: 'FontAwesome';
}
a.xs-webcam-change:hover:after {
    content: "\f062";
    font-family: 'FontAwesome';
}
#webcamInject::after {
    content: "";
    display: block;
    width: 82px;
    height: 45px;
    background: url(../images/logo-fond-transparent.png);
    position: absolute;
    background-size: cover;
    bottom: 5px;
    right: 5px;
    pointer-events: none;
    transition: opacity 0.5s;
}
.xs-static-webcam {
    position: relative;    
}
.xs-static-webcam a {
    display: inline-block;
}
.xs-static-webcam .background {
    width: 300px;
}
.xs-static-webcam .play {
    position: absolute !important;
    top: 79px;
    left: 120px;
    opacity: 0.5;
    transition: opacity 0.3s;	
}
.xs-static-webcam a:hover .play {
    opacity: 1;
}

/**
 * SECTION FORUM SIDEBAR
 */
.xs-box.xs-section-forum-sidebar {
    border: none;
    /*background-color: #1b0c4d;*/
    color: #1b0c4d;
}
.xs-box.xs-section-forum-sidebar a {
    /*color: white;*/
}
.xs-box.xs-section-forum-sidebar .xs-box-title {
    /*background-color: #fbf9ff;*/
    background-image: none;
    color: #1b0c4d;
    position: static;
}
.xs-box.xs-section-forum-sidebar ul.xs-forum-topics {
    padding: 0;
    margin: 10px 0 0 0;
    list-style: none;
}
.xs-box.xs-section-forum-sidebar ul.xs-forum-topics li {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    box-sizing: border-box;
    margin-bottom: 6px;
}
.xs-box.xs-section-forum-sidebar ul.xs-forum-topics li .xs-forum-title {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2em;
    text-decoration: none;
    color: #1b0c4d;
    transition: color 0.3s;
    /*font-family: 'Oswald';*/
    text-align: justify;
    /*font-weight: bold;*/
}
.xs-box.xs-section-forum-sidebar ul.xs-forum-topics li .xs-forum-title:hover {
    color: #ff525d;
}
.xs-box.xs-section-forum-sidebar .forum-color {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    display: table-cell;
    float: left;
    margin-top: 3px;
    margin-right: 5px;
}
.xs-box.xs-section-forum-sidebar .xs-forum-postscount {
    padding-left: 5px;
    font-size: 0.82em;
    white-space: nowrap;
    padding-top: 2px;
    display: inline !important;
    font-weight: normal;
    color: #6F6298;
}
.xs-box.xs-section-forum-sidebar ul {
    display: table;
}
.xs-box.xs-section-forum-sidebar li {
    display: table-row;
}
.xs-box.xs-section-forum-sidebar li time,
.xs-box.xs-section-forum-sidebar li a {
    display: table-cell;
    vertical-align: top;
}
.xs-box.xs-section-forum-sidebar li time {
    width: 35px;
}

/**
 * SECTION FAVORIS 1
 */
.xs-box.xs-section-favoris-1 ul {
    padding: 0 0 0 40px;
    list-style: none;
}
.xs-box.xs-section-favoris-1 .xs-section-favoris-histoires,
.xs-box.xs-section-favoris-1 .xs-section-favoris-auteurs
{
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
}
.xs-box.xs-section-favoris-1 .xs-section-favoris-histoires {
    font-size: 1.11111em;
}
.xs-box.xs-section-favoris-1 a[rel="author"] {
    /*font-family: 'Oswald';*/
    text-decoration: none;
}
.xs-section-favoris-auteurs i.fa {
    margin: 0 1px;
}
.xs-box.xs-section-favoris-1 p.empty {
    font-size: 0.8em;
}

/**
 * SECTION FAVORIS 2
 */
.xs-box.xs-section-favoris-2 ul {
    padding: 0 0 0 40px;
    list-style: none;
    font-size: 1.11111em;
}
.xs-box.xs-section-favoris-2 p.empty {
    font-size: 0.8em;
}

/**
 * INFO BULLES AUTEUR
 */
.xs-auteur-infos {
    position: absolute;
    background-color: white;
    color: black;
    font-size: 12px;
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px);
    z-index: 2;
}
.xs-auteur-infos:after {
    border: 10px solid;
    border-color: transparent transparent white transparent ;
    content: "";
    left: 20px;
    position: absolute;
    top: -20px;
}
.xs-auteur-infos .xs-auteur-infos-error {
    padding: 10px;
}
.xs-auteur-infos .xs-auteur-infos-wait {
    padding: 40px 60px;
}
.xs-auteur-infos .xs-auteur-infos-avatar {
    float: left;
    border-radius: 10px;
    margin: 10px 0 0 10px;
}
.xs-auteur-infos h3 {
    font-size: 11px;
    line-height: 50px;
    padding: 10px;
    margin: 0 0 0 60px;
    white-space: nowrap;
}
.xs-auteur-infos .xs-auteur-infos-text {
    background-color: #1b0c4d;
    color: white;
    white-space: nowrap;
    padding: 15px 10px 10px 10px;
    margin-top: -15px;
}

/**
 * INFO BULLES CATEGORIE
 */
.xs-basic-infos {
    position: absolute;
    background-color: white;
    color: black;
    font-size: 12px;
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px);
    z-index: 2;
    padding: 10px;
}
.xs-basic-infos:after {
    border: 10px solid;
    border-color: transparent transparent white transparent ;
    content: "";
    left: 20px;
    position: absolute;
    top: -20px;
}

/**
 * WIDGET ORIENTATION (SIDEBAR)
 */
#xs-sidebar .xs-box.xs-box-section-orientation {
    border: none;
    padding: 0;
    line-height: 1em;
    margin-bottom: 0;
    margin-top: -10px;
}
#xs-sidebar .xs-box.xs-box-section-orientation .xs-box-content {
    display: flex;
}
#xs-sidebar .xs-box.xs-box-section-orientation .xs-box-content .toggle-wrapper {
    flex: 1;
}
#xs-sidebar .xs-box.xs-box-section-orientation .xs-box-content .toggle-wrapper label {
    float: left;
    line-height: 20px;
    margin-right: 5px;
}
#xs-sidebar .xs-box.xs-box-section-orientation #xs-orientation-toggle {
    display: inline-block;
    width: 100px;
    height: 20px;
    line-height: 30px;
    vertical-align: middle;
    margin-right: -10px;
}

/**
 * Bouton pour remonter en haut de page
 */
.xs-floatting-bottom-button {
    width: 45px;
    height: 45px;
    -webkit-clip-path: circle(50.0% at 50% 50%);
    clip-path: circle(50.0% at 50% 50%);	
    opacity: 0.2;
    transition: opacity 0.3s;
    cursor: pointer;
}
.xs-floatting-bottom-button:hover {
    opacity: 1;
}
#xs-page-top-button {
    position: fixed;
    bottom: 1px;
    margin-left: -55px;
    background-image: url(../images/page-top_v6.png);
    background-repeat: no-repeat;	   
}

/**
 * Fenetre modale de la V6
 */
.modal-v6 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.modal-v6 > .background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0;
    background: #de2f3a;
    opacity: 0.84;
    width: 100%;
    height: 100%;
}
.modal-v6 > .window-wrapper {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.modal-v6 > .window-wrapper > .window {
    background: white;
    border-radius: 20px;
    padding: 20px;
    max-height: calc(100vh - 40px);
    box-sizing: border-box;
    overflow: auto;    
    z-index: 2;
    position: relative;
}
html[data-support="mobile"] .modal-v6 > .window-wrapper > .window { width: calc(100vw - 20px); }
html[data-support="desktop"] .modal-v6 > .window-wrapper > .window { min-width: 500px; }

.modal-v6 > .window-wrapper > .window .close {
    position: absolute;
    right: 5px;
    top: 5px;
}
.modal-v6 > .window-wrapper > .window .close::before {
    content: "\f00d";
    font-family: FontAwesome;
    color: black;
    cursor: pointer;
}
.modal-v6 > .window-wrapper > .window .content {
    color: #1b0c4d;
}
.modal-v6 > .window-wrapper > .window > .title {
    font-size: 22px !important;
    font-family: 'Abril Fatface';
    margin-bottom: 30px;
    line-height: 95%;   
    text-align: center;
}

.nice-scrollbar, .nice-scrollbar * {
    scrollbar-color: #6f6f6f #eee;
    scrollbar-width: thin;
}
.nice-scrollbar ::-webkit-scrollbar {
    width: 15px;
    margin-left: 5px;
}
.nice-scrollbar ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
}
.nice-scrollbar ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    transition: background-color 0.3s;
}
.nice-scrollbar:hover ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 1);
}

.grecaptcha-badge {
    display: none !important;
}

/* Joli coeur 100% CSS */
.heart::before {
    content: "\f004";
    font-family: FontAwesome;
    color: #e9574a;
}
.heart::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.heart::before {
    -webkit-text-stroke: 1px #1b0c4d;
}

/* Jolie cam 100% CSS */
.webcam::before {
    content: "\f03d";
    font-family: FontAwesome;
    color: #e9574a;
}
.webcam::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.webcam::before {
    -webkit-text-stroke: 1px #1b0c4d;
}


/* Jolie icon commentaires 100% CSS */
.nice-comments::before {
    content: "\f086";
    font-family: FontAwesome;
    color: #e9574a;
}
.nice-comments::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nice-comments::before {
    -webkit-text-stroke: 1px #1b0c4d;
}

/* Jolie icon commentaire unique 100% CSS */
.nice-comment::before {
    content: "\f075";
    font-family: FontAwesome;
    color: #e9574a;
}
.nice-comment::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nice-comment::before {
    -webkit-text-stroke: 1px #1b0c4d;
}


/* Jolie icon jeu 100% CSS */
.nice-game::before {
    content: "\f11b";
    font-family: FontAwesome;
    color: #e9574a;
}
.nice-game::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nice-game::before {
    -webkit-text-stroke: 1px #1b0c4d;
}


/* Jolie icon trophee 100% CSS */
.nice-trophee::before {
    content: "\f091";
    font-family: FontAwesome;
    color: #e9574a;
}
.nice-trophee::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nice-trophee::before {
    -webkit-text-stroke: 1px #1b0c4d;
}


/* Jolie icon books 100% CSS */
.nice-books::before {
    content: "\f2b9";
    font-family: FontAwesome;
    color: #e9574a;
}
.nice-books::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nice-books::before {
    -webkit-text-stroke: 1px #1b0c4d;
}

/* Jolie icon book 100% CSS */
.nice-book::before {
    content: "\f02d";
    font-family: FontAwesome;
    color: #e9574a;
}
.nice-book::before {
    background: -webkit-linear-gradient(-45deg, #f37a58 10%, #e0353d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nice-book::before {
    -webkit-text-stroke: 1px #1b0c4d;
}

/******************/
/* Instant mobile */
/******************/
body:not([data-instant-active="1"]) .xs-instant {
    display: none;
}
.xs-instant {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100px;
    height: 100px;
    background: white;
    color: #1b0c4d;
    border-top: solid 1px #DE2F3A;
    box-sizing: border-box;
    padding-top: 5px;
    transition: margin-bottom 0.4s;
}
.xs-instant:not([data-version="cam"]) .cam-version,
.xs-instant:not([data-version="snap"]) .snap-version {
    display: none;
}
.xs-instant .version {
    display: flex;
}
.xs-instant .picture-part {
    padding: 0 10px;
    text-align: center;
    position: relative;
}
.xs-instant .infos-part {
    flex: 1;
    margin-right: 65px;
    position: relative;
}
.xs-instant .picture-part img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: solid 2px #dfd9f2;
}
.xs-instant .picture-part .logo {
    width: 64px;
    height: 36.57px;
    position: absolute;
    top: 53px;
    left: 50%;
    margin-left: -32px;
    background: url(../images/logo-fond-fonce.png);
    background-size: cover;
}
.xs-instant .infos-part .title {
    color: #DE2F3A;
    font-size: 14px;
    font-family: 'Abril Fatface';
    white-space: nowrap;
}
.xs-instant .infos-part > .pseudo {
    color: #1b0c4d;
    font-weight: bold;
    text-decoration: none;
    font-variant: small-caps;
    font-size: 14px;
}
.xs-instant[data-version="cam"] .infos-part > .pseudo {
    display: block;
    margin-top: 5px;
}
.xs-instant .infos-part .infos {
    color: black;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xs-instant .infos-part .infos .number {
    display: inline;
}

.xs-instant .infos-part .button {
    display: block;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px;    text-align: center;
    color: white;
    background: #DE2F3A;
    text-decoration: none;
    font-size: 12px;
    border-radius: 6px;
}

/** SNAPS **/
.snap-wrapper {    
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    -o-user-select: none;
    user-select: none;
}
.snap-over {
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.snap-over.transparent {
    background: none;
}
.snap-over.end {
    background: rgba(0,0,0,.9);
}
.snap-over .snap-fingerprint {
    position: absolute !important;
    top: 50%;
    left: 50%;
    margin-left: -15.75%;
    margin-top: calc(-18.75% - 10px);
    width: 31.5%;
    height: 37.5%;
    fill: #cccccc;
}
.snap-over .snap-message {
    color: #cccccc;
    font-size: 12px;
    font-family: 'Open Sans', Helvetica, Arial;
    width: 100%;
    text-align: center;
    position: absolute !important;
    left: 0;
    top: 68.75%;
    margin-top: -12px;
}
.snap-over .snap-countdown {
    color: white;
    position: absolute !important;
    right: 0px;
    bottom: 0px;
    font-family: 'Open Sans', Helvetica, Arial;
    font-size: 16px;
}
.snap-over.transparent .snap-fingerprint,
.snap-over.transparent .snap-message {
    display: none;
}
.snap-type-scratch .snap-fingerprint,
.snap-over:not(.start) .snap-fingerprint {
    display: none;
}
.snap-over:not(.transparent) .snap-countdown {
    display: none;
}
.snap-type-scratch .snap-over.start .snap-message {
    display: none;
}
.snap-type-scratch .snap-over.start {
    background: transparent;
}
.snap-over:hover .snap-fingerprint {
    fill: #DE2F3A;
    transition: fill 0.3s;
}
.snap-type-classic .snap-over.start:hover .snap-message {
    color: #DE2F3A;
}
.snap-over .snap-result {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 10%;
    color: #cccccc;
    font-size: 12px;
    box-sizing: border-box;
    transition: color 0.2s;
}
.snap-over:hover .snap-result {
    color: white;
}
.snap-over:not(.end) .snap-result {
    display: none;
}
.snap-over .snap-result .mini-avatar {
    width: 45% !important;
    height: 45% !important;
    border-radius: 100%;
    margin-top: 10px;
}
/** snap widget sidebar **/
.xs-box-content.snap {
    color: #1b0c4d;
}
.xs-box-content.snap [class^="subtitle"] {
    text-align: center;
}
.xs-box-content.snap .subtitle-1 {
    font-size: 12px;
    margin-top: -15px;
}
.xs-box-content.snap .subtitle-2 {
    font-size: 10px;
    margin-bottom: 15px;
}
html[data-support="desktop"] .xs-box-content.snap .profile_content {
    display: flex;
}
html[data-support="desktop"] .xs-box-content.snap .gauche {
    margin-right: 10px;
}    
html[data-support="mobile"] .xs-box-content.snap .gauche {
    text-align: center;
}    
/*
.xs-box-content.snap .gauche img {
    width: 126px;
    height: 126px;
    border-radius: 100%;	
    border: solid 2px #1b0c4d;	
}
*/
.xs-box-content.snap .gauche img {
    width: 130px;
    height: 130px;
}
html[data-support="mobile"] .xs-box-content.snap .gauche img {
    width: 250px;
    height: 250px;
}
.xs-box-content.snap .droite {
    flex: 1;
}
.xs-box-content.snap .pseudo {
    display: block;
    color: #DE2F3A;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin-top: -5px;
    margin-bottom: 5px;
    font-variant: small-caps;
    font-size: 18px;
}
html[data-support="mobile"] .xs-box-content.snap .stats {
    width: 160px;
    margin: 0 auto;
}
.xs-box-content.snap .stat {
    border: solid 2px #1b0c4d;
    border-radius: 10px;
    padding: 1px 6px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.xs-box-content.snap .stat .number {
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    width: 45%;
}
.xs-box-content.snap .stat .text {
    font-size: 13px;
    display: inline;
    flex: 1;
}
.xs-box-content.snap .buttons {
    margin-top: 10px;
}
.xs-box-content.snap .button {
    display: block;
    color: white;
    border-radius: 6px;
    background-color: #1b0c4d;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: opacity 0.3s;
    padding: 5.5px;
}
.xs-box-content.snap .button:last-of-type {
    background-color: #DE2F3A;
    margin-bottom: 0px;
}
.xs-box-content.snap .button:hover {
    opacity: 0.8;
}
.xs-box-content.snap .button-icon {
    display: inline;
    margin-right: 5px;	
}
.xs-box-content.snap .button-icon svg {
    height: 20px;
    fill: white;
    margin-bottom: -5px;
}

/** snap caroussel widget **/
html[data-support="mobile"] .xs-snap-caroussel {
    overflow-x: auto;
}
ul.xs-snap-caroussel {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style: none;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: space-between;    
}
ul.xs-snap-caroussel > li {
    display: inline-block;
    float: left;
    margin-right: 10px;
}
ul.xs-snap-caroussel > li:last-of-type {
    margin-right: 0px;
}
.xs-snap-caroussel .pseudo-link {
    display: block;
    color: #1b0c4d;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin-top: -5px;
    font-size: 12px;
    transition: color 0.3s;
}
html[data-support="desktop"] .xs-snap-caroussel .pseudo-link:hover {
    color: #DE2F3A;
}

/** notifs snaps **/
.xs-snaps-notif-count {
    position: relative;
}
.xs-snaps-notif-count::before {
    content: '';
    animation: 0.5s cubic-bezier(0, 0, 0.72, 2.4) 0s 1 normal snap_counter_appearing;
    display: none;
}
.xs-snaps-notif-count::before {
    background: #DE2F3A;
    color: white;
    text-align: center;
    border: solid 1px white;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    font-family: arial;
    vertical-align: middle;
    position: absolute;
    top: -10px;
    right: -20px;
    font-weight: bold;
    pointer-events: none;
}
html[data-support="mobile"] .xs-snaps-notif-count::before {
    top: 0px;
    right: -22px;
}
@keyframes snap_counter_appearing { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.4); } 
    100% { transform: scale(1)); }  
}


/** AJOUTS GENERAUX v6 **/
html[data-support="mobile"] main#xs-content {
    padding: 0 10px;
    box-sizing: border-box;
}


#xs-page > h1, main > h1 {
    color: #e24852;
    margin-left: 10px;
}
.xs-histoire .xs-categorie {
    border: none;
}
.xs-box {
    box-shadow: none;
    border: none;
    margin-bottom: 50px;
}
#xs-content .xs-box-title {
    color: #DE2F3A;
    font-size: 23px;
    font-family: 'Abril Fatface';
    text-transform: none;
    background: none;
    position: static;
    top: 0;
    padding: 0;
    margin-bottom: 10px;
}
#xs-content .xs-box-title.with-separator {
    position: relative;
    width: 100%;
}
#xs-content .xs-box-title.with-separator::after {
    content: '';
    background: #1b0c4d;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: -moz-linear-gradient(left, #de2f3a 0%, transparent 80%);
    background: -webkit-linear-gradient(left, #de2f3a 0%, transparent 80%);
    background: linear-gradient(to right, #de2f3a 0%, transparent 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de2f3a', endColorstr='transparent', GradientType=1 );
}
.xs-box-title {
    left: 0;
    top: 0;
    padding: 5px 0px 5px 0px;	
}
#xs-content .xs-box-content {
    padding: 0;
    clear: both;
}
.xs-box-button {
    border-top: none;
}
.xs-box-button-primary {
    border-right: none;
}
html:not([data-support="desktop"]) .desktop-only {
    display: none !important;
}
html:not([data-support="mobile"]) .mobile-only {
    display: none !important;
}

a.xs-link {
    color: #6F6298;
}
.xs-categorie-logo[data-categorie-id] {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(../images/icones60x60_v6.png);
}
.xs-categorie-logo[data-categorie-id="1"]  { background-position:      0 0 }
.xs-categorie-logo[data-categorie-id="2"]  { background-position:  -100% 0 }
.xs-categorie-logo[data-categorie-id="3"]  { background-position:  -200% 0 }
.xs-categorie-logo[data-categorie-id="4"]  { background-position:  -300% 0 }
.xs-categorie-logo[data-categorie-id="5"]  { background-position:  -400% 0 }
.xs-categorie-logo[data-categorie-id="6"]  { background-position:  -500% 0 }
.xs-categorie-logo[data-categorie-id="7"]  { background-position:  -600% 0 }
.xs-categorie-logo[data-categorie-id="8"]  { background-position:  -700% 0 }
.xs-categorie-logo[data-categorie-id="9"]  { background-position:  -800% 0 }
.xs-categorie-logo[data-categorie-id="10"] { background-position:  -900% 0 }
.xs-categorie-logo[data-categorie-id="11"] { background-position: -1000% 0 }
.xs-categorie-logo[data-categorie-id="12"] { background-position: -1100% 0 }
.xs-categorie-logo[data-categorie-id="13"] { background-position: -1200% 0 }
.xs-categorie-logo[data-categorie-id="14"] { background-position: -1300% 0 }    

.histoire-categorie-small {
    border-radius: 5px;
}
#xs-header #xs-logo {
    width: 140px;
    height: 80px;
    margin: 0;
    float: none;
    margin-left: -70px;
    margin-top: 10px;
}
#xs-header {
    background: none;
    height: 122px;
}
html[data-support="mobile"] #xs-header {
    height: 97px;
}
#xs-header-content {
    font-size: 0px;
}
@media screen and (max-width: 1000px) {
    #xs-header #xs-subtitle {
	display: block;
    }
}
html[data-support="mobile"] #xs-header #xs-subtitle {
    display: none;
}
#xs-page::before {
    position: absolute; 
    content: '';
    top: 122px;
    left: 0;
    right: 0;
    height: 48px;
    background-color: #1b0c4d;
    z-index: 0;
}
html[data-support="mobile"] #xs-page::before {
    display: none;
}
#xs-menu li.xs-level-1 {
    border-bottom: none;
}
#xs-menu li.xs-level-1 a {
    font-family: 'Poppins';
    /*font-weight: bold;*/
    color: #dfd9f2;
    font-size: 15px;
}
#xs-menu li.xs-level-1 a:hover, #xs-menu li.xs-level-1:hover > a {
    color: white;
}
#xs-menu li.xs-level-1 a > .fa {
    margin-right: 5px;
}
html[data-support="mobile"] #xs-menu li.xs-level-1 a > .text {
    display: none;
}

.mobile-head-menu {
    background: #1b0c4d;
    margin-bottom: 10px;
    position: static;
    top: 0;
    left: 0;
    right: 0;
}
.mobile-head-menu-spacer {
    display: none;
    height: 0;
}
body[data-mobile-menu-position="2"] .mobile-head-menu {
    position: fixed;
    z-index: 1;
}
body[data-mobile-menu-position="2"] .mobile-head-menu-spacer {
    display: block;
}
body[data-mobile-menu-position="3"] .mobile-head-menu {
    position: absolute;
    z-index: 1;
}
body[data-mobile-menu-position="3"] .mobile-head-menu-spacer {
    display: block;
}

.mobile-head-menu .ligne {
    display: flex;
}
.mobile-head-menu a {
    color: #dfd9f2;
    text-align: center;
    font-size: 12px;
    flex: 1;
    padding: 2px 0;
    text-decoration: none;
    position: relative;
}    
.mobile-head-menu .ligne:first-of-type a {
    text-transform: uppercase;
    padding: 9px 0;
}
.mobile-head-menu .ligne:last-of-type {
    color: white;
    background: rgba(255, 255, 255, 0.4);
}
.mobile-head-menu .ligne:last-of-type a {
    color: rgba(255, 255, 255, 0.88);
}
.mobile-head-menu .ligne:last-of-type a:not(:last-of-type)::after {
    content: '';
    position: absolute;
    right: -0.5px;
    width: 1px;
    top: 25%;
    bottom: 25%;
    background: rgba(255, 255, 255, 0.88);
}

#xs-header #xs-header-notifications-icon {
    position: relative;
}
#xs-header #xs-header-notifications-icon::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: #dfd9f2;
    z-index: 0;
    left: -10px;
    top: 21px;
}
#xs-header #xs-header-notifications-icon .fa {
    font-size: 14px;
    color: #1b0c4d;
    position: relative;
}
#xs-header-rightpart {
    font-size: 13px;
    position: relative;
}
#xs-header #xs-header-username {
    color: #6F6298;
    margin-top: 3px;
}
#xs-header #xs-header-username + .fa {
    color: #1b0c4d;
    margin-left: 3px;
    margin-right: 10px;
    margin-top: 3px;
}    
#xs-header #xs-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    margin-top: 21px;
    border: solid 2px #dfd9f2;
}
#xs-header #xs-header-user-menu li a {
    color: #1b0c4d;
}
#xs-header #xs-header-avatar-link {
    margin: 0 5px 0 0;
}
#xs-header #xs-searchbox {
    position: absolute;
    right: 10px;
    top: 75px;
    margin: 0;
    width: 292px;
}
#xs-header #xs-searchbox .search-widget {
    height: 32px;
    border-radius: 16px;
    background: #F5F2FF;
}
#xs-header #xs-searchbox #xs-search-field {
    background: none;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #1b0c4d;
    float: none;
    width: 244px;
    padding: 0;	
}
#xs-header #xs-searchbox #xs-search-field::placeholder {
    color: #6F62988C;
}
#xs-header #xs-searchbox #xs-search-button {
    background: none;
    width: 32px;
    height: 32px;
    padding: 0px;
    border-radius: 16px 0 0 16px;
}
#xs-header .xs-mobile-search {
    position: absolute;
    right: 0;
    top: 0;	
}
#xs-header .xs-mobile-search.open {
    left: 0;
    z-index: 1;
}
#xs-header .xs-mobile-search .search-button {
    display: flex;
    align-items: center;
    justify-content: center;	
    background: #dfd9f2;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    right: 0;
    transition: background 0.3s;
    z-index: 1;
}
#xs-header .xs-mobile-search .bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #a6a6a6;
    opacity: 0;
    transition: opacity 0.3s, height 0.3s;
}
#xs-header .xs-mobile-search.open .bg {
    height: 100vh;
    opacity: 0.8;
}

#xs-header .xs-mobile-search .wrapper {
    position: absolute;
    top: 50px;
    right: 10px;
    transition: top 0.3s;	
}
#xs-header .xs-mobile-search.open .wrapper {
    top: 10px;
    left: 10px;
}
#xs-header .xs-mobile-search.open .search-button {
    background: #c3b9e6;
}
#xs-header .xs-mobile-search form:not(.loading) .search-button::before {
    content: "\f002";
    font-family: FontAwesome;
    color: #1b0c4d;
    font-size: 12px;
}
#xs-header .xs-mobile-search .input {
    top: 0;
    right: 16px;
    position: absolute;
    width: 0;
    background: #dfd9f2;
    border: none;
    border-radius: 16px;
    height: 32px;
    box-sizing: border-box;
    padding: 0;
    transition: width 0.3s, padding 0.3s, right 0.3s;
}    
#xs-header .xs-mobile-search.open .input {
    width: 100%;
    padding: 0 35px;	
    right: 0;
}
#xs-header .xs-mobile-search .input:focus {
    outline: none;
}    
#xs-header .xs-mobile-search:not(.open) .close {
    opacity: 0;
    transition-delay: 0s;
    left: -999px;
}
#xs-header .xs-mobile-search .close {
    position: absolute;
    top: 6px;
    height: 20px;
    width: 20px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b0c4d;
    border-radius: 100%;
    font-size: 12px;
    opacity: 1;
    transition: opacity 0s;
    transition-delay: 0.3s;
}
#xs-header .xs-mobile-search .close::before {
    content: "\f00d";
    font-family: FontAwesome;
    color: #dfd9f2;
}
#xs-header .xs-mobile-search .xs-search-results-box {
    position: absolute;
    top: 35px;
    background: white;
    width: calc(100vw - 20px) !important;
}
#xs-header .xs-mobile-search .xs-search-results-box .xs-search-results-column,
#xs-header .xs-mobile-search .xs-search-results-box .xs-search-results-list {
    width: 100%;
}
#xs-header .xs-mobile-search .xs-search-results-box .xs-search-highlight {
    max-height: 3em;
    overflow: auto;
}    
#xs-header .xs-mobile-search:not(.open) .xs-search-results-box {
    display: none !important;
}    

html[data-support="mobile"] #xs-header #xs-header-notifications {
    position: absolute;
    top: 10px;
    right: 10px;
}
html[data-support="mobile"] #xs-header #xs-header-notifications-icon {
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;	
    background: #dfd9f2;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0px;
    top: 0px;	
}
html[data-support="mobile"] #xs-header #xs-header-notifications-icon::before {
    content: none;
}
html[data-support="mobile"] #xs-header #xs-header-notifications-count {
    top: -5px;
    left: auto;
    right: 20px;
}
html[data-support="mobile"] #xs-header #xs-header-rightpart {
    float: none;
}
html[data-support="mobile"] #xs-header #xs-header-avatar-link {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
}
html[data-support="mobile"] #xs-header #xs-header-avatar {
    margin: 0;
}
html[data-support="mobile"] #xs-header #xs-header-username {
    display: none;
}
html[data-support="mobile"] #xs-header #xs-header-user-options > .fa-caret-down {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 36px;
    text-align: center;
    line-height: initial;
    margin: -3px 0 0 0;
    height: 20px;
}
html[data-support="mobile"] #xs-header #xs-header-user-menu {
    top: 60px;
    left: 10px;
    right: auto;
}
html[data-support="mobile"] #xs-header #xs-header-user-menu #xs-header-user-menu-spacer {
    display: none;
}
html[data-support="mobile"] #xs-header #xs-header-user-menu.open {
    display: block;
    height: auto;
    overflow: visible;
    opacity: 1;
}
html[data-support="mobile"] #xs-header #xs-header-user-menu:not(.open) {
    display: none;
}
html[data-support="mobile"] #xs-header #xs-header-user-menu.open::before {
    left: 10px;
    position: absolute;
    top: -8px;
    width: 15px;
    height: 15px;
    background-color: #fbf9ff;
    border-left: solid 2px #1b0c4d2b;
    border-top: solid 2px #1b0c4d2b;
    transform: rotate(45deg);
    content: "";
}


#xs-header #xs-header-user-menu ul {
    border: 2px solid #1B0C4D2B;
    background: #fbf9ff !important;
}    
#xs-header #xs-header-notifications-bg {
    position: fixed;
    inset: 0px;	
    background: #a6a6a6;
    opacity: 0.8;
}
html[data-support="mobile"] #xs-header #xs-header-notifications-bg {
    top: 0 !important;
}
html[data-support="mobile"] #xs-header #xs-header-notifications-box {
    width: calc(100vw - 20px);
    box-sizing: border-box;
    top: 40px;
}
html[data-support="mobile"] #xs-header #xs-header-notifications-box::before {
    right: 10px;
}
html[data-support="mobile"] #xs-header #xs-header-notifications-box .xs-notifications-buttons a {
    line-height: 20px;
}

#xs-menu ul {
    position: relative;
}
#xs-menu li.xs-level-1 {
    position: static;
}
#xs-menu li.xs-level-1 ul.xs-level-2 {
    height: auto;
    top: -9999px;
    background: #1b0c4d !important;
    box-shadow: none;
    margin-top: -2px;
    width: 1200px;
    text-align: left;
}   
#xs-menu li.xs-level-1:hover ul.xs-level-2 {
    opacity: 0.95;
    top: 50px;
}
#xs-menu li.xs-level-2 {
    display: inline-block;
    float: left;
    margin: 7px 0;
}
#xs-menu a.xs-special-link {
    color: #de2f3a !important;
}
html[data-support="mobile"] #xs-menu > ul.xs-level-1 .xs-level-2 {
    display: none;
}
html[data-support="desktop"] #xs-menu > .mobile-menu {
    display: none;
}
html[data-support="mobile"] #xs-menu {
    height: 0;
    margin: 0;
}
#xs-menu > .mobile-menu {
    position: fixed;
    top: 100vh;
    right: 100vw;
    left: -100vw;
    bottom: 0;
    color: #dfd9f2;
    display: block;
    z-index: 2;
    transition: left 0.3s, right 0.3s;
}
#xs-menu > .mobile-menu.open {
    right: 0;
    left: 0;
    top: 0;
}
#xs-menu > .mobile-menu > .bg {
    background: #1b0c4d;
    opacity: 0.95;
    width: 100%;
    height: 100%;
}
#xs-menu > .mobile-menu ul.xs-level-2 {
    overflow-y: auto;
}
#xs-menu > .mobile-menu .xs-level-2 a {
    color: #dfd9f2;
    font-family: 'Poppins';
    font-weight: bold;
    color: #dfd9f2;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
}
#xs-menu > .mobile-menu > .close {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1;
}
#xs-menu > .mobile-menu > .close::before {
    content: "\f00d";
    font-family: FontAwesome;
    color: white;
    font-size: 14px;
}
#xs-menu > .mobile-menu[data-type="single"] > .head {
    display: none;
}
#xs-menu > .mobile-menu .title-1 {
    color: white;
    font-family: 'Poppins';
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
}
#xs-menu > .mobile-menu .title-1 .fa {
    margin-right: 5px;
}
#xs-menu > .mobile-menu > .head {
    position: absolute;
    top: 0px;
    line-height: 50px;
    height: 50px;
    left: 0;
    right: 0;
    text-align: center;
    border-bottom: solid 1px #dfd9f2;
}
#xs-menu > .mobile-menu > .body {
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: left;
    padding: 20px 0px 5px 0px;
}
#xs-menu > .mobile-menu[data-type="single"] > .body {
    top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;	
}
#xs-menu .mobile-menu ul.xs-level-2 {
    position: static;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: auto;
    height: auto;
    max-height: calc(100vh - 75px);
    line-height: 1;
    opacity: 1;
    transition: none;
    box-sizing: border-box;
    background: none !important;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    filter: none;
}
#xs-menu .mobile-menu li.xs-level-2 {
    display: block;
    float: none;
    margin-left: 0;
    padding: 0;
    width: auto;
}
#xs-menu .mobile-menu[data-type="multiple"] .wrapper {
    display: flex;
    justify-content: center;
}
#xs-menu .mobile-menu .wrapper > .content {
    margin: 0 20px;
    display: inline-block;
}
#xs-menu .mobile-menu[data-type="single"] .wrapper > .content {
    text-align: center;
}
#xs-menu .mobile-menu[data-type="single"] .wrapper > .content a {
    color: white;
}
#xs-menu .mobile-menu[data-type="single"] .wrapper > .content .title-1 {
    margin-bottom: 25px;
}
#xs-menu .mobile-menu .wrapper .scroller {
    color: white;
    position: absolute; 
    right: 15px;
    font-family: FontAwesome;
}
#xs-menu .mobile-menu .wrapper .scroller.up {
    content: 'U';
    top: 15px;
}
#xs-menu .mobile-menu .wrapper .scroller.down {
    bottom: 10px;
}
#xs-menu .mobile-menu .wrapper .scroller.up::before {
    content: "\f0d8";
}
#xs-menu .mobile-menu .wrapper .scroller.down::before {
    content: "\f0d7";
}
#xs-menu .mobile-menu:not([data-show-scroller-up="1"]) .wrapper .scroller.up {
    display: none;
}
#xs-menu .mobile-menu:not([data-show-scroller-down="1"]) .wrapper .scroller.down {
    display: none;
}

#xs-footer .xs-footer-tool {
    color: #DFD9F2;
    font-weight: bold;
}
#xs-footer #xs-footer-logo {
    background-image: url(../images/logo-fond-mix.png);
    width: 105px;
    height: 60px;
    display: inline-block;
    float: none;
    margin: 0;
    position: relative;
    z-index: 1;
}
#xs-footer #xs-footer-logo-subtitle {
    display: block;
    color: #DFD9F2D4;
    font-size: 18px;
    margin: -12px 0 0 0;
}
#xs-footer {
    position: relative;
    padding-top: 70px;
    margin-top: 50px;
}
#xs-footer .xs-footer-logo-wrapper {
    position: absolute;
    top: -44px;
    left: 0;
    right: 0;
    text-align: center;
}
.xs-footer-logo-wrapper .page {
    position: absolute;
    width: 40px;
    height: 3px;
    background: #e44543;
    top: 46px;
    left: 50%;
    transform: rotate(-17deg);
    transform-origin: left center;
    transition: transform 1.4s;
}    
#xs-footer .xs-footer-tool:hover {
    text-shadow: none;
    color: white;
}
#xs-footer .xs-footer-tool:hover span {
    text-decoration: none;
}
.toggle-slide .toggle-blob {
    z-index: auto;
}

.xs-histoire .xs-medaille {
    top: 0;
    left: 0;
}
.xs-histoire .xs-score-wrapper {
    position: relative;
}


/* xs-box */
.xs-box-button-wrapper {
    text-align: center;
    margin-top: 20px;
}
.xs-box-button-wrapper-primary {
    float: left;
    width: 100%;
}
.xs-box-button-primary, .xs-box-button-wrapper.single .xs-box-button {
    float: none;
    width: 250px;
    height: 32px;
    line-height: 32px;
    color: white;
    background: #DE2F3A;
    transition: opacity 0.2s;
    display: inline-block;
    border-radius: 10px;
}
.xs-box-button-primary:hover, .xs-box-button-wrapper.single .xs-box-button:hover {
    opacity: 0.8;
    background: #DE2F3A;
}
.xs-box-button-wrapper-secondary {
    position: relative;
}
html[data-support="mobile"] .xs-box-button-wrapper-secondary {
    clear: left;
}
.xs-box-button-secondary {
    position: absolute;
    top: 6px;
    right: 0;
    text-decoration: underline;
    color: #6F6298;
    transition: color 0.3s;
    padding: 0;
    font-size: 13px;
}
.xs-box-button-secondary:hover {
    color: #e24852;
    background: none;
}


ul.xs-histoires > li {
    background: #fbf9ff;
    padding: 10px;
    border-radius: 5px;
    margin: 0 10px 15px 0;
    width: 48%;
}
html[data-support="mobile"] ul.xs-histoires > li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 5px;
}
.xs-histoire .xs-titre {
    font-family: 'Poppins';
    color: #1b0c4d;
    font-weight: bold;
    font-size: 15px;
}    
.xs-histoire .xs-infos {
    color: #6F6298;
}    
.xs-histoire .xs-titre:visited {
    color: #796aa9;
}    
.xs-histoire.xs-histoire-type-short, .xs-histoire.xs-histoire-type-short .xs-titre {
    color: #baabad;
}    
.xs-histoire .xs-score {
    background: #e24852;
}

/* Homepage */
.xs-section-histoires .xs-box-title {
    float: left;
    position: static;	
}
.xs-section-histoires .xs-box-options {
    float: none;
    text-align: right;
    margin: 0 10px 0 0;
    padding-top: 1px;	
}
html[data-support="mobile"] .xs-section-histoires .xs-box-options {
   clear: left;
   text-align: left;
   padding: 0;
   margin-bottom: 20px;
}
html[data-support="mobile"] a.xs-box-button.xs-box-button-secondary {
    display: inline-block;
    position: static;
    width: auto;
    float: none;
    margin-top: 10px;
}    
#xs-filtre-histoires .categorie .logo {
    border: none !important;
}
#xs-box-show-filtre-histoires {
    margin-top: 15px !important;
}
html[data-support="desktop"] #xs-box-show-filtre-histoires {
    position: absolute;
    right: 20px;
    top: 0px;
}
#xs-content {
    margin-bottom: 50px; /* pour laisser de la place au logo xstory en footer qui deborde */
}
html[data-support="mobile"] #xs-content .xs-section-forum ul.xs-forum-topics li {
    width: 100%;
}
html[data-support="mobile"] #xs-content .xs-section-forum ul.xs-forum-topics li:nth-child(n+11) {
    display: none;
}

#xs-content .xs-section-random {
    box-shadow: 0px 0px 20px #1B0C4D0C;
    border: 2px solid #1B0C4D2B;
    border-radius: 6px;
    background: #F5F2FF !important;
}
#xs-content .xs-section-random .xs-box-title {
    margin: 20px 0 0 0;
}
#xs-content .xs-section-random .xs-box-content {
    background: none;
    color: #1B0C4D;
    padding: 20px 0px 20px 0px;
    font-size: 16px;
    box-sizing: border-box;
}
#xs-content .xs-section-random .xs-box-content .haut {
    padding: 0 20px;
}
#xs-content .xs-section-random .colonne {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    padding-right: 50px;
    box-sizing: border-box;	
}
#xs-content .xs-section-random .colonne1 {
    width: 38%;
}
html[data-support="mobile"] #xs-content .xs-section-random .colonne {
    width: 100%;
    padding: 0;
}    
#xs-content .xs-section-random .colonne > label {
    font-weight: bold;
    display: block;
    margin: 0 0 10px 0;
}
#xs-content .xs-section-random .colonne > label[for="xs-random-form-type"],
#xs-content .xs-section-random .colonne > label[for="xs-random-form-keywords"] {
    margin-top: 10px;
}
html[data-support="mobile"] #xs-content .xs-section-random .colonne > label {
    margin-top: 20px;
}    
#xs-content .xs-section-random .colonne input[type="text"],
#xs-content .xs-section-random .colonne select
{
    width: 100%;
    height: 32px;
    line-height: 32px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 3px #1B0C4D17;
    border: 1px solid #1B0C4D;
    border-radius: 6px;
    color: #1B0C4D;
    outline: none !important;
    box-sizing: border-box;
}
#xs-content .xs-section-random .colonne input[type="text"] {
    padding: 0 5px;
}
#xs-content .xs-section-validation-v2 {
    background: none !important;
}
#xs-content .xs-section-validation-v2 ul.xs-histoires > li {
    background: #fff8ea;
}
#xs-content .xs-section-validation-correction-v2 {
    background: none !important;
}
#xs-content .xs-section-validation-correction-v2 ul.xs-histoires > li {
    background: #ffeaea;
}

/* The container */
#xs-content .xs-section-random .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
#xs-content .xs-section-random .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  z-index: -1;
}

/* Create a custom checkbox */
#xs-content .xs-section-random .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border-radius: 100%;
  border: 1px solid #1B0C4D;
  transition: background 0.2s;
}

/* On mouse-over, add a grey background color */
#xs-content .xs-section-random .container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
#xs-content .xs-section-random .container input:checked ~ .checkmark {
  /*background-color: #2196F3;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
#xs-content .xs-section-random .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
#xs-content .xs-section-random .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
#xs-content .xs-section-random .container .checkmark:after {
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    background: #1b0c4d;
    border-radius: 100%;
}
#xs-content .xs-section-random .bas {
    text-align: center;
    border-top: solid 2px #DFD9F2;
}
#xs-content .xs-section-random .bas button {
    display: inline-block;
    height: 50px;
    color: white;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    margin: 30px 10px 10px 10px;
    padding: 0 35px;
    transition: opacity 0.2s;
}
#xs-content .xs-section-random .bas button:hover {
    opacity: 0.8;
}
#xs-content .xs-section-random #xs-random-submit-button {
    background: #1B0C4D;
    outline: none;
}
#xs-content .xs-section-random #xs-random-lucky-button {
    background: #DE2F3A;
    outline: none;
}
.xs-section-random .xs-random-results a {
    color: inherit;
}
.xs-section-mes-histoires {
    background: none;
}
.xs-half-box + .xs-half-box {
    padding-right: 20px;
}


.xs-section-forum .xs-forum-topics .xs-forum-categorie {
    float: left;
}
html[data-support="mobile"] .xs-section-forum .xs-forum-topics .xs-forum-categorie {
    width: 40px;
    height: 40px;
}
.xs-section-forum .xs-forum-topics .xs-forum-postscount-wrapper {
    float: right;
    margin-right: 60px;
    position: relative;
}
html[data-support="mobile"] .xs-section-forum .xs-forum-topics .xs-forum-postscount-wrapper {
    margin-right: 0;
}
.xs-section-forum .xs-forum-topics .xs-forum-postscount-wrapper svg {
    width: 32px;
    position: absolute;
    top: 0;
    right: 0;
    fill: #1B0C4D;
}
.xs-section-forum .xs-forum-topics .xs-forum-postscount {
    font-size: 13px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    width: 32px;
    padding-left: 1px;
    color: #1B0C4D;
}
.xs-section-forum .xs-forum-topics .xs-forum-texts-wrapper {
    margin-left: 68px;
    margin-right: 92px;
    padding: 0 10px;
}
html[data-support="mobile"] .xs-section-forum .xs-forum-topics .xs-forum-texts-wrapper {
    margin-right: 32px;
    margin-left: 48px;
}
.xs-section-forum .xs-forum-topics .xs-forum-timestamp {
    vertical-align: initial;
    line-height: initial;
    width: auto;
    text-align: left;
    display: block !important;
    margin-top: 2px;
    color: #6F6298;
    font-size: 11px;
}
.xs-section-forum .xs-forum-topics .xs-forum-title {
    font-size: 14px;
    font-family: 'Poppins';
    font-weight: bold;
    height: auto;
    max-height: 34px;
    padding-top: 5px;
    display: block !important;
    color: #1B0C4D;
}
.xs-section-mes-histoires .xs-histoires {
    overflow-y: auto;
    overflow-x: hidden;
}

/** FORUM **/
.forum_default_color,
.pun A.forum_default_color:link, .pun A.forum_default_color:visited{
    color: #1b0c4d;
}
.forum_default_border {
    border-color: #1b0c4d !important;
}
html[data-support="mobile"] #xs-header-content, #xs-footer-content, #xs-page {
    min-width: auto;
}	    
.pun .postsignature a {
    color: inherit;
    font-size: inherit !important;
}    
.xs_board[data-board-id="15"] .forum_bg, .forum_bg_cat-15 { background-color: #fe5473; }
.xs_board[data-board-id="16"] .forum_bg, .forum_bg_cat-16 { background-color: #ff9173; }
.xs_board[data-board-id="25"] .forum_bg, .forum_bg_cat-25 { background-color: #d259ef; }
.xs_board[data-board-id="22"] .forum_bg, .forum_bg_cat-22 { background-color: #67e097; }
.xs_board[data-board-id="28"] .forum_bg, .forum_bg_cat-28 { background-color: #2ec8ea; }
.xs_board[data-board-id="30"] .forum_bg, .forum_bg_cat-30 { background-color: #ffc550; }
.xs_board[data-board-id="29"] .forum_bg, .forum_bg_cat-29 { background-color: #4a55e5; }
.xs_board[data-board-id="31"] .forum_bg, .forum_bg_cat-31 { background-color: #9667ff; }
.xs_board[data-board-id="32"] .forum_bg, .forum_bg_cat-32 { background-color: #009393; }
.xs_board[data-board-id="36"] .forum_bg, .forum_bg_cat-36 { background-color: #5c5c5c; }
.xs_board[data-board-id="15"] .forum_bg_dark, .forum_bg_dark_cat-15 { background-color: #f9265e; }
.xs_board[data-board-id="16"] .forum_bg_dark, .forum_bg_dark_cat-16 { background-color: #ff6950; }
.xs_board[data-board-id="25"] .forum_bg_dark, .forum_bg_dark_cat-25 { background-color: #a32bf9; }
.xs_board[data-board-id="22"] .forum_bg_dark, .forum_bg_dark_cat-22 { background-color: #2bca85; }
.xs_board[data-board-id="28"] .forum_bg_dark, .forum_bg_dark_cat-28 { background-color: #3987c6; }
.xs_board[data-board-id="30"] .forum_bg_dark, .forum_bg_dark_cat-30 { background-color: #f9ae4b; }
.xs_board[data-board-id="29"] .forum_bg_dark, .forum_bg_dark_cat-29 { background-color: #4235e5; }
.xs_board[data-board-id="31"] .forum_bg_dark, .forum_bg_dark_cat-31 { background-color: #432e8c; }
.xs_board[data-board-id="32"] .forum_bg_dark, .forum_bg_dark_cat-32 { background-color: #00707f; }
.xs_board[data-board-id="36"] .forum_bg_dark, .forum_bg_dark_cat-36 { background-color: #000000; }
.xs_board[data-board-id="15"] .forum_border, .forum_border_cat-15 { border-color: #fe5473; }
.xs_board[data-board-id="16"] .forum_border, .forum_border_cat-16 { border-color: #ff9173; }
.xs_board[data-board-id="25"] .forum_border, .forum_border_cat-25 { border-color: #d259ef; }
.xs_board[data-board-id="22"] .forum_border, .forum_border_cat-22 { border-color: #67e097; }
.xs_board[data-board-id="28"] .forum_border, .forum_border_cat-28 { border-color: #2ec8ea; }
.xs_board[data-board-id="30"] .forum_border, .forum_border_cat-30 { border-color: #ffc550; }
.xs_board[data-board-id="29"] .forum_border, .forum_border_cat-29 { border-color: #4a55e5; }
.xs_board[data-board-id="31"] .forum_border, .forum_border_cat-31 { border-color: #9667ff; }
.xs_board[data-board-id="32"] .forum_border, .forum_border_cat-32 { border-color: #009393; }
.xs_board[data-board-id="36"] .forum_border, .forum_border_cat-36 { border-color: #000000; }
.xs_board[data-board-id="15"] .forum_color, .forum_color_cat-15 { color: #fe5473; }
.xs_board[data-board-id="16"] .forum_color, .forum_color_cat-16 { color: #ff9173; }
.xs_board[data-board-id="25"] .forum_color, .forum_color_cat-25 { color: #d259ef; }
.xs_board[data-board-id="22"] .forum_color, .forum_color_cat-22 { color: #2bca85; }
.xs_board[data-board-id="28"] .forum_color, .forum_color_cat-28 { color: #3987c6; }
.xs_board[data-board-id="30"] .forum_color, .forum_color_cat-30 { color: #f9ae4b; }
.xs_board[data-board-id="29"] .forum_color, .forum_color_cat-29 { color: #4a55e5; }
.xs_board[data-board-id="31"] .forum_color, .forum_color_cat-31 { color: #432e8c; }
.xs_board[data-board-id="32"] .forum_color, .forum_color_cat-32 { color: #009393; }
.xs_board[data-board-id="36"] .forum_color, .forum_color_cat-36 { color: #000000; }
.xs_board[data-board-id="15"] .forum_color_dark, .forum_color_dark_cat-15 { color: #f9265e; }
.xs_board[data-board-id="16"] .forum_color_dark, .forum_color_dark_cat-16 { color: #ff6950; }
.xs_board[data-board-id="25"] .forum_color_dark, .forum_color_dark_cat-25 { color: #a32bf9; }
.xs_board[data-board-id="22"] .forum_color_dark, .forum_color_dark_cat-22 { color: #2bca85; }
.xs_board[data-board-id="28"] .forum_color_dark, .forum_color_dark_cat-28 { color: #3987c6; }
.xs_board[data-board-id="30"] .forum_color_dark, .forum_color_dark_cat-30 { color: #f9ae4b; }
.xs_board[data-board-id="29"] .forum_color_dark, .forum_color_dark_cat-29 { color: #4235e5; }
.xs_board[data-board-id="31"] .forum_color_dark, .forum_color_dark_cat-31 { color: #432e8c; }
.xs_board[data-board-id="32"] .forum_color_dark, .forum_color_dark_cat-32 { color: #00707f; }
.xs_board[data-board-id="36"] .forum_color_dark, .forum_color_dark_cat-36 { color: #000000; }
.xs_board[data-board-id] .forum_image, .forum_image_cat_all { width: 50px; height: 50px; background-image: url(../images/forum-categories-50_v6.png); }
html[data-support="mobile"] .xs_board[data-board-id] .forum_image, html[data-support="mobile"] .forum_image_cat_all { width: 30px; height: 30px; background-image: url(../images/forum-categories-30_v6.png); }
.xs_board[data-board-id="15"] .forum_image, .forum_image_cat-15 { background-position:    0% 0; }
.xs_board[data-board-id="16"] .forum_image, .forum_image_cat-16 { background-position: -100% 0; }
.xs_board[data-board-id="25"] .forum_image, .forum_image_cat-25 { background-position: -200% 0; }
.xs_board[data-board-id="22"] .forum_image, .forum_image_cat-22 { background-position: -300% 0; }
.xs_board[data-board-id="28"] .forum_image, .forum_image_cat-28 { background-position: -400% 0; }
.xs_board[data-board-id="30"] .forum_image, .forum_image_cat-30 { background-position: -500% 0; }
.xs_board[data-board-id="29"] .forum_image, .forum_image_cat-29 { background-position: -600% 0; }
.xs_board[data-board-id="32"] .forum_image, .forum_image_cat-32 { background-position: -700% 0; }
.xs_board[data-board-id="36"] .forum_image, .forum_image_cat-36 { background-position: -800% 0; }
.xs_board[data-board-id="31"] .forum_image, .forum_image_cat-31 { background-position: -900% 0; }

/** DARK MODE **/
body.darkmode--activated {
    background: #0b0423;
    color: #c0c0c0;
}
body.darkmode--activated ul.xs-histoires > li {
    background: none;
}
body.darkmode--activated .xs-section-forum .xs-forum-topics .xs-forum-postscount-wrapper svg {
    fill: #c0c0c0;
}
body.darkmode--activated .xs-box,
body.darkmode--activated .xs-section-forum .xs-forum-topics .xs-forum-title,
body.darkmode--activated .xs-section-forum .xs-forum-topics .xs-forum-postscount,
body.darkmode--activated .xs-section-tutoriels a,
body.darkmode--activated .xs-histoire .xs-titre,
body.darkmode--activated .histoire-snap .xs-infos strong,
body.darkmode--activated .pun .xs_boards,
body.darkmode--activated .pun,
body.darkmode--activated .pun .xs_board,
body.darkmode--activated #punviewtopic DIV.postmsg P,
body.darkmode--activated .xs-lire-histoire h2,
body.darkmode--activated .xs-lire-histoire-header-v6 .categorie,
body.darkmode--activated .xs-instant .infos-part .infos,
body.darkmode--activated .forum_default_color, body.darkmode--activated .pun A.forum_default_color:link, body.darkmode--activated .pun A.forum_default_color:visited {
    color: #c0c0c0;
}
body.darkmode--activated .xs-box.xs-section-classement ol li::before,
body.darkmode--activated #xs-histoires-pagination ul li a,
body.darkmode--activated .xs-lire-histoire .xs-lire-histoire-auteur,
body.darkmode--activated .xs-lire-histoire-header-v6 .blocs > .infos .fa,
body.darkmode--activated .xs-lire-histoire-header-v6 .chapitre,
body.darkmode--activated .xs-instant .infos-part > .pseudo,
body.darkmode--activated .pun .xs_board .topic {
    color: white;
}
body.darkmode--activated .xs-lire-histoire hr,
body.darkmode--activated .pun .post_users_infos,
body.darkmode--activated #xs-content .xs-section-random {
    background: #d1d1d1 !important;
}
body.darkmode--activated .xs-lire-histoire-header-v6,
body.darkmode--activated .xs-instant,
body.darkmode--activated #xs-sidebar .border-around-marker.alt + .xs-box::before {
    background: #150a35 !important;
}
body.darkmode--activated .xs-edito h2,
body.darkmode--activated #xs-sidebar .border-around-marker.alt + .xs-box a:hover {
    color: #de2f3a;
}
body.darkmode--activated .xs-edito h3 {
    color: #ea5e65;
}

body.darkmode--activated #xs-header #xs-header-username,
body.darkmode--activated #xs-header #xs-header-username + .fa,
body.darkmode--activated .xs-box.xs-section-forum-sidebar ul.xs-forum-topics li .xs-forum-title,
body.darkmode--activated .border-around-marker.alt + .xs-box .xs-box-title,
body.darkmode--activated aside .xs-sidebar-titre,
body.darkmode--activated #xs-sidebar .border-around-marker + .xs-box,
body.darkmode--activated .xs-box-content.snap,
body.darkmode--activated .xs-box-content.snap .stat,
body.darkmode--activated a.xs-webcam-change,
body.darkmode--activated .xs-commentaires .xs-commentaires-title,
body.darkmode--activated ._9lettres .presentation p,
body.darkmode--activated ._9lettres .jeu .actions .reponse_button,
body.darkmode--activated .xs-snap-caroussel .pseudo-link,
body.darkmode--activated #xs-histoires-sort .lower,
body.darkmode--activated .xs-meilleurs-auteurs-liste .infos .username,
body.darkmode--activated ._9lettres .jeu .message .neutre {
    color: #c0c0c0;
    border-color: #c0c0c0;
}

body.darkmode--activated #xs-footer #xs-footer-logo,
body.darkmode--activated #xs-header #xs-logo {
    background-image: url(../images/logo-fond-fonce.png);
}
body.darkmode--activated #xs-meilleurs-auteurs-filtres .filtre a.selected,
body.darkmode--activated .xs-meilleurs-auteurs-liste .rank,
body.darkmode--activated #xs-header #xs-subtitle {
    color: white !important;
}
body.darkmode--activated DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL,
body.darkmode--activated DIV.blockpost DIV.box {
    background: none;
}
body.darkmode--activated .pun .user_status {
    color: #1b0c4d;
}
body.darkmode--activated #xs-histoires-pagination nav {
    background: none !important;
}
body.darkmode--activated .xs-box-button-secondary,
body.darkmode--activated .xs-histoire .xs-infos,
body.darkmode--activated a.xs-link {
    color: #9085b3;
}
body.darkmode--activated #xs-page::before {
    background-color: #36256b;
}
body.darkmode--activated .xs_board[data-board-id="31"] .forum_color, body.darkmode--activated .forum_color_cat-32 {
    color: #8057dc;
}
body.darkmode--activated .xs_board[data-board-id="15"] .forum_bg_dark, body.darkmode--activated .forum_bg_dark_cat-15 {
    background-color: #d3315f;
}
body.darkmode--activated .xs_board[data-board-id="22"] .forum_bg_dark, body.darkmode--activated .forum_bg_dark_cat-22 {
    background-color: #31a476;
}
body.darkmode--activated .pun BLOCKQUOTE {
    background-color: #2d2d2d;
}
body.darkmode--activated .xs-section-forum .xs-forum-topics .xs-forum-title:hover {
    color: #e24852;
}
body.darkmode--activated #xs_messages .username {
    color: white;
}
body.darkmode--activated .pun .xs-poll {
    background: #d1d1d1;
}

.legal-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.legal-window .background {
    background-color: rgba(0,0,0,.3);
    position: absolute;
    width: 100%;
    height: 100%;
}

.legal-window .window {
    position: relative;
    background: white;
    margin: 32px;
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 16px;
}

.legal-window .window .close-button {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222222;
    position: absolute;
    right: -4px;
    top: -4px;
    cursor: pointer;
}
.legal-window .window .close-button::after {
    content: 'x';
    color: white;
    margin-top: -2px;
}

.legal-window .window .content {
    max-height: 500px;
    height: 100%;
    overflow-y: auto;    
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
    cursor: initial;
    padding-right: 8px;
}
.legal-window .window .content a {
    color: inherit;
    text-decoration: none;
}
.legal-footer {
    height: 24px;
    margin-top: -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 1;
    position: relative;
}
.legal-footer a {
    text-decoration: none;
    color: #ffffffa8;
}