@import url(themes.css);
/* ===== Animation  ===== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideInOut {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeInTranslate {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
	from { 
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to { 
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@keyframes slideUpNotif {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
 @keyframes redGlow {
	0%, 100% {
		filter: drop-shadow(0 0 2px var(--primary)) drop-shadow(0 0 5px var(--primary-dark));
	}
	50% {
		filter: drop-shadow(0 0 10px var(--primary)) drop-shadow(0 0 15px var(--primary-darker));
	}
}
@keyframes primaryFlicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
		filter: drop-shadow(0 0 4px var(--primary))
            drop-shadow(0 0 10px var(--primary-dark))
            brightness(1);
		opacity: 1;
	}
	20%, 24%, 55% {
		filter: none;
		opacity: 0.3;
	}
}
@keyframes sheenMove {
	0% { transform: translateY(150%); opacity: 0; }
	10% { opacity: 0.9; }
	50% { transform: translateY(-150%); opacity: 0.9; }
	60% { opacity: 0; }
	100% { transform: translateY(-150%); opacity: 0; }
}
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
@keyframes pulseOpa {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes pulseOpacity {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.05); opacity: 0.6; }
}
@keyframes redGlowPulse {
	0%, 100% {
		filter: drop-shadow(0 0 5px var(--primary))
			drop-shadow(0 0 10px var(--primary-dark));
	}
	50% {
		filter: drop-shadow(0 0 15px var(--primary))
            drop-shadow(0 0 30px var(--primary-dark));
	}
}
@keyframes greenGlowPulse {
	0%, 100% {
		filter: drop-shadow(0 0 5px var(--success))
			drop-shadow(0 0 10px var(--success-dark));
	}
	50% {
		filter: drop-shadow(0 0 15px var(--success))
            drop-shadow(0 0 30px var(--success-dark));
	}
}
@keyframes hourglass-frame-1 {
	0% { opacity: 1; }
	20% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes hourglass-frame-2 {
	0% { opacity: 0; }
	20% { opacity: 1; }
	38% { opacity: 0; }
}
@keyframes hourglass-frame-3 {
	0% { opacity: 0; }
	38% { opacity: 1; }
	48% { opacity: 0; }
}
@keyframes hourglass-frame-4 {
	0% { opacity: 0; }
	48% { opacity: 1; }
	64% { opacity: 0; }
}
@keyframes hourglass-frame-5 {
	0% { opacity: 0; }
	64% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes hourglass-rotate {
	0% { transform: rotate(0deg); }
	85% { transform: rotate(0deg); }
	95% { transform: rotate(180deg); } /* Rotation rapide */
	100% { transform: rotate(180deg); }
}
@keyframes hourglass-frame-5-pulse {
	64% { opacity: 1; transform: scale(1); }
	72% { opacity: 1; transform: scale(1); }
	80% { opacity: 1; transform: scale(1); }
	85% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes diceShake {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-2px, 2px) rotate(-5deg); }
	50% { transform: translate(2px, -2px) rotate(5deg); }
	75% { transform: translate(-2px, -2px) rotate(-5deg); }
}
@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@keyframes starPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
@keyframes boss-pulse {
    0% { box-shadow: 0 0 5px var(--color-purple); transform: scale(1); }
    50% { box-shadow: 0 0 20px var(--color-purple); transform: scale(1.05); }
    100% { box-shadow: 0 0 5px var(--color-purple); transform: scale(1); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes msgIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes dm-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px) rotate(-5deg); }
    75%      { transform: translateX(4px) rotate(5deg); }
}

/* ========================================
   MAIN
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; }
html { overflow-x: hidden; }
body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-main) 50%, var(--bg-really-dark) 100%);
	color: var(--text-primary);
	min-height: 100vh;
	overflow-x: hidden;
}
.menu-open .body-second {
	position: fixed;
	width: 100%;
}
header {
	background: color-mix(in srgb, var(--bg-really-dark) 50%, transparent);
	border-bottom: 2px solid var(--border-primary);
	padding: 1rem 2rem;
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(10px);
}
ul, ol { line-height: 2; margin-left: 2rem; color: inherit; }

hr {
	margin: 2rem 0;
	border-color: var(--border-primary);
}

.icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ========================================
   MEGA MENU NAVIGATION
   ======================================== */
.header-container {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	position: relative;
}
.logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--primary);
	font-size: 1.8rem;
	font-weight: bold;
	text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 50%, transparent);
}
.img-logo-top {
	width: 50px;
	height: auto;
	transition: 0.3s ease;
}
.logo-title {
	width: auto;
	height: 30px;
	transition: 0.3s ease;
}

.logo-title:hover, .img-logo-top:hover {
	-webkit-filter: drop-shadow(0.25rem 0.25rem 1rem color-mix(in srgb, var(--primary-darker) 60%, transparent));
	filter: drop-shadow(0.25rem 0.25rem 1rem color-mix(in srgb, var(--primary-darker) 60%, transparent));
}

.burger-menu {
	display: none;
	background: transparent;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: 0.3s;
}

.burger-menu:hover {
	color: var(--primary);
}

.burger-menu.active {
	color: var(--primary);
}

.home-menu-btn, .admin-menu-btn { display: none; }

/* Navigation principale */
.main-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex: 1;
}

.nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	flex: 1;
}

/* Nav Items */
.nav-item {
	position: relative;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	color: var(--text-link);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 0.3s;
	font-weight: bold;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	white-space: nowrap;
}

.nav-link:hover {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.nav-link.active {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	border: 1px solid var(--border-primary);
}

/* Bouton JDR spécial */
.nav-link.btn-jdr {
	background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
	border: 1px solid var(--primary);
	box-shadow: 0 4px 6px color-mix(in srgb, var(--primary-dark) 30%, transparent);
}

.nav-link.btn-jdr:hover {
	background: linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-hover-dark) 100%);
	box-shadow: 0 6px 12px color-mix(in srgb, var(--primary-dark) 50%, transparent);
}

/* Bouton JDR spécial */
.nav-link.admin-btn {
	background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
	color: var(--text-primary);
	border: 1px solid var(--warning);
	box-shadow: 0 4px 6px color-mix(in srgb, var(--warning) 30%, transparent);
}

.nav-link.admin-btn:hover {
	background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning) 100%);
	box-shadow: 0 6px 12px color-mix(in srgb, var(--warning) 50%, transparent);
}

/* Submenu toggle */
.submenu-toggle {
	cursor: pointer;
}

.submenu-arrow {
	transition: transform 0.3s;
	opacity: 0.7;
	margin-left: 0;
}

.nav-item.has-submenu.open .submenu-arrow {
	transform: rotate(180deg);
}

/* ========================================
   MEGA MENU
   ======================================== */
.mega-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: 1rem;
	box-shadow: 0 10px 40px color-mix(in srgb, var(--black) 50%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-10px);
	transition: all 0.3s;
	z-index: 1000;
	min-width: 600px;
	padding: 1.5rem;
}

.nav-item.has-submenu.open .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
}

.mega-menu-column h3 {
	color: var(--primary);
	font-size: 0.875rem;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--border-primary);
}

.mega-menu-column a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--text-tertiary);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: 0.2s;
	font-size: 0.9rem;
}

.mega-menu-column a:hover {
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	color: var(--primary);
	padding-left: 1rem;
}

/* ========================================
   SUBMENU SIMPLE
   ======================================== */
.submenu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	border-radius: 0.75rem;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 50%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s;
	z-index: 1000;
	min-width: 200px;
	padding: 0.5rem;
}

.nav-item.has-submenu.open .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.submenu-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	color: var(--text-tertiary);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: 0.2s;
	white-space: nowrap;
}

.submenu-link:hover {
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	color: var(--primary);
}

/* ========================================
   NAVIGATION ACTION
   ======================================== */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.auth-button a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--btn-clear);
	color: var(--text-primary);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: 0.3s;
	font-weight: bold;
}

.auth-display-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 25ch;
}

.auth-button a:hover {
	background: var(--btn-clear-hover);
	color: var(--text-primary);
}

nav ul {
	list-style: none;
	display: flex;
	gap: 2rem;
	align-items: center;
	margin: 0;
	line-height: normal;
}

.nav-lang {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
nav a {
	color: var(--text-link);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	transition: all 0.3s;
	font-weight: bold;
}
nav a:hover {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 20%, transparent);
}
nav a.active {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	border: 1px solid var(--border-primary);
}

.lang-selector {
    position: relative;
    display: inline-block;
}

/* Bouton principal */
.lang-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
    color: var(--primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.lang-button:hover {
    background: color-mix(in srgb, var(--primary-dark) 10%, transparent);
    border-color: var(--primary);
}

/* Icône drapeau */
.flag-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-primary);
}

/* Flèche */
.arrow {
    transition: transform 0.3s;
    opacity: 0.7;
}

.lang-button.active .arrow {
    transform: rotate(180deg);
}

/* Menu déroulant */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--black) 30%, transparent);
	backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
    z-index: 1000;
    min-width: 50px;
}

.lang-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Options */
.lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.lang-option:hover {
    background: color-mix(in srgb, var(--primary-dark) 10%, transparent);
}

.lang-option:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.lang-option:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.lang-option span {
    font-weight: bold;
}

.tooltip {
	position: relative;
	text-decoration: underline 2px dotted var(--border-primary);
	cursor: pointer;
}
.tooltiptext {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s ease;
	pointer-events: none;
	z-index: 100;
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 2px solid var(--primary);
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	min-width: 200px;
	max-width: 300px;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 50%, transparent);
	font-size: 0.75rem;
	color: var(--text-tertiary);
	line-height: 1.4;
	font-style: italic;
	text-align: center;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, -6px);
}

.btn-jdr {
	background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
	color: var(--text-btn) !important;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	font-weight: bold;
	border: 1px solid var(--primary);
	box-shadow: 0 4px 6px color-mix(in srgb, var(--primary-dark) 30%, transparent);
}
.btn-jdr:hover {
	background: linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-hover-dark) 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 12px color-mix(in srgb, var(--primary-dark) 50%, transparent);
}

.gen-button {
	display: inline-block;
	background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
	color: var(--text-primary);
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.5rem;
	border: 2px solid var(--primary);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-dark) 50%, transparent);
	transition: all 0.3s;
}
.gen-button:hover {
	box-shadow: 0 0 20px color-mix(in srgb, var(--primary-dark) 70%, transparent);
}

label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: bold;
	color: var(--text-tertiary);
}

input, select {
	width: 100%;
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: var(--bg-card-blue);
	color: var(--text-primary);
	transition: 0.2s;
}
input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
}

textarea {
	width: 100%;
	min-height: 150px;
	padding: 0.75rem;
	border-radius: 0.5rem;
	background: var(--bg-card-blue);
	color: var(--text-primary);
	border: 1px solid var(--border-light);
	resize: vertical;
}
textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
}

/* Chrome, Edge, Safari */
.number-input::-webkit-inner-spin-button,
.number-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.select-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Firefox */
.number-input {
	-moz-appearance: textfield;
}
.select-input::-ms-expand {
  display: none;
}

.number-wrap,
.number-wrap * {
	user-select: none;         /* Empêche la sélection */
	-webkit-user-select: none; /* Safari/Chrome */
	-ms-user-select: none;     /* Edge */
}

.number-wrap {
	position: relative;
}

.btn-up, .btn-down {
	position: absolute;
	right: 0.85em;
	width: 0.6em;
	height: 0.4em;
	background: var(--text-primary);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	cursor: pointer;
	transition: 0.3s ease;
}

.btn-up { top: 0.7em; }
.btn-down { bottom: 0.7em; transform: rotate(180deg); }

.btn-up:hover,
.btn-down:hover {
	background: var(--primary);
}
.btn-up:focus,
.btn-down:focus {
	outline: none;
}

.select-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
}

.select-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 0.6em;
	height: 0.4em;
	background: var(--text-primary);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	transform: translateY(-50%) rotate(0deg);
	pointer-events: none;
	transition: 0.3s ease;
}
.select-wrap.is-open .select-arrow {
	transform: translateY(-50%) rotate(180deg);
	background: var(--primary); /* optionnel */
}

.notfound-page .notfound-block {
	background: color-mix(in srgb, var(--primary-dark) 20%, transparent);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	text-align: center;
	color: var(--color-tertiary);
}
.notfound-page .notfound-block img { max-width: 300px; width: 100%; height: auto; }
.notfound-page .gen-button { margin-top: 1rem; }

.error { color: var(--danger) }
.error-border { border: 2px solid var(--danger) }
.error-input { font-size: 0.75rem; color: var(--danger); font-weight: bold; margin-top: 0.25em; }

.footer {
	background: color-mix(in srgb, var(--bg-really-dark) 50%, transparent);
	border-top: 2px solid var(--border-primary);
	padding: 2rem;
	text-align: center;
	backdrop-filter: blur(10px);
}

.footer a {
	color: inherit;
	text-decoration: none;
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Réseaux sociaux */
.footer-social {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	align-items: center;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: color-mix(in srgb, var(--primary-dark) 20%, transparent);
	border: 1px solid var(--border-primary);
	border-radius: 50%;
	color: var(--text-primary);
	transition: all 0.3s ease;
}

.social-link:hover {
	background: var(--primary-dark);
	color: var(--primary);
	border-color: var(--primary);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 50%, transparent);
}

.social-link svg {
	width: 35px;
	height: 35px;
	transition: transform 0.3s ease;
}

.social-link:hover svg {
	transform: scale(1.1);
}

/* Copyright */
.footer-content .copyright,
.footer-content .footer-links {
	color: var(--text-secondary);
	font-size: 0.95rem;
	margin: 0;
}

.copyright a, .footer-links a {
	color: var(--primary);
	font-weight: bold;
	transition: color 0.3s ease;
}

.copyright a:hover, .footer-links a:hover {
	color: var(--primary-light);
}

/* Tagline */
.footer .footer-text {
	color: var(--text-muted);
	font-size: 0.875rem;
	font-style: italic;
	margin: 0;
}

/* Liens légaux */
.footer-legal {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0.875rem;
}

.footer-legal a {
	color: var(--text-link);
	font-weight: bold;
	padding: 0.25rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

.footer-legal a:hover {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 10%, transparent);
	border-color: var(--border-primary);
}

.footer-legal .separator {
	color: var(--text-muted);
	user-select: none;
}

/* ========================================
   BASE
   ======================================== */
.page-content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem;
	min-height: calc(100vh - 13em);
}

.subtitle { color: var(--text-muted); }

.page-content h1 {
	color: var(--primary);
	font-size: 3rem;
	margin-bottom: 2rem;
	text-align: center;
	filter: drop-shadow(0.25rem 0.25rem 1rem color-mix(in srgb, var(--primary-darker) 80%, transparent));
}

.general-card {
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	backdrop-filter: blur(10px);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	margin-bottom: 2rem;
	min-width: 365px;
	color: var(--text-primary);
}

.general-card h2, .general-card h3, .general-card h4 {
	color: var(--primary);
	font-size: 2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--border-primary);
	padding-bottom: 0.5rem;
}

.general-card h3 { font-size: 1.5rem; }
.general-card h4 { font-size: 1.125rem; border-bottom: none; }
.general-card h5 {
	color: var(--primary-light);
	margin-bottom: 0.75rem;
	font-size: 1rem;
}

