/*
Theme Name:	Mèchedex
Template:	generatepress
Version:	0.1.0
*/

body{
	background: #353535;
	color: #e9e9e9;
}

header{
	position: fixed!important;
	right: 0;
	left: 0;
	top: 0;
	z-index: 10;
}

a{
	text-decoration: none!important;
	color: inherit !important;
}

.marge{
	display: inline-block;
	float: left;
	height: 70px;
}

.inside-site-info,
#wpadminbar{
	display: none!important;
}

#footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 5px;
	text-align: center;
	backdrop-filter: blur(8px);
	background: rgb(24 24 24 / 90%);
	z-index: 5;
}

.site-main,
.site-content,
.sidebar{
	padding-top: 50px;
	margin-top: 0!important;
	padding-bottom: 10px;
}

#right-sidebar{
	position: fixed;
	display:inline-block;
	right: 0;
	top: 50px;
	overflow: auto;
	bottom: 0;
}

.site-header{
	background: transparent!important;
}

.inside-header{
	background: #181818;
	position: relative;
	height: 110px;
	backdrop-filter: blur(15px);
	background: rgba(24, 24, 24, 0.9);
}

.inside-right-sidebar{
	padding: 0 20px 0 0;
}

.menu{
	position: absolute;
	right: 50px;
	top: 50%;
	width: max-content;
	transform: translateY(-50%);
}

.rienparici{
	display: inline-block;
	width: 100%;
	text-align: center;
}

.rienparici .site-main{
	margin-left: 20px!important;
}

.logout{
	display: inline-block;
	clear: both;
	float: left;
}

.menu-item-has-children{
	margin: 0 10px;
}

.menu li{
	list-style:none;
	display: inline-block;
}

.nolink{
	display: inline-block;
	position: relative;
}

.nolink > a{
	cursor: default;
	text-decoration: none;
}

.nolink > a:after{
	content: "\f140";
	font-family: "dashicons";
}

.menu ul{
	margin:0;
}

ul.sub-menu{
	position: absolute;
	display: none;
	top: 25px;
	text-align: right;
	right: 0;
	width: 200px;
	padding: 5px 20px 20px 20px;
	background: rgb(43 43 43);
}
ul.sub-menu.displaymenu{
	display: block;
}
ul.sub-menu li{
	display: block;
}

ul.sub-menu li:after{
	clear: both;
}

.nolink a{
	color: inherit!important;
}

.site-branding{
	position: absolute;
	left: 50px;
}

h2 {
	font-size: 24px;
	margin-bottom: 40px;
	line-height: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	border-bottom: 1px dashed;
	padding-left: 25px;
}

.visuel{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: relative;
}

.visuel.nochoice{
	border: 2px dashed;
	border-radius: 15px;
}

.visuelnochoice{
	width: 200px;
	height: 300px;
	border: 2px dashed;
	border-radius: 15px;
	position: relative;
}

.khpref-image{
	width: 200px;
}

.visuelnochoice svg{
	width: 8em;
	height: 8em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.nochoice .icon-svg{
	width: 7em;
	height: 7em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px dashed;
	border-radius: 15px;
	padding: 15px;
}

.site-content .content-area{
	width: 80%;
}

.is-right-sidebar{
	width: 20%;
}

.hidden,
.rhidden,
.chidden,
.khidden,
.dhidden,
.kfilter-hidden{
	display: none!important;
}

.blockgen{
	padding: 0 15px!important;
	display: block;
	clear: both;
}

.blockgen .site-main{
	margin-top: 60px;
}

td.fit,
th.fit {
	white-space: nowrap;
	width: 1%;
}

table.blockgen{
	display: table;
}

#mechedex{
	display: block;
	position: relative;
	width: 100%;
}

.meche_block{
	display: inline-block;
	position: relative;
	width: 19%;
	text-align: center;
	padding: 0 20px;
	/*margin-bottom: 50px;*/
	font-weight: 600;
	vertical-align: top;
}

.img_meche_card{
	width: 100%;
}

