body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #d9dadf;
    font-size: 90%;
    margin: auto;
    padding: 0;
    width: 100%;
    background: #303549 url("/assets/icons/enigmyster_background.jpg") bottom left fixed repeat-x;
    text-align: center;
}

[data-action] {
    cursor: pointer;
}

a:link {
    color: #f5deb3;
}

a:visited {
    color: #caaddb;
}

a:hover {
    color: #fff;
}

#navlist a:link, div.h_mn a:link, h2 a:link, h4 a:link, fieldset a:link,
div#menu2 a:link, div#menu2_chasse a:link, div#menu2_dhasse a:link, div.band_bs a:link {
    text-decoration: none;
    color: #f5deb3;
}

#navlist a:visited, div.h_mn a:visited, h2 a:visited, h4 a:visited,
fieldset a:visited, div#menu2 a:visited, div#menu2_chasse a:visited,
div#menu2_dhasse a:visited, div.band_bs a:visited {
    text-decoration: none;
    color: #f5deb3;
}

#navlist a:hover, div.h_mn a:hover, h2 a:hover, h4 a:hover, fieldset a:hover,
div#menu2 a:hover, div#menu2_chasse a:hover, div#menu2_dhasse a:hover,
div.band_bs a:hover {
    text-decoration: underline;
    color: #fff;
}

caption {
    border: #2b323a 0.1em solid;
}

table {
    width: 98%;
    margin: 0 0 0.5em 0.5em;
    color: inherit;
}