.general-card p {
	line-height: 1.5;
	margin: 1rem 0;
}

.create-btn {
	background: var(--primary-dark);
	color: var(--text-btn);
	font-weight: bold;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	text-decoration: none; 
	gap: 0.5rem;
	padding: 1rem;
	width: 100%;
	font-size: 1.125rem;
	justify-content: center;
	margin-bottom: 2rem;
	transition: 0.3s ease;
}

.create-btn:hover {
	background: var(--primary);
	box-shadow: 0 0 5px var(--primary);
}

.basic-btn {
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	border: medium;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	background: var(--btn-clear);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	transition: 0.3s ease;
}

.basic-btn:hover { background: var(--btn-clear-hover); }
.basic-btn.active { background: var(--primary-dark); color: var(--text-btn); }

.chara-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1.5rem;
}

.chara-card-list .chara-card {
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	backdrop-filter: blur(10px);
	padding: 1.5rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
}

.chara-card-list .chara-card .chara-head {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1rem;
}

.chara-card-list .chara-card .chara-head img {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border-primary);
}
.chara-card-list .chara-card .chara-head a { text-decoration: none; }

/* ── Personnage décédé ──────────────────────────────── */
.chara-head--dead img {
  filter: grayscale(80%) opacity(0.65);
  border-color: color-mix(in srgb, var(--border-primary) 40%, transparent);
}

.chara-dead-icon {
	color: var(--danger);
	opacity: .5;
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
}

.chara-card-list .chara-card .chara-head h4 {
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--primary);
	margin-bottom: initial;
	padding: initial;
}

.chara-card-list .chara-card p {
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
	color: var(--text-tertiary);
}
.chara-card-list .chara-card p.chara-stats { color: var(--text-muted); }

.chara-card-list .chara-card .chara-button {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.chara-card-list .chara-card button.view-btn, .chara-card-list .chara-card a.view-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	justify-content: center;
	flex: 1;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: medium;
	font-weight: bold;
	cursor: pointer;
	background: var(--btn-clear);
	color: var(--text-primary);
	font-size: 0.875rem;
	text-decoration: none;
	text-align: center;
	transition: 0.3s ease;
}

.chara-card-list .chara-card button.del-chara {
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: medium;
	font-weight: bold;
	cursor: pointer;
	background: var(--danger-dark);
	color: var(--text-primary);
	justify-content: center;
}

.chara-card-list .chara-card button.view-btn:hover, .chara-card-list .chara-card a.view-btn:hover {
	background: var(--btn-clear-hover);
}
.chara-card-list .chara-card button.del-chara:hover { background: var(--danger); }

/* ========================================
   LOGIN PAGE
   ======================================== */
.login-container {
	min-height: calc(100vh - 13em);
	background: linear-gradient(135deg, var(--primary-darker) 0%, var(--semi-black) 50%, var(--bg-really-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.login-wrapper {
	max-width: 28rem;
	width: 100%;
}

.login-header {
	text-align: center;
	margin-bottom: 2rem;
}

.login-header-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.login-header-logo {
	height: auto;
	width: 15em;
	user-select: none;
	display: block;
}
.logo-sheen {
	position: relative;
	display: inline-block;
	overflow: hidden;
	/* masking magique */
	mask-image: url("https://undeadsurvival.org/assets/img/Undead_Survival_Logo.png");
	mask-size: cover;
	mask-repeat: no-repeat;

	/* pour Safari/Chrome */
	-webkit-mask-image: url("https://undeadsurvival.org/assets/img/Undead_Survival_Logo.png");
	-webkit-mask-size: cover;
	-webkit-mask-repeat: no-repeat;
}

/* Le faisceau de lumière */
.logo-sheen::after {
	content: "";
	position: absolute;
	inset: -100% -60% -100% -60%;
	background: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--white) 70%, transparent) 50%, transparent 60%);
	animation: sheenMove var(--sheen-speed, 3s) ease-in-out infinite;
	pointer-events: none;
	mix-blend-mode: screen;
}

.login-header-title{
	font-size: 3rem;
	font-weight: bold;
	background: linear-gradient(to right, var(--primary), var(--primary-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.login-header-subtitle {
	color: var(--text-secondary);
}

.login-card {
	background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
	backdrop-filter: blur(10px);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-dark) 30%, transparent);
}

.login-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.login-tab {
	flex: 1;
	padding: 0.75rem;
	border-radius: 0.5rem;
	background: var(--btn-clear);
	border: medium;
	font-weight: bold;
	color: var(--text-tertiary);
	cursor: pointer;
	transition: 0.2s;
}

.login-tab:hover { background: var(--btn-clear-hover); }

.login-tab.active { background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker)); }

.login-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.login-field, .competences-field {
	display: flex;
	flex-direction: column;
}

.password-wrapper {
	position: relative;
}

.password-toggle {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: bold;
}

.login-error {
	background: color-mix(in srgb, var(--primary-dark) 30%, transparent);
	border: 1px solid var(--border-primary);
	border-radius: 0.5rem;
	padding: 0.75rem;
	color: var(--primary-light);
	font-size: 0.875rem;
}

.login-submit {
	width: 100%;
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: none;
	font-weight: bold;
	cursor: pointer;
	background: var(--primary-dark);
	color: var(--text-primary);
	transition: 0.3s ease;
}

.login-submit:hover:not(:disabled) {
	background: var(--btn-hover);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-dark) 30%, transparent);
}

.login-link {
	background: transparent;
	border: none;
	color: var(--info);
	cursor: pointer;
	font-size: 0.875rem;
	text-decoration: underline;
	margin-top: 0.5rem;
}

.login-link-inline {
	background: transparent;
	border: none;
	color: var(--info);
	cursor: pointer;
	text-decoration: underline;
}

.login-link:hover, .login-link-inline:hover { color: var(--info-dark); }

.login-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
	color: var(--text-primary);
	text-align: center;
}

/* ========================================
   MAIN PAGE
   ======================================== */
.hero {
	background: linear-gradient(color-mix(in srgb, var(--black) 70%, transparent), color-mix(in srgb, var(--black) 70%, transparent)), url('/assets/img/hero-bg.png') center/cover;
	padding: 6rem 2rem;
	text-align: center;
	border-radius: 1rem;
	margin-bottom: 3rem;
	border: 2px solid var(--border-primary);
}
.hero h1 {
	font-size: 3.5rem;
	color: var(--primary);
	margin-bottom: 1rem;
	justify-content: center;
}
.hero p {
	font-size: 1.5rem;
	color: var(--text-tertiary);
	max-width: 800px;
	margin: 0 auto 2rem;
	filter: drop-shadow(0.25rem 0.25rem 0.25rem color-mix(in srgb, var(--black) 100%, transparent));
}
.cta-button {
	display: inline-block;
	background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
	color: var(--text-btn);
	cursor: pointer;
	padding: 1rem 2.5rem;
	font-size: 1.25rem;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.5rem;
	border: 2px solid var(--primary);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-dark) 50%, transparent);
	transition: all 0.3s;
}
.cta-button:hover {
	box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-dark) 70%, transparent);
}
.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 3rem 0;
}
.feature-card {
	background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	transition: all 0.3s;
}
.feature-card:hover {
	transform: translateY(-5px);
	border-color: var(--primary);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-dark) 40%, transparent);
}
.feature-card h3, .section-content h3 {
	color: var(--primary);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}
.feature-card p {
	color: var(--text-primary);
	line-height: 1.6;
}

.section-content {
	background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
	padding: 3rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	margin-top: 3rem;
}

.section-content h2, .feature-card h2,
.notfound-block h2, .no-connect h2 {
	color: var(--primary);
	font-size: 2rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.section-content p {
	color: var(--text-primary);
	line-height: 1.8;
	font-size: 1.1rem;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.section-content .text-link-small, .crea-surv-button {
	text-align: center;
	margin-top: 2rem;
}

.section-content .text-link-small a {
	color: var(--primary);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1rem;
}

/* ========================================
   CONTACT
   ======================================== */
.contact-header {
	text-align: center;
}

.contact-header h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	/* font-size: 2.5rem; */
	margin-bottom: 1rem;
}

.contact-header p {
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin: 0 auto;
}
.contact-content h2 { margin-top: 0.75rem; }
.contact-infos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.required { color: var(--danger); }

.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messages de retour */
.message {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: bold;
}

.message.msg-success {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 2px solid var(--success);
    color: var(--success);
}

.message.msg-error {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 2px solid var(--danger);
    color: var(--danger);
}

.contact-form button[type="submit"] {
    justify-content: center;
    width: 100%;
}
.spinner { animation: spin 1s linear infinite; }

.response-time {
	margin-top: 1.5rem;
	padding: 0.75rem 1.25rem;
	background: linear-gradient(135deg, color-mix(in srgb, var(--bg-really-dark) 10%, transparent), color-mix(in srgb, var(--border-primary) 10%, transparent));
	border-radius: 0.75rem;
	border-left: 4px solid var(--border-primary);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.response-time p  {
	margin: 0;
	font-size: 0.95rem;
	color: var(--text-secondary);
}

.contact-methods {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
}

.contact-method {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border-radius: 0.5rem;
	border: 2px solid var(--border-primary);
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	align-items: center;
	transition: all 0.3s ease;
}

.contact-method:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
}

a.method-link-btn { text-decoration: none; }

.method-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-darker));
    border-radius: 10px;
    color: var(--text-btn);
}

.method-content h3 {
	margin: 0 0 0.25rem 0;
	font-size: 1.1rem;
	color: var(--text-primary);
	border: none;
	padding: 0;
}

.method-content span {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 0.95rem;
	transition: color 0.2s ease;
}

/* ========================================
   MAIL / PASSWORD
   ======================================== */
.mail-content, .respass-content {
	max-width: 600px;
	margin: 4rem auto;
	text-align: center;
}
.mail-content.mail-danger h2 { color: var(--danger); }

.mail-success, .respass-success {
	border: 1px solid var(--success);
	background: var(--semi-black);
	animation: slideUp 0.5s ease;
}

.success-checkglow {
	font-size: 4rem;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
	animation: greenGlowPulse 2s ease infinite;
}

.mail-success h2, .respass-success h2 { margin-bottom: 1.5rem; color: var(--success); }
.mail-success p, .respass-success p { margin: 1rem 0; }

.success-btn {
	font-size: 1.1rem;
	background: var(--success);
	color: var(--text-primary);
	border-color: var(--success);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--success) 50%, transparent);
}
.gen-button.success-btn:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--success-dark) 70%, transparent); }

/* ========================================
   SUSPENDED
   ======================================== */
.suspended-container {
    max-width: 800px;
    margin: 4rem auto;
    padding: 2rem;
}

.suspended-card {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 2px solid var(--danger);
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
    animation: fadeInUp 0.6s ease;
}

.suspended-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    animation: pulse 2s ease-in-out infinite;
}

.suspended-card h1 {
    color: var(--danger);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.suspended-reason {
    background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
}

.suspended-reason h3 {
	color: var(--primary);
	margin-bottom: 0.75rem;
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	justify-content: center;
}

.suspended-reason p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.suspension-info {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.info-box {
    background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.info-box h4 {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.info-box .value {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: bold;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.countdown-item {
    text-align: center;
}

.countdown-value {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary);
    line-height: 1;
}

.countdown-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

.permanent-badge {
	display: flex;
	padding: 0.75rem 1.5rem;
	background: color-mix(in srgb, var(--danger) 20%, transparent);
	border: 2px solid var(--danger);
	border-radius: 0.5rem;
	color: var(--danger);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 1rem 0;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
}

.suspended-footer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.suspended-footer p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* Bannière cookies */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg, var(--bg-really-dark) 0%, var(--bg-dark) 100%);
	backdrop-filter: blur(10px);
	border-top: 2px solid var(--border-primary);
	box-shadow: 0 -10px 40px color-mix(in srgb, var(--black) 50%, transparent);
	padding: 1.5rem 2rem;
	z-index: 9999;
	transform: translateY(100%);
	transition: transform 0.4s ease;
}

.cookie-banner.show {
	transform: translateY(0);
}

.cookie-banner-content {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.cookie-banner-icon {
	font-size: 2.5rem;
	flex-shrink: 0;
	color: var(--primary);
}

.cookie-banner-text {
	flex: 1;
	min-width: 300px;
}

.cookie-banner-title {
	color: var(--primary);
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.cookie-banner-desc {
	color: var(--text-tertiary);
	font-size: 0.9rem;
	line-height: 1.5;
}

.cookie-banner-desc a {
	color: var(--primary);
	text-decoration: underline;
}

.cookie-banner-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cookie-btn {
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s;
	border: none;
	font-size: 0.9rem;
	white-space: nowrap;
}

.cookie-btn-accept {
	background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker));
	color: var(--text-primary);
	border: 1px solid var(--primary);
}

.cookie-btn-accept:hover {
	background: linear-gradient(135deg, var(--btn-hover), var(--btn-hover-dark));
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 50%, transparent);
}

.cookie-btn-refuse {
	background: var(--btn-clear);
	color: var(--text-primary);
}

.cookie-btn-refuse:hover {
	background: var(--btn-clear-hover);
}

.cookie-btn-settings {
	background: color-mix(in srgb, var(--btn-clear) 70%, transparent);
	color: var(--text-tertiary);
	border: 1px solid var(--border-light);
}

.cookie-btn-settings:hover {
	background: var(--btn-clear);
	color: var(--primary);
	border-color: var(--primary);
}

/* Bouton flottant */
.cookie-floating-btn {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 3.5rem;
	height: 3.5rem;
	background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker));
	border: 2px solid var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-primary);
	font-size: 1.5rem;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 50%, transparent);
	transition: all 0.3s;
	z-index: 9998;
	animation: pulse 2s infinite;
}

.cookie-floating-btn:hover {
	transform: scale(1.1) rotate(10deg);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 70%, transparent);
}

/* Modal paramètres */
.cookie-modal-overlay {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--bg-really-dark) 75%, transparent);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	padding: 1rem;
}

.cookie-modal-overlay.show {
	opacity: 1;
	visibility: visible;
}

.cookie-modal {
	background: linear-gradient(135deg, var(--bg-really-dark) 0%, var(--bg-dark) 100%);
	backdrop-filter: blur(10px);
	border: 2px solid var(--border-primary);
	border-radius: 1rem;
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 50%, transparent);
	transform: scale(0.9) translateY(20px);
	transition: transform 0.3s;
}

.cookie-modal-overlay.show .cookie-modal {
	transform: scale(1) translateY(0);
}

.cookie-modal-header {
	padding: 1.5rem;
	border-bottom: 1px solid var(--border-primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cookie-modal-title {
	color: var(--primary);
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
}

.cookie-modal-close {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.2s;
	line-height: 1;
}

.cookie-modal-close:hover {
	background: var(--danger);
	color: var(--text-primary);
}

.cookie-modal-body {
	padding: 1.5rem;
}

.cookie-option {
	background: var(--bg-card-blue);
	padding: 1.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
	margin-bottom: 1rem;
}

.cookie-option-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.cookie-option-title {
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: bold;
}

.cookie-option-required {
	background: var(--success);
	color: var(--text-primary);
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: bold;
}

.cookie-option-desc {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.cookie-toggle {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
}

.cookie-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.cookie-toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--btn-clear);
	transition: 0.3s;
	border-radius: 30px;
	border: 2px solid var(--border-light);
}

.cookie-toggle-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background: var(--text-primary);
	transition: 0.3s;
	border-radius: 50%;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
	background: var(--primary-dark);
	border-color: var(--primary);
}