#mechesart .meche_block:hover{
	border: 1px solid rgb(129 129 129);
	border-radius: 15px;
}

.meche_block:hover{
	padding: 0 10px;
	transition: padding 0.5s;
}

.nom_meche{
	min-height: 150px;
}

.img_meche{
	position: relative;
}

.img_meche img{
	border-radius: 10px;
}

.img_meche_normale img:hover,
.img_meche_khibrille img:hover,
.mswipe{
	cursor: pointer;
}

.mkb,
.mkf{
	position: relative;
}

.mkb:after,
.mkf:after{
	display: inline-block;
	position: absolute;
	content: '\f062';
	font-family: fontawesome;
	font-size: 0.5em;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	animation: bougeUpDown 0.6s ease-in-out infinite alternate;
}

.mkb.mswipe:after,
.mkf.mswipe:after{
	display: none;
}

.is_front {
	position: absolute;
	top: -24px;
	width: 90%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
	transition: transform 0.5s;
}

.meche_data .svg-icon{
	opacity: 0.2;
}

.meche_data .mechekhapture .svg-icon{
	opacity: 1;
}

.khapturestat{
	display: inline-block;
	width: 100%;
}

fieldset {
	display: block;
	min-inline-size: min-content;
	margin-inline: 2px;
	border-width: 2px;
	border-style: groove;
	border-color: threedface;
	border-image: initial;
	padding-block: 0.35em 0.625em;
	padding-inline: 0.75em;
}

fieldset legend {
	display: block;
	unicode-bidi: isolate;
	padding-inline: 2px;
	margin-bottom: 0;
	font-size: 0.8em;
}

fieldset a{
	width: 100%;
}

.triparcat{
	max-height: 300px;
	overflow-x: auto;
}

.img_meche_base{
	opacity:0.3;
}

input:checked + label{
	font-weight: bold;
}

#lightbox{
	background: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

/* Base du badge compteur */
.khk-count{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:1.75em;
	height:1.5em;
	padding:0 .5em;
	margin-left:.5rem;
	border-radius:999px;
	background: rgba(255,255,255,.045);
	border-color: rgba(255,255,255,.08);
	color:#cbd5e1;
	font-size:.75rem;
	line-height:1;
	font-variant-numeric: tabular-nums; /* chiffres bien alignés */
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
	vertical-align:middle;
}

/* légère vie au survol du label */
.khk-option:hover .khk-count{ transform: translateY(-1px); }