table.e5_static_page, table.e5_static_page_grise {
    font-size: 3vh;
    color: #aaaaaa;
    background-color: #000000;
    align-content: center;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

/* pour image viewer */
table.e5_static_page_grise {
    background-color: #494e59;
}

table.e5_table, table.e5_table_header, table.e5_table_bicolore,
table.e5_petite_table, table.e5_widget, table.e5_table_enigme {
    border: 0;
    width: 100%;
    margin: 0;
    border-spacing: 0;
}

table.e5_table, table.e5_table_bicolore, table.e5_table_page, table.e5_table_contenu, table.e5_table_enigme {
    line-height: 2em;
}

table.e5_petite_table {
    width: 50%;
}

table.e5_table_contenu {
    width: 100%;
    line-height: 1.1em;
}

table.e5_table_bicolore tr:nth-child(even) {
    background-color: transparent;
}

table.e5_table_bicolore tr:nth-child(odd) {
    background-color: #3c414c;
}

table.e5_widget {
    background-color: #494e59;
    border: 1px solid #494e59;
}

tr.e5_separator td {
    height: 1px;
    background-color: black;
}


table.e5_table_border, table.e5_table_border tr, table.e5_table_border td {
    border: 1px solid black;
    text-align: center;
}

table.e5_table_bicolore th {
    border: 1px solid black;
    text-align: center;
}

table.e5_table_titre {
    position: sticky;
    top: 0;
    background-color: #494e59;
    margin: 0;
    width: 100%;
    z-index: 10;
}

td.e5_page_left {
    width: 20%;
    vertical-align: top;
    text-align: left;
}

.e5_table_bicolore * td {
    text-align: left;
}

td.e5_page_center, td.e5_page_center_large {
    width: 60%;
    height: 100px; /* Sinon le footer n'est pas juste en-dessous */
    vertical-align: top;
    text-align: justify;
    overflow-wrap: break-word;
}

td.e5_page_center {
    width: 60%;
}

td.e5_page_center_large {
    width: 80%;
}

main.e5_page_center {
    background-color: #494e59;
    border-left: 4px solid #494e59;
    border-right: 4px solid #494e59;
    margin: 0 10px;
    line-height: 2em;
    padding: 0.5em 2em 0.5em 2em;
}

main.e5_page_center_large {
    background-color: #494e59;
    border-left: 1px solid #333333;
    border-right: 1px solid #333333;
    margin: 0 auto;
    overflow-wrap: break-word;
    line-height: 2em;
    padding: 0.5em 2em 0.5em 2em;
}

main.e5_page_center_chasse {
    margin: 10px;
    line-height: 2em;
}

main.e5_page_center_chasse_reponse {
    margin: 10px 10% 10px 10%;
    line-height: 2em;
    min-width: 300px;
}

td.e5_page_right {
    width: 20%;
    vertical-align: top;
    text-align: left;
}

div.e5_popup, .e5_page_right {
    vertical-align: top;
    text-align: left;
}

div.e5_popup, .e5_page_left, .e5_left {
    vertical-align: top;
    text-align: left;
}

div.e5_mobile, .e5_test {
    position: absolute;
    top: 0;
    right: 0;
    color: darkorange;
}

aside.e5_page_right {
    position: sticky;
    top: 0;
}

nav.e5_page_left {
    position: sticky;
    top: 0;
}

td.e5_header_left_logo {
    width: 20%;
}

td.e5_header_center_logo {
    background: url("/assets/icons/enigmyster_cie3.jpg");
}

td.e5_header_center_logo_mobile {
    background: url("/assets/icons/enigmyster_mobile.jpg");
}

td.e5_header_center_logo, td.e5_header_center_logo_mobile {
    width: 60%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    height: 6em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    position: relative;
}

td.e5_header_center_search {
    width: 60%;
    padding: 5px 5% 5px 0;
    text-align: left;
}

td.e5_header_right {
    width: 20%;
    text-align: center;
    vertical-align: top;
}

td.e5_footer {
    vertical-align: top;
}

footer.e5_footer_bande {
    padding: 0.2em 0 0 0;
    margin: 0 10px;
    display: block;
    text-align: right;
}

nav.e5_menu_bande {
    padding: 0 0 0 0;
    margin: 0 10px;
    display: block;
}

div.e5_menu_gauche {
    position: sticky;
    top: 0;
}

tr.e5_tr_top {
    vertical-align: top;
}

tr.e5_tr_center {
    vertical-align: middle;
}

td.e5_td_left, th.e5_td_left, td.e5_td_left_pad, th.e5_td_left_pad, td.e5_td_left_10, td.e5_td_left_50, td.e5_td_left_100 {
    text-align: left;
}


td.e5_td_left_pad, th.e5_td_left_pad {
    padding-left: 10px;
}

td.e5_td_left_10 {
    width: 10px;
}

td.e5_td_left_50 {
    width: 50px;
}

td.e5_td_left_100 {
    width: 100px;
}

td.e5_td_center, th.e5_td_center {
    text-align: center;
}

td.e5_td_center_100, th.e5_td_center_100 {
    text-align: center;
    width: 100%;
}

img.e5_100 {
    width: 100%;
}

td.e5_td_right, th.e5_td_right {
    text-align: right;
}

td.e5_td_menu {
    padding: 0;
}

td.e5_td_gold {
    color: gold;
    font-weight: bold;
}

td.e5_td_anagram {
    color: gold;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

td.e5_td_anagram_article {
    color: lightgrey;
    font-style: italic;
    text-align: left;
}

td.e5_td_silver {
    color: silver;
    font-weight: bold;
}

td.e5_td_bronze {
    color: saddlebrown;
    font-weight: bold;
}

td.e5_td_blanc {
    color: wheat;
}

p.e5_no_break {
    white-space: nowrap;
    line-height: 1.1em;
}

fieldset {
    border: #222 1px solid;
    margin: 0;
    padding: 0 0.3em 0.5em 0.3em;
}

legend {
    color: #d9dadf;
    font-weight: bold;
}

label {
    font-weight: bold;
    top: -0.1em;
}

label.e5_label {
    font-weight: bold;
    color: #eeeeee;
}

input.a, select, textarea {
    color: #bbbbbb;
    background: #303549;
}

textarea {
    color: #bbbbbb;
    width: 99%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin-bottom: 3px;
}

input.e5_input, input.e5_input_reponse, ul.e5_input * {
    color: #bbbbbb;
    background: #303549;
    margin-bottom: 0.5em;
    width: 100%;
    min-width: 45px;
    text-align: left;
}

ul.e5_input {
    background: #303549;
}

input.e5_input_transparent {
    background: transparent;
    border: none;
    color: #ffffff;
}

input.e5_input_bouton {
    color: #bbbbbb;
    background: #303549;
    margin-bottom: 0.5em;
    width: 100px;
}

input.e5_input_invisible {
    display: none;
}

section.e5_defaut, div.e5_defaut, div.e5_break, div.e5_small {
    line-height: 1.5em;
    padding: 0.5em 1.5em 0.5em 1.5em;
    margin: 0;
    overflow-wrap: break-word;
}

div.e5_small, td.e5_small {
    font-size: 0.8em;
}

.e5_tooltiptext {
    visibility: hidden;
    font-size: 0.8em;
    background-color: #303549;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -60px;
}

.e5_defaut:hover .e5_tooltiptext {
    visibility: visible;
}

div.e5_compact {
    line-height: 1.5em;
    padding: 0.2em 1.5em 0.2em 1.5em;
    margin: 0;
    overflow-wrap: break-word;
}

div.e5_widget, div.e5_widget_chat {
    padding: 0.2em 0.5em;
    margin: 0;
}

div.e5_widget_chat {
    max-height: 10em;
    overflow-y: auto;
}

.no-padding {
    margin: -8px 0 0 -10px;
}

div.e5_break {
    overflow-wrap: break-word;
}

h1 {
    font-size: 1.2em;
    margin: 0;
    padding: 0;
}

h1.e5_defaut {
    padding: 0.2em 1.5em 0.2em 1.1em;
}

h2 {
    font-size: 1.15em;
    margin: 0.3em 0 0.6em 0.2em;
    padding: 0;
}

h2.e5_defaut {
    color: #ffffff;
    background: #303549;
    padding: 0.5em 1.5em 0.5em 1.25em;
    margin: 0;
}

h2.e5_menu {
    color: darkgrey;
    background: transparent;
    padding: 0.5em 1.7em 0.5em 1.25em;
    margin: 0;
}

h3 {
    font-size: 1.1em;
}

h3.e5_defaut {
    color: #dddddd;
    padding: 0.5em 1.5em 0.5em 1.25em;
    margin: 0;
}

h4 {
    font-size: 1.05em;
}

h4.e5_defaut {
    color: #000000;
    padding: 0.5em 1.5em 0.5em 1.25em;
    margin: 0;
}

ol {
    margin: 0;
    padding: 20px;
}

ol.e5_defaut {
    line-height: 1.5em;
    padding: 0.5em 1.5em 0.5em 0.5em;
    margin: 0 0 0 3em;
}

ul.e5_defaut {
    line-height: 1.5em;
    padding: 0.5em 1.5em 0.5em 0.5em;
    margin: 0 0 0 3em;
}

li.e5_defaut {
    line-height: 1.5em;
    padding: 0.5em 1.5em 0.5em 0.5em;
    margin: 0 0 0 3em;
}

ul.e5_menu, ul.e5_menu_gauche {
    margin: 0;
    padding-inline-start: 0;
    list-style-type: none;
}

ul.e5_menu {
    font-family: casual, cursive;
}

li.e5_menu, li.e5_menu_selection {
    display: inline-block;
    border-style: solid;
    border-radius: 10px 10px 0 0;
    padding: 10px 15px;
    vertical-align: bottom;
    float: left;
    height: 20px
}

li.e5_menu_selection {
    border-color: #494e59;
    border-width: 1px 1px 3px 1px;
    background-color: #494e59;
}

li.e5_menu {
    border-color: #333333;
    border-width: 1px 1px 3px 1px;
    background-color: #5E6473;
}

a.e5_menu, a.e5_menu_selection, a.e5_menu_important, span.e5_menu, span.e5_menu_selection {
    text-decoration: none;
}

a.e5_selection, a.e5_defaut, a.e5_moi {
    text-decoration: none;
}

a {
    text-decoration: none !important;
}

a.e5_menu:hover {
    color: gold !important;
}

span.e5_menu, a.e5_menu, a.e5_menu:link, a.e5_menu:visited, a.e5_defaut:visited, span.e5_h3, li.e5_menu_gauche {
    color: #f5deb3;
}

li.e5_menu_gauche {
    cursor: pointer;
}

li.e5_menu_gauche:hover {
    color: gold;
}

span.e5_menu_selection, span.e5_selection, a.e5_selection:link, a.e5_selection:visited {
    color: #ffffff;
}

a.e5_moi:link, a.e5_moi:visited {
    color: palegreen;
}

a.e5_menu_selection, a.e5_menu_selection:link, a.e5_menu_selection:visited, li.e5_menu_gauche_selection {
    color: gold;
    font-weight: bold;
}

li.e5_menu_important {
    color: orange;
    font-weight: bold;
    cursor: pointer;
}

a.e5_enigme_non_evaluee, a.e5_enigme_non_evaluee:link, a.e5_enigme_non_evaluee:visited {
    color: gold;
}

form {
    margin: 0;
    padding: 0;
}

/* Bannieres */
div.e5_warning, div.e5_erreur, div.e5_info, div.e5_instructions, div.e5_correct,
div.e5_incorrect, div.e5_a_la_une, div.e5_hirondelle, div.e5_aigle, div.e5_phoenix {
    font-size: 0.9em;
    margin: 0.5em 0.5em 0.5em 0.5em;
    padding: 0.5em 0.5em 0 60px;
    background-position: 5px center;
    background-size: 40px;
    min-height: 50px;
    background-repeat: no-repeat;
    display: block;
    vertical-align: middle;
    line-height: 2em;
    border-radius: 20px;
}

div.e5_info.mini {
    background-size: 20px;
    min-height: 25px;
}

div.e5_warning {
    color: orange;
    border: orangered 4px solid;
    font-weight: normal;
    background-image: url('/assets/icons/warning_96.png');
}

div.e5_erreur {
    color: orangered;
    border: red 4px solid;
    font-weight: bold;
    background-image: url('/assets/icons/erreur_96.png');
}

div.e5_info {
    color: lightskyblue;
    border: royalblue 4px solid;
    text-align: center;
    background-image: url('/assets/icons/info_96.png');
}

div.e5_instructions {
    color: #6699ff;
    border: #6699ff 4px solid;
    font-weight: normal;
    text-align: left;
    background-image: url('/assets/icons/info_96.png');
}

div.e5_correct, div.e5_hirondelle, div.e5_aigle, div.e5_phoenix {
    color: gold;
    border: gold 4px dotted;
    text-align: center;
    font-weight: bold;
    background-position: center bottom 10px;
    min-height: 10px;
}

div.e5_correct {
    background-image: url('/assets/icons/oui_40.gif');
    padding: 0.5em 0.5em 70px 0.5em;
    background-size: 50px;
}

div.e5_hirondelle {
    background-image: url('/assets/avatars/hirondelle.png');
    padding: 0.5em 0.5em 90px 0.5em;
    background-size: 70px;
}

div.e5_aigle {
    background-image: url('/assets/avatars/aigle.png');
    padding: 0.5em 0.5em 90px 0.5em;
    background-size: 70px;
}

div.e5_phoenix {
    background-image: url('/assets/avatars/phenix.png');
    padding: 0.5em 0.5em 90px 0.5em;
    background-size: 70px;
}

div.e5_incorrect {
    color: lightgrey;
    border: grey 4px solid;
    text-align: center;
    font-weight: bold;
    background-image: url('/assets/icons/non_40.gif');
    padding: 0.5em 0.5em 90px 0.5em;
    background-position: center bottom 10px;
    background-size: 50px;
}

div.e5_a_la_une {
    border: skyblue 4px solid;
    font-weight: normal;
    text-align: left;
    background-image: url('/assets/icons/news_96.png');
}

div.e5_modification, div.e5_indice1, div.e5_indice2, div.e5_trouvee, div.e5_nontrouvee {
    margin: 0.5em 0.5em 0.5em 0.5em;
    padding: 0.5em 0.5em 0.5em 25px;
    background-position: 5px 5px;
    min-height: 25px;
    background-repeat: no-repeat;
    display: block;
    vertical-align: middle;
    font-weight: normal;
}

div.e5_trouvee, div.e5_nontrouvee {
    margin: 0.1em 0.1em 0.3em 0.1em;
}

div.e5_modification {
    color: darkorange;
    background-size: 15px;
    background-image: url('/assets/icons/modifie_15.png');
}

div.e5_indice1 {
    color: palegreen;
    background-size: 15px;
    background-image: url('/assets/icons/indice_15.png');
}

div.e5_indice2 {
    color: palegreen;
    background-size: 15px;
    background-image: url('/assets/icons/indices_15.png');
}

div.e5_trouvee {
    padding: 0.1em 0 0 25px;
    min-height: 10px;
    background-image: url('/assets/icons/trouve1_16.png');
}

div.e5_nontrouvee {
    padding: 0.1em 0 0 25px;
    min-height: 10px;
    background-image: url('/assets/icons/non_trouve_16.png');
}

div.e5_intro {
    margin: 0;
    color: #FFFFDD;
    font-style: normal;
    padding: 0.5em 2em 0.5em 2em;
    font-weight: normal;
}


/* pour l'affichage des difficultés */
span.e5_dif_ok_1, span.e5_dif_ok_2, span.e5_dif_ok_3, span.e5_dif_ok_4 {
    font-size: xx-large;
    background-repeat: no-repeat;
    background-position: center bottom;
}

span.e5_dif_ok_1 {
    background-image: url('/assets/icons/dif_ok_30_1.png');
}

span.e5_dif_ok_2 {
    background-image: url('/assets/icons/dif_ok_30_2.png');
}

span.e5_dif_ok_3 {
    background-image: url('/assets/icons/dif_ok_30_3.png');
}

span.e5_dif_ok_4 {
    background-image: url('/assets/icons/dif_ok_30_4.png');
}

span.e5_dif_nok {
    font-size: xx-large;
    background-image: url('/assets/icons/dif_nok_30.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}

span.e5_dif_moy {
    color: darkgrey;
    font-weight: normal;
}

span.e5_vote_ok {
    font-size: xx-large;
    background-image: url('/assets/icons/valide_ok_20.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}

span.e5_vote_nok {
    font-size: xx-large;
    background-image: url('/assets/icons/valide_nok_20.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}

span.e5_chouette_ok {
    font-size: xx-large;
    background-image: url('/assets/icons/chouette_ok_30.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}

span.e5_chouette_nok {
    font-size: xx-large;
    background-image: url('/assets/icons/chouette_nok_30.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* Preview au survol pour chouette / vote */
span.e5_chouette_nok:hover {
    background-image: url('/assets/icons/chouette_ok_30.png');
}

span.e5_chouette_ok:hover {
    background-image: url('/assets/icons/chouette_nok_30.png');
}

span.e5_vote_nok:hover {
    background-image: url('/assets/icons/valide_ok_20.png');
}

span.e5_vote_ok:hover {
    background-image: url('/assets/icons/valide_nok_20.png');
}

/* Preview au survol des étoiles de difficulté */
.e5_dif_stars:hover span.e5_dif_star_1 {
    background-image: url('/assets/icons/dif_ok_30_1.png');
}

.e5_dif_stars:hover span.e5_dif_star_2 {
    background-image: url('/assets/icons/dif_ok_30_2.png');
}

.e5_dif_stars:hover span.e5_dif_star_3 {
    background-image: url('/assets/icons/dif_ok_30_3.png');
}

.e5_dif_stars:hover span.e5_dif_star_4 {
    background-image: url('/assets/icons/dif_ok_30_4.png');
}

.e5_dif_stars span.e5_dif_star:hover ~ span.e5_dif_star {
    background-image: url('/assets/icons/dif_nok_30.png');
}

/* Preview au survol pour GDPR (utilise :has() — navigateurs modernes uniquement) */
span.e5_reject_nok:hover {
    background-image: url('/assets/icons/reject_24.png');
}

span.e5_accept_nok:hover {
    background-image: url('/assets/icons/accept_24.png');
}

span.e5_accept_ok:has(~ span.e5_reject_nok:hover) {
    background-image: url('/assets/icons/accept_no_24.png');
}

span.e5_accept_nok:hover ~ span.e5_reject_ok {
    background-image: url('/assets/icons/reject_no_24.png');
}

span.e5_accept_ok {
    font-size: xx-large;
    background-image: url('/assets/icons/accept_24.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 24px 24px;
}

span.e5_accept_nok {
    font-size: xx-large;
    background-image: url('/assets/icons/accept_no_24.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 24px 24px;
}

span.e5_reject_ok {
    font-size: xx-large;
    background-image: url('/assets/icons/reject_24.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 24px 24px;
}

span.e5_reject_nok {
    font-size: xx-large;
    background-image: url('/assets/icons/reject_no_24.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 24px 24px;
}

span.e5_icon {
    font-size: large;
}

tr.e5_ok {
    color: palegreen;
}

span.e5_nok {
    color: salmon;
}

tr.e5_nok {
    color: salmon;
}

span.e5_nc {
    font-family: "Courier New", Courier, mono, serif;
    white-space: pre;
}

span.e5_cache {
    color: #20B2AA;
    background-color: #20B2AA;
}

.tag-edit span.e5_cache {
    color: #20B2AA;
    background-color: #20B2AA55;
}

span.e5_cach2 {
    color: #20B2AA;
}

/* Dans les guildes */
span.e5_couleur {
    color: gold;
}

/* Dans les guildes + liens BBCode [TIE]/[TOE]/[MOIS] (texte_ic) sur <a>.
 * !important : les regles `fieldset a:link` / `h2 a:link` (0,1,2) battraient
 * sinon la classe (0,1,1) quand le texte colore est rendu dans ces conteneurs. */
span.e5_couleur_TIE, a.e5_couleur_TIE {
    color: darkorange !important;
}

span.e5_couleur_TOE, a.e5_couleur_TOE {
    color: darkturquoise !important;
}

span.e5_couleur_TOUR {
    color: darksalmon;
}

span.e5_couleur_CH1 {
    color: lightyellow;
}

span.e5_couleur_CH2 {
    color: yellow;
}

span.e5_couleur_CH3 {
    color: yellowgreen;
}

span.e5_larger {
    color: white;
    font-size: larger;
}

sup.e5_superchouette {
    vertical-align: 1.1em;
    font-size: xx-small;
    color: darkgrey;
}

sup.e5_megachouette {
    vertical-align: 1.1em;
    font-size: xx-small;
    color: gold;
}

cite.e5_quote {
    background: #666666;
}

div.e5_quote {
    border: 1px solid darkgrey;
    margin: 2px 5px;
    padding: 2px;
}

/* jaune et rouge dynamique dans tentative widget */
div.e5_encercle, div.e5_encercle_jaune, div.e5_encercle_orange, div.e5_encercle_rouge, div.e5_encercle_bleu,
span.e5_encercle, span.e5_encercle_score, span.e5_encercle_jaune, span.e5_encercle_orange, span.e5_encercle_rouge, span.e5_encercle_bleu {
    display: inline-block;
    padding: 0 0.3rem 0 0.2rem;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: bold;
    border: 2px;
    color: wheat;
}

div.e5_encercle, span.e5_encercle {
    border: solid green;
}

span.e5_encercle_score {
    border: solid lightgrey;
    font-size: medium;
    padding: 0.5rem;
}

div.e5_encercle_bleu, span.e5_encercle_bleu {
    border: solid blue;
}

div.e5_encercle_jaune, span.e5_encercle_jaune {
    border: solid gold;
}

div.e5_encercle_orange, span.e5_encercle_orange {
    border: solid orange;
}

div.e5_encercle_rouge, span.e5_encercle_rouge {
    border: solid darkred;
}

div.e5_ligne {
    border-top-width: 1px;
    border-top-style: solid;
    border-color: #777;
    margin: 0.5em 2%;
}

div.e5_content_center {
    text-align: center;
    vertical-align: middle;
}

td.e5_navigation {
    width: 16px;
    vertical-align: top;
    text-align: center;
}

td.e5_navigation img {
    vertical-align: middle;
}

td.e5_enigme_actions {
    vertical-align: middle;
}

img.e5_menu {
    height: 18px;
    padding-right: 5px;
}

img.e5_static {
    height: 100%;
    border: 0;
}

img.e5_liens {
    height: 50px;
    width: 120px;
    border: 0;
}

img.e5_liens2 {
    width: 120px;
    border: 0;
}

img.img_16 {
    height: 16px;
    width: 16px;
    vertical-align: bottom;
}

img.img_24 {
    height: 24px;
    width: 24px;
    vertical-align: middle;
}

img.img_32 {
    height: 32px;
    width: 32px;
    vertical-align: bottom;
}

img.img_40 {
    height: 40px;
    width: 40px;
    vertical-align: bottom;
}

div.btn_expand, span.btn_expand {
    background-image: url('/assets/icons/expand_15.png');
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
    top: 10px;
    right: 5px;
    width: 15px;
    height: 15px;
}

.btn_expand.btn_menu {
    background-image: url('/assets/icons/menu_20.png');
    width: 20px; /* nécessaire sinon pas d'image ? */
    height: 25px;
    margin: 5px 8px 8px 0;
}

div.btn_expand.center, span.btn_expand.center {
    float: none;
    margin: auto;
}

div.contenu_cache, span.contenu_cache, tr.contenu_cache, tbody.contenu_cache,
caption.contenu_cache, thead.contenu_cache {
    display: none;
}

h2.collapse_header {
    position: relative;
}

h2.collapse_header span.btn_expand {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 15px;
    height: 15px;
}

.chat-container {
    line-height: 1.3em;
}

.chat-container * h2.collapse_header span.btn_expand {
    top: 6px;
    right: 5px;
    width: 15px;
    height: 15px;
}

.open-down {
    transform: none !important;
}

span.balise_erreur {
    background: #FF6666;
}

span.retire_balise {
    text-decoration: red line-through;
}

.hidden {
    display: none;
}

.ui-autocomplete {
    max-height: 200px;
    min-height: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
    padding-bottom: 20px;
    z-index: 2000 !important;
}

td.e5_half {
    width: 50%;
}

td.e5_third {
    width: 33%;
}

td.e5_quarter {
    width: 25%;
}

td.e5_fifth {
    width: 20%;
}

div.e5_popup {
    position: fixed;
    width: 340px;
    left: 50%;
    top: 50%;
    background-color: #494e59;
    z-index: 1000;
    margin: 5px 5px;
    border: 2px solid #303549;
    transform: translateY(-50%) translateX(-50%);
}

div.e5_menu_button {
    position: fixed;
    top: 5px;
    right: 15px;
    z-index: 1000;
}

/* A appliquer en dernier pour que ça marche */
/* A cacher en haute résolution ! */
@media ( min-width: 600px) {
    img.e5_basse_resolution {
        display: none;
    }

    div.e5_basse_resolution {
        display: none;
    }

    span.e5_basse_resolution {
        display: none;
    }

    th.e5_basse_resolution {
        display: none;
    }

    tr.e5_basse_resolution {
        display: none;
    }

    td.e5_basse_resolution {
        display: none;
    }
}

/* A cacher en basse résolution ! */
@media ( max-width: 599px) {
    img.e5_haute_resolution {
        display: none;
    }

    div.e5_haute_resolution {
        display: none;
    }

    span.e5_haute_resolution {
        display: none;
    }

    th.e5_haute_resolution {
        display: none;
    }

    tr.e5_haute_resolution {
        display: none;
    }

    td.e5_haute_resolution {
        display: none;
    }

    li.e5_haute_resolution {
        display: none;
    }

    input.e5_haute_resolution {
        display: none;
    }

    select.e5_haute_resolution {
        display: none;
    }

    td.e5_header_center_search {
        display: none;
    }

    td.e5_page_right {
        display: none;
    }

    td.e5_page_left {
        display: none;
    }
}

.chat-channel {
    vertical-align: top;
    text-align: left;
    width: 100%;
}

.chat-message {
    overflow-y: auto;
    margin: 5px 0;
    overflow-x: hidden;
    width: 100%;
    height: calc(100% - 10px)
}

.chat-input {
    width: calc(100% - 25px);
}

.chat-message::-webkit-scrollbar {
    background: #303549;
    width: 6px;
}

.chat-message::-webkit-scrollbar-thumb {
    background: #5E6473;
}

.chat-message {
    -ms-overflow-style: none;
}

div.chat-container-stand-alone {
    vertical-align: top;
    text-align: left;
    background: #494e59;
}

.chat-bouton-ajoute {
    height: 14px;
    position: relative;
    top: 2px;
}

.chat-lu {
    display: inline-block;
    overflow: visible;
}

.chat-channel-messages {
    position: relative;
    height: 150px;
    padding: 0 0 10px 0;
}

.chat-link {
    width: 20px;
    margin: 0 0 0 -12px;
    position: absolute;
    top: 5px;
}

.chat-previsualisation-container {
    position: absolute;
    bottom: 5px;
    height: 14px;
    overflow-y: scroll;
    width: 100%;
}

.chat-previsualisation-container::-webkit-scrollbar {
    background: #303549;
    width: 6px;
}

.chat-previsualisation-container::-webkit-scrollbar-thumb {
    background: #5E6473;
}

.chat-previsualisation-container {
    -ms-overflow-style: none;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_day_of_week6 {
    background: salmon !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td[data-month="2"][data-year="2021"] {
    background: salmon !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date.dateSelectionnee {
    background: lightGreen !important;
    pointer-events: initial !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date.dateMultiSelectionnee {
    background: darkorange !important;
}

.xdsoft_inline * div {
    z-index: initial !important;
}

.xdsoft_datetimepicker * a:link, .xdsoft_datetimepicker * a:visited {
    color: darkolivegreen !important;
}

.xdsoft_datetimepicker * a:hover, .xdsoft_datetimepicker * a:active {
    color: darkgray !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date .non-repondue a {
    color: red !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date .non-repondue a:visited {
    color: red !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date .non-repondue a:hover {
    color: red !important;
    opacity: 0.75 !important;
}

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {
    display: inline;
}

li.pagination, li.pag_separator, li.pag_active {
    font-weight: bold;
    padding: 4px 4px;
    color: white;
}

li.pag_active {
    background: #303549;
    border: solid 1px #303549;
}

li.pagination {
    background: #40454e;
    border: solid 1px #303549;
}

li.pagination:hover {
    border: solid 1px white;
}

li.e5_vert {
    color: lightgreen;
}

td.e5_tiers {
    width: 33.3%;
}

td.e5_entier {
    white-space: nowrap;
}

input.XVision {
    background: #ccc url('../assets/icons/xvision_24.png') no-repeat center left;
    padding-left: 24px;
    height: 30px;
    font-weight: bold;
    color: black;
}

input.Normal {
    background: #ccc url('../assets/icons/vision_24.png') no-repeat center left;
    padding-left: 24px;
    height: 30px;
    font-weight: bold;
    color: darkgreen;
}

table.XVision {
    background: url('../assets/icons/xvision_back1_128.png') no-repeat center;
    background-size: contain;
}

/* pour les listes en attendant le chargement */
table.e5_attente {
    background: url('../assets/icons/attente_500.gif') no-repeat center;
    background-size: contain;
}

/* Pour les classements */
tr.e5_moi {
    background-color: darkblue !important;
}

/* TIE 334 */
span.coul_fnd {
    color: #494e59;
}

/* TIE 349 556 617 1854 */
/* TOE 952 */
span.big_4_nc {
    font-size: 4em;
    font-family: "Courier New", Courier, mono, serif;
    line-height: 100%;
}

/* TIE 389 399 470 516 591 689 713 */
span.nc, .nc2 {
    font-family: "Courier New", Courier, mono, serif;
}

/* TIE 407 636 */
span.big_2_nc {
    font-size: 2em;
    font-family: "Courier New", Courier, mono, serif;
    line-height: 100%;
}

/* TIE 512 */
span.big_2 {
    font-size: 2em;
    line-height: 100%;
}

/* TIE 484 516 */
span.vrt {
    color: #0c0;
}

#tutorial_histoire {
    border: solid darkslategrey;
    color: darkslategrey;
    background: lightgrey;
}

#tutorial_tuto {
    border: thin solid gold;
    padding: 15px;
}

#tutorial_action {
    border: thin solid skyblue;
    padding: 15px;
}

#tutorial_ok {
    border: thin solid lightgreen;
    padding: 15px;
}

#tutorial_nok {
    border: thin solid orange;
    padding: 15px;
}

#tutorial_enigme {
    border: thin solid white;
    padding: 15px;
}

span.tutorial_histoire {
    color: lightgrey;
}

span.e5_gold_bold {
    color: gold;
    font-weight: bold;
}

span.tutorial_action {
    color: skyblue;
    font-weight: bold;
}

span.tutorial_ok {
    color: lightgreen;
    font-weight: bold;
}

span.tutorial_nok {
    color: orange;
    font-weight: bold;
}

span.tutorial_enigme {
    color: white;
    font-weight: bold;
}

#tutorial_texte {
    padding: 15px;
    color: skyblue;
}

span.e5_rico {
    color: cadetblue;
}

span.e5_zabagui {
    color: greenyellow;
}

span.e5_vero {
    color: goldenrod;
}

span.e5_mael {
    color: dodgerblue;
}

span.e5_matifouk {
    color: violet;
}

span.e5_michel {
    color: gold;
}

span.e5_eipo {
    color: pink;
}

span.e5_pseudo {
    color: lightcoral;
}

img.tutorial {
    width: 100%;
    height: 1px;
}

figure.e5_label {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    unicode-bidi: isolate;
}


span.e5_gris {
    color: darkgrey;
    font-weight: normal;
}

span.e5_noir {
    color: black;
    font-weight: normal;
}

span.e5_gold {
    color: gold;
    font-weight: normal;
}

span.e5_blanc {
    color: white;
    font-weight: normal;
}

span.e5_ok {
    color: palegreen;
}

span.e5_key {
    color: palegreen;
    font-weight: bold;
}

span.e5_bleu {
    color: skyblue;
}

span.e5_vert {
    color: lightgreen;
}

span.e5_rouge {
    color: indianred;
}

span.e5_orange {
    color: darkorange;
}

div.e5_container, td.e5_container {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    align-items: center; /* Alignement vertical au centre */
    text-align: left;
    position: relative;
}

img.e5_image_left {
    margin-right: 20px; /* Espace entre l'image et le texte */
}

img.e5_image_right {
    position: absolute;
    right: 0;
}

/* Pour les notes de bas de page (utiisés dans CH3) */
.e5_footnotes {
    margin-top: 2em;
    border-top: 1px solid #ccc;
    padding-top: 1em;
    font-size: 0.8em;
    line-height: 1.2;
}

.e5_footnote-ref {
    vertical-align: super;
    font-size: 0.8em;
}

.e5_footnote-back {
    text-decoration: none;
}

/* ==============================================================
 * Classes utilitaires — remplacent les style="..." inline les plus
 * frequents. Etape vers le retrait de 'unsafe-inline' de style-src.
 * ============================================================ */
/* width en !important : ces utilitaires remplacent des style='width:Npx' inline
 * qui battaient toujours la cascade. Les selecteurs input.e5_input{width:100%}
 * et input.e5_input_bouton{width:100px} (specificite 0,1,1) gagneraient sinon
 * sur une simple classe (0,1,0). Mono-usage, donc !important est sans risque. */
.e5_w100   { width: 100px !important; }
.e5_w160h40 { width: 160px !important; height: 40px; }
.e5_w200   { width: 200px !important; }
.e5_w400   { width: 400px !important; }

/* Force le coupage des mots tres longs (stack traces, URLs sans espace,
 * tokens, etc.) ET preserve les retours a la ligne du contenu source.
 * Utilise sur la colonne Detail de admin/log.php : les stack traces sont
 * multi-lignes et l'indentation doit rester visible. */
.e5_break_word {
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Element decoratif (checkbox a l'interieur d'un <a>) : le clic doit
 * remonter au parent au lieu d'etre intercepte par l'input. */
.e5_pointer_none {
    pointer-events: none;
}

/* Mini formulaire POST a la place d'un <a href> (CSRF) : conserve le flux
 * en ligne et neutralise les marges par defaut du <form>. */
.e5_inline_form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* <button type=submit> qui doit ressembler a un <a> : utilise pour les
 * actions GET-vers-POST (logout, chat_back) afin de poser un CsrfToken. */
.e5_link_button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.e5_link_button:has(img) {
    text-decoration: none;
}
.e5_float_right_m5 { float: right; margin: 0 5px; }

/* Largeurs fixes (px) — ex-style='width:Npx' sur les <input>/<td>/<select>.
 * !important : cf. note plus haut (battent input.e5_input / input.e5_input_bouton). */
.e5_w10    { width: 10px !important; }
.e5_w40    { width: 40px !important; }
.e5_w50    { width: 50px !important; }
.e5_w60    { width: 60px !important; }
.e5_w70    { width: 70px !important; }
.e5_w80    { width: 80px !important; }
.e5_w90    { width: 90px !important; }
.e5_w105   { width: 105px !important; }
.e5_w150   { width: 150px !important; }
.e5_w215   { width: 215px !important; }
.e5_w250   { width: 250px !important; }
.e5_w300   { width: 300px !important; }
.e5_full_width { width: 100% !important; }

/* Champ icone categorie : etroit + grande police pour afficher un emoji. */
.e5_input_icone { width: 10px !important; font-size: large; }

.e5_float_right { float: right; }
.e5_hidden { display: none; }
.e5_bold { font-weight: bold; }
.e5_fs_larger { font-size: larger; }

/* Declencheur de color-picker rendu comme un bouton sans chrome. */
.e5_bouton_transparent {
    border: 1px solid transparent;
    background-color: transparent;
}

/* Image d'enigme : tient dans la colonne sans deborder. */
.e5_img_enigme { max-width: 100%; max-height: 300px; }
.e5_video_enigme { width: 50%; max-width: 100%; height: auto; }

/* Liste des trouveurs : numérotée via compteur CSS. Les entrées "hors
   classement" (auteur en TIE, éditeurs en TOE) ne sont pas numérotées (et ne
   décalent pas le compteur), mais restent alignées avec les trouveurs et
   l'espacement est serré. */
.e5_trouveurs { list-style: none; counter-reset: e5_trouveur; margin: 0.3em 0; padding-left: 2em; }
.e5_trouveurs > li { counter-increment: e5_trouveur; margin: 0.1em 0; }
.e5_trouveurs > li::before { content: counter(e5_trouveur) ". "; }
.e5_trouveurs > li.e5_trouveur_hors { counter-increment: none; }
.e5_trouveurs > li.e5_trouveur_hors::before { content: ""; }

/* Petite icone smiley/BBCode flottant a droite d'un champ texte. */
.e5_smiley_pos   { padding: 0 8px; position: relative; top: 4px; }
.e5_smiley_pos_5 { padding: 0 5px; position: relative; top: 4px; }

/* Logo « Couleurs » (deux teintes) repris dans guildes / tavernes / chat. */
.e5_coul1 { color: sandybrown; }
.e5_coul2 { color: #81bc47; }

/* Couleur du badge Chasse (les badges TIE/TOE reutilisent e5_couleur_TIE/TOE). */
.e5_couleur_CHA { color: darkseagreen; }

/* Ligne/bloc selectionne dans une liste (guilde, sujet de taverne) : pose sur
 * un <h2 class='e5_defaut'>. !important sur background car h2.e5_defaut{background:#303549}
 * (0,1,1) battrait sinon cette classe (0,1,0) et masquerait le surlignage. */
.e5_ligne_sel_bleu { background: #000044 !important; border: #303540 solid 2px; }
.e5_ligne_sel_vert { background: #003000 !important; border: #303540 solid 2px; }

/* Coloration du visualiseur de logs texte (admin/log.php, LitFichierTexte). */
.e5_c_red { color: red; }
.e5_c_orange { color: orange; }
.e5_c_paleturquoise { color: paleturquoise; }

.e5_w45 { width: 45px !important; }
.e5_display_inline { display: inline; }

/* Fond du champ de reponse en mode test (vert olive).
 * !important : bat input.e5_input_reponse{background:#303549} (0,1,1). */
.e5_bg_olive { background: darkolivegreen !important; }

/* Pastille carree 16px (icone epingle inline). */
.e5_icone16 { width: 16px; height: 16px; display: inline-block; }

/* Bouton de fermeture en coin d'un popup widget. */
.e5_popup_close { position: absolute; top: 10px; right: 10px; }

/* Image inseree via le BBCode [im]...[/im] dans les messages. */
.e5_bbcode_img { max-width: 100%; display: block; }

/* margin en !important : input.e5_input pose margin-bottom:0.5em (0,1,1). */
.e5_m0p0 { margin: 0 !important; padding: 0; }