.cookie-toggle input:checked + .cookie-toggle-slider:before {
	transform: translateX(30px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
	cursor: not-allowed;
	opacity: 0.6;
}

.cookie-modal-footer {
	padding: 1.5rem;
	border-top: 1px solid var(--border-primary);
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
}

/* ========================================
   UNIVERS
   ======================================== */
.univers-container .nav {
	background: var(--bg-main);
	padding: 1rem;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	border: 1px solid var(--border-primary);
	box-shadow: 0 0px 20px color-mix(in srgb, var(--primary) 50%, transparent);
}

.lore-section {
	background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
	backdrop-filter: blur(10px);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	margin-bottom: 2rem;
}
.lore-section h2 {
	color: var(--primary);
	font-size: 2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--border-primary);
	padding-bottom: 0.5rem;
}
.lore-section p {
	color: var(--text-primary);
	line-height: 1.8;
	font-size: 1.05rem;
	margin-bottom: 1rem;
}
.timeline {
	border-left: 3px solid var(--border-primary);
	padding-left: 2rem;
	margin-left: 1rem;
}
.timeline-item {
    margin-bottom: 2rem;
    position: relative;
}

/* Le rond sur la gauche */
.timeline-item .timeline-icon {
    position: absolute;
    left: -3.4rem;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(text-primary);
}

.timeline-item h3 {
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.history-content h2 {
	color: var(--primary-light);
	margin-top: 2rem;
	font-size: 1.5rem;
	margin-bottom: 0;
	border-bottom: none;
}

/* Paramètres */
.settings-container {
	max-width: 900px;
	margin: 0 auto;
}

.settings-container hr { border-color: var(--border-light) }

.settings-tabs {
	border-bottom: 2px solid var(--border-light);
	padding-bottom: 1rem;
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.settings-tabs .basic-btn {
	transition: all 0.3s ease;
}

.settings-tabs .basic-btn:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 30%, transparent);
}

.avatar-preview {
	margin-top: 1rem;
	width: 6.5rem;
	height: 6.5rem;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--border-primary);
}

.settings-section {
	animation: fadeInTranslate 0.3s ease;
}

.profile-sett-btn {
	display: flex;
	gap: 0.5rem;
	font-size: 1rem;
	margin: auto;
	justify-content: center;
	padding: 0.75rem 1.5rem;
}

.setting-color-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.color-picker-btn {
	padding: 1rem;
	border-radius: 0.5rem;
	background-color: var(--bg-card-blue);
	cursor: pointer;
	text-align: center;
	transition: 0.2s;
}

.color-picker-btn:hover {
	transform: scale(1.05);
}

.color-picker-clr {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin: 0px auto 0.5rem;
}

.color-picker-name {
	font-size: 0.875rem;
	color: var(--text-primary);
}

.theme-mode {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
}

.game-role-option {
	display: flex;
	gap: 0.25rem;
}

.game-role-opt-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* ========================================
   PROFIL
   ======================================== */
.profile-header { position: relative; }

.disconect-btn {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.setting-btn {
	position: absolute;
	right: 2rem;
	top: 2rem;
}

.setting-btn-text, .btn-text-resp { display: block; }

.friend-action-btn {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.friend-btn, .setting-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
	border: none;
}

.profile-header-content {
	display: flex;
	gap: 2rem;
	align-items: start;
}

.profile-avatar {
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-dark);
	border: 3px solid var(--border-primary);
}

.profile-card-content { min-width: 0; width: 100%; }
.profil-display-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.profil-userid {
	color: var(--text-secondary);
	font-size: 1rem;
	font-weight: bold;
	display: flex;
}

.profile-bio {
	background: var(--bg-card-blue);
	padding: 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
	color: var(--text-primary);
	margin-top: 1rem;
}

.user-info {
	margin: 1rem 0;
}

.visibility-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
}

.visibility-badge.public {
  background: var(--success);
  color: var(--text-primary);
}

.visibility-badge.private {
  background: var(--text-muted);
  color: var(--text-primary);
}

.quick-add-friend {
	display: flex;
	gap: 0.5rem;
}

.add-friend-input {
	flex: 1;
	max-width: 15rem;
}

.friends-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

.friend-request-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.friend-card {
	display: grid;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--bg-card-blue);
	border: 1px solid var(--border-light);
	border-radius: 0.5rem;
}

.friend-card-pic {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	margin: auto;
	background: var(--bg-dark);
	border: 2px solid var(--border-primary);
}

.friend-card-info { text-align: center; min-width: 0; }
.friend-card-dispname, .friend-card a {
	font-size: 1.25rem;
	color: var(--primary);
	text-decoration: none;
}

.friend-card-dispname{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-request-action {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1rem;
}

/* Vérification email sur banner */
.banner-content {
	background: color-mix(in srgb, var(--warning) 20%, transparent);
	border-bottom: 2px solid var(--warning);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1.5rem;
	gap: 1rem;
}

.banner-actions {
	display: flex;
	gap: 1rem;
}

.banner-close {
	background: var(--danger);
	border: none;
	color: var(--text-btn);
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.2s;
}

.banner-close:hover { background: var(--danger-dark); }

/* Vérification email sur profil */
.verification-status {
    margin-bottom: 2rem;
}

.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid;
    gap: 1rem;
}

.alert-warning {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-color: var(--warning);
}

.alert-success {
	display: inline-flex;
    background: color-mix(in srgb, var(--success) 20%, transparent);
    border-color: var(--success);
	justify-content: flex-start;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.btn-resend {
    background: color-mix(in srgb, var(--warning) 20%, transparent);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-resend:hover {
	background: color-mix(in srgb, var(--warning-dark) 20%, transparent);
	color: var(--warning-dark);
	border-color: var(--warning-dark);
}

.btn-change {
	background: var(--info);
	border: 1px solid var(--info);
	color: var(--text-btn);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.2s;
}

.btn-change:hover { background: var(--info-dark); }

.btn-resend:disabled,
.btn-change:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   JOUEURS PNJ CHARACTERS
   ======================================== */
.joueurs-filter {
	display: flex;
	gap: 2rem;
	align-items: center;
	flex-wrap: wrap;
	padding: 1rem;
	background: var(--bg-card-blue);
	border: 1px solid var(--border-light);
	border-radius: 0.5rem;
}

.joueurs-filter-inner {
	padding: 1rem;
	background: var(--bg-card-blue);
	border: 1px solid var(--border-light);
	border-radius: 0.5rem;
}

.joueurs-filter-group {
	display: flex;
	gap: 2rem;
	align-items: center;
	flex-wrap: wrap;
}

.joueurs-filter .joueurs-checks {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
	margin-bottom: 1rem;
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 10;
    width: 16px;
    height: 16px; 
}

.input-search {
    padding-left: 2.5rem;
    width: 100%;
    box-sizing: border-box;
}

.undead-checks label,
.joueurs-filter label,
.game-role-options label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	margin: 0;
}

.undead-checks input,
.joueurs-filter input,
.game-role-options input {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.undead-checks input[type="checkbox"],
.joueurs-checks input[type="checkbox"],
.game-role-options input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.undead-checks label span.checkme::before,
.joueurs-checks label span.checkme::before,
.game-role-options label span.checkme::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    background-color: var(--bg-card-blue);
    border: 2px solid var(--border-light);
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.undead-checks input[type="checkbox"]:checked + span.checkme::before,
.joueurs-checks input[type="checkbox"]:checked + span.checkme::before,
.game-role-options input[type="checkbox"]:checked + span.checkme::before {
    background-color: var(--primary-dark); 
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12L10 16L18 8' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.undead-checks input[type="checkbox"]:not(:checked) + span.checkme:hover::before,
.joueurs-checks input[type="checkbox"]:not(:checked) + span.checkme:hover::before,
.game-role-options input[type="checkbox"]:not(:checked) + span.checkme:hover::before {
    border-color: var(--primary-light);
}

.checkme-text {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

.joueurs-filter .results,
.joueurs-filter-inner .results {
	margin-left: auto;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.players-list {
	display: block;
	gap: 1rem;
}

.player-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem;
	background: var(--bg-card-blue);
	border: 1px solid var(--border-light);
	border-radius: 0.5rem;
	transition: all 0.3s;
	margin-top: 1rem;
}

.player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 30%, transparent);
    border-color: var(--primary);
}

.player-card-img {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-dark);
	border: 2px solid var(--primary);
}

.player-card-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	min-width: 4.5rem;
}

.player-infos {
	display: flex;
    align-items: center;
    gap: 1rem;
	min-width: 0;
}

a.avatar-profile-link {
	text-decoration: none;
	color: var(--primary);
}

.player-text-content {
	flex-grow: 1;
	min-width: 0;
}
.player-text-content h3 {
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}
.player-text-content h3 a {
	color: var(--primary);
	text-decoration: none;
}

.player-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-end;
}

.badge-display { display: flex; gap: 0.5rem; }

.role-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	display: inline-flex;
	gap: 0.25rem;
	font-weight: bold;
}
.role-badge.player-badge { background: var(--info); }
.role-badge.gm-badge { background: var(--danger); }

.player-actions .basic-btn {
	min-width: 170px;
	text-decoration: none;
}

/* ========================================
   NEWS
   ======================================== */
.news-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.news-hero h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: var(--primary);
	filter: drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 40%, transparent));
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}
.news-hero p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 550px;
    margin: 0 auto;
}

/* Filtres */
.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    align-items: center;
}
.filter-chip {
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    border: 2px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-card-blue) 30%, transparent);
    color: var(--text-secondary);
    font-weight: bold;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.filter-chip:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
.filter-chip.active { background: color-mix(in srgb, var(--primary-dark) 15%, transparent); border-color: var(--primary-dark); color: var(--primary-dark); }
.filter-chip.cat-news.active   { background: color-mix(in srgb, var(--stat-fortune) 15%, transparent); border-color: var(--stat-fortune); color: var(--stat-fortune); }
.filter-chip.cat-jdr.active    { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: var(--danger); color: var(--danger); }
.filter-chip.cat-game.active   { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: var(--success); color: var(--success); }
.filter-chip.cat-anime.active  { background: color-mix(in srgb, var(--color-purple) 15%, transparent); border-color: var(--color-purple); color: var(--color-purple); }
.filter-chip.cat-update.active { background: color-mix(in srgb, var(--info) 15%, transparent); border-color: var(--info); color: var(--info); }
.filter-chip.cat-event.active  { background: color-mix(in srgb, var(--stat-ps) 15%, transparent); border-color: var(--stat-ps); color: var(--stat-ps); }

.search-bar-news {
    display: flex;
    gap: 0.5rem;
    max-width: 380px;
    width: 100%;
}
.search-bar-news input {
    flex: 1;
    padding: 0.55rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    transition: 0.2s;
}
.search-bar-news button {
    padding: 0.55rem 1.1rem;
    background: var(--primary);
    color: var(--text-btn);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}
.search-bar-news button:hover { background: var(--primary-dark); }
.filter-results {
	text-align: center;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}
.erase-btn {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 15%, transparent);
	border: 1px solid var(--primary);
	margin-left: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.25rem 0.6rem;
	border-radius: 1rem;
	text-decoration: none;
}
.erase-btn:hover {
	color: var(--primary-dark);
	background: color-mix(in srgb, var(--primary-dark) 15%, transparent);
	border: 1px solid var(--primary-dark);
}

/* Grille d'articles */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.75rem;
}

/* Carte article */
.news-card {
    background: color-mix(in srgb, var(--bg-card-blue) 60%, transparent);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}
.news-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 20%, transparent);
}
.news-card.pinned-card {
    border-color: var(--warning);
    box-shadow: 0 0 15px color-mix(in srgb, var(--warning) 15%, transparent);
}

.pinned-card .pin-banner {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display:flex;
	align-items: center;
	gap: 0.25rem;
	background: color-mix(in srgb, var(--warning) 15%, transparent);
	color: var(--warning);
	border: 1px solid var(--warning);
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.25rem 0.6rem;
	border-radius: 1rem;
	z-index: 1;
}

.card-cover {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--bg-really-dark);
}
.card-cover-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--bg-really-dark), var(--bg-card-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-tertiary);
}

.card-body {
    padding: 1.25rem;
    flex: 1;
	border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.cat-tag {
	border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cat-tag-news   { background: color-mix(in srgb, var(--stat-fortune) 15%, transparent); border-color: var(--stat-fortune); color: var(--stat-fortune); }
.cat-tag-jdr    { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: var(--danger); color: var(--danger); }
.cat-tag-game   { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: var(--success); color: var(--success); }
.cat-tag-anime  { background: color-mix(in srgb, var(--color-purple) 15%, transparent); border-color: var(--color-purple); color: var(--color-purple); }
.cat-tag-update { background: color-mix(in srgb, var(--info) 15%, transparent); border-color: var(--info); color: var(--info); }
.cat-tag-event  { background: color-mix(in srgb, var(--stat-ps) 15%, transparent); border-color: var(--stat-ps); color: var(--stat-ps); }

.card-title {
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    gap: 0.5rem;
    flex-wrap: wrap;
}
.card-author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.card-author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-really-dark);
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.version-tag {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--text-secondary);
	border: 1px solid var(--border-primary);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
}

/* État vide */
.news-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}
.news-empty .empty-icon { font-size: 4rem; margin-bottom: 1rem; display: block; }
.news-empty h3 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.5rem; }

/* Pagination */
.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.pg-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-card-blue) 30%, transparent);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: 0.2s;
}
.pg-btn:hover, .pg-btn.current { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); border-color: var(--primary); }
.pg-info { color: var(--text-tertiary); font-size: 0.875rem; }

/* Breadcrumb */
.article-breadcrumb {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.article-breadcrumb a { color: var(--primary); padding: 0; }
.article-breadcrumb a:hover { color: var(--primary-dark); background: transparent; }

/* Layout article + sidebar */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    align-items: start;
}

/* Article principal */
.article-main {}

/* Cover */
.article-cover {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--black) 30%, transparent);
	border: 2px solid var(--border-primary);
}

/* Meta header */
.article-meta-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.cat-badge {
	border: 1px solid transparent;
	text-decoration: none;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cat-badge-news   { background: color-mix(in srgb, var(--stat-fortune) 15%, transparent); border-color: var(--stat-fortune); color: var(--stat-fortune); }
.cat-badge-jdr    { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: var(--danger); color: var(--danger); }
.cat-badge-game   { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: var(--success); color: var(--success); }
.cat-badge-anime  { background: color-mix(in srgb, var(--color-purple) 15%, transparent); border-color: var(--color-purple); color: var(--color-purple); }
.cat-badge-update { background: color-mix(in srgb, var(--info) 15%, transparent); border-color: var(--info); color: var(--info); }
.cat-badge-event  { background: color-mix(in srgb, var(--stat-ps) 15%, transparent); border-color: var(--stat-ps); color: var(--stat-ps); }
.version-chip {
	background: color-mix(in srgb, var(--primary) 15%, transparent);
	color: var(--text-secondary);
	border: 1px solid var(--border-primary);
	font-size: 0.75rem;
	font-weight: bold;
    padding: 0.25rem 0.65rem;
	border-radius: 0.375rem;
}

/* Titre */
.article-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 1rem;
}