/* Couleurs d'accent par groupe (tu peux changer) */
.khk-fieldset-rarete    { --khk-badge-accent:#8b5cf6; }       /* violet doux */
.khk-fieldset-categorie { --khk-badge-accent:#0ea5e9; }       /* bleu doux   */
.khk-fieldset-mine { --khk-badge-accent:#34b371; }       /* bleu doux   */
.khk-fieldset-annee { --khk-badge-accent:#d3a541; }       /* bleu doux   */
.khk-fieldset-khapture  { --khk-badge-accent:rgb(255,127,80);}/* corail      */

/* État "coché" : on rehausse le badge du filtre actif (input et son compteur sont dans le même <label>) */
.khk-option input:checked ~ .khk-count{
	background: color-mix(in oklab, var(--khk-badge-accent) 30%, black);
	border-color: color-mix(in oklab, var(--khk-badge-accent) 55%, black);
	color:#fff;
	font-weight:600;
}

/* Fallback si le navigateur ne supporte pas color-mix */
@supports not (color-mix(in oklab, red 50%, white)){
	.khk-option input:checked ~ .khk-count{
		background: var(--khk-badge-accent);
		border-color: var(--khk-badge-accent);
		color:#fff;
	}
}


.khk-option{
	display: inline-block;
	width: 100%;
}

.khk-option input[type="checkbox"]:checked + span {
	font-weight: bold;
}

.khk-no-results{
	max-width: 500px;
	background: #ebebeb;
	padding: 15px;
	border-radius: 15px;
	box-shadow: black 0 0 5px;
	margin: 0 auto;
}

.khk-no-results-content {
/*  display: flex;*/
align-items: center;
flex-wrap: wrap; /* permet le retour à la ligne si ça dépasse */
gap: 6px; /* petit espace entre les éléments */
}

.khk-no-results-content img {
	width: 24px;
	height: 24px;
}

.khk-no-results-name {
	font-weight: bold;
	color: rgb(255, 127, 80);
	margin-left: 4px;
}

.khk-no-results-text {
	color: black;
}

.khk-no-results {
	transition: transform 0.25s ease;
	transform-origin: center center;
	display: block;
	user-select: none;          /* empêche la sélection de texte */
	-webkit-user-select: none;  /* compatibilité Safari iOS */
	-ms-user-select: none;      /* compatibilité IE/Edge ancien */
}
.khk-no-results.khk-clicked {
	transform: scaleX(1.05) scaleY(0.95);
}

/* Fallback confetti (quand la lib n'est pas dispo) */
.khk-confetti {
	position: fixed;
	width: 6px;
	height: 10px;
	pointer-events: none;
	opacity: 0.9;
	transform: translate(-50%, -50%);
	animation: khk-pop 700ms ease-out forwards;
}
@keyframes khk-pop {
	0%   { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translate(-50%, -50%) translateY(-80px) rotate(240deg); opacity: 0; }
}

/* Respecte les préférences utilisateurs */
@media (prefers-reduced-motion: reduce) {
	.khk-no-results { transition: none; }
	.khk-no-results.khk-clicked { transform: none; }
}

/* Le <li> sert d'ancre pour le badge */
.has-khrg-update { position: relative; }

/* Désactive tout badge éventuel sur <a> (si présent par l'ancien CSS) */
.has-khrg-update > a[data-khrg-count]::after {
  content: none !important;
}

/* Badge rendu exclusivement depuis le <li> (niveau 1, 2, 3, …) */
.has-khrg-update[data-khrg-count]::after,
.wp-block-navigation-item.has-khrg-update[data-khrg-count]::after {
  content: attr(data-khrg-count);
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.35em;
  border-radius: 3px;         /* carré coins arrondis */
  background: #ff3b30;
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.2em;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
  z-index: 2;                 /* au-dessus des caret/flèches du thème */
}

/* Assure la visibilité si le thème clippe le lien */
.has-khrg-update > a { overflow: visible; }

.kstats-ticks-left{
	  float: left !important;
    padding: 3px;
    background: #d79e9e;
    border-radius: 5px;
    font-size: 0.78em;
    color: #1b1b1b;
    font-weight: bold;
}

.kstats-ticks-right{
	  float: right !important;
    padding: 3px;
    background: #9ecd9f;
    border-radius: 5px;
    font-size: 0.78em;
    color: #1b1b1b;
    font-weight: bold;
}

.khk-search-wrap { position: relative; }
.khk-clear {
	position: absolute;
	right: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* — Minimal, discret — */
.khk-info[hidden]{ display:none !important; }

.khk-info{
	align-items:flex-start;
	gap:.5rem;
	padding:0;                 /* pas de fond, pas de bordure */
	margin:.5rem 0 0;
	font-size:.92rem;
	line-height:1.35;
	color: var(--khk-info-fg, #9ca3af); /* gris doux */
}

/* léger espace quand placé juste après les options */
.khk-fieldset .khk-options + .khk-info{ margin-top:.5rem; }

/* — Variante (optionnelle) : carte très légère — */
/* Ajoute .khk-info--card à l’élément si tu veux un fond très subtil */
.khk-info.khk-info--card{
	padding:.5rem .625rem;
	border-radius:6px;
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.08);
	border-left: 3px solid;
	border-right: 3px solid;
}

.khl-visual {
	display: grid;
	place-items: center;
	margin: 8px 0 12px;
	min-height: 160px;
}
.khl-img {
	max-width: min(100%, 500px);
	height: auto;
	border-radius: 10px;
	box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

.khl-empty-message {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,.10);
	background: linear-gradient(#ffffff, #fbfbfb);
	color: #333;
	border-radius: 10px;
	font-size: .95rem;
	gap: .35em;
	align-items: center;
}
.khl-empty-message strong { font-weight: 700; }

/* Feedback PRG */
.khl-feedback {
	margin: 8px 0 12px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: .95rem;
}
.khl-feedback.khl-ok {
	background: #f0fff4;
	border: 1px solid #c6f6d5;
	color: #22543d;
}
.khl-feedback.khl-err {
	background: #fff5f5;
	border: 1px solid #fed7d7;
	color: #742a2a;
}

.khl-credit {
	display: block;
	margin-top: 6px;
	text-align: center;
	color: #666;
}
.khl-shortcode { margin-top: 10px; text-align: center; }

/* Modale (styles propres à la modale uniquement) */
.khl-modal { display: none; }
.khl-modal[aria-hidden="false"] {
	display: block;
	position: fixed; inset: 0; z-index: 9999;
}
.khl-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.45);
}
.khl-modal__dialog {
	position: absolute; inset: 0;
	margin: auto; width: min(520px, 92vw);
	background: #b15050; border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,.2);
	height: fit-content;
	top: 15%;
}
.khl-modal__title {
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center;
}
.khl-modal__actions {
	display: grid; gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.khl-btn {
	border-radius: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,.12);
	cursor: pointer;
}
.khl-btn--danger {
	border-color: rgba(220, 53, 69, .35);
}
.khl-btn--danger:hover { background: #ffe6e8; color:green }
.khl-btn--ghost:hover { background: #f6f6f6; color:red }

#lightbox img{
	max-height: 80% !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
}

.moins-de-14{
	color: #d32020!important;
  font-weight: bold;
}

.img_meche_normale img:hover,
.img_meche_khibrille img:hover{
	transform: rotateY(1turn);
	transition: transform 0.5s;
}

.rune_block{
	display: inline-block;
	width: 33%;
	float: left;
	margin-bottom: 15px;
}

.inside_rune{
	display:inline-block;
	float: left;
}
.runeimg{
	width: 25%;
}
.runeinfo{
	width: 75%;
	padding-left:8px;
}

.runetitre{
	font-weight: bold;
}

.runedesc, .userniveau{
	font-size: 0.8em;
	font-style: italic;
}

.runeimg img{
	opacity: 0.6;
}
.runeimg img.runecheck{
	opacity: 1;
}

.runebronze i{
	color: #8e5025;
}
.runeargent i{
	color: #7a7c84;
}
.runeor i{
	color: #c6af2a;
}
.runeplat i{
	color: #3ea5c1;
}

.blocuser{
	display:inline-block;
	width: 100%;
	float: left;
}
.blocinsiduser{
	display: inline-block;
	float: left;
	position: relative;
	width: 100%;
}
.avataruser{
	width: 55px;
	height: 55px;
}
.infouser{
	width: calc(100% - 55px);
	padding-left:15px;
}
.avataruser img{
	border-radius: 100px;
	border: 5px solid #e9e9e9;
	position: absolute;
	max-width: 60px; 
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.userpseudo{
	font-weight: bold;
}
.iconuser{
	display: inline-block;
	float: left;
	padding: 0 8px;
}
.lvl{
	border-right: 1px solid;
}

.gen2{
	border-left: 1px solid;
}

.lvl{
	padding-left: 0;
}
.gen2{
	padding-right: 0;
}
.ekhmax{
	color: #d41f1f;
}
.ekh, .ekhmax{
	font-weight: normal;
	font-size: 0.8em;
}

.displayside,
.displaymenus{
	display: none;
	position: fixed;
	right: 50px;
	background: rgba(0, 0, 0, 0.8);
	width: 61px;
	padding: 17px 7px;
	text-align: center;
	border-radius: 100px;
}

.displayside{
	bottom: 50px;
}

.displaymenus{
	bottom: 120px;
}

td.firstrank{
	position: relative;
}

td.firstrank .fa-web-awesome{
	position: absolute;
	font-size: 0.6em;
	color: #bbbbbb;
	top: 2px;
	left: 0;
	Z-INDEX: 1;
	transform: rotate(-45deg);
}

i.rank2{
	position: absolute;
	color: #bbbbbb;
	z-index: 1;
	transform: rotate(-45deg);
	left: -10px;
	top: -10px;
}

td.infokhuser,
td.infokhmeche{
	padding-left: 40px;
}
td.infokhuser img{
	position: absolute;
	width: 25px;
	border-radius: 50px;
	border: 2px solid;
	transform: translateX(-32px);
}
td.infokhmeche img{
	position: absolute;
	width: 25px;
	border-radius: 3px;
	border: 2px solid #212121;
	transform: translateX(-32px);
}
.pseudo.infokhuser{
	padding-left: 23px;
}
.pseudo.infokhuser img{
	position: absolute;
	width: 20px;
	border-radius: 50px;
	border: 2px solid;
	transform: translate(-23px, 4px);
}

.noname{
	font-style: italic;
	font-weight: 200;
}

th{
	text-align: left;
}

th.order{
	width: 50px;
}

tr:nth-child(odd){
	background: rgba(0,0,0,0.2);
}
tr.tablebody:hover{
	background: #efefef;
	color: black;
}

.bsection.sectiontlmmobile{
	display: none;
}

.rank-dropdown {
	font-size: 0.9em;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.rank-dropdown.open {
	max-height: 300px; /* Ajuste selon le contenu max estimé */
}
.rank-dropdown ul{
	margin: 0;
}

.chevron {
	display: inline-block;
	transition: transform 0.3s ease;
}

.rank-toggle.open .chevron {
	transform: rotate(180deg);
}

#colnbr:after{
	content: "Khapture";
}
#colrar:after{
	content: "Rareté";
}
#colgen:after{
	content: "Génération";
}
#colprog:after{
	content: "Progression";
}
#colkhapt:before{
	content: "Khapture ";
}

.indicerevele9:after{
	content: "Le code konami... TAPE LE CODE KONAMI ! Et commence ton aventure !";
}
.indicerevele11:after{
	content: "As-tu essayé, à tout hasard… de cliquer 206 fois sur l’inconnu ?";
}

.icon-svg {
	width: 1em;
	height: 1em;
	display: inline-block;
	fill: currentColor;
	vertical-align: inherit;
}


.tag{
	font-size: 0.7em;
	font-weight: 100;
	background: #706e6e;
	padding: 5px 7px;
	display: inline-block;
	margin-bottom: 3px;
	margin-right: 3px;
}

.tag:last-child(){
	margin-right: 0;
}

.level-display {
	margin-bottom: 5px;
	font-weight: bold;
	display: inline-block;
	width: 86px;
}

.trophdis {
	margin-bottom: 5px;
	font-weight: bold;
	display: inline-block;
	width: 150px;
}

.progress-bar-container {
	display: inline-block;
	width: calc(100% - 91px);
	height: 24px;
	background-color: #ddd;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
	padding: 4px 5px 0;
	vertical-align: middle;
}

.trophee .progress-bar-container{
	width: calc(100% - 155px);
}

.progress-bar {
	height: 80%;
	width: 0;
	background: linear-gradient(90deg, #ff9800, #9c27b0);
	border-radius: 10px;
	transition: width 1s ease;
}

.progress-circle {
	width: 200px;
	height: 200px;
	position: relative;
}

.circular-chart {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* start at top */
}

.circle-bg {
	fill: none;
	stroke: #ddd;
	stroke-width: 5;
}

.circle {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dasharray 1s ease;
}

.mechpref{
	margin-top: 15px;
}

.datapref{
	display: inline-block;
	padding-left: 15px;
	vertical-align: top;
	padding-top: 10px;
}

.infopref{
	margin-bottom: 5px;
}

.ppuser{
	display: inline-block;
	width: 20%;
	vertical-align: top;
}

.ppuser > img{
	width: 100%;
	border-radius: 250px;
	border: 5px solid;
}

.datauser{
	display: inline-block;
	width: 79%;
	padding: 0 0 0 20px;
}

.pseudo h4{
	margin-bottom: 0;
}

.ekhlat_val{
	position: absolute;
	z-index: 1;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.2em;
	font-weight: bold;
	line-height: 12px;
}

.ekhlat_val .icon-svg{
	vertical-align: middle;
}

.ekhlat, .btn-echange{
	display: inline-block;
	float: left;
}

.echangeok:hover{
	cursor: pointer;
}

.btn-echange{
	padding: 15px;
	border-radius: 10px;
	margin-top: 55px;
	margin-left: 20px;
	background: #818582;
}

#mechesec:active {
	transform: scale(0.95);
	transition: transform 0.1s;
}

#mechesec.btn-echange{
	margin-top: 10px;
	margin-left: 0;
}

#mechesec:hover{
	cursor: pointer;
}


.echangedisabled{
	background: grey;
}

.bsection{
	display: inline-block;
	width: 100%;
}

.section{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dashed;
	display: inline-block;
	width: 100%;
}

.lastrune img{
	width: 22px;
	vertical-align: sub;
}

.rune{
	display: inline-block;
	float: left;
	width: 19%;
	padding: 15px;
	position: relative;
}

.rune .progress-circle{
	width: 100%;
	height: 100%;
}

.nbr_rune .nb,
.nbr_rune .ic{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.nb{
	font-size: 3em;
	text-align: center;
	font-weight: bold;
	line-height: 33px;
	-webkit-text-stroke: 2px #353535;
	z-index: 2;
}

.nb small,
.stattxt small{
	font-size: 50%;
}
.ic{
	font-size: 5em;
	z-index: 1;
}

.rbronze .circle-bg{
	stroke: #8e5025 ;
}
.rbronze .icon-svg{
	fill: #8e5025 ;
}

.rargent .circle-bg{
	stroke: #7a7c84 ;
}
.rargent .icon-svg{
	fill: #7a7c84 ;
}

.ror .circle-bg{
	stroke: #c6af2a ;
}
.ror .icon-svg{
	fill: #c6af2a ;
}

.rplatine .circle-bg{
	stroke: #3ea5c1 ;
}
.rplatine .icon-svg{
	fill: #3ea5c1 ;
}

.card{
	display: inline-block;
	float: left;
	width: 50px;
}

.card img{
	border-radius: 5px;
}

.secret_txt{
	display: inline-block;
	float: left;
	padding-top: 17px;
	padding-left: 10px;
	width: calc(100% - 50px);
	font-style: italic;
	font-size: 75%;
}

.card_txt{
	display: inline-block;
	float: left;
	padding-left: 10px;
	width: calc(100% - 50px);
}

.card_txt .tag{
	margin: 3px;
}

.statglob{
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	padding: 0 50px;
}

.statglob .progress-circle{
	width: 100%;
}

.stattxt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 3em;
	font-weight: bold;
	line-height: 0.7em;
}