/* Auteur + date */
.article-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.byline-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-really-dark);
}
.byline-author strong { color: var(--text-primary); }

/* Contenu Quill (rendu) */
.article-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-primary);
	padding: 0;
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
    color: var(--primary);
    margin: 1.75rem 0 0.75rem;
    line-height: 1.3;
}
.article-content h1 { font-size: 1.9rem; }
.article-content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.4rem; }
.article-content h3 { font-size: 1.25rem; }
.article-content p  { margin-bottom: 1.1rem; }
.article-content a  { color: var(--primary); text-decoration: underline; }
.article-content a:hover { opacity: 0.8; }
.article-content img {
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 1rem 0;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--black) 20%, transparent);
}
.article-content blockquote {
    border-left: 4px solid var(--primary);
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: var(--text-secondary);
}
.article-content pre,
.article-content code {
    background: var(--bg-really-dark);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}
.article-content pre { padding: 1rem; overflow-x: auto; margin: 1rem 0; }
.article-content code { padding: 0.15rem 0.4rem; }
.article-content ul,
.article-content ol { padding-left: 1.75rem; margin-bottom: 1rem; }
.article-content li { margin-bottom: 0.4rem; }

/* ── Sidebar ── */
.article-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sidebar-widget {
    background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.sidebar-widget h3 {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sidebar-widget .sidebar-info {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.sidebar-info .side-info-imp { color:var(--text-primary) }
.sidebar-info .tag-link {
	color: var(--primary);
	text-decoration: none;
	font-weight: bold;
}
.sidebar-info .tag-link:hover { color:var(--primary-dark) }

/* Partage social */
.share-btns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.share-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: 0.2s;
    text-decoration: none;
    color: var(--text-btn);
}
.share-btn:hover { transform: translateX(3px); }
.share-x       { background: var(--info); }
.share-x:hover { background: var(--info-dark); }
.share-copy    { background: var(--bg-really-dark); color: var(--text-primary); border: 1px solid var(--border-light); }
.share-copy:hover { border-color: var(--primary); color: var(--primary); }

/* Articles liés */
.related-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.related-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-decoration: none;
    color: var(--text-primary);
    transition: 0.2s;
    padding: 0.5rem;
    border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
}
.related-item:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
	border-color: var(--primary);
}
.related-thumb {
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: 0.375rem;
    flex-shrink: 0;
    background: var(--bg-really-dark);
	border: 1px solid var(--primary);
}
.related-thumb-ph {
    width: 64px;
    height: 40px;
    border-radius: 0.375rem;
    background: var(--bg-really-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.related-title {
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-date { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.2rem; }

/* Footer article */
.article-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.modify-article {
	color: var(--warning);
	font-size: 0.875rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.modify-article:hover { color: var(--warning-dark); }

/* ── Section news homepage ─────────────────────────────────── */
.home-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.home-news-header h2 {
    margin: 0;
    font-size: 1.75rem;
}

/* Grille réduite pour la home (3 colonnes max, pas de min trop large) */
.news-grid-home {
    grid-template-columns: repeat(3, 1fr);
}

.home-news-footer {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Variante secondaire du CTA */
.cta-secondary {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border: 2px solid var(--primary);
    color: var(--primary);
}
.cta-secondary:hover {
    background: var(--primary);
    color: var(--text-btn);
}

/* ========================================
   JDR APP
   ======================================== */
#root { /* min-height: 100vh; */ }

.app-content {
	min-height: calc(100vh - 13em);
	/* background: linear-gradient(135deg, var(--primary-darker) 0%, var(--semi-black) 50%, var(--bg-really-dark) 100%); */
	padding: 2rem;
	color: var(--text-primary);
}

.fullpage-center-gradient {
	min-height: calc(100vh - 13em);
	background: linear-gradient(135deg, var(--primary-darker) 0%, var(--semi-black) 50%, var(--black) 100%);
	padding: 2rem;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.app-container {
	max-width: 80rem;
	margin: 0 auto;
}

.header-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-logo {
	height: 5em;
	width: auto;
	user-select: none;
	display: block;
}

.header-title {
	font-size: 2rem;
	font-weight: bold;
	color: var(--text-primary);
}

.header-sec-text {
	color: var(--text-secondary);
	margin-bottom: 2rem;
}

/* ----- lang button side ----- */

.lang-button-select {
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	font-weight: bold;
}

/* ----- Chara view ----- */
.base-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
	font-size: 0.875rem;
}

.btn-edit {
	display: flex;
	gap: 0.25rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	border: none;
	font-weight: bold;
	cursor: pointer;
	align-items: center;
	background: var(--info);
	color: var(--text-primary);
	transition: 0.2s ease;
}

.btn-edit-absolute {
	position: absolute;
	top: 0;
	right: 0;
}

.btn-edit:hover { background: var(--info-dark); }
.btn-edit-save { background: var(--success); }
.btn-edit-save:hover { background: var(--success-dark); }

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-light);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

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

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.view-mode-toggle {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-dark);
    border-radius: 0.5rem;
    border: 1px solid var(--border-primary);
	width: fit-content;
	margin: 1rem auto;
}

.view-mode-toggle .toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
	font-weight: bold;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.view-mode-toggle .toggle-btn:hover {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.view-mode-toggle .toggle-btn.active {
    background: var(--primary-dark);
    color: var(--text-btn);
}

/* Badge de progression */
.progression-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.5rem;
	justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 10%, transparent), color-mix(in srgb, var(--primary-darker) 10%, transparent));
    border-radius: 0.75rem;
    border: 1px solid var(--border-primary);
    margin-bottom: 1rem;
}

.prog-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prog-stat span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.prog-stat strong {
    font-size: 1.25rem;
}

/* Indicateur du mode */
.view-mode-indicator {
    padding: 0.75rem 1rem;
    background: var(--bg-card-blue);
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Toggles multiples */
.visibility-toggles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.toggle-label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-label.disabled .toggle-switch {
    pointer-events: none;
}

.visibility-toggle {
  display: flex;
  padding: 0.5rem;
  background: var(--bg-card-blue);
  border-radius: 0.5rem;
  justify-content: center;
}

.toggle-label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.chara-info-div {
	display: flex;
	gap: 2rem;
	align-items: start;
	flex-wrap: wrap;
	position: relative;
}

/* ── Badge mort dans view-chara ─────────────────────── */
.chara-dead-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.25rem 0.75rem;
	border-radius: 1.25rem;
	background: color-mix(in srgb, var(--danger) 15%, transparent);
	border: 1px solid var(--danger);
	color: var(--danger);
	margin-left: 0.75rem;
	vertical-align: middle;
}

.chara-info-div p { margin: 0; }

.chara-info .chara-img {
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--border-primary);
}

.chara-info .chara-img-edit {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	margin-top: 0.5rem;
	border: 2px solid var(--border-primary);
}

.general-card.story-chara h3 { border-bottom: none; }
.story-chara p { line-height: 1.8; white-space: pre-wrap; }

.stats-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.stat-card-distrib { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.stats-card {
	background: var(--bg-card-blue);
	padding: 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
}

.stats-card-title { font-size: 0.75rem; color: var(--text-primary); font-weight: bold; }
.stats-card-stat { font-size: 1.5rem; font-weight: bold; }

.skill-value {
  font-weight: bold;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
}
.skill-value.improved { color: var(--improved-points); }

.sub-skill {
	font-size: 0.75rem;
	color: var(--improved-points);
	margin-left: 1rem;
}

/* Timeline de progression */
.timeline-chara {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 2rem 0;
}

.timeline-chara-item {
    position: relative;
    padding-left: 4rem;
    padding-bottom: 2rem;
}

.timeline-chara-item:not(.last)::before {
	content: '';
	position: absolute;
	left: 2rem;
	top: 2.5rem;
	bottom: 0;
	width: 2px;
	background: var(--border-light);
}

.timeline-chara-marker {
    position: absolute;
    left: 1.33rem;
    top: 0.5rem;
}

.timeline-chara-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-main);
    box-shadow: 0 0 0 2px var(--primary);
}

.timeline-chara-item.first .timeline-chara-dot {
    background: var(--success);
    box-shadow: 0 0 0 2px var(--success);
}

.timeline-chara-item.last .timeline-chara-dot {
    background: var(--stat-fortune);
    box-shadow: 0 0 0 2px var(--stat-fortune);
    animation: pulseOpacity 2s infinite;
}
 
.timeline-death .timeline-chara-dot.timeline-death-dot {
	background: var(--danger);
	color: var(--text-btn);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--danger);
}

.timeline-chara-content {
    background: var(--bg-card-blue);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.timeline-death .timeline-chara-content { border-color: var(--danger); }

.timeline-death-epitaph {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 0 0.5rem;
	color: var(--danger);
	opacity: .7;
}
.timeline-death-title {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.timeline-chara-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.timeline-chara-header h4 {
    margin: 0;
    color: var(--primary);
}
h4.timeline-death-heading { color: var(--danger); }

.timeline-chara-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.timeline-chara-note {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--bg-main) 40%, transparent);
    border-radius: 0.5rem;
}
.timeline-chara-note.timeline-death-note { border-left: 3px solid var(--danger); }
.death-note-formatted {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
p.death-note-line {
	margin: 0;
	line-height: 1.5;
	font-style: italic;
}
.death-note-line strong {
	font-style: normal;
	color: var(--danger);
	letter-spacing: .03em;
}

.timeline-chara-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.timeline-chara-stats strong {
    color: var(--text-primary);
}

.btn-compare {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--text-btn);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-compare:hover {
    background: var(--btn-hover);
}

/* Modale de comparaison */
.comparison-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--bg-really-dark) 75%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.comparison-content {
    background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
    border: 2px solid var(--border-primary);
    border-radius: 1rem;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
	box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 50%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 50%, transparent);
}

.comparison-changes {
    margin: 1.5rem 0;
}

.change-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--bg-card-blue);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.change-values {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.change-diff {
    font-weight: bold;
}

.change-diff.positive {
    color: var(--success);
}

.change-diff.negative {
    color: var(--danger);
}

/* ========================================
   PNJ Creator - Styles spécifiques
   ======================================== */

.save-pnj-modal select {
  font-size: 1rem;
}

.save-pnj-modal input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  cursor: pointer;
}

/* Mode Tabs */
.mode-tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 2px solid var(--border-primary);
}

.mode-tab {
  flex: 1;
  padding: 1rem 1.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-primary);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem 1rem 0 0;
}

.mode-tab:hover {
  color: var(--border-primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.mode-tab.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Group Toggle */
.group-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.group-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.group-label {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Input with Button */
.input-with-btn {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.input-with-btn .flex1 {
  flex: 1;
}

.btn-icon {
  padding: 0.75rem;
  background: var(--info);
  border: none;
  color: var(--text-btn);
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--btn-clear-hover);
  border-color: var(--primary);
}

.btn-icon-small {
  padding: 0.5rem;
  background: var(--info);
  border-radius: 0.375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-btn);
  border: none;
  transition: all 0.2s ease;
}

.btn-icon-small:hover {
  background: var(--info-dark);
}

/* Results Section */
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* PNJ Results Grid */
.pnj-results-grid {
  display: grid;
  gap: 1.5rem;
}

/* PNJ Card */
.pnj-card {
  background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
  border: 2px solid var(--border-light);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: slideIn 0.3s ease;
  transition: all 0.2s ease;
}

.pnj-card:hover {
  border-color: var(--border-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-dark) 10%, transparent);
}

/* PNJ Card Header */
.pnj-card-header {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  padding: 1.5rem;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.pnj-card-header h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.pnj-card-header p {
  margin: 0.25rem 0;
  opacity: 0.9;
}

.pnj-card-header .btn-icon {
  background: var(--btn-clear);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.pnj-card-header .btn-icon:hover {
  background: var(--btn-clear-hover);
  border-color: var(--border-very-light);
}

/* XP Bar */
.pnj-xp-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 0.5rem;
  margin: 1rem 1rem 0 1rem;
}

.pnj-xp-bar {
  flex: 1;
  height: 8px;
  background: color-mix(in srgb, var(--bg-really-dark) 20%, transparent);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
}

.pnj-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width 0.3s ease;
}

/* PNJ Stats Grid */
.pnj-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
}

.pnj-stat {
  text-align: center;
  padding: 1rem;
  background: var(--bg-card-blue);
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
}

.pnj-stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.pnj-stat-value {
  font-size: 1.5rem;
  font-weight: bold;
}

/* PNJ Section */
.pnj-section {
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.pnj-section h4 {
  font-size: 1.125rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
}

.pnj-section h4.pnj-bg-title { margin: 0; }

/* PNJ Characteristics Grid */
.pnj-chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.pnj-char {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--bg-really-dark) 20%, transparent);
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
  font-size: 0.875rem;
}

.pnj-char-label {
  color: var(--text-secondary);
}

.pnj-char-value {
  font-weight: bold;
  color: var(--primary);
}

/* PNJ Skills Grid */
.pnj-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.pnj-skill {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--bg-really-dark) 20%, transparent);
  border-radius: 0.375rem;
  border: 1px solid var(--border-light);
  font-size: 0.875rem;
}

.pnj-skill span:first-child {
  color: var(--text-primary);
}

.pnj-skill span:last-child {
  font-weight: bold;
}

.pnj-save-btn {
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	border: medium;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	background: var(--success);
	color: var(--text-btn);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	margin: 1rem auto;
	transition: 0.3s ease;
}

.pnj-save-btn:hover { background: var(--success-dark); }

/* ========================================
   APPLICATION
   ======================================== */
.crea-steps {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.step-circle {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	background: var(--btn-clear);
	color: var(--text-primary);
	transition: 0.3s ease;
}

.step-circle.step-active {
	background: var(--primary-dark);
	color: var(--text-btn);  
	box-shadow: 0 0 10px color-mix(in srgb, var(--black) 50%, transparent);
	transform: scale(1.05);
}

h2.crea-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
	color: var(--text-primary);
}

h2.flex-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.crea-input-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.preview-avat-cont {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}
.preview-avat-image {
	width: 5rem;
	height: 5rem;
	border-radius: 9999px;
	object-fit: cover;
	border: 2px solid var(--border-primary);
}

.textarea-textcount, .char-counter {
	font-size: 0.75rem;
	margin-top: 0.25rem;
	color: var(--text-secondary);
	display: block;
	text-align: right;
}

.crea-next-btn {
	background: var(--primary-dark);
	color: var(--text-btn);
	font-weight: bold;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	text-decoration: none; 
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	width: 100%;
	font-size: 1.125rem;
	justify-content: center;
	transition: 0.3s ease;
}

.crea-next-btn:hover:not(.disabled) {
	background: var(--primary);
	/* transform: translateY(-2px); */
}

.crea-next-btn.disabled, .basic-btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

.colonne-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.colonne-card {
	background: var(--bg-card-blue);
	padding: 1.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
}

h3.colonne-h3, h3.no-border {
	font-size: 1.25rem;
	border-bottom: none;
}

.pool-desc, .desc-secondary {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

.pool-set-cont {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pool-set-num {
	background: var(--btn-clear);
	color: var(--text-primary);
	padding: 0.5rem;
	border-radius: 0.5rem;
	font-weight: bold;
	min-width: 2.5em;
	text-align: center;
}

.title-desc-sec {
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}

.pool-stats-swap {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pool-stats-swap-sec {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pool-stat-swap-list, .point-distrib-calc, .competence-count {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

select.pool-stat-select {
	padding: 0.5rem;
	background: var(--btn-clear);
	border: 1px solid var(--border-very-light);
	font-size: 0.875rem;
}

.stat-distr-label {
	flex: 1;
	font-weight: bold;
	min-width: 7.5rem;
}

.stat-assign-value {
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--primary);
	width: 3rem;
	text-align: center;
	background: var(--bg-card-blue);
	border: 1px solid var(--border-very-light);
	border-radius: 0.5rem;
	padding: 0.2rem 0;
}

.stat-pool-each {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-radius: 0.5rem;
	background: var(--btn-clear);
	border: 1px solid var(--border-very-light);
}

.fortune-card {
	background: color-mix(in srgb, var(--stat-fortune) 10%, transparent);
	border: 1px solid var(--stat-fortune);
	border-radius: 0.75rem;
	padding: 1rem;
	margin-bottom: 1.5rem;
}

h3.distrib-points-title {
	font-size: 1.125rem;
	font-weight: bold;
	color: var(--text-primary);
	border: none;
	margin: 0;
	padding: 0;
}

.distrib-points-cont {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.distrib-pointleft {
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	background: var(--danger);
	color:  var(--text-btn);
	font-weight: bold;
}

.stat-btn {
	flex: 1;
	padding: 0.5rem;
	border-radius: 0.25rem;
	border: none;
	font-weight: bold;
	cursor: pointer;
	color: var(--text-btn);
	transition: 0.2s ease;
	text-align: center;
}

.notification-content {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 90%;
	max-width: 500px;
}

.notification-block {
	padding: 1rem 1.5rem;
	border-radius: 0.75rem;
	color: var(--text-btn);
	font-weight: bold;
	text-align: center;
	box-shadow: 0 10px 25px color-mix(in srgb, var(--black) 50%, transparent);
	animation: slideInOut 3s ease-in-out forwards
}

.stats-shows {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
	background: var(--bg-card-blue);
	padding: 1.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
}

.primary-block {
	background: color-mix(in srgb, var(--primary-dark) 20%, transparent);
	padding: 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-primary);
	text-align: center;
	color: var(--color-tertiary);
}

h3.proff-title {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-primary);
	padding: 0;
	border: none;
}

h4.proff-category {
	margin-bottom: 1rem;
	color: var(-primary-light);
	border-bottom: 2px solid var(--primary-dark);
	padding-bottom: 0.5rem;
}

.proff-cards-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.proff-card {
	cursor: pointer;
	transition: 0.3s;
	opacity: 1;
	position: relative;
	transition: 0.3s ease;
}

.colonne-card.proff-card:hover { transform: scale(1.03); }

.proff-card-age {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: var(--danger);
	color: var(--text-primary);
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: bold;
}

.proff-card-desc {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-bottom: 0.75rem;
}

.proff-card-bonus {
	font-size: 0.75rem;
	color: var(--stat-fortune);
	margin-bottom: 1rem;
	font-style: italic;
}

.proff-card-listoblig {
	font-size: 0.75rem;
	color: var(--text-tertiary);
}

.proff-card-list-ul {
	margin-top: 0.5rem;
	margin-left: 1rem;
	list-style: disc;
}

.back-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.prof-skill-header {
	border-left: 2px solid var(--border-primary);
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	margin: 0;
	color: var(--text-primary);
	font-weight: bold;
}

.competences-block-lang {
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--info);
	background: color-mix(in srgb, var(--info) 10%, transparent);
	margin-bottom: 0.75rem;
}

input.comp-lang-input {
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	background: var(--btn-clear);
	border: 1px solid var(--border-very-light);
	margin-bottom: 0.25rem;
}

.competence-percent-lang {
	width: 3rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.875rem;
}

.competence-block {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: var(--bg-card-blue);
}

.competence-spe-add {
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	border: medium;
	font-weight: bold;
	cursor: pointer;
	opacity: 1;
	background: var(--info);
	color: var(--text-btn);
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	transition: 0.3s ease;
}

.competence-spe-add.comp-lang-more {
	background: var(--warning);
	color: var(--text-primary);
}

.comp-add-rem {
	width: 2.5rem;
	height: 2rem;
	border-radius: 0.5rem;
	border: medium;
	font-size: 0.875rem;
	font-weight: bold;
	cursor: pointer;
	background: var(--info);
	border: 1px solid var(--improved-points);
	color: var(--text-btn);
	transition: 0.3 ease;
}
.comp-add-rem:hover { background: var(--info-dark); }

.comp-add-rem-unit { width: 2rem; }
.comp-add-rem-lang { width: 2rem; height: 1.75rem; font-size: 0.75rem; }
.comp-add-rem-lang-unit { width: 1.75rem; }

.comp-muted { color: var(--text-muted); background: var(--btn-clear); cursor: not-allowed; border-color: var(--border-very-light); }
.comp-muted:hover { background: var(--btn-clear); }

.comp-spe-del {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.25rem;
	border: medium;
	font-weight: bold;
	cursor: pointer;
	background: var(--danger-dark);
	color: var(--text-btn);
	font-size: 0.75rem;
}
.comp-spe-del:hover { background: var(--danger); }

.competence-percent {
	width: 4rem;
	text-align: center;
	font-weight: bold;
}

.comp-calc-percent {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.comp-nomodif {
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-style: italic;
}

.chara-final-desc {
	padding: 1.5rem;
	display: flex;
	gap: 2rem;
	align-items: start;
	flex-wrap: wrap;
}

.chara-final-desc .chara-img {
	width: 8rem;
	height: 8rem;
}

.chara-final-desc .story-chara {
	color: var(--text-primary);
	margin-top: 1rem;
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ========================================
   PNJ DASHBOARD STYLES
   ======================================== */
/* Page de visualisation PNJ */
.pnj-view-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	right: 0;
}

.pnj-card-list {
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.pnj-card-dash {
	position: relative;
}

.app-legend-filter {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 10%, transparent), color-mix(in srgb, var(--primary-darker) 10%, transparent));
	border-color: var(--border-primary);
	margin-bottom: 1.5rem;
}

.filter-item-grp {
	min-width: 200px;
}
label.label-above { margin-bottom: 0.5rem; }

/* Bouton favori */
.favorite-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: color-mix(in srgb, var(--bg-really-dark) 80%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border-primary);
	color: var(--border-primary);
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

.favorite-btn:hover {
	background: color-mix(in srgb, var(--stat-fortune) 20%, var(--bg-really-dark));
	border-color: var(--stat-fortune);
	color: var(--stat-fortune);
	transform: scale(1.1);
}

.favorite-btn.favorite-active {
	background: color-mix(in srgb, var(--stat-fortune) 30%, var(--bg-really-dark));
	border-color: var(--stat-fortune);
	color: var(--stat-fortune);
	animation: starPulse 0.5s ease;
}
.pnj-view-actions .favorite-btn {
	top: 0;
}

.edit-btn-pnj {
	right: 4rem;
	position: absolute;
}

.pnj-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.difficulty-badge {
	padding: 0.1rem 0.25rem;
	border-radius: 0.25rem;
	font-weight: bold;
	font-size: 0.75rem;
	border: 2px solid transparent;
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	color: var(--text-primary);
}

.diff-unknown {
	background: color-mix(in srgb, var(--info) 50%, transparent);
	border-color: var(--info-dark);
	box-shadow: 0 0 5px var(--info);
}

.diff-easy {
	background: color-mix(in srgb, var(--success) 50%, transparent);
	border-color: var(--success-dark);
	box-shadow: 0 0 5px var(--success);
}

.diff-medium { 
    background: color-mix(in srgb, var(--warning) 50%, transparent); 
    border-color: var(--warning-dark);
    box-shadow: 0 0 5px var(--warning);
}

.diff-hard { 
    background: color-mix(in srgb, var(--danger) 50%, transparent); 
    border-color: var(--danger-dark);
    box-shadow: 0 0 5px var(--danger);
}

.diff-boss { 
    background: color-mix(in srgb, var(--color-purple) 50%, transparent); 
    border-color: var(--color-purple);
    animation: boss-pulse 2s infinite ease-in-out;
    letter-spacing: 1px;
}

.type-badge {
	position: absolute;
	top: -0.75rem;
	left: -0.5rem;
	background: var(--primary);
	padding: 0.25rem 0.75rem;
	font-size: 1rem;
	border-radius: 1rem;
	display: inline-flex;
	font-weight: bold;
	gap: 0.25rem;
}

/* Toggle visibilité inline pour le mode édition */
.visibility-toggle-inline {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: color-mix(in srgb, var(--bg-really-dark) 90%, transparent);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
  z-index: 5;
}

.visibility-toggle-inline .toggle-label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.875rem;
}

/* Ajustement du badge quand il y a un favori */
.pnj-card-dash .visibility-badge {
  right: 3.5rem; /* Décalé pour laisser place au bouton favori */
}

/* Mode édition du PNJ dans la carte */
.pnj-card-dash textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
  background: var(--bg-card-blue);
  color: var(--text-primary);
  font-size: 0.875rem;
  resize: vertical;
}

.pnj-card-dash textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
}

.edit-btn-lot {
	display: flex;
	gap: 0.5rem;
	flex: 1;
}

/* Boutons d'édition dans la carte */
.pnj-card-dash .btn-edit {
  padding: 0.5rem 1rem;
}

/* Upload d'avatar dans le mode édition de la carte */
.pnj-card-dash .image-uploader {
  margin-bottom: 0.5rem;
}

.pnj-card-dash .upload-preview {
  max-width: 4rem;
  max-height: 4rem;
  margin: 0;
}

.pnj-card-dash .upload-dropzone {
  min-height: 100px;
  max-height: 150px;
}

/* ========================================
   SYSTÈME DE STATS BRUTES/DÉRIVÉES
   ======================================== */

.stats-grid-final {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-card-detailed {
	background: var(--bg-card-blue);
	padding: 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
	position: relative;
	transition: 0.3s ease;
}

.stat-card-detailed:hover {
	border-color: var(--primary);
	box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 50%, transparent);
	transform: translateY(-2px);
}

.stat-with-tooltip {
	position: relative;
}

.stat-display {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.stat-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-values {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.stat-raw {
	font-size: 2rem;
	font-weight: bold;
	color: var(--text-primary);
}

.stat-arrow {
	font-size: 1.25rem;
	color: var(--text-muted);
}

.stat-derived {
	font-size: 1.5rem;
	font-weight: bold;
}

/* Tooltip */
.stat-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s ease;
	pointer-events: none;
	z-index: 100;
}

.stat-card-detailed:hover .stat-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-5px);
}

.stat-tooltip-content {
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 2px solid var(--primary);
	border-radius: 0.75rem;
	padding: 1rem;
	min-width: 250px;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 50%, transparent);
}

.stat-tooltip-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25rem 0;
	font-size: 0.875rem;
}

.stat-tooltip-label {
	color: var(--text-secondary);
}

.stat-tooltip-value {
	color: var(--text-primary);
}

.stat-tooltip-desc {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border-light);
	font-size: 0.75rem;
	color: var(--text-tertiary);
	line-height: 1.4;
	font-style: italic;
}

.stats-grid-view {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}

.stat-view-item {
	padding: 0.75rem;
	background: color-mix(in srgb, var(--bg-card-blue) 30%, transparent);
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
}

.stat-view-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.stat-view-values {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.stat-view-raw {
	font-size: 1.25rem;
	color: var(--text-primary);
}

.stat-view-separator {
	color: var(--text-muted);
}

.stat-view-derived {
	font-size: 1rem;
}

.stats-grid-simple {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-card-simple {
	background: var(--bg-card-blue);
	padding: 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
	position: relative;
	transition: 0.3s ease;
}

.stat-card-simple:hover {
	border-color: var(--primary);
	box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 50%, transparent);
	transform: translateY(-2px);
}

.stat-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
}

.stat-row-derived {
	margin-top: 0.25rem;
}

.stat-row-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: bold;
	flex: 1;
}

.stat-row-arrow {
	color: var(--text-muted);
	font-size: 0.875rem;
}

.stat-row-value {
	font-size: 1.25rem;
	color: var(--text-primary);
	min-width: 3rem;
	text-align: right;
}

.stat-tooltip-simple {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s ease;
	pointer-events: none;
	z-index: 100;
	
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 2px solid var(--primary);
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	min-width: 200px;
	max-width: 300px;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 50%, transparent);
	
	font-size: 0.75rem;
	color: var(--text-tertiary);
	line-height: 1.4;
	font-style: italic;
	text-align: center;
}

.stat-card-simple:hover .stat-tooltip-simple {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-5px);
}

.info-btn {
	position: absolute;
	right: 0.25rem;
	top: 0.25rem;
	color: var(--improved-points);
}

.stats-list-simple {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.stat-line-simple {
	background: color-mix(in srgb, var(--bg-really-dark) 20%, transparent);
	border: 1px solid var(--border-light);
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	transition: 0.2s ease;
}

.stat-line-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: bold;
	min-width: 6rem;
}

.stat-line-arrow {
	color: var(--text-muted);
	font-size: 0.75rem;
}

.stat-line-value {
	font-size: 1rem;
	color: var(--text-primary);
	min-width: 2.5rem;
	text-align: right;
}

.stat-line-separator {
	color: var(--border-light);
	margin: 0 0.5rem;
	font-weight: bold;
}

/* ========================================
   JDR LIBRARY SECTION
   ======================================== */
   
/* ── Root & toolbar ──────────────────────────────── */
.ml-root {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 20rem;
}

.ml-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ── Filtres ─────────────────────────────────────── */
.ml-filters {
	display: flex;
	gap: 0.3rem;
}
.ml-filter-btn {
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.5rem 0.75rem;
	border-radius: 5rem;
	border: 1px solid var(--border-light);
	background: color-mix(in srgb, var(--bg-card-blue) 25%, transparent);
	color: var(--text-secondary);
	cursor: pointer;
	transition: all .12s;
	white-space: nowrap;
}
.ml-filter-btn:hover { background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent); color: var(--text-primary); }
.ml-filter-btn.ml-filter-btn--on {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Recherche ───────────────────────────────────── */
.ml-search-wrap {
	position: relative;
	flex: 1;
	min-width: 12rem;
}
.ml-search-icon {
	position: absolute;
	left: 0.625rem;
	top: 50%;
	transform: translateY(-50%);
	opacity: .45;
	pointer-events: none;
}
.ml-input {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	outline: none;
}
.ml-search { padding-left: 2rem; }

/* ── Bouton upload ───────────────────────────────── */
.ml-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--primary);
	background: color-mix(in srgb, var(--primary) 15%, transparent);
	color: var(--primary);
	cursor: pointer;
	white-space: nowrap;
	transition: background .12s;
	flex-shrink: 0;
}
.ml-upload-btn:hover:not(:disabled) { background: var(--primary-dark); color: var(--text-primary); }
.ml-upload-btn:disabled { opacity: .5; cursor: not-allowed; }
.ml-upload-btn--loading { opacity: .7; }