/* === Modal image (full page) — avec animation === */
.modal-image-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: flex;                 /* on garde en flux pour pouvoir animer */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 99999;

  /* Animation d’apparition/disparition */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.modal-image-overlay[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease;
}
.modal-image-overlay img{
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  user-select: none;

  /* Animation du visuel */
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: transform .25s ease, opacity .25s ease;
}
.modal-image-overlay[aria-hidden="false"] img{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Fermer en cliquant "à côté" : curseur évocateur */
.modal-image-overlay{ cursor: zoom-out; }
.modal-image-overlay img{ cursor: default; }

/* Respecte la préférence d’accessibilité */
@media (prefers-reduced-motion: reduce){
  .modal-image-overlay,
  .modal-image-overlay img{
    transition: none;
  }
}


/* ===== Active trail : met en gras la page courante + ses ancêtres ===== */
/* Niveau 1 */
.sm-level-1 > li.current-menu-item > .sm-link,
.sm-level-1 > li.current-menu-ancestor > .sm-label,
.sm-level-1 > li.current-menu-parent > .sm-label {
	font-weight: 700;
}

/* Niveau 2 (dans le sous-menu de niveau 2) */
.sm-sub.sm-level-2 > li.current-menu-item > .sm-link,
.sm-sub.sm-level-2 > li.current-menu-ancestor > .sm-label,
.sm-sub.sm-level-2 > li.current-menu-parent > .sm-label {
	font-weight: 700;
}

/* Niveau 3 (l’élément réellement courant) */
.sm-sub.sm-level-3 > li.current-menu-item > .sm-link {
	font-weight: 700;
}


.meche-toast-container {
	position: fixed;
	top: 130px;
	left: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none; /* laisser clics au toast */
}

.meche-toast {
	position: relative;
	left: -600px;
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	max-width: 90vw;
	width: 500px;
	opacity: 0;
	transition: all 0.6s ease;
	pointer-events: auto; /* pour cliquer sur le toast */
	cursor: pointer;
	top: 0;
}

.meche-toast.show {
	left: 0;
	opacity: 1;
}

.meche-toast.fadeout {
	top: 300px;
	left: 0;
	opacity: 0;
}

.toast-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.toast-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	border: 2px solid #fff;
}