/* ── Zone drop globale ───────────────────────────── */
.ml-dropzone-global {
	position: relative;
	flex: 1;
	border-radius: 0.875rem;
	min-height: 12rem;
	transition: outline .1s;
}
.ml-dropzone-global--over {
	outline: 2px dashed var(--primary);
	outline-offset: -2px;
	background: color-mix(in srgb, var(--primary) 15%, transparent);
}
.ml-drop-indicator {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--black) 60%, transparent);
	border-radius: 0.875rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: var(--primary);
	font-size: 0.875rem;
	pointer-events: none;
	z-index: 10;
}
.ml-drop-indicator p { margin: 0; font-weight: bold; }

/* ── États loading/vide ──────────────────────────── */
.ml-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 3rem 1.25rem;
	color: var(--text-muted);
	font-size: 0.75rem;
}
.ml-state p { margin: 0; }

/* ── Grille ──────────────────────────────────────── */
.ml-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.875rem;
}

/* ── Item ────────────────────────────────────────── */
.ml-item {
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .15s, transform .15s;
}
.ml-item:hover { border-color: var(--border-primary); transform: translateY(-2px); }

/* Prévisualisation */
.ml-preview {
	position: relative;
	aspect-ratio: 16/9;
	background: color-mix(in srgb, var(--black) 30%, transparent);
	border-bottom: 1px solid var(--border-light);
	overflow: hidden;
}
.ml-item:hover .ml-preview { border-color: var(--border-primary); }
.ml-preview img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.ml-preview-audio {
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--stat-hp) 15%, transparent);
}

/* Badge type */
.ml-type-badge {
	position: absolute;
	top: 0.325rem;
	left: 0.325rem;
	font-size: 0.5rem;
	font-weight: bold;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 0.15rem 0.45rem;
	border-radius: 0.25rem;
	border: 1px solid transparent;
}
.ml-type-badge-image {
	background: color-mix(in srgb, var(--info) 15%, transparent);
	color: var(--info);
	border-color: var(--info);
}
.ml-type-badge-map {
	background: color-mix(in srgb, var(--stat-ps) 15%, transparent);
	color: var(--stat-ps);
	border-color: var(--stat-ps);
}
.ml-type-badge-music {
	background: color-mix(in srgb, var(--stat-hp) 15%, transparent);
	color: var(--stat-hp);
	border-color: var(--stat-hp);
}

/* Overlay actions */
.ml-item-overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--black) 60%, transparent);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	opacity: 0;
	transition: opacity .15s;
}
.ml-item:hover .ml-item-overlay { opacity: 1; }

.ml-overlay-btn {
	width: 2.5rem; height: 2.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	color: var(--text-secondary);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all .2s;
}
.ml-overlay-btn:hover {
	background: color-mix(in srgb, var(--bg-card-blue) 75%, transparent);
	color: var(--text-primary);
}
.ml-overlay-btn--del {
	background: color-mix(in srgb, var(--danger) 15%, transparent);
	border-color: var(--danger);
	color: var(--danger);
}
.ml-overlay-btn--del:hover { background: var(--danger-dark); }

/* Corps de l'item */
.ml-item-body {
	padding: 0.625rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

/* Nom */
.ml-item-name {
	font-size: 0.75rem;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-item-name:hover { color: var(--primary); }
.ml-edit-hint { opacity: 0; flex-shrink: 0; transition: opacity .1s; }
.ml-item-name:hover .ml-edit-hint { opacity: .8; }

/* Édition inline */
.ml-name-edit { display: flex; }
.ml-name-edit .ml-input { font-size: 0.75rem; font-weight: bold; padding: 0.25rem 0.5rem; }

/* Tags */
.ml-tag-editor { display: flex; flex-direction: column; gap: 0.25rem; }
.ml-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.ml-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.625rem;
	font-weight: bold;
	padding: 0.125rem 0.375rem;
	border-radius: 0.5rem;
	border: 1px solid var(--info);
	background: color-mix(in srgb, var(--info) 15%, transparent);
	color: var(--info);
}
.ml-tag-del {
	background: none; border: none; color: inherit;
	cursor: pointer; font-size: 0.75rem; line-height: 1;
	opacity: .6; padding: 0 1px; font-weight: bold;
}
.ml-tag-del:hover { opacity: 1; }

.ml-tag-input-row { display: flex; gap: 0.25rem; }
.ml-tag-input { flex: 1; font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.ml-tag-add-btn {
	width: 1.625rem; height: 1.625rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	color: var(--text-secondary);
	font-size: 1rem; line-height: 1;
	cursor: pointer; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.ml-tag-add-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--primary) 15%, transparent);
	color: var(--primary); border-color: var(--primary);
}
.ml-tag-add-btn:disabled { opacity: .3; cursor: not-allowed; }

/* Méta */
.ml-item-meta {
	display: flex;
	gap: 0.5rem;
	font-size: 0.625rem;
	color: var(--text-muted);
	margin-top: auto;
}

/* ========================================
   JDR GAME SECTION
   ======================================== */

/* Section Hero "Prêt à jouer" */
.game-session-hero {
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-really-dark) 100%);
	border: 1px solid var(--border-primary);
	border-radius: 0.75rem;
	padding: 1.75rem;
	margin: 2rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.75rem;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--black) 30%, transparent);
	position: relative;
	overflow: hidden;
}

.game-session-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 70%);
	animation: pulse-glow 4s ease-in-out infinite;
	pointer-events: none;
}

.hero-content {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	position: relative;
	z-index: 1;
}

.hero-icon {
	color: var(--primary);
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 50%, transparent));
	flex-shrink: 0;
}

.hero-text h2 {
	margin: 0 0 0.5rem 0;
	font-size: 1.8rem;
	color: var(--text-primary);
	font-weight: bold;
}

.hero-text p {
	margin: 0;
	font-size: 1rem;
	color: var(--text-secondary);
}

.hero-actions {
	display: flex;
	gap: 1rem;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.hero-btn {
	padding: 1rem 2rem;
	border: none;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.hero-btn-primary {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: var(--text-btn);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 40%, transparent);
}

.hero-btn-primary:hover {
	background: linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-hover-dark) 100%);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 60%, transparent);
}

.hero-btn-secondary {
	background: var(--btn-clear);
	color: var(--text-btn);
	border: 2px solid var(--border-very-light);
}

.hero-btn-secondary:hover {
	background: var(--btn-clear-hover);
	border-color: var(--border-primary);
}

/* ════════════════════════════════════════════════════
   Sessions — Mes parties (Dashboard)
   ════════════════════════════════════════════════════ */
.cs-loading, .cs-error, .cs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}
.cs-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    transition: none;
}
.cs-error { color: var(--danger); }

.sessions-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
 
.session-card {
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	backdrop-filter: blur(10px);
	padding: 1.25rem;
	border-radius: 1rem;
	border: 1px solid var(--border-primary);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
 
.session-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
 
.session-card-name {
	font-weight: bold;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.session-card-name .gm-badge {
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	display: inline-flex;
	gap: 0.25rem;
	font-weight: bold;
	background: var(--danger);
}
 
.session-card-chara {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-style: italic;
}
.session-card-chara-avatar {
	width: 1.25rem; height: 1.25rem;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--border-light);
}
 
.session-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
 
.session-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.625rem;
	font-weight: bold;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 0.15rem 0.5rem;
	border-radius: 5rem;
	border: 1px solid transparent;
}
.session-status-badge-active {
	background: color-mix(in srgb, var(--success) 15%, transparent);
	border-color: var(--success);
	color: var(--success);
}
.session-status-badge-paused {
	background: color-mix(in srgb, var(--warning) 15%, transparent);
	border-color: var(--warning);
	color: var(--warning);
}
.session-status-badge-ended {
	background: color-mix(in srgb, var(--danger) 15%, transparent);
	border-color: var(--danger);
	color: var(--danger);
}

.session-status-badge-archived {
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	border-color: var(--border-light);
	color: var(--text-muted);
}

.session-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.625rem;
	color: var(--text-secondary);
	background: color-mix(in srgb, var(--bg-main) 50%, transparent);
	border: 1px solid var(--border-light);
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
}
 
.session-card-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}
.btn-sm {
	font-size: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
}
.btn-danger {
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	border: medium;
	font-weight: bold;
	cursor: pointer;
	background: var(--danger-dark);
	color: var(--text-primary);
}
.btn-danger:hover { background: var(--danger); }

/* ========================================
   MODAL SYSTEM
   ======================================== */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--bg-really-dark) 75%, transparent);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
	animation: fadeIn 0.2s ease;
}

.modal-container {
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 2px solid var(--border-primary);
	border-radius: 1rem;
	box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 50%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 50%, transparent);
	max-width: 500px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	animation: slideUp 0.3s ease;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	border-bottom: 1px solid var(--border-primary);
}
.modal-header-nox {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	border-bottom: 1px solid var(--border-primary);
	color: var(--primary);
	gap: 0.5rem;
}

.modal-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--primary);
	margin: 0;
	border: none;
}

.modal-close {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.2s ease;
	line-height: 1;
}

.modal-close:hover {
	background: var(--danger);
	color: var(--text-primary);
}

.modal-body {
	padding: 1.5rem;
}

.modal-text {
	color: var(--text-primary);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.modal-input {
	width: 100%;
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: var(--bg-card-blue);
	color: var(--text-primary);
	font-size: 1rem;
	margin-bottom: 1rem;
	transition: 0.2s;
}

.modal-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
}

.modal-select-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
	max-height: 400px;
	overflow-y: auto;
}

.modal-select-item {
	padding: 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-light);
	background: var(--bg-card-blue);
	color: var(--text-primary);
	text-align: left;
	cursor: pointer;
	transition: 0.2s ease;
	font-weight: bold;
}

.modal-select-item:hover {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 10%, var(--bg-card-blue));
}

.modal-select-item.selected {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 20%, var(--bg-card-blue));
	box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 50%, transparent);
}

.modal-footer {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
}

.modal-btn {
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	border: none;
	font-weight: bold;
	cursor: pointer;
	transition: 0.2s ease;
	font-size: 1rem;
}

.modal-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-btn-cancel {
	background: var(--btn-clear);
	color: var(--text-primary);
}

.modal-btn-cancel:hover {
	background: var(--btn-clear-hover);
}

.modal-btn-confirm {
	background: var(--primary-dark);
	color: var(--text-btn);
}

.modal-btn-confirm:hover:not(:disabled) {
	background: var(--primary);
	box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 50%, transparent);
}

.modal-btn-confirm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ========================================
   REVIEWS SECTION
   ======================================== */

.reviews-section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
	border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    text-align: center;
}

.rating-display {
    margin-bottom: 1.5rem;
}

.rating-display .stars {
    font-size: 2rem;
    letter-spacing: 0.25rem;
    margin-bottom: 0.5rem;
}

.rating-display p {
    color: var(--text-secondary);
    margin: 0;
}

.review-modal {
    max-width: 500px;
    width: 90%;
}

.rating-input {
    margin-bottom: 1.5rem;
}

.rating-input label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.stars-input {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.star-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0.25rem;
    color: inherit;
}

.star-btn:hover {
    transform: scale(1.2);
}

.star-btn.active {
    animation: starPop 0.3s ease;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: flex;
	align-items: center;
	gap: 0.25rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.form-group-multi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.char-count {
    display: block;
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.character-grid {
	padding: 0.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
	max-height: 400px;
	overflow-y: auto;
}

.character-card-selectable {
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	border: 2px solid var(--border-light);
	border-radius: 0.75rem;
	padding: 1rem;
	cursor: pointer;
	transition: 0.3s ease;
	text-align: center;
}

.character-card-selectable:hover {
	background: color-mix(in srgb, var(--bg-card-blue) 75%, transparent);
	border-color: var(--border-very-light);
}

.character-card-selectable.selected {
	background: color-mix(in srgb, var(--primary-dark) 20%, transparent);
	border-color: var(--border-primary);
}

.chara-card-select-img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0px auto 0.5rem;
	object-fit: cover;
	border: 2px solid var(--border-primary);
}

.chara-card-select-name {
	margin: 0.5rem 0px 0.25rem;
	font-size: 1rem;
	color: var(--text-primary);
}

.chara-card-select-job {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin: 0px;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* ========================================
   ADMIN : REVIEW MANAGEMENT
   ======================================== */

.admin-reviews {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.reviews-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    background: var(--bg-card-blue);
    padding: 1.5rem;
    border-radius: 0.75rem;
    text-align: center;
}

.stat-card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.stat-number.warning { color: var(--warning); }
.stat-number.success, .stat-number.bonus-font { color: var(--success); }
.stat-number.danger, .stat-number.malus-font { color: var(--danger); }

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-item {
    background: var(--bg-card-blue);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--border-light);
}

.review-item.pending {
    border-left-color: var(--warning);
}

.review-item.approved {
    border-left-color: var(--success);
}

.review-item.rejected {
    border-left-color: var(--danger);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
	border: 2px solid var(--border-primary);
}

.review-rating {
    display: flex;
	gap: 0.1rem;
}

.review-comment {
    color: var(--text-tertiary);
    margin: 1rem 0;
    line-height: 1.6;
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
	border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
}

.review-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.review-meta .badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.badge.pending {
    background: var(--warning);
    color: var(--text-primary);
}

.badge.approved {
    background: var(--success);
    color: var(--text-primary);
}

.badge.rejected {
    background: var(--danger);
    color: var(--text-primary);
}

.review-meta .date,
.review-meta .target {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

.review-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.review-actions .success {
    border-color: var(--success);
    color: var(--text-primary);
}

.review-actions .success:hover {
    background: var(--success-dark);
}

.review-actions .danger {
    border-color: var(--danger);
    color: var(--text-primary);
}

.review-actions .danger:hover {
    background: var(--danger-dark);
}

/* ========================================
   HOURGLASS ANIMATION
   ======================================== */
   
/* Container pour l'animation */
.hourglass-loader {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-block;
}

/* Chaque frame SVG est cachée par défaut */
.hourglass-loader .hourglass-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Les SVG inline prennent la couleur du parent */
.hourglass-loader .hourglass-frame svg {
  width: 100%;
  height: 100%;
  color: var(--text-primary); /* Couleur par défaut */
}

/* Le sable a une couleur différente */
.hourglass-loader .hourglass-frame svg .sand {
  color: var(--stat-fortune); /* Couleur du sable = doré */
}

/* Animation : afficher les frames en séquence */
.hourglass-loader.animating .hourglass-frame-1 {
  animation: hourglass-frame-1 2.5s infinite;
}

.hourglass-loader.animating .hourglass-frame-2 {
  animation: hourglass-frame-2 2.5s infinite;
}

.hourglass-loader.animating .hourglass-frame-3 {
  animation: hourglass-frame-3 2.5s infinite;
}

.hourglass-loader.animating .hourglass-frame-4 {
  animation: hourglass-frame-4 2.5s infinite;
}

.hourglass-loader.animating .hourglass-frame-5 {
  animation: hourglass-frame-5 2.5s infinite;
}

/* Rotation du container après la pause */
.hourglass-loader.animating {
  animation: hourglass-rotate 2.5s infinite;
}

/* Variante : Hourglass qui pulse pendant la pause */
.hourglass-loader.pulse .hourglass-frame-5 {
  animation: hourglass-frame-5-pulse 2.5s infinite;
}

/* Variante : Glow effet sur le sablier */
.hourglass-loader.glow .hourglass-frame svg {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 50%, transparent));
}

/* Variante : Couleur rouge pour le sablier */
.hourglass-loader.red .hourglass-frame svg,
.hourglass-icon.red svg {
  color: var(--primary);
}

.hourglass-loader.red .hourglass-frame svg .sand,
.hourglass-icon.red svg .sand {
  color: var(--primary-dark);
}

/* Variante : Couleur verte */
.hourglass-loader.green .hourglass-frame svg,
.hourglass-icon.green svg {
  color: var(--success);
}

.hourglass-loader.green .hourglass-frame svg .sand,
.hourglass-icon.green svg .sand {
  color: var(--success-dark);
}

/* Variante : Couleur dorée (par défaut) */
.hourglass-loader.gold .hourglass-frame svg,
.hourglass-icon.gold svg {
  color: var(--stat-fortune);
}

.hourglass-loader.gold .hourglass-frame svg .sand,
.hourglass-icon.gold svg .sand {
  color: var(--warning);
}

/* Variante : Couleur bleue */
.hourglass-loader.blue .hourglass-frame svg,
.hourglass-icon.blue svg {
  color: var(--info);
}

.hourglass-loader.blue .hourglass-frame svg .sand,
.hourglass-icon.blue svg .sand {
  color: var(--info-dark);
}

/* Variante : Couleur violette */
.hourglass-loader.purple .hourglass-frame svg,
.hourglass-icon.purple svg {
  color: var(--stat-ps);
}

.hourglass-loader.purple .hourglass-frame svg .sand,
.hourglass-icon.purple svg .sand {
  color: var(--color-purple);
}

/* Variante : Couleur blanche */
.hourglass-loader.white .hourglass-frame svg,
.hourglass-icon.white svg {
  color: var(--text-primary);
}

.hourglass-loader.white .hourglass-frame svg .sand,
.hourglass-icon.white svg .sand {
  color: var(--text-muted);
}

/* Tailles alternatives */
.hourglass-loader.small {
  width: 24px;
  height: 24px;
}

.hourglass-loader.large {
  width: 64px;
  height: 64px;
}

.hourglass-loader.xlarge {
  width: 96px;
  height: 96px;
}

/* Version inline pour boutons */
.btn-loading .hourglass-loader {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
}

/* ========================================
   Quill Editor Custom
   ======================================== */

.ql-toolbar.ql-snow {
  background: var(--bg-card-blue);
  border: 1px solid var(--border-light) !important;
  border-radius: 0.5rem 0.5rem 0 0;
}

.ql-container.ql-snow {
  background: var(--bg-card-blue);
  border: 1px solid var(--border-light) !important;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  color: var(--text-primary) !important;
  font-family: inherit;
}

.ql-editor {
  min-height: 150px;
  color: var(--text-primary) !important;
}

.ql-editor.ql-blank::before {
  color: var(--text-muted) !important;
  font-style: italic;
}
.ql-snow .ql-editor p { margin: 0.25rem 0; }

.ql-snow .ql-editor h1,
.ql-snow .ql-editor h2,
.ql-snow .ql-editor h3 {
	filter: none;
	text-align: inherit;
	border: none;
	margin: 0.25rem 0;
}

.ql-align-right,
.ql-snow.ql-editor h1.ql-align-right,
.ql-editor h2.ql-align-right,
.ql-editor h3.ql-align-right,
.profile-bio h1.ql-align-right,
.profile-bio h2.ql-align-right,
.profile-bio h3.ql-align-right {
	text-align: right;
}

.ql-align-center,
.ql-editor h1.ql-align-center,
.ql-editor h2.ql-align-center,
.ql-editor h3.ql-align-center,
.profile-bio h1.ql-align-center,
.profile-bio h2.ql-align-center,
.profile-bio h3.ql-align-center {
	text-align: center;
}

.ql-align-justify,
.ql-editor h1.ql-align-justify,
.ql-editor h2.ql-align-justify,
.ql-editor h3.ql-align-justify,
.profile-bio h1.ql-align-justify,
.profile-bio h2.ql-align-justify,
.profile-bio h3.ql-align-justify  {
	text-align: justify;
}

.ql-toolbar.ql-snow .ql-picker .ql-picker-label {
	border-color: var(--btn-clear) !important;
	border-radius: 0.25rem;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
	border-radius: 0.25rem 0.25rem 0 0;
}

/* Boutons toolbar */
.ql-snow .ql-stroke {
  stroke: var(--text-secondary) !important;
}

.ql-snow .ql-fill {
  fill: var(--text-secondary) !important;
}

.ql-snow .ql-picker-label {
  color: var(--text-secondary) !important;
}

.ql-snow .ql-editor pre.ql-syntax {
	background-color: var(--bg-main) !important;
	color: var(--text-secondary) !important;
}
.ql-snow a {
	color: var(--primary) !important;
}

/* Hover */
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover {
  color: var(--primary) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke {
  stroke: var(--primary) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill {
	fill: var(--primary) !important;
}

/* Active */
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active {
  color: var(--primary) !important;
}

.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--primary) !important;
}

.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
	fill: var(--primary) !important;
}

/* Dropdown */
.ql-snow .ql-picker-options {
  background: var(--bg-card-blue) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0 0.25rem 0.25rem 0.25rem;
}

.ql-snow .ql-picker-item::before {
	color: var(--text-secondary) !important;
}
.ql-snow .ql-picker-item:hover::before {
	color: var(--primary) !important;
}

.ql-snow .ql-picker-label:hover::before,
.ql-snow .ql-picker-item:hover::before {
	color: var(--primary) !important;
}

.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker-item:hover .ql-stroke {
	stroke: var(--primary) !important;
}

.ql-snow .ql-editor > :first-child { margin-top: 0; }
.ql-snow .ql-editor > :last-child { margin-bottom: 0; }

/* Style pour le rendu de la bio */
.profile-bio h1 {
	filter: none;
	text-align: initial;
	font-size: 2rem;
	margin-bottom: 0.75rem;
}

.profile-bio h2 {
	text-align: initial;
	font-size: 1.75rem;
	margin-bottom: 0.75rem;
	padding: 0 0.5rem;
	border: none;
}

.profile-bio h3 {
	text-align: initial;
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
	padding: 0 1rem;
	border: none;
}

.profile-bio p {
  margin: 0.75rem 0;
}

.profile-bio strong {
  font-weight: bold;
}

.profile-bio em {
  font-style: italic;
}

.profile-bio pre {
	background-color: var(--bg-main);
	color: var(--text-secondary);
	overflow: visible;
	white-space: pre-wrap;
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

.profile-bio ul, .profile-bio ol {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.profile-bio a {
  color: var(--primary);
  transition: color 0.3s ease;
}

.profile-bio a:hover {
  color: var(--primary-light);
}

.profile-bio blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1rem;
  margin: 0.5rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

.profile-bio code {
  background: var(--bg-card-blue);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

/* ========================================
   TOOLS
   ======================================== */
.dice-roller-inline {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.dice-display-inline {
	display: flex;
	gap: 0.5rem;
}

.dice-roller-full {
	width: 100%;
}

.dice-display-grid {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	min-height: 120px;
	align-items: center;
}

.dice-display {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dice-rolling .dice-icon-wrapper {
	animation: diceShake 0.1s infinite;
}

.dice-results {
	margin-bottom: 1.5rem;
	animation: fadeInTranslate 0.3s ease;
}

.dice-total {
	font-size: 1.125rem;
	color: var(--text-primary);
}

.dice-history {
	background: var(--bg-card-blue);
	padding: 1.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border-light);
	margin-top: 1.5rem;
}

.dice-history h3 {
	color: var(--primary);
	margin-bottom: 1rem;
	font-size: 1.25rem;
}

.history-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.history-item {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 0.75rem;
	background: var(--btn-clear);
	border-radius: 0.5rem;
	border: 1px solid var(--border-very-light);
}

.history-dice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: bold;
}

.history-results {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.history-total {
	font-size: 1.25rem;
	min-width: 3rem;
	text-align: right;
}

.dice-selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1rem;
}

.dice-selector-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--bg-card-blue);
	border: 2px solid var(--border-light);
	border-radius: 0.75rem;
	cursor: pointer;
	transition: all 0.3s;
}

.dice-selector-btn:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 30%, transparent);
}

.dice-selector-btn.active {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 30%, transparent);
}

.dice-label {
	font-size: 0.875rem;
	font-weight: bold;
	color: var(--text-primary);
}

.custom-dice-section {
	padding: 1rem;
	background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
	border-radius: 0.5rem;
	border: 1px solid var(--border-very-light);
}

.custom-dice-display {
	animation: fadeInTranslate 0.3s ease;
}

/* ========================================
   ROADMAP
   ======================================== */
.roadmap-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: calc(100vh - 13em);
}

.roadmap-header {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeIn 0.8s ease;
}

.roadmap-header h1 {
    font-size: 3.5rem;
    color: var(--primary);
    text-shadow: 0 0 20px color-mix(in srgb, var(--primary) 50%, transparent);
    margin-bottom: 0.5rem;
}

.roadmap-header p {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

/* Loading */
.loading {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.loading i {
    font-size: 2rem;
    color: var(--primary);
    animation: pulse 1.5s infinite;
}

/* Filtres */
.filters {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    animation: fadeInDown 0.8s ease;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.filter-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

/* Timeline */
.timeline-rm {
    position: relative;
    padding: 2rem 0;
}

.timeline-rm::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary-darker), var(--primary), var(--primary-darker));
    transform: translateX(-50%);
    box-shadow: 0 0 10px var(--primary);
}

.timeline-rm-item {
    position: relative;
    margin-bottom: 1rem;
	opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.timeline-rm-item:nth-child(even) {
    animation-delay: 0.2s;
}

.timeline-rm-item:nth-child(odd) {
    animation-delay: 0.1s;
}

.timeline-rm-content {
    width: 45%;
    background: color-mix(in srgb, var(--bg-card-blue) 80%, transparent);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 2px solid var(--border-primary);
    position: relative;
    transition: all 0.3s;
}

.timeline-rm-item:nth-child(even) .timeline-rm-content {
    margin-left: auto;
}

.timeline-rm-content:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 30%, transparent);
    border-color: var(--primary);
}

/* Point sur la timeline */
.timeline-rm-marker {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    width: 40px;
    height: 40px;
    background: var(--bg-main);
    border: 4px solid var(--primary);
    border-radius: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px var(--primary);
    z-index: 10;
}

.timeline-rm-marker .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status badges */
.status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 1rem;
	width: fit-content;
}

.status.completed {
    background: var(--success);
    color: var(--text-btn);
}

.status.in-progress {
    background: var(--warning);
    color: var(--text-btn);
}

.status.planned {
    background: var(--info);
    color: var(--text-btn);
}

.timeline-rm-content h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.timeline-rm-content .date {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-rm-content .roadmap-content {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 1rem 0;
}

.timeline-rm-content .roadmap-content a {
    color: var(--primary);
	text-decoration: none;
	font-weight: bold;
}

.tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
	margin-top: 1.5rem;
}

.tag {
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    border: 1px solid var(--primary-darker);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Error message */
.error-message {
    text-align: center;
    padding: 2rem;
    background: color-mix(in srgb, var(--primary-dark) 20%, transparent);
    border: 2px solid var(--primary);
    border-radius: 1rem;
    margin: 2rem 0;
}

.error-message h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}

.error-message p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.hidden { display: none !important; }

/* ========================================
   IMAGE UPLOADER
   ======================================== */
.image-uploader {
  width: 100%;
  margin-bottom: 1rem;
}

.upload-dropzone {
  position: relative;
  width: 100%;
  min-height: 200px;
  max-height: 400px;
  border: 2px dashed var(--border-light);
  border-radius: 1rem;
  background: var(--bg-card-blue);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-dropzone:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--bg-card-blue));
}

.upload-dropzone.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-card-blue));
  transform: scale(1.02);
}

.upload-dropzone.uploading {
  cursor: wait;
  opacity: 0.7;
}

/* Zone vide - Prend toute la largeur */
.upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  width: 100%;
}

.upload-title {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--text-primary);
  margin: 1rem 0 0.5rem;
}

.upload-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Loading */
.upload-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  width: 100%;
}

.upload-loading p {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-weight: bold;
}

/* Preview - Taille adaptée avec image centrée */
.upload-preview {
	position: relative;
	width: 100%;
	max-width: 350px;
	margin: 1rem;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* border: 2px solid var(--primary);
	overflow: hidden; */
}
.upload-preview.edit-chara-avatar {
	max-width: 100%;
	border: none;
	border-radius: unset;
	margin: 0;
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-main);
}

.upload-overlay {
	position: absolute;
	inset: 0;
	/* background: color-mix(in srgb, var(--black) 70%, transparent); */
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity 0.3s ease;
}
.edit-chara-avatar .upload-overlay{
	flex-direction: column;
}
.upload-preview:hover .upload-overlay {
	opacity: 1;
}

.crea-avatar-upload .upload-preview img,
.maru-avatar-upload .upload-preview img {
	border: 3px solid var(--border-primary);
	border-radius: 50%;
}

.upload-btn-change,
.upload-btn-remove {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 0.5rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.875rem;
}

.small .upload-btn-change, .small .upload-btn-remove {
	font-size: 0.75rem;
}

.upload-btn-change {
	background: var(--info);
	color: var(--text-btn);
}

.upload-btn-change:hover {
  background: var(--info-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--info) 50%, transparent);
}

.upload-btn-remove {
  background: var(--danger);
  color: var(--text-btn);
}

.upload-btn-remove:hover {
  background: var(--danger-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 50%, transparent);
}

/* Variantes de taille */
.upload-preview.small {
  max-width: 300px;
}

.upload-preview.large {
  max-width: 700px;
}

.pnj-card-dash .upload-dropzone .upload-preview.small { max-height: 100px; }

.pnj-card-dash .upload-dropzone .upload-preview.small .upload-btn-text { display: none; }

/* ========================================
   Image Cropper Styles
   ======================================== */

/* Container principal */
.image-cropper-container {
  width: 100%;
}

/* Aperçu de l'avatar actuel */
.current-avatar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-really-dark) 20%, transparent);  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== OVERLAY NOIR ===== */
.cropper-overlay {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--bg-really-dark) 85%, transparent);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 1rem;
	border-radius: 1rem;
	width: 100vw;
	height: 100vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: fadeIn 0.2s ease;
}

/* ===== FENÊTRE DE DIALOGUE ===== */
.cropper-dialog {
	background: color-mix(in srgb, var(--bg-really-dark) 95%, transparent);
	border: 2px solid var(--border-primary);
	border-radius: 1rem;
	max-width: 700px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 50%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 50%, transparent);
	animation: slideUp 0.3s ease;
	position: relative;
	z-index: 10001;
}

/* Header */
.cropper-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid var(--border-primary);
	position: relative;
	z-index: 10002;
}

.cropper-header h3 {
	margin: 0;
	font-size: 1.25rem;
	padding: 0;
	border: none;
}

.close-btn {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.2s ease;
	line-height: 1;
}

.close-btn:hover {
	background: var(--danger);
	color: var(--text-primary);
}

.close-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Body */
.cropper-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.cropper-wrapper {
  max-height: 400px;
  background: var(--black);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1rem;
  position: relative;
  border: 1px solid var(--border-light);
}

.cropper-wrapper img {
  display: block;
  max-width: 100%;
}