.toast-text {
	flex: 1;
	text-align: left;
	padding: 12px 16px;
	border-radius: 14px;
	background: grey;
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.indice_txt{
	display: inline-block;
	float: left;
	clear: both;
}

ol.indices-devoiles li.indice-cache {
	font-family: monospace;
	color: #dddddd;
	border-right: 2px solid #dddddd;
	overflow: hidden;
	width: fit-content;
	animation: blink 0.8s steps(1) infinite;
	margin-left: -18px;
	margin-top: 20px;
}

@keyframes blink {
	50% { border-color: transparent; }
}

select#secret_id{
	width: auto;
	font-size: 0.8em;
	height: 30px;
	padding: 2px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select{
	width: 100%;
	border-radius: 5px;
	background: white;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus{
	width: 100%;
	border-radius: 5px;
	background: #e9e9e9;
}

.is-full span{
	background-color: #4caf50!important;
}

.explication-content{
	background: grey;
	padding: 5px;
	border-bottom: 2px solid;
	width: fit-content;
}

.fa-lightbulb:hover{
	color: #d9ca57 ;
}

td.tooltip-icon{
	display: inline-block;
	width: 100%;
}

.tooltip-icon {
	position: relative;
}

.tooltip-icon::after {
	content: attr(data-tooltip);
	text-transform: none;
	font-style: italic;
	position: absolute;
	bottom: 75%; /* au-dessus de l'icône */
	left: 0;
	background-color: #111;
	color: #fff;
	padding: 6px 10px;
	border-radius: 5px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	font-size: 12px;
	z-index: 10;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 400;
}

.tooltip-icon:hover::after,
.tooltip-icon:focus::after {
	opacity: 1;
}
.tooltip-icon:hover,
.tooltip-icon:focus {
	cursor: help;
}



@media only screen and (max-width: 1200px) {
	.meche_block {
		width: 24%;
	}
}

@media only screen and (max-width: 960px) {
	.meche_block {
		width: 32%;
	}
	.rune_block{
		width: 49%;
	}
	.progress-circle {
		width: 160px;
		height: 160px;
		position: relative;
	}
	.ic .icon-svg{
		width: 0.6em;
	}
	.statglob{
		padding: 0 10px;
	}
	.nb{
		font-size: 2.5em;
		line-height: 19px;
	}
	.btn-echange{
		float: right;
		width: calc(100% - 160px);
		margin-left: 0;
	}
}

.table-card{ width:100%; table-layout:fixed; }
.table-card td:nth-child(1), .table-card th:nth-child(1){ width:2.9rem; }
.table-card td:nth-child(3), .table-card th:nth-child(3){ width:5rem; }
.table-card td:nth-child(2), .table-card th:nth-child(2){
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


@media screen and (min-width: 768px) {
	.mobile-easter-trigger {
		display: none !important;
	}
}

@media only screen and (max-width: 768px) {
	.meche_block {
		width: 49%;
	}
	.inside-right-sidebar{
		padding-top: 39px;
	}
	/*#right-sidebar{
		display: inline-block;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left:25%;
		background: rgba(0, 0, 0, 0.8);
		overflow: scroll;
		padding: 0px 25px;
		z-index: 20;
		transform: translateX(100%);
		-webkit-transition: transform 0.2s linear;
		-moz-transition: transform 0.2s linear;
		-o-transition: transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	#right-sidebar.sidebar_isvisible{
		transform: translateX(0);
		-webkit-transition: transform 0.2s linear;
		-moz-transition: transform 0.2s linear;
		-o-transition: transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	.displayside,
	.displaymenus{
		display: inline-block;
		z-index:30;
	}
	.menu{
		position: absolute;
		left: 0;
		top: 90%;
		width: 100%;
		height: 30px;
		transform: translateY(-50%);
	}
	ul.sub-menu{
		position: fixed;
		top: 0;
		transform: translateY(-100%);
		text-align: right;
		right: 0;
		left: 0;
		padding: 5px 20px;
		background: rgb(43 43 43);
		width: 100%;
		-webkit-transition: transform 0.2s linear;
		-moz-transition: transform 0.2s linear;
		-o-transition: transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	ul.displaymenu{
		transform: translateY(35px);
		-webkit-transition: transform 0.2s linear;
		-moz-transition: transform 0.2s linear;
		-o-transition: transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	ul.sub-menu > .menu-item{
		width: 100%!important;
	}
	#menu-main-menu{
		background: #181818;		
	}
	.menu li {
		width: 44%;
		text-align: center;
	}
	.inside-header{
		height: 87px;
	}*/
	.rune{
		width: 33%;
	}
	.table-card, .table-card thead, .table-card tbody, .table-card th, .table-card td, .table-card tr {
		display: block;
		width: 100%;
	}

	.table-card thead {
		display: none;
	}

	.table-card tr {
		background: var(--bg);
		border: var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		margin: 0 0 10px;
	}

	.table-card td {
		border: none;
		position: relative;
		padding: 6px 10px;
		font-size: 0.9rem;
	}

	.table-card .tablebody{
		border-bottom: 1px dashed;
	}

	.table-card .tablebody:last-child {
		border-bottom: none;
	}

	.table-card td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--muted);
		font-size: 0.85rem;
		padding-right: 5px;
	}
	.table-card tbody tr:nth-child(1){
		display: none;
	}
	.table-card td.infokhuser img{
		transform: translate(0);
	}
	.table-card td.infokhuser span{
		padding-left: 28px;
	}
	.table-card td:nth-child(1), .table-card th:nth-child(1){ width:100%; }
	.table-card td:nth-child(3), .table-card th:nth-child(3){ width:100%; }
	.table-card td:nth-child(2), .table-card th:nth-child(2){
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}
}
@media only screen and (max-width: 472px) {
	.rune_block {
		width: 99%;
	}
	#colnbr:after{
		content: "Khap.";
	}
	#colrar:after{
		content: "Rar.";
	}
	#colgen:after{
		content: "Gén.";
	}
	#colprog:after{
		content: "Prog.";
	}
	#colkhapt:before{
		content: "";
	}
	.ppuser{
		display: none;
	}
	.progress-circle{
		width: 110px;
		height: 110px;
	}
	.datauser{
		width: 100%;
	}
	.btn-echange{
		width: 70%;
		margin: 0;
	}
	.ekhlat{
		width: 29%;
	}
	.ekhlat_val{
		font-size: 1em;
	}
	.rune{
		width: 50%;
	}
	.nb {
		font-size: 4em;
		line-height: 28px;
	}
	.ic {
		font-size: 8em;
	}
}

@media only screen and (max-width: 450px) {
	.meche_block {
		width: 99%;
	}
}

@keyframes bougeUpDown {
	0% { transform: translateX(-50%) translateY(0); }
	100% { transform: translateX(-50%) translateY(3px); }
}

#menu-main-menu > li > a i{
	display: none;
}