.cropper-info {
  margin-top: 1rem;
}

.cropper-info p {
  margin: 0;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--bg-card-blue) 95%, transparent);
  border-radius: 0.5rem;
  border-left: 3px solid var(--primary);
}

/* Footer */
.cropper-footer {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
  justify-content: flex-end;
  position: relative;
  z-index: 10002;
}

.cropper-footer button {
  cursor: pointer;
  pointer-events: auto;
}

/* ========================================
   ABOVE UPDATE
   ======================================== */
.loading, .loading p { color: var(--text-secondary); text-align: center; padding: 3rem; }
.with-icon { align-items: center; display: flex; }
.display-block { display: block; }
.display-flex { display: flex; }
.border-bot-none { border-bottom: none; }
.grid { display: grid; }
.flex1 { flex: 1; }
.width100 { width: 100%; }
.gap25 { gap: 0.25rem }
.gap5 { gap: 0.5rem }
.gap75 { gap: 0.75rem }
.gap100 { gap: 1rem }
.margin-auto { margin: auto; }
.margin0, h2.margin0, h3.margin0 { margin: 0; }
.marginud1 { margin: 1rem 0; }
.marginbot0-5 { margin-bottom: 0.5rem; }
.marginbot0-75 { margin-bottom: 0.75rem; }
.marginbot1 { margin-bottom: 1rem; }
.marginbot1-5 { margin-bottom: 1.5rem; }
.marginbot2 { margin-bottom: 2rem; }
.margintop0-25 { margin-top: 0.25rem; }
.margintop0-5 { margin-top: 0.5rem; }
.margintop1 { margin-top: 1rem; }
.margintop1-5 { margin-top: 1.5rem; }
.margintop2 { margin-top: 2rem; }
.marginleft2 { margin-left: 2rem; }
.padding1 { padding: 1rem; }
.padding1-5 { padding: 1.5rem; }
.padding05-1 { padding: 0.5rem 1rem; }
.padding3 { padding: 3rem; }
.grid-150 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid-220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.not-allowed { cursor: not-allowed; }
.pointer { cursor: pointer; }
.opacity05 { opacity: 0.5; }
.opacity1 { opacity: 1; }
.justify-content { justify-content: center; }
.max-content { width: max-content; }
.flex-column { flex-direction: column; }

/* ----- icons ----- */

.icon20 { width: 20px; height: 20px; }
.icon35 { width: 35px; height: 35px; }
.icon40 { width: 40px; height: 40px; }

/* ----- fonts ----- */

.bold { font-weight: bold; }
.text-center { text-align: center; }
.font075 { font-size: 0.75rem; }
.font0875 { font-size: 0.875rem; }
.font1 { font-size: 1rem; }
.font1125, h3.font1125 { font-size: 1.125rem; }
.font125 { font-size: 1.25rem; }
.font125, h3.font125 { font-size: 1.25rem; }
.font15, h2.font15 { font-size: 1.5rem; }
.font2, h1.font2 { font-size: 2rem; }


/* ----- colors ----- */

.bg-primary { background: var(--primary); }
.bg-primdark { background: var(--primary-dark); }
.bg-primdark:hover { background: var(--primary); }
.bg-red { background: var(--primary-dark); }
.bg-red:hover { background: var(--primary); }
.bg-purple { background: var(--color-purple); }
.bg-purple:hover { background: var(--stat-ps); }
.bg-blue { background: var(--info); }
.bg-blue:hover { background: var(--info-dark); }
.skill-ech, .bg-fortune { background: var(--stat-fortune); }
.skill-util, .success, .bg-success { background: var(--success); }
.success:hover { background: var(--success-dark); }
.danger { background: var(--danger); }
.danger:hover { background: var(--danger-dark); }
.success-gradient { background: linear-gradient(135deg, var(--success), var(--success-dark)); }
.danger-gradient { background: linear-gradient(135deg, var(--danger), var(--danger-dark)); }
.warning-gradient { background: linear-gradient(135deg, var(--warning), var(--warning-dark)); }
.info-gradient { background: linear-gradient(135deg, var(--info), var(--info-dark)); }
.bg-bluecard50 { background: color-mix(in srgb, var(--bg-card-blue) 50%, transparent); }

.primary-font { color: var(--primary); }
.blue-font { color: var(--info); }
.fortune-font, .star-gold .star-colo { color: var(--stat-fortune); }
.weight-font { color: var(--stat-weight); }
.primary-text { color: var(--text-primary); }
.secondary-text, h3.secondary-text, p.secondary-text { color: var(--text-secondary); }
.bonus-font { color: var(--success); }
.malus-font, .danger-font { color: var(--danger); }
.psynch { color: var(--stat-ps); }
.text-btn { color: var(--text-btn); }

.border-primary2 { border: 2px solid var(--border-primary); }
.border-primary { border-color: var(--border-primary); }
.border-verylight { border-color: var(--border-very-light); }
.border-success { border-color: var(--success); }
.border-danger { border-color: var(--danger); }
.border-improved-p { border-color: var(--improved-points); }
.border-light { border-color: var(--border-light); }

.muted { color: var(--text-muted); background: var(--btn-clear); }
.text-mute, h3.text-mute { color: var(--text-muted); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1450px) {
	.burger-menu {
		display: block;
		z-index: 1501;
		position: relative;
	}
	.burger-menu .burger-open,
	.burger-menu .burger-close {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; 
	}
	.burger-menu .burger-open { opacity: 1; pointer-events: auto; }
	.burger-menu .burger-close { opacity: 0; pointer-events: none; }
	.burger-menu.active .burger-open { opacity: 0; }
	.burger-menu.active .burger-close { opacity: 1; }
	
	.overlay {
        position: fixed;
        inset: 0;
        background-color:color-mix(in srgb, var(--black) 0%, transparent);
		
        z-index: 999; 
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    .menu-open .overlay {
        background-color: color-mix(in srgb, var(--black) 70%, transparent);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
	
	.main-nav {
		position: fixed;
		top: 0;
		right: -100%;
		height: 100vh;
		width: 320px;
		max-width: 90vw;
		background: color-mix(in srgb, var(--bg-really-dark) 60%, transparent);
		backdrop-filter: blur(20px);
		border-left: 2px solid var(--border-primary);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 6rem 1.5rem 2rem;
		overflow-y: auto;
		transition: 0.3s ease;
		z-index: 1500;
		box-shadow: -10px 0 30px color-mix(in srgb, var(--black) 50%, transparent);
	}
	
	.main-nav.active {
		right: 0;
	}

	.main-nav.active::before {
		content: '';
		position: fixed;
		inset: 0;
		/* background: color-mix(in srgb, var(--black) 70%, transparent); */
		backdrop-filter: blur(10px);
		z-index: -1;
	}
	
	.hideout.menu-active { background: color-mix(in srgb, var(--black) 20%, transparent); }
	
	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	
	.nav-item {
		width: 100%;
	}
	
	.nav-link {
		width: 100%;
		justify-content: flex-start;
	}

	.mega-menu {
		position: static;
		transform: none !important;
		min-width: unset;
		width: 100%;
		margin-top: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
	}
	
	.nav-item.has-submenu.open .mega-menu {
		max-height: 1000px;
		opacity: 1;
		visibility: visible;
		padding: 1rem;
		margin: 0.5rem auto;
		transform: none;
	}
	
	.mega-menu-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.submenu {
		position: static;
		transform: none !important;
		width: 100%;
		margin-top: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
	}
	
	.nav-item.has-submenu.open .submenu {
		max-height: 300px;
		opacity: 1;
		visibility: visible;
		padding: 0.5rem;
		margin: 0.5rem 0;
		transform: none;
	}
	
	.nav-link.btn-jdr { margin-top: 0.5rem; }

	.nav-actions {
		width: 100%;
		flex-direction: column;
		gap: 0.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--border-primary);
		margin-top: 1.5rem;
	}
	
	.home-menu-btn, .admin-menu-btn { display: block; }
	
	.lang-selector,
	.auth-button {
		width: 100%;
	}
	
	.lang-button,
	.auth-button a,
	.admin-btn, .admin-access	{
		width: 100%;
		justify-content: center;
	}
	.lang-dropdown {
		top: auto;
		bottom: calc(100% + 0.75rem);
		transform: translateY(10px);
		width: 100%;
		display: table;
		justify-content: center;
	}
	
	.lang-option { justify-content: center; }
}

@media (max-width: 1024px) {
    .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 200px;
    }
    
    .game-sidebar-left,
    .game-sidebar-right {
        display: none;
    }
    
    .game-header-left {
        flex: 1;
        justify-content: flex-start;
    }
    
    .game-header-center { display: none; }
    
    .game-header-right { gap: 0.5rem; }
    
    .header-btn span { display: none; }
	.news-grid-home { grid-template-columns: repeat(2, 1fr); }
	.article-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.header-container { gap: 1rem; }
	.logo-title { display: none; }
	.header-logo { height: 3em; }
	
	nav ul {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.hero h1 { display: grid; gap: 0.25rem; }
	.hero .icon-wrapper { margin: auto; }
	
	.stats-grid-final {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 0.75rem;
	}
	
	.stat-tooltip-content { min-width: 200px; }
	.stat-raw { font-size: 1.5rem; }
	.stat-derived { font-size: 1.125rem; }
	.stats-grid-simple {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	
	.stat-line-label {
		min-width: 5rem;
		font-size: 0.75rem;
	}
	
	.stat-tooltip-simple {
		min-width: 150px;
		font-size: 0.7rem;
	}
	.footer { padding: 1.5rem 1rem; }
	.footer-content { gap: 1.25rem; }
	.footer-social { gap: 1rem; }
	.social-link svg {
		width: 25px;
		height: 25px;
	}
	
	.social-link {
		width: 42px;
		height: 42px;
	}
	
	.copyright,
	.footer-text {
		font-size: 0.8rem;
	}
	
	.footer-legal {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.footer-legal .separator { display: none; }
	.cookie-banner-content {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	
	.cookie-banner-icon {
		text-align: center;
	}
	
	.cookie-banner-actions {
		flex-direction: column;
	}
	
	.cookie-btn {
		width: 100%;
		text-align: center;
	}
	
	.cookie-floating-btn {
		bottom: 1rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
	}
	
	.cookie-modal-footer {
		flex-direction: column;
	}
	
	.back-header { flex-direction: column-reverse; }
	
	.prof-skill-header {
		border: 2px solid var(--border-primary);
		border-left: none;
		border-right: none;
	}
	
	.player-card {
		flex-direction: column; 
		align-items: flex-start;
    }

    .player-infos {
        width: 100%;
    }

    .player-actions {
        width: 100%;
        align-items: center;
    }
	.player-actions .basic-btn { width: 100%; }
	
	.profile-header-content {
		display: grid;
		gap: 1rem;
	}
	
	.setting-btn {
		right: 0.5rem;
		top: 0.5rem;
		padding: 0.5rem 0.75rem;
	}
	
	.btn-edit { padding: 0.75rem 1rem; }
	.btn-edit-absolute { top: -1rem; right: -1rem; }
	.setting-btn-text, .btn-text-resp { display: none; }
	.profile-avatar { margin: auto; }
	.quick-add-friend { display: grid; }
	.add-friend-input { max-width: none; }
	
	.roadmap-header h1 { font-size: 2rem; }
    .timeline-rm::before { left: 20px; }
    .timeline-rm-content {
        width: calc(100% - 60px);
        margin-left: 60px !important;
    }
    .timeline-rm-marker { left: 20px; }
	.history-item {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.history-total { text-align: center; }
	.upload-preview {
		max-width: 100%;
		border: none;
		border-radius: unset;
		margin: 0;
	}

	.upload-dropzone {
		min-height: 180px;
		max-height: 350px;
	}
	
	.header-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .view-mode-toggle { justify-content: center; }
    .progression-badge { gap: 1rem; }
    .toggle-btn .btn-text-resp { display: none; }
	.cropper-overlay { padding: 0.5rem; }
	.cropper-dialog { max-height: 95vh; }
	.cropper-wrapper { max-height: 300px; }
	.cropper-header h3 { font-size: 1rem; }
	.cropper-footer { flex-direction: column-reverse; }
	.cropper-footer button { width: 100%; }
	.pnj-card-header { flex-direction: column; }
	.pnj-stats-grid { grid-template-columns: repeat(2, 1fr); }

	.pnj-chars-grid,
	.pnj-skills-grid {
		grid-template-columns: 1fr;
	}

	.result-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.favorite-btn {
		width: 2rem;
		height: 2rem;
	}

	.pnj-card-dash .visibility-badge {
		right: 2.75rem;
		font-size: 0.7rem;
		padding: 0.2rem 0.4rem;
	}

	.visibility-toggle-inline {
		font-size: 0.75rem;
		padding: 0.4rem 0.6rem;
	}
	.pnj-view-actions .favorite-btn { right: 0.25rem; }
	.edit-btn-pnj {
		right: 0;
		top: 2.5rem;
		padding: 0.75rem;
	}
	.dice-selector-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
	.banner-actions { display: grid; }
	.game-header { padding: 0 10px; }
    .room-code-display {
        font-size: 0.9rem;
        padding: 4px 10px;
    }
    .session-name { display: none; }
	.game-session-hero {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
	.hero-content { flex-direction: column; }
	.hero-actions { width: 100%; flex-direction: column; }
	.hero-btn { width: 100%; }
	.hero-text h2 { font-size: 1.5rem; }
}

@media (max-width: 640px) {
	.modal-container {
		max-width: 100%;
		margin: 1rem;
	}
	
	.modal-footer {
		flex-direction: column;
	}
	
	.modal-btn {
		width: 100%;
	}
	
	.stat-pool-each { display: grid; }
	.stats-shows { grid-template-columns: repeat(2, 1fr); }
	.competence-block { display: grid; }
	.comp-points-action { justify-content: center; }
	.comp-spe-action { min-width: 260px; margin-left: 1rem; }
	.comp-spe-action .competence-percent { width: 2.5rem; }
	
	.upload-dropzone {
		min-height: 160px;
		max-height: 300px;
	}

	.upload-overlay {
		flex-direction: column;
		opacity: 1;
		background: color-mix(in srgb, var(--black) 50%, transparent);
	}

	.upload-btn-change,
	.upload-btn-remove {
		padding: 0.5rem 1rem;
		font-size: 0.75rem;
	}
	.upload-empty { padding: 2rem 1rem; }
	.contact-infos { display: block; }
	.news-grid { grid-template-columns: 1fr; }
    .news-hero h1 { font-size: 2rem; }
	.article-title { font-size: 1.6rem; }
	.news-grid-home { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
	.comp-points-action { gap: 0.25rem; }
	.competence-percent { width: 3rem; }
}

@media (min-width: 1451px) {
	.nav-item.has-submenu:hover .mega-menu,
	.nav-item.has-submenu:hover .submenu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
	
	.nav-item.has-submenu:hover .submenu {
		transform: translateY(0);
	}
}

/* Print Styles */
@media print {
  .mode-tabs,
  .group-toggle,
  .btn-icon,
  .result-header button,
  .pnj-card-header button {
    display: none !important;
  }
  
  .pnj-card {
    page-break-inside: avoid;
    border: 2px solid #000;
  }
  
  .pnj-card-header {
    background: #333 !important;
    color: white !important;
  }
}