/*
 * Feuille de style du theme "taverne" : ossature des pages, menu lateral,
 * bandeau d'accueil, cartes. Separee de site.css (composants historiques
 * "gt-") et chargee apres lui.
 *
 * Prefixe "dp-" sur toutes les classes (herite du prototype qui a donne
 * naissance a ce theme) : evite toute collision avec les classes "gt-".
 *
 * Plan du fichier (dans l'ordre) :
 *   1. Variables de couleur + base
 *   2. Fond de page fixe (decor de taverne + lueurs de torches)
 *   3. Ossature (sidebar + contenu)
 *   4. Barre laterale (.dp-sidebar)
 *   5. Bandeau d'accueil / carrousel (.dp-hero)
 *   6. Grille de cartes-modules (.dp-cards-menu)
 *   7. Pied de page
 *   8. Responsive (bascule mobile)
 *   9. Composants de pages interieures
 *  10. Streamers Gallic (compte, admin)
 *  11. Equipement WoW (fiche personnage) + 12. son admin
 */

/* ---------------------------------------------------------- 1. Variables */

:root {
	--dp-bg: #0B0F17;           /* fond de page, bleu nuit tres sombre */
	--dp-bg-elevated: #141B2B;  /* sidebar, cartes */
	--dp-bg-elevated-2: #1C2438; /* survol, elements imbriques */
	--dp-border: #262F47;
	--dp-text: #F2F4F8;
	--dp-text-muted: #8A93AC;
	--dp-text-faint: #7C86A2; /* etait #5B6480 : contraste 2,9-3,3:1, sous le minimum WCAG AA (4,5:1) */

	/* Couleur d'accent UNIQUE du site (deja utilisee partout ailleurs sur
	   Gallic Tavern) -- gardee ici pour que cette refonte reste reconnaissable
	   comme "Gallic Tavern", juste sur un fond plus sombre/neutre. */
	--dp-accent: #F2894E;

	/* Couleurs PAR MODULE -- reprises telles quelles des cartes du hub actuel
	   (index.php, $hubCards) : Equipes/Serveurs/Discord/Admin/Calendrier
	   portent deja ces couleurs sur le site en production, aucune raison d'en
	   inventer de nouvelles ici. */
	--dp-accent-teams: #F2894E;
	--dp-accent-servers: #3BA55D;
	--dp-accent-discord: #5865F2;
	--dp-accent-admin: #E5484D;
	--dp-accent-calendar: #9B59B6;
}

* {
	box-sizing: border-box;
}

body.dp-body {
	margin: 0;
	background: var(--dp-bg); /* repli si l'image de fond ne charge pas */
	color: var(--dp-text);
	font-family: 'Poppins', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Les boutons et champs ne heritent pas de la police par defaut du navigateur :
   on force Poppins partout pour qu'aucun element ne retombe sur une autre police. */
button,
input,
select,
textarea {
	font-family: inherit;
}

/* ------------------------------------------ 2. Fond de page fixe (taverne) */

/*
 * Decor de taverne (assets/img/tavern_background.jpg) FIXE (immobile au
 * scroll) derriere tout le site, flouté, avec deux lueurs de torche NETTES
 * calées sur les vraies torches du dessin -- comme si leur lumiere perçait
 * la brume plus nettement que le reste du decor.
 *
 * Decoupe en PLUSIEURS calques plutot qu'un seul element : CSS ne permet pas
 * de flouter uniquement une image de fond sans flouter aussi tout ce qui est
 * devant (filter s'applique a l'element ET a son contenu) -- l'image floutee
 * et les lueurs nettes doivent donc vivre dans des elements SEPARES.
 *
 * z-index:0 ici + position:relative/z-index:1 sur .dp-shell (voir plus bas) :
 * meme principe deja utilise sur le vrai site (.gt-wave-canvas-page + z-10 sur
 * gt-site-shell, voir index.php) plutot qu'un z-index negatif, pour que
 * l'empilement reste correct sans dependre du support z-index negatif du
 * navigateur.
 */
.dp-page-backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.dp-page-backdrop-image {
	position: absolute;
	/* Deborde largement le viewport : le flou applique PEUT reveler un bord
	   net si l'element flouté s'arrete pile aux limites visibles. */
	inset: -60px;
	background-image: url('../img/tavern_background.jpg');
	background-size: cover;
	background-position: center;
	filter: blur(10px) brightness(0.5) saturate(1.1);
}

/* Lueurs de torche, positionnees en POURCENTAGE de l'ecran a l'endroit ou
   elles tombent sur l'image (background-size:cover centre l'image, donc ces
   positions suivent les torches sur la plupart des ecrans larges -- a
   corriger ici si un format d'ecran tres different les decale). */
.dp-page-torch-glow {
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 999px;
	background: radial-gradient(circle, #FFC27A 0%, #F2894E 35%, transparent 70%);
	filter: blur(38px);
	opacity: 0.55;
	transform: translate(-50%, -50%);
}

.dp-page-torch-glow-left {
	top: 24%;
	left: 17%;
	animation: dp-torch-flicker 3.4s ease-in-out infinite;
}

.dp-page-torch-glow-right {
	top: 20%;
	left: 88%;
	animation: dp-torch-flicker 2.8s ease-in-out infinite 0.9s;
}

@media (prefers-reduced-motion: reduce) {
	.dp-page-torch-glow-left,
	.dp-page-torch-glow-right {
		animation: none;
		opacity: 0.45;
	}
}

/* -------------------------------------------------------- 3. Ossature */

/* Conteneur plein ecran : sidebar fixe a gauche + contenu qui prend le reste.
   min-height:100vh pour que la sidebar s'etire meme sur une page courte.
   position:relative + z-index:1 : passe au-dessus de .dp-page-backdrop
   (z-index:0, position:fixed) -- voir la section 2 pour le detail. */
.dp-shell {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 100vh;
}

.dp-main {
	flex: 1;
	min-width: 0; /* evite qu'un contenu large (carrousel) ne pousse la sidebar */
	display: flex;
	flex-direction: column;
}

.dp-main-content {
	flex: 1;
	padding: 28px 32px 0;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}

/* --------------------------------------------------- 4. Barre laterale */

/*
 * Menu lateral (partials/dp_sidebar.php, assets/js/sidebar.js).
 *
 * Inspire d'une carte de taverne plutot que des menus d'applis
 * habituels : titres de section suivis d'un filet, compteurs poses au bout
 * d'une ligne pointillee comme un prix, page active marquee par une
 * flamme de lanterne qui reste allumee sous son icone, profil presente
 * comme un ticket a encoches. Pas de barre d'accent sur le bord gauche ni
 * de pilule teintee : ce sont les reflexes de tous les tableaux de bord.
 */
:root {
	--dp-sb-open-w: 248px;
	--dp-sb-w: var(--dp-sb-open-w);
	--dp-sb-rail-w: 72px;
	--dp-parchment: #CDB397;       /* titres de section : papier vieilli */
	--dp-parchment-faint: #8C7A66;
	--dp-ember: #F2894E;
}
:root:has(.dp-sidebar.is-rail:not(.is-peek)) {
	--dp-sb-w: var(--dp-sb-rail-w);
}

.dp-sidebar {
	width: var(--dp-sb-w);
	flex-shrink: 0;
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: 14px 12px 12px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--dp-border) transparent;
	background:
		linear-gradient(180deg, rgba(242, 137, 78, 0.045), transparent 220px),
		color-mix(in srgb, var(--dp-bg-elevated) 86%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-right: 1px solid var(--dp-border);
	font-family: 'Poppins', system-ui, sans-serif;
	z-index: 40;
}
.dp-sidebar [hidden] {
	display: none !important;
}

/* En-tete : logo + nom, bouton de repli */
.dp-sb-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 2px 14px;
}
.dp-sb-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
	color: var(--dp-text);
	text-decoration: none;
}
.dp-sb-brand img {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	flex: none;
}
.dp-sb-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.1;
}
.dp-sb-brand-text strong {
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.dp-sb-brand-text small {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--dp-parchment-faint);
	white-space: nowrap;
}
.dp-sb-icon-btn {
	flex: none;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--dp-text-faint);
	font-size: 12px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.dp-sb-icon-btn:hover,
.dp-sb-icon-btn:focus-visible {
	color: var(--dp-text);
	border-color: var(--dp-border);
	outline: none;
}
.dp-sb-collapse i {
	transition: transform 0.18s ease;
}
.dp-sb-close {
	display: none;
}

/* Champ "Aller a..." (panel admin) */
.dp-sb-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 2px 6px;
	padding: 0 8px 0 10px;
	height: 34px;
	border-radius: 9px;
	background: rgba(5, 8, 14, 0.55);
	border: 1px solid var(--dp-border);
	color: var(--dp-text-faint);
	font-size: 12px;
	cursor: text;
}
.dp-sb-filter:focus-within {
	border-color: color-mix(in srgb, var(--dp-parchment) 45%, var(--dp-border));
}
.dp-sb-filter input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: none;
	color: var(--dp-text);
	font: inherit;
}
.dp-sb-filter input::placeholder {
	color: var(--dp-text-faint);
}
.dp-sb-filter input::-webkit-search-cancel-button {
	display: none;
}
.dp-sb-filter kbd {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	padding: 1px 5px;
	border-radius: 4px;
	border: 1px solid var(--dp-border);
	color: var(--dp-text-faint);
	white-space: nowrap;
}

/* Sections : titre facon carte de taverne + filet */
/* Boutons centres verticalement entre l'en-tete et le profil (s'il y a
   trop de liens pour la hauteur, la liste repart du haut et defile). */
.dp-sb-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: min-content;
}
.dp-sb-section + .dp-sb-section {
	margin-top: 6px;
}
.dp-sb-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 8px 5px;
	background: none;
	border: 0;
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--dp-parchment);
	text-align: left;
	white-space: nowrap;
}
button.dp-sb-heading {
	cursor: pointer;
}
button.dp-sb-heading:hover,
button.dp-sb-heading:focus-visible {
	color: #E8D3BC;
	outline: none;
}
.dp-sb-rule {
	flex: 1;
	height: 1px;
	margin-top: 2px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--dp-parchment) 35%, transparent), transparent);
}
.dp-sb-heading i {
	font-size: 9px;
	color: var(--dp-parchment-faint);
	transition: transform 0.15s ease;
}
.dp-sb-section.is-closed .dp-sb-heading i {
	transform: rotate(-90deg);
}
.dp-sb-section.is-closed .dp-sb-items {
	display: none;
}
.dp-sidebar.is-filtering .dp-sb-section.is-closed .dp-sb-items {
	display: flex;
}
.dp-sb-items {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Liens */
.dp-sb-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	color: var(--dp-text-muted);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.12s ease, background-color 0.12s ease;
}
.dp-sb-item i {
	position: relative;
	z-index: 1;
	width: 18px;
	flex: none;
	text-align: center;
	font-size: 14.5px;
}
.dp-sb-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-sb-item:hover,
.dp-sb-item:focus-visible {
	color: var(--dp-text);
	background: rgba(255, 255, 255, 0.035);
	outline: none;
}
.dp-sb-item:focus-visible {
	box-shadow: 0 0 0 1px var(--dp-border);
}

/*
 * Page active : le libelle s'eclaire et une petite flamme de lanterne
 * (halo chaud) brule sous l'icone. Signale la page courante sans bloc de
 * couleur ni barre de bord.
 */
.dp-sb-item.is-active {
	color: var(--dp-text);
	font-weight: 600;
}
.dp-sb-item.is-active i {
	color: #FFD7B5;
	text-shadow: 0 0 10px rgba(242, 137, 78, 0.65);
}
.dp-sb-item.is-active::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	width: 30px;
	height: 30px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 137, 78, 0.34) 0%, rgba(242, 137, 78, 0.1) 45%, transparent 70%);
	animation: dp-sb-flicker 3.2s ease-in-out infinite;
	pointer-events: none;
}
.dp-sb-item.is-active::after {
	content: '';
	position: absolute;
	left: 18px;
	bottom: 3px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--dp-ember);
	box-shadow: 0 0 6px 1px rgba(242, 137, 78, 0.8);
}
@keyframes dp-sb-flicker {
	0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
	40% { opacity: 0.82; transform: translateY(-50%) scale(0.95); }
	70% { opacity: 0.95; transform: translateY(-50%) scale(1.03); }
}

/* Compteur facon prix sur une carte : pointilles puis chiffre */
.dp-sb-leader {
	flex: 1;
	min-width: 10px;
	align-self: center;
	margin-top: 6px;
	border-bottom: 1px dotted color-mix(in srgb, var(--dp-text-muted) 45%, transparent);
}
.dp-sb-count {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	color: #FF9C8A;
}

/* Lien hors sections (ex : "Retour au site" du panel admin) */
.dp-sidebar > .dp-sb-item {
	margin-top: 8px;
}

.dp-sb-empty {
	margin: 10px 8px;
	font-size: 12px;
	color: var(--dp-text-faint);
}

/* Profil : ticket a encoches, colle en bas */
.dp-sb-foot {
	position: relative;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed color-mix(in srgb, var(--dp-parchment) 22%, transparent);
}
.dp-sb-me {
	position: relative;
}
.dp-sb-me-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px 8px 12px;
	border: 0;
	border-radius: 10px;
	background: var(--dp-bg-elevated-2);
	color: var(--dp-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	/* Deux encoches rondes sur les cotes : un ticket de vestiaire. */
	-webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	transition: background-color 0.12s ease;
}
.dp-sb-me-btn:hover,
.dp-sb-me-btn:focus-visible,
.dp-sb-me-btn[aria-expanded="true"] {
	background: #232C43;
	outline: none;
}
.dp-sb-avatar {
	position: relative;
	display: flex;
	flex: none;
}
.dp-sb-avatar > img:first-child {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	object-fit: cover;
	border: 2px solid var(--dp-sidebar-ring-color, var(--dp-border));
}
.dp-sb-avatar-frame {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	max-width: none;
	pointer-events: none;
}
.dp-sb-me-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	line-height: 1.25;
	padding-left: 10px;
	border-left: 1px dashed color-mix(in srgb, var(--dp-parchment) 25%, transparent);
}
.dp-sb-me-text strong {
	font-size: 13px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dp-sb-me-text small {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp-parchment-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dp-sb-me-more {
	color: var(--dp-text-faint);
	font-size: 13px;
	padding: 0 2px;
}
.dp-sb-notif {
	position: absolute;
	top: 2px;
	left: 36px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #E5484D;
	border: 2px solid var(--dp-bg-elevated);
	color: #fff;
	font-size: 9.5px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	z-index: 1;
}

/* Menu profil : s'ouvre au-dessus du ticket */
.dp-sb-menu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 8px);
	min-width: 210px;
	padding: 6px;
	border-radius: 12px;
	background: var(--dp-bg-elevated);
	border: 1px solid var(--dp-border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	z-index: 5;
}
.dp-sb-menu a,
.dp-sb-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--dp-text-muted);
	font: inherit;
	font-size: 13px;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}
.dp-sb-menu i {
	width: 16px;
	text-align: center;
	font-size: 13px;
}
.dp-sb-menu a:hover,
.dp-sb-menu a:focus-visible,
.dp-sb-menu button:hover,
.dp-sb-menu button:focus-visible {
	background: var(--dp-bg-elevated-2);
	color: var(--dp-text);
	outline: none;
}
.dp-sb-menu form {
	margin: 5px 0 0;
	padding-top: 5px;
	border-top: 1px dashed var(--dp-border);
}
.dp-sb-menu button.is-danger {
	color: #FF8F8A;
}
.dp-sb-menu button.is-danger:hover,
.dp-sb-menu button.is-danger:focus-visible {
	background: rgba(229, 72, 77, 0.12);
	color: #FFB1AD;
}

/* ------- Menu ferme : colonne d'icones */
.dp-sidebar.is-rail {
	padding-left: 10px;
	padding-right: 10px;
}

/*
 * Menu ferme par defaut (colonne d'icones). Au survol, il s'elargit et la
 * page se resserre a cote de lui, puis reprend sa place quand la souris sort.
 *
 * Pas de transition sur width : animer la largeur recalculait la mise en
 * page de TOUTE la page a chaque image (saccades, surtout sur le calendrier).
 * La largeur change d'un coup, et sidebar.js anime seulement le rendu
 * (clip-path sur le menu, translate sur la page), ce que le navigateur fait
 * sans recalcul.
 */
.dp-sidebar.is-rail.is-peek {
	width: var(--dp-sb-open-w);
	padding-left: 12px;
	padding-right: 12px;
}
/* Bouton "epingler" (menu deplie en permanence) ou "fermer" selon l'etat. */
.dp-sb-collapse .fa-thumbtack {
	display: none;
}
.dp-sidebar.is-rail.is-peek .dp-sb-collapse .fa-thumbtack {
	display: inline-block;
	transform: rotate(45deg);
}
.dp-sidebar.is-rail.is-peek .dp-sb-collapse .fa-angles-left {
	display: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-head {
	flex-direction: column;
	gap: 10px;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-brand {
	justify-content: center;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-brand-text,
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-label,
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-leader,
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-filter,
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-me-text,
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-me-more {
	display: none;
}
/* Ferme, le bouton disparait : c'est le survol qui deplie le menu. */
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-collapse {
	display: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-heading {
	padding: 8px 0 4px;
	pointer-events: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-heading span:first-child,
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-heading i {
	display: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-section:first-child .dp-sb-heading {
	display: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-section.is-closed .dp-sb-items {
	display: flex;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-item {
	justify-content: center;
	padding: 0;
	height: 40px;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-item i {
	font-size: 15.5px;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-item.is-active::before {
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	animation: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-item.is-active::after {
	left: 50%;
	margin-left: -1.5px;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-count {
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 9.5px;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 999px;
	background: #3A1F22;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-me-btn {
	justify-content: center;
	padding: 7px 0;
	-webkit-mask: none;
	mask: none;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-notif {
	left: auto;
	right: 2px;
}
.dp-sidebar.is-rail:not(.is-peek) .dp-sb-menu {
	left: 0;
	right: auto;
}

@media (prefers-reduced-motion: reduce) {
	.dp-sidebar,
	.dp-sb-item,
	.dp-sb-collapse i {
		transition: none;
	}
	.dp-sb-item.is-active::before {
		animation: none;
	}
}

/* ------- Telephone : barre d'onglets en bas + tiroir */
.dp-tabbar,
.dp-sb-scrim {
	display: none;
}

/* ------------------------------------------- 5. Bandeau d'accueil (hero) */

/* Meme traitement verre depoli que la sidebar (voir section 4) : le bandeau
   laisse deviner le decor/les lueurs de torche REELLES du fond de page
   (section 2) a travers lui.

   Vitrine des projets de l'equipe (index.php, $heroProjects) : un en-tete
   (titre du site + compteur/fleches), une "scene" ou les panneaux se
   superposent dans la meme cellule de grille (la hauteur suit le plus grand,
   pas de saut d'un projet a l'autre), et une rangee d'onglets nommes dont la
   "meche" se consume pendant le defilement automatique (assets/js/tavern.js). */
.dp-hero {
	--hero-delay: 8s;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: color-mix(in srgb, var(--dp-bg-elevated) 70%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--dp-border);
	border-radius: 20px;
	padding: 16px 20px;
	margin-bottom: 20px;
	position: relative;
	/* Contient les coins arrondis du visuel et le logo en filigrane. */
	overflow: hidden;
}

/* Flamme irreguliere plutot qu'une simple respiration sinusoidale (voir
   @keyframes gt-blob-breathe sur le reste du site, plus reguliere) : plus de
   paliers, amplitudes qui varient, pour un effet "vraie flamme" plutot qu'un
   pouls mecanique. Utilisee par .dp-page-torch-glow-left/right (section 2). */
@keyframes dp-torch-flicker {
	0%, 100% { opacity: 0.26; transform: translate(-50%, -50%) scale(1); }
	18% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.05); }
	32% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.96); }
	48% { opacity: 0.36; transform: translate(-50%, -50%) scale(1.02); }
	64% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.98); }
	80% { opacity: 0.38; transform: translate(-50%, -50%) scale(1.04); }
}

/* Logo en filigrane -- grayscale+brightness le transforme en un blanc tres
   attenue par l'opacite, quelle que soit la couleur d'origine. Sans projet il
   reste centre derriere le titre ; avec projets il se cale a droite. */
.dp-hero-logo-watermark {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	height: 240px;
	opacity: 0.05;
	filter: grayscale(1) brightness(4);
	pointer-events: none;
}

.dp-hero.has-projects .dp-hero-logo-watermark {
	left: auto;
	right: -40px;
	width: 300px;
	height: 300px;
}

/* --- En-tete : titre du site + navigation -------------------------------- */
.dp-hero-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
}

.dp-hero.has-projects .dp-hero-head {
	justify-content: space-between;
	text-align: left;
}

.dp-hero-title {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.dp-hero.has-projects .dp-hero-title {
	font-size: 20px;
	margin-bottom: 2px;
}

.dp-hero-subtitle {
	color: var(--dp-text-muted);
	font-size: 13px;
	margin: 0;
}

.dp-hero-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.dp-hero-count {
	margin-right: 6px;
	font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
	color: var(--dp-text-faint);
	letter-spacing: 0.04em;
}

.dp-hero-count b {
	color: var(--dp-parchment);
	font-weight: 700;
}

.dp-hero-arrow {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid var(--dp-border);
	color: var(--dp-text-muted);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.dp-hero-arrow:hover {
	color: var(--dp-text);
	border-color: color-mix(in srgb, var(--dp-parchment) 45%, var(--dp-border));
	background: var(--dp-bg-elevated-2);
}

.dp-hero-arrow:focus-visible,
.dp-hero-tab:focus-visible,
.dp-hero-cta:focus-visible,
.dp-hero-link:focus-visible {
	outline: 2px solid var(--dp-parchment);
	outline-offset: 2px;
}

/* --- Scene : panneaux superposes ------------------------------------------ */
.dp-hero-stage {
	position: relative;
	z-index: 1;
	display: grid;
}

.dp-hero-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.dp-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0s;
}

/* Visuel encadre comme une affiche : double filet interieur couleur
   parchemin plutot qu'une simple ombre. Capture d'ecran = plein cadre ;
   simple logo (souvent une miniature 64 px) = embleme centre sur un fond
   flou tire de la meme image ; aucun visuel = icone du projet.
   Sa hauteur suit celle de l'ecran pour que le bandeau laisse toujours voir
   les cartes "Actualites & modules" sans defiler (largeur deduite en 16/10). */
.dp-hero-visual {
	position: relative;
	display: grid;
	place-items: center;
	height: clamp(170px, calc(100vh - 560px), 290px);
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--hero-accent) 38%, transparent), transparent 70%),
		linear-gradient(160deg, color-mix(in srgb, var(--hero-accent) 22%, var(--dp-bg)), var(--dp-bg));
	isolation: isolate;
}

.dp-hero-visual::after {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid color-mix(in srgb, var(--dp-parchment) 30%, transparent);
	border-radius: 9px;
	box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--dp-bg) 40%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--dp-parchment) 14%, transparent);
	pointer-events: none;
}

.dp-hero-visual-blur {
	position: absolute;
	inset: -20%;
	width: 140%;
	height: 140%;
	object-fit: cover;
	filter: blur(28px) saturate(1.3);
	opacity: 0.45;
	z-index: -1;
}

.dp-hero-visual-img {
	width: 34%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.dp-hero-visual.is-shot .dp-hero-visual-blur {
	display: none;
}

.dp-hero-visual.is-shot .dp-hero-visual-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.dp-hero-visual-icon {
	font-size: 64px;
	color: color-mix(in srgb, var(--hero-accent) 70%, #fff);
	filter: drop-shadow(0 0 22px color-mix(in srgb, var(--hero-accent) 65%, transparent));
}

.dp-hero-visual-img,
.dp-hero-visual-icon {
	transform: scale(0.94);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dp-hero-slide.is-active .dp-hero-visual-img,
.dp-hero-slide.is-active .dp-hero-visual-icon {
	transform: scale(1);
}

.dp-hero-visual.is-shot .dp-hero-visual-img {
	transform: scale(1.06);
}

.dp-hero-slide.is-active .dp-hero-visual.is-shot .dp-hero-visual-img {
	transform: scale(1);
}

/* --- Texte du projet ------------------------------------------------------- */
.dp-hero-body {
	min-width: 0;
	transform: translateY(8px);
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dp-hero-slide.is-active .dp-hero-body {
	transform: none;
}

.dp-hero-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dp-parchment);
}

/* Statut : point lumineux + texte, sans pastille teintee. */
.dp-hero-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--dp-text-muted);
	letter-spacing: 0.06em;
}

.dp-hero-status::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hero-status);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-status) 22%, transparent), 0 0 10px var(--hero-status);
}

.dp-hero-name {
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 6px;
	color: var(--dp-text);
}

.dp-hero-desc {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--dp-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.dp-hero-features {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.dp-hero-features li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
	color: var(--dp-text);
}

.dp-hero-features i {
	width: 16px;
	text-align: center;
	font-size: 12px;
	color: color-mix(in srgb, var(--hero-accent) 75%, #fff);
}

.dp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.dp-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--hero-accent);
	color: #160d06;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px var(--hero-accent);
	transition: filter 0.15s, transform 0.15s;
}

.dp-hero-cta i {
	transition: transform 0.15s;
}

.dp-hero-cta:hover {
	filter: brightness(1.08);
}

.dp-hero-cta:hover i {
	transform: translateX(3px);
}

.dp-hero-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dp-text-muted);
	text-decoration: none;
	border-bottom: 1px dashed color-mix(in srgb, var(--dp-parchment) 40%, transparent);
	padding-bottom: 2px;
}

.dp-hero-link:hover {
	color: var(--dp-text);
	border-bottom-color: var(--dp-parchment);
}

/* --- Onglets : un par projet, la meche se consume pendant l'attente ------ */
.dp-hero-tabs {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 4px;
	border-top: 1px dashed color-mix(in srgb, var(--dp-parchment) 22%, transparent);
	padding-top: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.dp-hero-tabs::-webkit-scrollbar {
	display: none;
}

.dp-hero-tab {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--dp-text-faint);
	font: 600 12.5px 'Poppins', system-ui, sans-serif;
	text-align: left;
	cursor: pointer;
	transition: color 0.15s, background-color 0.15s;
}

.dp-hero-tab span:not(.dp-hero-tab-wick) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dp-hero-tab i {
	font-size: 13px;
	flex: none;
}

.dp-hero-tab:hover {
	color: var(--dp-text-muted);
	background: color-mix(in srgb, var(--dp-bg-elevated-2) 60%, transparent);
}

.dp-hero-tab.is-active {
	color: var(--dp-text);
}

.dp-hero-tab.is-active i {
	color: color-mix(in srgb, var(--hero-accent) 75%, #fff);
}

/* Meche : fine ligne sous l'onglet actif. Pendant le defilement auto elle se
   remplit de gauche a droite (braise au bout), puis passe au projet suivant.
   En pause (survol, focus) elle s'arrete la ou elle en est. */
.dp-hero-tab-wick {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--dp-text-faint) 22%, transparent);
	overflow: hidden;
}

.dp-hero-tab-wick::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 60%, transparent), var(--hero-accent) 85%, #FFE2B8);
	transform: scaleX(0);
	transform-origin: left;
}

.dp-hero-tab.is-active .dp-hero-tab-wick::after {
	transform: scaleX(1);
}

.dp-hero.is-playing .dp-hero-tab.is-active .dp-hero-tab-wick::after {
	animation: dp-hero-wick var(--hero-delay) linear forwards;
}

.dp-hero.is-playing.is-paused .dp-hero-tab.is-active .dp-hero-tab-wick::after {
	animation-play-state: paused;
}

@keyframes dp-hero-wick {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.dp-hero-slide,
	.dp-hero-slide.is-active,
	.dp-hero-body,
	.dp-hero-visual-img,
	.dp-hero-visual-icon {
		transition: none;
		transform: none;
	}
}

/* --- Streamers Gallic en direct (cadre a droite du bandeau) ---------------
   Visible seulement quand au moins un Streamer Gallic est en live (voir
   gallic_streams_live_now(), modules/streams/lib/streams.php). Le plus
   regarde en grand avec sa miniature, les suivants en lignes compactes. */
.dp-hero-row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

.dp-hero.has-live .dp-hero-row {
	grid-template-columns: minmax(0, 1fr) 272px;
}

.dp-hero-main {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

@media (min-width: 861px) {
	.dp-hero.has-live .dp-hero-slide {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 22px;
	}
}

.dp-hero-live {
	--live: #FF4D5E;
	--twitch: #9146FF;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 22px;
	border-left: 1px dashed color-mix(in srgb, var(--dp-parchment) 22%, transparent);
	min-width: 0;
}

.dp-hero-live-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dp-text);
}

.dp-hero-live-head span:last-child {
	margin-left: auto;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--dp-parchment-faint);
}

.dp-hero-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--live);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent);
	animation: dp-live-pulse 1.8s ease-out infinite;
}

@keyframes dp-live-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
	70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

.dp-hero-live-feature {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 8px 12px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--dp-bg) 55%, transparent);
	border: 1px solid var(--dp-border);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}

.dp-hero-live-feature:hover {
	border-color: color-mix(in srgb, var(--twitch) 60%, var(--dp-border));
}

.dp-hero-live-feature:focus-visible,
.dp-hero-live-row:focus-visible {
	outline: 2px solid var(--dp-parchment);
	outline-offset: 2px;
}

/* Miniature : meme double filet que les visuels de projet (affiche). */
.dp-hero-live-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 9px;
	overflow: hidden;
	background: linear-gradient(135deg, color-mix(in srgb, var(--twitch) 35%, var(--dp-bg)), var(--dp-bg));
}

.dp-hero-live-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dp-hero-live-feature:hover .dp-hero-live-thumb img {
	transform: scale(1.04);
}

.dp-hero-live-thumb::after {
	content: '';
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	pointer-events: none;
}

.dp-hero-live-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--live);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.dp-hero-live-meta {
	position: absolute;
	left: 10px;
	bottom: 9px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(6, 8, 14, 0.72);
	color: #fff;
	font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
}

.dp-hero-live-meta i {
	color: var(--live);
	font-size: 10px;
}

.dp-hero-live-who {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 4px;
	min-width: 0;
}

.dp-hero-live-who img,
.dp-hero-live-row img,
.dp-hero-live-initial {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: none;
	box-shadow: 0 0 0 2px var(--dp-bg), 0 0 0 3.5px var(--live);
}

.dp-hero-live-who > span:not(.dp-hero-live-initial),
.dp-hero-live-row > span:not(.dp-hero-live-count):not(.dp-hero-live-initial) {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.dp-hero-live-who strong,
.dp-hero-live-row strong {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dp-hero-live-who small,
.dp-hero-live-row small {
	font-size: 11.5px;
	color: var(--dp-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dp-hero-live-brand {
	margin-left: auto;
	font-size: 15px;
	color: var(--twitch);
}

.dp-hero-live-title {
	padding: 0 4px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--dp-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.dp-hero-live-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s;
}

.dp-hero-live-row img,
.dp-hero-live-row .dp-hero-live-initial {
	width: 26px;
	height: 26px;
	font-size: 11px;
}

/* Pas d'image de profil Twitch : initiale sur fond violet Twitch. */
.dp-hero-live-initial {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--twitch) 55%, var(--dp-bg));
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.dp-hero-live-row:hover {
	background: color-mix(in srgb, var(--dp-bg-elevated-2) 70%, transparent);
}

.dp-hero-live-count {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
	color: var(--dp-text-muted);
}

.dp-hero-live-count i {
	color: var(--live);
	font-size: 10px;
}

.dp-hero-live-more {
	margin: 2px 8px 0;
	font-size: 11.5px;
	color: var(--dp-text-faint);
}

@media (max-width: 1180px) {
	.dp-hero.has-live .dp-hero-features {
		display: none;
	}
}

@media (max-width: 1020px) {
	.dp-hero.has-live .dp-hero-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-hero-live {
		order: -1;
		padding-left: 0;
		padding-bottom: 16px;
		border-left: 0;
		border-bottom: 1px dashed color-mix(in srgb, var(--dp-parchment) 22%, transparent);
	}

	.dp-hero-live-feature {
		display: grid;
		grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 14px;
		align-items: start;
	}

	.dp-hero-live-thumb {
		grid-row: 1 / 3;
	}

	.dp-hero-live-who,
	.dp-hero-live-title {
		padding: 0;
	}
}

@media (max-width: 560px) {
	.dp-hero-live-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-hero-live-thumb {
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-hero-live-dot {
		animation: none;
	}
}

/* ---------------------------------------------------- 6. Grille de cartes */

.dp-section-label {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dp-text-faint);
	margin: 0 0 12px;
}

.dp-cards-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

/* Lavis colore par module (--card-accent, posee en inline-style par carte --
   voir $moduleCards en PHP, une VRAIE couleur hexa directe, pas une variable
   CSS imbriquee dans une autre : une carte precedente utilisait var(--dp-accent-X)
   comme valeur de --card-accent, ce qui a deja pose probleme de rendu sur
   color-mix() avec certains navigateurs -- une couleur plate evite tout risque)
   plutot qu'un meme verre depoli neutre partout : chaque module doit se
   reconnaitre a sa couleur au premier coup d'oeil, comme sur la maquette de
   reference. Le degrade reste assez sombre en bas pour garder le texte
   lisible quelle que soit la couleur. */
.dp-card-module {
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 65%),
		color-mix(in srgb, var(--dp-bg-elevated) 80%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--card-accent) 35%, var(--dp-border));
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	/* overflow:hidden : le bandeau (.dp-card-banner) doit suivre les coins
	   arrondis du haut de la carte plutot que de les deborder en carre. */
	overflow: hidden;
	position: relative;
}

/* Bandeau PNG en haut de carte (voir $card['banner']/$slide['banner'] en PHP,
   branche sur gallic_game_display_config()['banner'] -- configurable depuis
   admin/games.php). Tant qu'aucune image n'est definie pour ce module/jeu,
   repli sur un degrade de --card-accent : jamais un bloc vide. */
.dp-card-banner {
	position: relative;
	height: 88px;
	flex-shrink: 0;
	background-color: color-mix(in srgb, var(--card-accent) 32%, var(--dp-bg-elevated));
	background-image: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 55%, transparent), transparent 75%);
	background-size: cover;
	background-position: center;
}

/* Fondu vers le bas du bandeau : la pastille d'icone (position absolue, voir
   .dp-card-icon) et le debut du texte doivent toujours rester lisibles,
   qu'il y ait une vraie photo ou juste le degrade de repli dessous. */
.dp-card-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--dp-bg-elevated) 92%, transparent) 100%);
}

/* Pastille PLEINE couleur (pas juste teintee) : c'est elle qui porte
   l'identite du module sur la maquette de reference. Chevauche le bas du
   bandeau (position absolue + le corps de carte en padding-top, voir
   .dp-card-body) plutot que de s'empiler proprement en dessous -- effet
   "badge" directement inspire de la maquette de reference. L'anneau
   (border) la detache nettement du bandeau qu'elle recouvre. */
.dp-card-icon {
	position: absolute;
	z-index: 1;
	top: 64px;
	left: 16px;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: var(--card-accent);
	color: #fff;
	border: 3px solid var(--dp-bg-elevated);
	box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--card-accent) 70%, transparent);
}

.dp-card-body {
	padding: 32px 18px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.dp-card-title {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--card-accent);
	margin: 0;
}

.dp-card-stats {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

/* ---- Carrousel de slides (module Equipes : un jeu par slide) ---------- */

/* Une seule slide visible a la fois (voir assets/js/tavern.js, qui
   bascule .is-active) -- les autres restent dans le DOM (SEO/accessibilite
   neutre ici, page admin non indexee) mais masquees. */
.dp-card-carousel-slide {
	display: none;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.dp-card-carousel-slide.is-active {
	display: flex;
}

.dp-card-carousel-arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: none;
	background: rgba(11, 15, 23, 0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dp-card-carousel-arrow:hover {
	background: rgba(11, 15, 23, 0.8);
}

.dp-card-carousel-prev {
	left: 8px;
}

.dp-card-carousel-next {
	right: 8px;
}

.dp-card-carousel-dots {
	position: absolute;
	z-index: 2;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
}

.dp-card-carousel-dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
}

.dp-card-carousel-dot.is-active {
	background: #fff;
	width: 12px;
}

.dp-card-stat-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--dp-text-muted);
}

.dp-card-stat-row strong {
	color: var(--dp-text);
	font-weight: 700;
}

/* Evenement : un bloc (titre a gauche tronque, date a droite) -- texte petit
   pour tenir plusieurs evenements dans la carte. */
.dp-event-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 4px 8px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--card-accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
	font-size: 10.5px;
}

.dp-event-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--dp-text);
	font-weight: 600;
}

.dp-event-date {
	flex-shrink: 0;
	color: var(--card-accent);
	font-weight: 700;
	font-size: 9px;
}

/* Mois affiche par la carte Evenements -- les fleches de navigation sont
   sur le bandeau (.dp-card-carousel-arrow, reutilisees telles quelles,
   meme emplacement que les carrousels Equipes/Serveurs/Projets). */
.dp-events-nav-label {
	display: block;
	color: var(--card-accent);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Evenements du mois selectionne : un seul panneau visible a la fois. */
.dp-events-panel {
	display: none;
	flex-direction: column;
	gap: 6px;
}

.dp-events-panel.is-active {
	display: flex;
}

.dp-events-row.is-extra {
	display: none;
}

.dp-events-panel.is-expanded .dp-events-row.is-extra {
	display: block;
}

.dp-events-more {
	align-self: flex-start;
	padding: 0 4px;
	border: none;
	background: transparent;
	color: var(--card-accent);
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	cursor: pointer;
}

.dp-card-stat-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--dp-text-faint);
	flex-shrink: 0;
}

.dp-card-stat-dot.is-ok {
	background: #3BA55D;
}

/* Ligne "etiquette : valeur" alignee (ex: Jeu / IP / MDP sur le module
   Serveurs) -- l'etiquette a une largeur fixe pour que toutes les valeurs
   d'une meme carte s'alignent en colonne, au lieu d'une simple phrase en
   texte brut (.dp-card-stat-row ci-dessus, toujours utilisee quand il n'y a
   pas de notion de cle/valeur, ex: une note libre). */
.dp-card-kv-row {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	gap: 8px;
	font-size: 12px;
}

.dp-card-kv-label {
	flex-shrink: 0;
	/* Largeur assez grande pour la plus longue etiquette utilisee (JOUEUR) --
	   une largeur trop courte fait deborder le texte sans agrandir la boite
	   flex, ce qui colle visuellement l'etiquette a la valeur suivante malgre
	   le gap (bug observe avec JOUEUR20). */
	width: 46px;
	white-space: nowrap;
	color: var(--dp-text-faint);
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Carte dont les etiquettes sont longues (ex: "GALLIC CALENDAR") : colonne
   elargie, sinon le texte deborde sur la valeur comme pour JOUEUR. */
.dp-card-stats--wide .dp-card-kv-label {
	width: 104px;
}

.dp-card-kv-value {
	color: var(--dp-text);
	font-weight: 600;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Valeur sensible (IP, mot de passe) : floutee par defaut pour ne pas
   apparaitre a l'ecran en stream/capture -- l'oeil la revele, la copie reste
   possible meme floutee. */
.dp-card-kv-row .dp-secret {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 11px;
	transition: filter 0.2s ease;
	user-select: none;
}

.dp-card-kv-row .dp-secret:not(.is-revealed) {
	filter: blur(5px);
}

.dp-card-kv-row .dp-secret.is-revealed {
	user-select: text;
}

/* Mini boite a droite regroupant oeil + copie */
.dp-secret-tools {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	margin-left: auto;
	margin-right: 0;
	padding: 2px 3px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
}

.dp-secret-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--dp-text-faint);
	font-size: 9px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.dp-secret-btn:hover {
	color: var(--dp-text);
	background: color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.dp-secret-btn.is-done {
	color: #3BA55D;
}

/* Tavernier (chef d'equipe) d'une equipe, affiche sous les stats du
   carrousel Equipes -- boite compacte en ligne (avatar a gauche, texte a
   droite), pas un gros bloc centre : ca reste une ligne d'info parmi
   d'autres sur la carte, pas l'element dominant. */
.dp-card-tavernier-box {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 6px 10px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--card-accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
}

.dp-card-tavernier-avatar {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--card-accent);
}

.dp-card-tavernier-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dp-card-tavernier-label {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #F2C94C;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.dp-card-tavernier-name {
	color: var(--dp-text);
	font-weight: 800;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Pleine largeur, texte blanc (pas la couleur sombre de fond) : sur la
   maquette de reference le bouton est le point le plus lumineux de la carte,
   pas un lien discret -- il doit se voir immediatement comme une vraie
   action, meme en un rapide coup d'oeil sur la grille complete. */
.dp-card-body > .dp-card-cta {
	width: calc(100% + 36px);
	margin: auto -18px 0;
	padding: 14px;
	border-radius: 0 0 16px 16px;
}

.dp-card-cta {
	display: flex;
	width: 100%;
	margin-top: auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--card-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	/* Easing "decelere" (sort vite, se pose en douceur) plutot qu'un ease
	   lineaire -- c'est ce qui rend un hover "luxe" au lieu de saccade. Pas de
	   translateY : un bouton qui "se souleve" fait cheap, un zoom centre tres
	   leger (scale) reste precis et stable. */
	transition: filter 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.dp-card-cta:hover {
	filter: brightness(1.08);
}

.dp-card-cta-label {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.dp-card-cta:hover .dp-card-cta-label {
	transform: translateY(-2px);
}

/* Deux actions empilees (ex: Rejoindre + Voir les bots) -- la secondaire
   reste en contour, pour que la principale garde toute l'attention. */
.dp-card-module .dp-card-cta-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: auto -18px 0;
	padding: 12px 18px 0;
	border-top: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
}

.dp-card-module .dp-card-cta-group .dp-card-cta {
	margin-top: 0;
}

.dp-card-module .dp-card-cta-group > .dp-card-cta:last-child {
	width: calc(100% + 36px);
	margin: 0 -18px;
	padding: 14px;
	border-radius: 0 0 16px 16px;
}

.dp-card-module .dp-card-cta-group .dp-card-cta-secondary {
	background: transparent;
	color: var(--card-accent);
	border: 1px solid color-mix(in srgb, var(--card-accent) 55%, transparent);
}

.dp-card-module .dp-card-cta-group .dp-card-cta-secondary:hover {
	background: color-mix(in srgb, var(--card-accent) 14%, transparent);
	color: var(--card-accent);
}

/* ------------------------------------------------------------ 7. Footer */

/* padding-top genereux (pas juste quelques px) : sur une page longue (ex:
   joueurs.php), margin-top:auto se resout a 0 des que le contenu depasse
   deja la hauteur de la fenetre -- sans ce padding le dernier bloc de
   contenu (grille de cartes, tableau...) se retrouvait colle au trait du
   footer. Sur une page courte, margin-top:auto pousse quand meme le footer
   en bas comme avant, ce padding s'ajoute juste par-dessus. */
.dp-footer {
	border-top: 1px solid var(--dp-border);
	padding: 44px 0 28px;
	text-align: center;
	color: var(--dp-text-faint);
	font-size: 12px;
	margin-top: auto;
}

/* Bandeau d'avertissement "prototype" (pages d'essai visuel). */
.dp-prototype-banner {
	background: color-mix(in srgb, var(--dp-accent) 15%, var(--dp-bg));
	border: 1px dashed var(--dp-accent);
	color: var(--dp-accent);
	font-size: 12px;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 10px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------- 8. Responsive mobile */

@media (max-width: 860px) {
	/* Menu lateral : tiroir ouvert depuis la barre d'onglets du bas */
	.dp-sidebar,
	.dp-sidebar.is-rail {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(300px, 86vw);
		height: 100dvh;
		padding: 14px 12px 12px;
		background: var(--dp-bg-elevated);
		transform: translateX(-105%);
		transition: transform 0.22s ease;
		z-index: 70;
		box-shadow: 24px 0 48px rgba(0, 0, 0, 0.5);
	}

	.dp-sidebar.is-open {
		transform: translateX(0);
	}

	/* Le mode replie n'existe pas sur telephone : on reaffiche tout. */
	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-head {
		flex-direction: row;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-brand-text,
	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-label,
	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-me-text,
	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-me-more {
		display: flex;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-label {
		display: inline;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-leader {
		display: block;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-filter {
		display: flex;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-heading span:first-child,
	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-section:first-child .dp-sb-heading {
		display: flex;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-item {
		justify-content: flex-start;
		padding: 0 10px;
		height: 40px;
	}

	.dp-sidebar.is-rail:not(.is-peek) .dp-sb-count {
		position: static;
		background: none;
		font-size: 12px;
		padding: 0;
	}

	.dp-sidebar .dp-sb-item {
		height: 40px;
	}

	.dp-sb-collapse {
		display: none;
	}

	.dp-sb-close {
		display: grid;
	}

	.dp-sb-filter kbd {
		display: none;
	}

	.dp-sb-scrim:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 65;
		background: rgba(4, 6, 11, 0.6);
		backdrop-filter: blur(2px);
	}

	html.dp-sb-locked {
		overflow: hidden;
	}

	.dp-tabbar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		height: calc(60px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: color-mix(in srgb, var(--dp-bg-elevated) 92%, transparent);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-top: 1px dashed color-mix(in srgb, var(--dp-parchment) 25%, transparent);
	}

	.dp-tabbar a,
	.dp-tabbar button {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		border: 0;
		background: none;
		color: var(--dp-text-faint);
		font: 600 10.5px 'Poppins', system-ui, sans-serif;
		text-decoration: none;
		cursor: pointer;
	}

	.dp-tabbar i {
		font-size: 17px;
	}

	.dp-tabbar .is-active {
		color: var(--dp-text);
	}

	.dp-tabbar .is-active i {
		color: #FFD7B5;
		text-shadow: 0 0 10px rgba(242, 137, 78, 0.65);
	}

	.dp-tabbar b {
		position: absolute;
		top: 8px;
		left: calc(50% + 6px);
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: #E5484D;
		color: #fff;
		font-size: 9.5px;
		line-height: 16px;
		text-align: center;
	}

	/* Place pour la barre d'onglets en bas de page */
	body:has(.dp-tabbar) {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	.dp-shell {
		flex-direction: column;
	}

	.dp-hero {
		padding: 16px;
		gap: 14px;
	}

	.dp-hero-head {
		align-items: flex-start;
	}

	.dp-hero.has-projects .dp-hero-subtitle {
		display: none;
	}

	.dp-hero-count {
		display: none;
	}

	.dp-hero-slide {
		grid-template-columns: 1fr;
		gap: 16px;
		align-items: start;
	}

	.dp-hero-visual {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 8;
	}

	.dp-hero-visual-img {
		width: 26%;
	}

	.dp-hero-visual-icon {
		font-size: 48px;
	}

	.dp-hero-tab {
		flex: 0 0 auto;
	}

	.dp-main-content {
		padding: 20px 16px 0;
	}
}

/* ------------------------------------- 9. Composants de pages interieures */

/* En-tete simple pour une page interieure (ex: addons.php) -- plus leger que
   le gros bandeau promo du Hub (.dp-hero), juste un repere de page. */
.dp-page-header {
	margin-bottom: 28px;
}

.dp-page-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--dp-accent) 35%, transparent);
	background: color-mix(in srgb, var(--dp-accent) 14%, transparent);
	color: var(--dp-accent);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.dp-page-title {
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: var(--dp-text);
	margin: 0 0 8px;
}

.dp-page-subtitle {
	color: var(--dp-text-muted);
	font-size: 14px;
	max-width: 640px;
}

.dp-page-subtitle-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	color: var(--dp-accent);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.dp-page-subtitle-link:hover {
	color: var(--dp-text);
}

.dp-empty-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 24px;
	border-radius: 20px;
	border: 1px dashed var(--dp-border);
	color: var(--dp-text-muted);
	font-size: 14px;
	text-align: center;
}

.dp-empty-panel i {
	font-size: 22px;
	color: var(--dp-text-faint);
}

/* Sections par categorie (projets.php) -- un titre + une grille par
   categorie (Jeux, Addons, Bots...), "#cle-categorie" comme ancre pour y
   sauter directement (voir le bandeau "Nos Addons WoW" de teams.php). */
.dp-project-section {
	margin-bottom: 36px;
	scroll-margin-top: 20px;
}

.dp-project-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--dp-text);
	margin: 0 0 16px;
}

.dp-project-section-title i {
	color: var(--dp-accent);
}

/* Grille de projets (projets.php) -- tuiles carrees, meme logique visuelle
   que les cartes-modules du hub (icone, statut, titre, accroche, CTA) mais en
   grille plutot qu'en carrousel : une liste de projets se parcourt entiere,
   pas page par page. */
.dp-projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.dp-project-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border-radius: 18px;
	background: linear-gradient(165deg, color-mix(in srgb, var(--card-accent) 22%, transparent), var(--dp-bg-elevated) 70%);
	border: 1px solid color-mix(in srgb, var(--card-accent) 32%, var(--dp-border));
	text-decoration: none;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
}

.dp-project-tile:hover {
	transform: translateY(-3px);
	border-color: var(--card-accent);
}

.dp-project-tile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.dp-project-tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--card-accent) 22%, transparent);
	color: var(--card-accent);
	font-size: 18px;
}

.dp-project-tile-icon-img {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid var(--dp-border);
}

.dp-project-tile-status {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dp-project-tile-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--dp-text);
	margin: 0;
}

.dp-project-tile-tagline {
	font-size: 12.5px;
	color: var(--dp-text-muted);
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

.dp-project-tile-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--card-accent);
}

/* Page de presentation d'un projet/jeu/addon (partials/dev_presentation.php,
   utilisee par game_*.php, addon_*.php, project.php). */
.dp-dev-hero {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 40px 24px;
}

.dp-dev-hero-icon,
.dp-dev-hero-icon-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.dp-dev-hero-icon {
	background: color-mix(in srgb, var(--card-accent) 22%, transparent);
	color: var(--card-accent);
	font-size: 32px;
}

.dp-dev-hero-icon-img {
	object-fit: cover;
	border: 1px solid var(--dp-border);
}

.dp-dev-hero-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}

.dp-dev-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.dp-dev-section {
	max-width: 720px;
	margin: 0 auto 20px;
	padding: 28px;
	border-radius: 20px;
	background: var(--dp-bg-elevated);
	border: 1px solid var(--dp-border);
}

.dp-dev-section-title {
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--dp-text);
	margin: 0 0 14px;
}

.dp-dev-section-text {
	color: var(--dp-text-muted);
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
}

.dp-dev-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-dev-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--dp-text-muted);
}

.dp-dev-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	flex-shrink: 0;
}

.dp-dev-screenshots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.dp-dev-screenshots img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--dp-border);
}

.dp-dev-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.dp-dev-meta dt {
	color: var(--dp-text-faint);
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

.dp-dev-meta dd {
	color: var(--dp-text);
	font-weight: 600;
	font-size: 13px;
	margin: 0;
}

.dp-dev-back {
	text-align: center;
	margin: 32px 0 8px;
}

.dp-dev-back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--dp-text-muted);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.dp-dev-back a:hover {
	color: var(--dp-accent);
}
/* Boutons-pilule compacts (ex: teams.php) -- un bouton d'action secondaire ne
   merite pas un gros bandeau toujours visible comme sur le premier jet de
   cette page, juste une pilule discrete qui ouvre un petit panneau au clic. */
.dp-pill-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--dp-border);
	color: var(--dp-text-muted);
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.dp-pill-ghost:hover {
	color: var(--dp-text);
	border-color: var(--dp-accent);
}

.dp-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border: none;
	border-radius: 999px;
	background: var(--dp-accent);
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
}

.dp-pill-btn:hover {
	filter: brightness(1.08);
}

/* Modale (ex: "Creer une equipe" / demande, teams.php) -- backdrop en
   Tailwind (fixed/inset-0/flex, deja charge sur ces pages), panneau en
   classes dp- pour matcher le reste du nouveau style. */
.dp-modal-panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	border-radius: 20px;
	background: var(--dp-bg-elevated);
	border: 1px solid var(--dp-border);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dp-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--dp-text-muted);
	cursor: pointer;
}

.dp-modal-close:hover {
	color: var(--dp-text);
	background: var(--dp-bg-elevated-2);
}

.dp-modal-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: var(--dp-text);
	margin: 0 0 4px;
}

.dp-modal-hint {
	font-size: 12px;
	color: var(--dp-text-muted);
	margin: 0;
}

/* Bandeau "Nos Addons WoW" (teams.php) -- MEME largeur/gabarit que les
   groupes de jeu au-dessus (rounded-2xl, meme hauteur de bandeau), pas une
   colonne laterale : reste dans le flux normal, pousse vers le bas quand un
   groupe est deplie au-dessus, revient a sa place des qu'on le replie.
   Accent dore distinct de l'orange des equipes : signale "autre categorie"
   (addon, pas roster) d'un coup d'oeil. */
.dp-addon-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, color-mix(in srgb, #F2894E 18%, transparent), transparent 75%);
	border: 1px solid color-mix(in srgb, #F2894E 35%, transparent);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.dp-addon-bar:hover {
	border-color: #F2894E;
	background: linear-gradient(135deg, color-mix(in srgb, #F2894E 26%, transparent), transparent 75%);
}

.dp-addon-bar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #F2894E26;
	color: #F2894E;
	font-size: 20px;
	flex-shrink: 0;
}

.dp-addon-bar-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dp-addon-bar-title {
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--dp-text);
	white-space: nowrap;
}

.dp-addon-bar-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #F2894E;
}

/* Variante colonne etroite (teams.php, a cote de la liste des jeux en 90/10) --
   hauteur fixe (7rem = 112px) qui correspond EXACTEMENT a h-28 sur le
   bandeau du premier jeu (voir plus haut) pour un alignement pixel-parfait.
   Icone a GAUCHE comme le bandeau de jeu (pas centre/empile) : meme langage
   visuel des deux cotes. Tout est reduit (icone, texte) pour tenir dans une
   colonne de ~10% de largeur -- le titre peut revenir a la ligne (pas de
   nowrap) plutot que d'etre tronque illisible. Cache automatiquement
   (classe .hidden, voir le script de teams.php) quand un groupe de jeu est
   deplie -- la grille repasse alors sur 1 seule colonne, geree en JS plutot
   qu'en CSS pur pour rester responsive (voir le commentaire du script). */
.dp-addon-bar--aside {
	position: relative;
	height: 7rem;
	padding: 10px 14px;
	gap: 8px;
}

/* Petit trait qui relie visuellement le bandeau de jeu (WoW) et le bloc
   Addons dans le gap de la grille (gap-6 = 24px, voir data-teams-grid) --
   signale que "jeu" et "addons" de ce jeu vont ensemble. Doit vivre en
   DEHORS de .dp-addon-bar--aside (pas de overflow:hidden dessus) sinon le
   trait, positionne a gauche de la boite, serait rogne par son propre
   parent. */
.dp-addon-bar--aside::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -24px;
	width: 24px;
	height: 2px;
	background: color-mix(in srgb, #F2894E 60%, transparent);
	transform: translateY(-50%);
}

.dp-addon-bar--aside .dp-addon-bar-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-size: 13px;
}

.dp-addon-bar--aside .dp-addon-bar-title {
	font-size: 11.5px;
	line-height: 1.25;
	white-space: normal;
}

.dp-addon-bar--aside .dp-addon-bar-cta {
	font-size: 9.5px;
}

/* Boutons de tri du roster (teams.php, en-tetes Membre/Role) -- memes
   proportions que le texte d'en-tete existant (gt-roster-cols), juste
   cliquable avec une fleche qui s'inverse selon le sens de tri actif. */
.dp-roster-sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.dp-roster-sort i {
	font-size: 9px;
	opacity: 0.5;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.dp-roster-sort:hover {
	color: var(--dp-text);
}

.dp-roster-sort.is-active {
	color: var(--dp-accent);
}

.dp-roster-sort.is-active i {
	opacity: 1;
}

.dp-roster-sort.is-desc i {
	transform: scaleY(-1);
}

/* ---------------------------------------- 10. Streamers Gallic (compte, admin) */

/* Bloc "Streamer Gallic" de account.php : affiche uniquement aux joueurs
   choisis par l'admin. */
.dp-st-panel {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 16px;
	border: 1px solid var(--dp-border);
	background:
		radial-gradient(90% 140% at 0% 0%, rgba(145, 70, 255, 0.16), transparent 60%),
		var(--dp-bg-elevated);
}

.dp-st-panel-mark {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #9146FF;
	color: #fff;
	font-size: 20px;
	box-shadow: 0 10px 24px -10px #9146FF;
}

.dp-st-panel-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
	font-size: 13px;
	color: var(--dp-text-muted);
	line-height: 1.5;
}

.dp-st-panel-text strong {
	font-size: 14px;
	color: var(--dp-text);
}

.dp-st-panel-text a {
	color: #C9A8FF;
	text-decoration: none;
	border-bottom: 1px dashed rgba(201, 168, 255, 0.5);
}

.dp-st-panel-actions {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.dp-st-muted {
	font-size: 12px;
	color: var(--dp-text-faint);
}

.dp-st-twitch-btn {
	background: #9146FF;
	color: #fff;
}

.dp-st-twitch-btn:hover {
	filter: brightness(1.1);
}

@media (max-width: 640px) {
	.dp-st-panel {
		flex-wrap: wrap;
	}

	.dp-st-panel-actions {
		width: 100%;
	}
}

/* Page admin/streamers.php */
.dp-st-flash {
	margin-bottom: 18px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 13px;
	border: 1px solid;
}

.dp-st-flash.is-ok {
	color: #8CE5B4;
	border-color: rgba(52, 211, 153, 0.3);
	background: rgba(52, 211, 153, 0.08);
}

.dp-st-flash.is-error {
	color: #FF9EA2;
	border-color: rgba(229, 72, 77, 0.35);
	background: rgba(229, 72, 77, 0.08);
}

/* Etat de la configuration : trois "voyants" alignes, sans cartes. */
.dp-st-setup {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 12.5px;
	color: var(--dp-text-muted);
}

.dp-st-setup li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.dp-st-setup strong {
	color: var(--dp-text);
	margin-right: 6px;
	font-weight: 600;
}

.dp-st-setup i {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 10px;
	border: 1px solid;
}

.dp-st-setup .is-ok i {
	color: #34D399;
	border-color: rgba(52, 211, 153, 0.45);
}

.dp-st-setup .is-missing i {
	color: #FF9EA2;
	border-color: rgba(229, 72, 77, 0.5);
}

.dp-st-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

@media (max-width: 960px) {
	.dp-st-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dp-st-card {
	border-radius: 16px;
	border: 1px solid var(--dp-border);
	background: var(--dp-bg-elevated);
	padding: 18px 20px 20px;
}

.dp-st-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed color-mix(in srgb, var(--dp-parchment) 22%, transparent);
}

.dp-st-card-head h2 {
	margin: 0;
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--dp-text);
}

.dp-st-card-head h2 span {
	margin-left: 6px;
	font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
	color: var(--dp-parchment-faint);
}

.dp-st-empty {
	margin: 8px 0 18px;
	font-size: 13px;
	color: var(--dp-text-faint);
}

.dp-st-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.dp-st-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
}

.dp-st-list li + li {
	border-top: 1px solid color-mix(in srgb, var(--dp-border) 70%, transparent);
}

.dp-st-avatar {
	position: relative;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--dp-bg-elevated-2);
}

.dp-st-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.dp-st-avatar-live {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #FF4D5E;
	box-shadow: 0 0 0 2.5px var(--dp-bg-elevated);
}

.dp-st-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	line-height: 1.35;
}

.dp-st-who strong {
	font-size: 14px;
	color: var(--dp-text);
}

.dp-st-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #C9A8FF;
	text-decoration: none;
}

.dp-st-state.is-live {
	color: #FF8A94;
	font-weight: 600;
}

.dp-st-state.is-pending {
	color: var(--dp-text-faint);
	font-style: italic;
}

.dp-st-icon-btn {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	border: 1px solid transparent;
	background: none;
	color: var(--dp-text-faint);
	cursor: pointer;
}

.dp-st-icon-btn:hover {
	color: #FF9EA2;
	border-color: rgba(229, 72, 77, 0.4);
}

/* Bouton "Panel" (overlay OBS du streamer) dans la liste admin. */
.dp-st-list .dp-st-panel-btn {
	flex: none;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--dp-border);
	color: var(--dp-text);
}

.dp-st-list .dp-st-panel-btn:hover {
	border-color: #9146FF;
	color: #C9A8FF;
}

.dp-st-add,
.dp-st-settings {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dp-st-add label,
.dp-st-settings > label:not(.dp-st-switch) {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dp-parchment);
}

.dp-st-add > div {
	display: flex;
	gap: 8px;
}

.dp-st-add select,
.dp-st-settings select,
.dp-st-settings input[type="text"] {
	flex: 1 0 auto;
	min-width: 0;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid var(--dp-border);
	background: var(--dp-bg);
	color: var(--dp-text);
	font: 500 13px 'Poppins', system-ui, sans-serif;
}

.dp-st-switch {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--dp-text);
	cursor: pointer;
}

.dp-st-switch input {
	width: 16px;
	height: 16px;
	accent-color: #9146FF;
}

.dp-st-hint {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--dp-text-faint);
}

.dp-st-settings .gt-btn {
	align-self: flex-start;
}

.dp-st-charter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--dp-parchment);
	text-decoration: none;
}

.dp-st-charter:hover {
	text-decoration: underline;
}

.dp-st-charter.is-old {
	color: #F2C94C;
}

.dp-st-charter.is-missing {
	color: var(--dp-text-faint);
}

.dp-st-registry {
	margin-top: 20px;
}

.dp-st-registry-meta {
	font-size: 12px;
	color: var(--dp-text-muted);
}

.dp-st-panel-text span a {
	margin-left: 4px;
}

/* --- Charte des streamers (charte_streamer.php, admin/streamer_charter.php)
   Un vrai document : feuille de parchemin claire posee sur le decor sombre,
   texte a l'encre en serif, articles numerotes en chiffres romains, et une
   ligne de signature comme sur un papier. */
.dp-charter {
	max-width: 760px;
	margin: 0 auto 48px;
}

.dp-charter-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--dp-text-muted);
	text-decoration: none;
}

.dp-charter-back:hover {
	color: var(--dp-text);
}

.dp-charter-doc,
.dp-charter-sign,
.dp-charter-proof {
	--ink: #2B2118;
	--ink-soft: #5C4A3A;
	--paper: #F1E6D0;
	--paper-edge: #D9C6A3;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
		radial-gradient(90% 60% at 100% 100%, rgba(150, 110, 60, 0.18), transparent 70%),
		var(--paper);
	color: var(--ink);
	font-family: Georgia, 'Times New Roman', serif;
}

.dp-charter-doc {
	padding: 48px 56px 36px;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px var(--paper-edge);
}

.dp-charter-eyebrow {
	margin: 0 0 14px;
	font: 700 11px 'Poppins', system-ui, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8A5A2B;
}

.dp-charter-title {
	margin: 0 0 20px;
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--ink);
}

.dp-charter-intro,
.dp-charter-outro {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
}

.dp-charter-intro {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--paper-edge);
}

.dp-charter-rules {
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
	counter-reset: charter;
}

.dp-charter-rules li {
	counter-increment: charter;
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 6px;
	padding: 18px 0;
	border-bottom: 1px dashed var(--paper-edge);
}

.dp-charter-rules li::before {
	content: counter(charter, upper-roman) '.';
	grid-row: 1 / 3;
	font-size: 18px;
	font-weight: 700;
	color: #8A5A2B;
}

.dp-charter-rules h2 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}

.dp-charter-rules p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-soft);
}

.dp-charter-outro {
	padding-top: 22px;
	font-style: italic;
}

/* Bas de la feuille : signature (ou preuve de signature cote admin). */
.dp-charter-sign,
.dp-charter-proof {
	margin: 0;
	padding: 24px 56px 40px;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px var(--paper-edge);
	border-top: 1px solid var(--paper-edge);
}

.dp-charter-sign {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dp-charter-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.55;
	cursor: pointer;
}

.dp-charter-check input {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	flex: none;
	accent-color: #8A5A2B;
}

.dp-charter-label {
	margin-top: 6px;
	font: 700 11px 'Poppins', system-ui, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8A5A2B;
}

.dp-charter-line {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	border-bottom: 1.5px solid var(--ink);
	padding-bottom: 4px;
}

.dp-charter-line input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: #1F2A5C;
	font: italic 28px Georgia, 'Times New Roman', serif;
	padding: 4px 2px;
	outline: none;
}

.dp-charter-line input::placeholder {
	color: rgba(43, 33, 24, 0.35);
	font-size: 20px;
}

.dp-charter-line span {
	flex: none;
	padding-bottom: 8px;
	font-size: 14px;
	color: var(--ink-soft);
}

.dp-charter-sign .gt-btn {
	align-self: flex-start;
	margin-top: 6px;
	font-family: 'Poppins', system-ui, sans-serif;
}

.dp-charter-error {
	margin: 0;
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(176, 42, 42, 0.12);
	color: #8E1F1F;
	font: 600 13px 'Poppins', system-ui, sans-serif;
}

.dp-charter-sign.is-signed {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.dp-charter-signed {
	margin: 0;
	font-size: 15px;
}

.dp-charter-signed i {
	margin-right: 8px;
	color: #8A5A2B;
}

.dp-charter-proof {
	display: grid;
	gap: 10px;
}

.dp-charter-proof div {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 12px;
}

.dp-charter-proof dt {
	font: 700 11px 'Poppins', system-ui, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8A5A2B;
	padding-top: 3px;
}

.dp-charter-proof dd {
	margin: 0;
	font-size: 14px;
	word-break: break-word;
}

.dp-charter-proof-name {
	font: italic 24px Georgia, 'Times New Roman', serif !important;
	color: #1F2A5C;
}

.dp-charter-hash {
	font: 12px 'JetBrains Mono', ui-monospace, monospace !important;
}

.dp-charter-print-hint {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--dp-text-faint);
	text-align: center;
}

@media (max-width: 640px) {
	.dp-charter-doc {
		padding: 32px 22px 24px;
	}

	.dp-charter-sign,
	.dp-charter-proof {
		padding: 20px 22px 28px;
	}

	.dp-charter-title {
		font-size: 27px;
	}

	.dp-charter-rules li {
		grid-template-columns: 34px 1fr;
	}

	.dp-charter-proof div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

@media print {
	.dp-sidebar,
	.dp-tabbar,
	.dp-page-backdrop,
	.dp-charter-back,
	.dp-charter-print-hint {
		display: none !important;
	}

	body,
	.gt-admin-content,
	.dp-main {
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.dp-charter-doc,
	.dp-charter-sign,
	.dp-charter-proof {
		background: #fff !important;
		box-shadow: none !important;
	}
}

/* ---------------------------------- 11. Equipement WoW (fiche personnage) */

/*
 * Feuille de personnage facon jeu : pieces a gauche et a droite, armes en
 * bas, bilan au centre. La couleur de qualite de chaque objet arrive par la
 * variable --gw-q (posee en ligne par wow_module.php).
 */
.gw-gear-ilvl {
	font-size: 11px;
	color: var(--dp-text-muted);
	letter-spacing: 0.02em;
}

.gw-gear-ilvl strong {
	color: var(--dp-text);
	font-size: 15px;
	font-weight: 800;
	margin-left: 4px;
}

.gw-doll {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 300px);
	grid-template-areas:
		"left right advice"
		"weapons weapons advice";
	gap: 10px 14px;
	align-items: start;
}

.gw-col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.gw-col.is-left { grid-area: left; }
.gw-col.is-right { grid-area: right; }

.gw-col.is-weapons {
	grid-area: weapons;
	flex-direction: row;
	justify-content: center;
	gap: 14px;
	padding-top: 10px;
	border-top: 1px dashed #262F47;
}

.gw-col.is-weapons > .gw-piece {
	flex: 0 1 300px;
}

.gw-piece {
	position: relative;
	min-width: 0;
}

.gw-piece-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 8px 5px 5px;
	border-radius: 9px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--gw-q, #8A93AC) 9%, #121826), #121826 70%);
	border: 1px solid #222B40;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	outline: none;
}

.gw-piece.is-right .gw-piece-link {
	flex-direction: row-reverse;
	text-align: right;
	padding: 5px 5px 5px 8px;
	background: linear-gradient(270deg, color-mix(in srgb, var(--gw-q, #8A93AC) 9%, #121826), #121826 70%);
}

.gw-piece-link:hover,
.gw-piece-link:focus-visible {
	border-color: color-mix(in srgb, var(--gw-q, #8A93AC) 55%, #262F47);
}

.gw-piece-link:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--gw-q, #8A93AC) 45%, transparent);
}

.gw-piece-icon {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 7px;
	background: #0B0F17;
	border: 1px solid var(--gw-q, #3A4566);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 10px -4px var(--gw-q, transparent);
	overflow: hidden;
}

.gw-piece-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gw-piece-ilvl {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1px 4px 0;
	border-top-left-radius: 5px;
	background: rgba(6, 8, 13, 0.82);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	color: #F2F4F8;
	font-variant-numeric: tabular-nums;
}

.gw-piece-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.gw-piece-slot {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #7C86A2;
}

.gw-piece.is-right .gw-piece-slot {
	justify-content: flex-end;
}

.gw-piece-bis {
	font-style: normal;
	font-weight: 800;
	font-size: 9px;
	letter-spacing: 0.06em;
	color: #E8C26A;
}

.gw-piece-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gw-q, #F2F4F8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gw-piece-enchant,
.gw-piece-warn {
	font-size: 10.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gw-piece-enchant {
	color: #6FD08C;
}

.gw-piece-warn {
	color: #F0B357;
}

.gw-piece-warn::before {
	content: "!";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 5px;
	border-radius: 50%;
	background: rgba(240, 179, 87, 0.18);
	font-size: 9px;
	font-weight: 800;
	line-height: 13px;
	text-align: center;
	vertical-align: 1px;
}

.gw-piece.is-right .gw-piece-warn::before {
	margin: 0 0 0 5px;
	float: right;
	margin-top: 2px;
}

.gw-piece.is-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px;
	border-radius: 9px;
	border: 1px dashed #262F47;
	opacity: 0.65;
}

.gw-piece.is-empty.is-right {
	flex-direction: row-reverse;
	text-align: right;
}

.gw-piece.is-empty .gw-piece-icon {
	border-style: dashed;
	box-shadow: none;
}

.gw-piece.is-empty .gw-piece-name {
	color: #7C86A2;
	font-weight: 500;
}

/* --- Bilan a droite des pieces ------------------------------------------ */

.gw-advice {
	grid-area: advice;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 14px;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(232, 194, 106, 0.09), transparent 70%),
		#101623;
	border: 1px solid #2A3350;
}

.gw-advice-kicker {
	display: block;
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #8A93AC;
	margin-bottom: 4px;
}

.gw-advice-figure {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: #F2F4F8;
	font-variant-numeric: tabular-nums;
}

.gw-advice-figure small {
	font-size: 11px;
	font-weight: 500;
	color: #8A93AC;
}

.gw-advice-gauge {
	display: block;
	height: 5px;
	margin-top: 8px;
	border-radius: 99px;
	background: #1D2539;
	overflow: hidden;
}

.gw-advice-gauge i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #C9853A, #E8C26A);
}

.gw-advice-ilvl.is-ok .gw-advice-gauge i {
	background: linear-gradient(90deg, #3E9C6A, #6FD08C);
}

.gw-advice-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gw-advice-checks li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 8px;
	align-items: start;
	font-size: 11.5px;
	line-height: 1.4;
	color: #B7BED0;
}

.gw-advice-checks li > i {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	font-size: 10px;
}

.gw-advice-checks li.is-ok > i { background: rgba(111, 208, 140, 0.12); color: #6FD08C; }
.gw-advice-checks li.is-todo > i { background: rgba(240, 179, 87, 0.14); color: #F0B357; }
.gw-advice-checks li.is-wait > i { background: rgba(138, 147, 172, 0.12); color: #8A93AC; }

.gw-advice-checks strong {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #F2F4F8;
}

.gw-advice-wish ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.gw-advice-wish a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px;
	border-radius: 7px;
	color: inherit;
	text-decoration: none;
}

.gw-advice-wish a:hover,
.gw-advice-wish a:focus-visible {
	background: #182035;
}

.gw-wish-icon {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	border: 1px solid var(--gw-q, #3A4566);
	background: #0B0F17;
	overflow: hidden;
}

.gw-wish-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.gw-wish-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--gw-q, #F2F4F8);
}

.gw-wish-text span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gw-wish-text small {
	font-size: 9.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #7C86A2;
}

.gw-advice-more,
.gw-advice-note {
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #8A93AC;
}

/* --- Infobulle (copiee dans <body> par assets/js/wow-gear.js) ----------- */

.gw-tip[hidden] {
	display: none;
}

.gw-tip-float {
	position: fixed;
	z-index: 9999;
	max-width: 320px;
	padding: 10px 12px;
	border-radius: 6px;
	background: rgba(6, 9, 18, 0.97);
	border: 1px solid #3A4566;
	box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.85);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.45;
	color: #F2F4F8;
	pointer-events: none;
}

.gw-tip-name {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 2px;
}

.gw-tip-line.is-split {
	display: flex;
	justify-content: space-between;
	gap: 18px;
}

.gw-tip-line.is-flavor {
	font-style: italic;
	margin-top: 4px;
}

.gw-tip-line.is-socket::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border: 1px solid currentColor;
	border-radius: 2px;
	transform: rotate(45deg) scale(0.8);
}

.gw-tip-line.is-set-item {
	padding-left: 12px;
}

.gw-tip-line.is-note {
	color: #8A93AC;
	font-size: 11px;
	margin-top: 4px;
}

.gw-tip-gap {
	height: 8px;
}

.gw-tip-alert {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid #262F47;
	color: #F0B357;
	font-size: 11px;
}

.gw-tip-foot {
	margin-top: 8px;
	font-size: 10px;
	color: #7C86A2;
}

/* --- Cadre du bloc equipement : fond, bordure et tuile du raid en cours -- */

.gw-gear {
	--gw-bis: #5BD08F;
	--gw-stats: #F0A94B;
	--gw-swap: #EE6863;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 16px;
	border-radius: 18px;
	border: 1px solid rgba(120, 136, 186, 0.22);
	background:
		radial-gradient(90% 60% at 100% 0%, rgba(110, 132, 214, 0.10), transparent 65%),
		radial-gradient(70% 50% at 0% 100%, rgba(232, 194, 106, 0.06), transparent 70%),
		#0A0E16;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -36px rgba(0, 0, 0, 0.9);
}

/* La tuile du raid se fond dans le cadre par le haut, sans gener la lecture. */
.gw-gear-art {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center 30%;
	opacity: 0.42;
	filter: saturate(1.15);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 90%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 90%);
	pointer-events: none;
}

.gw-gear.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 14, 22, 0.2), rgba(10, 14, 22, 0.75) 60%, #0A0E16);
	pointer-events: none;
}

/* Pieces en verre fume : le fond reste visible derriere. */
.gw-gear .gw-piece-link {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--gw-q, #8A93AC) 11%, transparent), transparent 70%),
		rgba(13, 18, 29, 0.74);
	border-color: rgba(70, 84, 124, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.gw-gear .gw-piece.is-right .gw-piece-link {
	background:
		linear-gradient(270deg, color-mix(in srgb, var(--gw-q, #8A93AC) 11%, transparent), transparent 70%),
		rgba(13, 18, 29, 0.74);
}

.gw-gear .gw-advice {
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(232, 194, 106, 0.08), transparent 70%),
		rgba(12, 16, 26, 0.84);
	border-color: rgba(84, 98, 142, 0.42);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.gw-gear [data-gw-src][hidden],
.gw-tip-float [data-gw-src][hidden] {
	display: none !important;
}

/* --- Pastille par piece : BiS (vert), stats OK (orange), a changer (rouge) */

.gw-verdict {
	--gw-v: var(--gw-stats);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px 1px 5px;
	border-radius: 999px;
	font-style: normal;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--gw-v);
	background: color-mix(in srgb, var(--gw-v) 13%, rgba(10, 14, 22, 0.6));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gw-v) 38%, transparent);
	white-space: nowrap;
}

.gw-verdict i,
.gw-tip-verdict-head i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
	flex: none;
}

.gw-verdict.is-bis,
.gw-tip-verdict.is-bis,
.gw-tally .is-bis { --gw-v: var(--gw-bis); }

.gw-verdict.is-stats,
.gw-tip-verdict.is-stats,
.gw-tally .is-stats { --gw-v: var(--gw-stats); }

.gw-verdict.is-swap,
.gw-tip-verdict.is-swap,
.gw-tally .is-swap { --gw-v: var(--gw-swap); }

/* Couleurs aussi definies pour l'infobulle, copiee hors du bloc. */
.gw-tip-float {
	--gw-bis: #5BD08F;
	--gw-stats: #F0A94B;
	--gw-swap: #EE6863;
}

.gw-tip-verdict {
	--gw-v: var(--gw-stats);
	margin: 6px 0 8px;
	padding: 7px 9px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--gw-v) 9%, #0A0E18);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gw-v) 32%, transparent);
}

.gw-tip-verdict-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gw-v);
}

.gw-tip-verdict-head span {
	margin-left: auto;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: #8A93AC;
}

.gw-tip-verdict p {
	margin: 2px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #C9D0E0;
}

.gw-tip-verdict p.gw-tip-verdict-suggest {
	color: #F2F4F8;
	font-weight: 600;
}

/* --- Choix de la source et compteur ---------------------------------------- */

.gw-sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(84, 98, 142, 0.3);
}

.gw-sources .gw-advice-kicker {
	margin-bottom: 0;
}

.gw-sources-switch {
	display: flex;
	padding: 3px;
	border-radius: 10px;
	background: rgba(6, 9, 15, 0.7);
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.38);
}

.gw-sources-switch button {
	flex: 1 1 0;
	min-width: 0;
	padding: 6px 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	color: #8A93AC;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gw-sources-switch button:hover {
	color: #F2F4F8;
}

.gw-sources-switch button:focus-visible {
	outline: 2px solid rgba(232, 194, 106, 0.6);
	outline-offset: 1px;
}

.gw-sources-switch button[aria-pressed="true"] {
	background: #EDEFF5;
	color: #0B0F17;
	box-shadow: 0 4px 14px -6px rgba(237, 239, 245, 0.45);
}

.gw-sources-single {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: #8A93AC;
}

.gw-sources-single strong {
	color: #F2F4F8;
}

.gw-tally {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.gw-tally span {
	--gw-v: var(--gw-stats);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 7px 4px 6px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--gw-v) 8%, rgba(8, 11, 18, 0.7));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gw-v) 26%, transparent);
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8A93AC;
	text-align: center;
}

.gw-tally b {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--gw-v);
	font-variant-numeric: tabular-nums;
}

.gw-sources-legend {
	margin: 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: #7C86A2;
}

.gw-sources-legend strong {
	color: #C9D0E0;
	font-weight: 600;
}

.gw-gear .gw-advice-wish a:hover,
.gw-gear .gw-advice-wish a:focus-visible {
	background: rgba(24, 32, 53, 0.8);
}

@media (max-width: 640px) {
	.gw-gear {
		padding: 12px;
		border-radius: 14px;
	}

	.gw-gear .gw-piece.is-right .gw-piece-link {
		background:
			linear-gradient(90deg, color-mix(in srgb, var(--gw-q, #8A93AC) 11%, transparent), transparent 70%),
			rgba(13, 18, 29, 0.74);
	}
}

/* --- Ecrans etroits -------------------------------------------------------- */

@media (max-width: 1100px) {
	.gw-doll {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"left right"
			"weapons weapons"
			"advice advice";
	}
}

@media (max-width: 640px) {
	.gw-doll {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"left"
			"right"
			"weapons"
			"advice";
	}

	.gw-piece.is-right .gw-piece-link,
	.gw-piece.is-empty.is-right {
		flex-direction: row;
		text-align: left;
		padding: 5px 8px 5px 5px;
		background: linear-gradient(90deg, color-mix(in srgb, var(--gw-q, #8A93AC) 9%, #121826), #121826 70%);
	}

	.gw-piece.is-right .gw-piece-slot {
		justify-content: flex-start;
	}

	.gw-piece.is-right .gw-piece-warn::before {
		float: none;
		margin: 0 5px 0 0;
	}

	.gw-col.is-weapons {
		flex-direction: column;
	}

	.gw-col.is-weapons > .gw-piece {
		flex: none;
	}
}

/* -------------------------------------- 12. Equipement WoW (admin/wow_gear.php) */

.gw-admin-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
}

.gw-admin-slots legend {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dp-parchment);
}

.gw-admin-slots label {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 8px;
	border-radius: 8px;
	background: #10172A;
	border: 1px solid #222B40;
	font-size: 12px;
	color: #C9CFDD;
	cursor: pointer;
}

.gw-admin-slots input {
	accent-color: #E8C26A;
}

.gw-admin-steps {
	margin: 0 0 12px;
	padding-left: 20px;
	list-style: decimal;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #C9CFDD;
}

.gw-admin-steps li::marker {
	color: #E8C26A;
	font-weight: 700;
}

.gw-admin-reset {
	margin-top: 14px;
}

.gw-admin-guild {
	margin-top: 20px;
}

.gw-admin-guild-empty {
	margin: 4px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px dashed var(--dp-border);
	font-size: 13px;
	color: var(--dp-text-muted);
}

.gw-admin-guild-title {
	margin: 14px 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dp-parchment);
}

.gw-admin-kills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 8px;
}

.gw-admin-kills li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #121826;
	border: 1px solid #262F47;
}

.gw-admin-kill-boss {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	color: var(--dp-text);
}

.gw-admin-kill-boss small {
	display: block;
	font-weight: 500;
	font-size: 11.5px;
	color: var(--dp-text-faint);
}

.gw-admin-kill-id {
	font-size: 12px;
	color: var(--dp-text-muted);
	white-space: nowrap;
}

.gw-admin-kill-id strong {
	font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
	color: #E8C26A;
	user-select: all;
}

.gw-admin-kills a {
	color: var(--dp-text-faint);
}

.gw-admin-kills a:hover {
	color: var(--dp-text);
}

.gw-admin-guild .dp-st-hint a {
	color: #E8C26A;
}

.gw-admin-bis {
	margin-top: 20px;
}

.gw-admin-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gw-admin-specs > li > details,
.gw-admin-other {
	border-radius: 12px;
	border: 1px solid #222B40;
	background: #10172A;
}

.gw-admin-specs > li.is-missing > details {
	border-style: dashed;
}

.gw-admin-specs summary,
.gw-admin-other summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	cursor: pointer;
	list-style: none;
}

.gw-admin-specs summary::-webkit-details-marker,
.gw-admin-other summary::-webkit-details-marker {
	display: none;
}

.gw-admin-spec-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--gw-class, #3A4566);
	background: #0B0F17;
}

.gw-admin-spec-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gw-admin-spec-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.gw-admin-spec-name strong {
	font-size: 14px;
	color: #F2F4F8;
}

.gw-admin-spec-name small {
	font-size: 11.5px;
	color: #8A93AC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gw-admin-spec-state {
	font-size: 12px;
	color: #6FD08C;
	white-space: nowrap;
}

.is-missing .gw-admin-spec-state {
	color: #F0B357;
}

.gw-admin-chevron {
	color: #7C86A2;
	font-size: 11px;
	transition: transform 0.15s ease;
}

details[open] > summary .gw-admin-chevron {
	transform: rotate(180deg);
}

.gw-admin-items {
	list-style: none;
	margin: 0;
	padding: 2px 12px 8px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 4px 10px;
}

.gw-admin-items a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px;
	border-radius: 7px;
	color: inherit;
	text-decoration: none;
}

.gw-admin-items a:hover {
	background: #182035;
}

.gw-admin-bis-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 12px 12px;
}

.gw-admin-bis-form label {
	font-size: 12px;
	font-weight: 600;
	color: var(--dp-text-muted);
}

.gw-admin-bis-form textarea,
.gw-admin-pair input {
	width: 100%;
	padding: 9px 11px;
	border-radius: 9px;
	border: 1px solid #262F47;
	background: #0B0F17;
	color: #F2F4F8;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.5;
}

.gw-admin-bis-form textarea:focus,
.gw-admin-pair input:focus {
	outline: none;
	border-color: #E8C26A;
}

.gw-admin-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.gw-admin-pair label {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.gw-admin-bis-actions {
	display: flex;
	justify-content: flex-end;
}

.gw-admin-bis-delete {
	padding: 0 12px 12px;
}

.gw-admin-other {
	margin-top: 10px;
}

.gw-admin-other summary {
	font-size: 13px;
	font-weight: 600;
	color: #C9CFDD;
}

.gw-admin-roster {
	margin-top: 20px;
}

.gw-admin-bench {
	margin-left: 6px;
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8A93AC;
}

.gw-admin-issues {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	font-size: 11.5px;
}

.gw-admin-issues span {
	padding: 3px 8px;
	border-radius: 6px;
	background: #1A2033;
	color: #F0B357;
	white-space: nowrap;
}

.gw-admin-issues span.is-ok {
	background: transparent;
	color: #6FD08C;
}

.gw-admin-issues span.is-muted {
	background: transparent;
	color: #7C86A2;
}

.gw-admin-issues .is-ok i {
	margin-right: 5px;
}

@media (max-width: 640px) {
	.gw-admin-pair {
		grid-template-columns: 1fr;
	}

	.gw-admin-spec-state {
		display: none;
	}
}

/* ------------------------------------ 13. Personnalisation de la carte (compte) */

/* account.php : deux reglages distincts (avatar / fond) a cote de l'apercu de
   la carte, chacun avec sa vignette et un bouton "Modifier" -- remplace les
   petits crayons poses sur la carte. Rangees "plaque" sur un fond creuse,
   sans liseré d'accent : le bouton porte seul l'accent. */
.dp-cosm {
	flex: 1;
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dp-cosm-slot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 12px;
	border-radius: 14px;
	border: 1px solid var(--dp-border);
	background: linear-gradient(180deg, rgba(11, 15, 23, 0.55), rgba(11, 15, 23, 0.85));
	transition: border-color 0.15s ease;
}

.dp-cosm-slot:hover {
	border-color: #34405F;
}

.dp-cosm-thumb {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 12px;
}

/* Avatar : anneau de la couleur de la bordure equipee, ou decor PNG pose
   par-dessus (meme marge de 10% que partials/player_card.php). */
.dp-cosm-thumb-avatar {
	padding: 3px;
	background: linear-gradient(160deg, var(--dp-cosm-ring), color-mix(in srgb, var(--dp-cosm-ring) 50%, transparent));
}

.dp-cosm-thumb-avatar.has-frame {
	padding: 0;
	background: none;
}

.dp-cosm-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
	border: 3px solid var(--dp-bg-elevated);
	background: var(--dp-bg);
	color: var(--dp-text-muted);
}

.dp-cosm-thumb-avatar.has-frame .dp-cosm-avatar {
	border: 0;
}

.dp-cosm-frame {
	position: absolute;
	left: -10%;
	top: -10%;
	width: 120%;
	height: 120%;
	max-width: none;
	pointer-events: none;
}

/* Fond : vignette au ratio de la carte (4/5), image recadree au centre. */
.dp-cosm-thumb-bg {
	width: 46px;
	height: 56px;
	margin: 0 5px;
	overflow: hidden;
	border: 1px solid var(--dp-border);
	background: var(--dp-bg);
}

.dp-cosm-thumb-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp-cosm-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.dp-cosm-kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dp-text-faint);
}

.dp-cosm-info strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--dp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dp-cosm-hint {
	font-size: 12px;
	color: var(--dp-text-muted);
}

.dp-cosm-edit {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(242, 137, 78, 0.45);
	background: rgba(242, 137, 78, 0.1);
	color: #FFB98F;
	font: 600 12px/1 'Poppins', system-ui, sans-serif;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dp-cosm-edit i {
	font-size: 10px;
}

.dp-cosm-edit:hover {
	background: var(--dp-accent);
	border-color: var(--dp-accent);
	color: var(--dp-bg);
}

.dp-cosm-edit:focus-visible {
	outline: 2px solid var(--dp-accent);
	outline-offset: 2px;
}

.dp-cosm-note {
	margin: 2px 2px 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--dp-text-muted);
}

.dp-cosm-note a {
	color: var(--dp-accent);
	font-weight: 600;
	text-decoration: none;
}

.dp-cosm-note a:hover {
	color: #FFA366;
}

@media (max-width: 420px) {
	.dp-cosm-hint {
		display: none;
	}

	.dp-cosm-slot {
		gap: 10px;
	}
}

/* ------------------------------------- 14. Accueil sans defilement (index) */

/* L'accueil (body.dp-hub, index.php) tient TOUJOURS dans la fenetre : pas de
   barre de defilement, quelle que soit la resolution. La page est une colonne
   flex de 100dvh : le bandeau des projets prend sa hauteur naturelle (reduite
   par paliers sur les ecrans bas, voir les @media max-height plus bas) et la
   rangee de cartes-modules prend TOUT le reste. Une carte trop remplie pour
   la place disponible defile a l'interieur de son propre corps, jamais la
   page. Sur telephone (<= 860px) les cartes deviennent une bande a balayer
   horizontalement, voir plus bas. */
html:has(body.dp-hub),
body.dp-hub {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

body.dp-hub .dp-shell {
	height: 100vh;
	height: 100dvh;
	min-height: 0;
}

body.dp-hub .dp-main {
	min-height: 0;
	overflow: hidden;
}

/* justify-content:center : sur un tres grand ecran (1440p+), une fois les
   cartes a leur hauteur maximale, l'ensemble reste centre verticalement au
   lieu de laisser un grand vide en bas. */
body.dp-hub .dp-main-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	padding-top: clamp(14px, 2.6vh, 28px);
	padding-bottom: clamp(14px, 2.6vh, 28px);
}

body.dp-hub .dp-hero {
	flex: none;
	margin-bottom: clamp(12px, 2vh, 20px);
}

/* Visuel du projet : sa hauteur suit celle de la fenetre (la largeur suit en
   16/10), c'est lui qui absorbe l'essentiel de la difference entre un 720p
   et un 1440p. */
body.dp-hub .dp-hero-visual {
	height: clamp(120px, calc(100dvh - 590px), 300px);
}

/* En-tete de la rangee : titre a gauche, navigation a droite (masquee par
   l'attribut hidden tant que toutes les cartes tiennent en largeur). */
.dp-cards-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.dp-cards-head .dp-section-label {
	margin: 0;
}

body.dp-hub .dp-cards-head {
	flex: none;
	margin-bottom: clamp(8px, 1.2vh, 12px);
}

.dp-cards-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dp-cards-nav[hidden] {
	display: none;
}

.dp-cards-nav-count {
	min-width: 44px;
	text-align: center;
	font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
	color: var(--dp-text-faint);
	letter-spacing: 0.04em;
}

.dp-cards-nav-count b {
	color: var(--dp-parchment);
	font-weight: 700;
}

.dp-cards-nav-btn {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--dp-border);
	background: color-mix(in srgb, var(--dp-bg-elevated) 80%, transparent);
	color: var(--dp-text);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, opacity 0.15s;
}

.dp-cards-nav-btn:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--dp-parchment) 45%, var(--dp-border));
	background: var(--dp-bg-elevated-2);
}

.dp-cards-nav-btn:focus-visible {
	outline: 2px solid var(--dp-parchment);
	outline-offset: 2px;
}

.dp-cards-nav-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Une seule rangee, toujours : autant de colonnes que de modules, qui se
   partagent la largeur. Hauteur = le reste de la fenetre, plafonnee pour que
   les cartes ne deviennent pas des colonnes demesurees sur un ecran 1440p+. */
body.dp-hub .dp-cards-menu {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 520px;
	margin-bottom: 0;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
}

body.dp-hub .dp-card-module {
	min-height: 0;
}

/* Le corps de carte defile seul si son contenu depasse ; le bouton d'action
   (.dp-card-cta, en bas) reste visible car il est hors de la zone qui defile
   grace au flex. Barre fine et discrete, aux couleurs du module. */
body.dp-hub .dp-card-body {
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--card-accent) 45%, transparent) transparent;
}

body.dp-hub .dp-card-body > .dp-card-cta,
body.dp-hub .dp-card-body > .dp-card-cta-group {
	position: sticky;
	bottom: 0;
	flex: none;
}

/* Fond opaque sous les boutons colles en bas : le texte qui defile passe
   dessous au lieu de se superposer au bouton contour "Voir les bots". */
body.dp-hub .dp-card-body > .dp-card-cta-group {
	z-index: 1;
	background: var(--dp-bg-elevated);
}

/* Le pied de page n'a pas sa place sur une page qui ne defile pas : la
   mention reste presente sur toutes les autres pages. */
body.dp-hub .dp-footer {
	display: none;
}

/* Cadre "En direct" : il ne doit jamais imposer sa hauteur au bandeau (sinon
   un 2e ou 3e live pousserait les cartes hors de l'ecran). Il prend la
   hauteur du projet a sa gauche et estompe ce qui ne tient pas. */
@media (min-width: 1021px) {
	body.dp-hub .dp-hero-live {
		contain: size;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
	}
}

/* Paliers de hauteur : plus la fenetre est basse, plus le bandeau se
   resserre (sous-titre, puis liste des points forts) pour laisser aux
   cartes une hauteur confortable. */
@media (min-width: 861px) and (max-height: 900px) {
	body.dp-hub .dp-hero {
		gap: 8px;
		padding-top: 12px;
		padding-bottom: 10px;
	}

	body.dp-hub .dp-hero-features {
		display: none;
	}

	body.dp-hub .dp-hero-desc {
		margin-bottom: 12px;
	}

	body.dp-hub .dp-hero-tab {
		padding-top: 5px;
		padding-bottom: 8px;
	}
}

@media (min-width: 861px) and (max-height: 760px) {
	body.dp-hub .dp-hero-subtitle {
		display: none;
	}

	body.dp-hub .dp-hero-desc {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	body.dp-hub .dp-card-banner {
		height: 72px;
	}

	body.dp-hub .dp-card-icon {
		top: 50px;
	}
}

/* Tablette / petit portable : 5 cartes cote a cote deviennent trop etroites,
   la rangee se balaie alors horizontalement (meme principe que sur mobile). */
@media (min-width: 861px) and (max-width: 1180px) {
	body.dp-hub .dp-cards-menu {
		grid-auto-columns: minmax(220px, calc((100% - 32px) / 3));
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: var(--dp-border) transparent;
		padding-bottom: 6px;
	}

	body.dp-hub .dp-card-module {
		scroll-snap-align: start;
	}
}

/* Telephone : la page tient entre le haut de l'ecran et la barre d'onglets.
   Bandeau compact (vignette carree a gauche du titre au lieu d'une grande
   affiche), puis les cartes-modules en bande horizontale a balayer, chacune
   occupant presque toute la largeur pour qu'on devine la suivante. */
@media (max-width: 860px) {
	body.dp-hub {
		padding-bottom: 0;
	}

	body.dp-hub .dp-shell {
		height: calc(100dvh - 60px - env(safe-area-inset-bottom));
	}

	body.dp-hub .dp-main-content {
		padding: 14px 0 12px;
	}

	body.dp-hub .dp-hero {
		margin: 0 14px 12px;
		padding: 14px;
		gap: 10px;
	}

	body.dp-hub .dp-hero-title {
		font-size: 17px;
	}

	body.dp-hub .dp-hero-slide {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	body.dp-hub .dp-hero-visual {
		width: 76px;
		height: 76px;
		aspect-ratio: 1;
		border-radius: 12px;
	}

	body.dp-hub .dp-hero-visual::after {
		inset: 4px;
		border-radius: 8px;
	}

	body.dp-hub .dp-hero-visual-img {
		width: 60%;
	}

	body.dp-hub .dp-hero-visual.is-shot .dp-hero-visual-img {
		width: 100%;
	}

	body.dp-hub .dp-hero-visual-icon {
		font-size: 28px;
	}

	body.dp-hub .dp-hero-name {
		font-size: 21px;
	}

	body.dp-hub .dp-hero-eyebrow {
		margin-bottom: 4px;
		font-size: 10px;
	}

	body.dp-hub .dp-hero-desc {
		font-size: 12.5px;
		margin-bottom: 0;
	}

	body.dp-hub .dp-hero-features {
		display: none;
	}

	/* La vignette occupe les lignes du texte ; les boutons passent dessous,
	   sur toute la largeur et sur UNE ligne (le lien secondaire se tronque). */
	body.dp-hub .dp-hero-visual {
		grid-row: 1 / span 3;
	}

	body.dp-hub .dp-hero-actions {
		grid-column: 1 / -1;
		flex-wrap: nowrap;
		gap: 14px;
		margin-top: 12px;
		min-width: 0;
	}

	body.dp-hub .dp-hero-cta {
		flex: none;
		height: 34px;
		padding: 0 14px;
		font-size: 12.5px;
	}

	body.dp-hub .dp-hero-link {
		min-width: 0;
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body.dp-hub .dp-hero-body {
		display: contents;
	}

	body.dp-hub .dp-hero-body > :not(.dp-hero-actions) {
		grid-column: 2;
	}

	body.dp-hub .dp-hero-slide {
		row-gap: 0;
	}

	body.dp-hub .dp-hero-live {
		padding-bottom: 10px;
	}

	body.dp-hub .dp-hero-live-row,
	body.dp-hub .dp-hero-live-more {
		display: none;
	}

	body.dp-hub .dp-cards-head {
		margin: 0 16px 8px;
	}

	body.dp-hub .dp-cards-menu {
		max-height: none;
		gap: 12px;
		grid-auto-columns: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		margin: 0 16px;
		padding: 0 0 2px;
		scrollbar-width: none;
	}

	body.dp-hub .dp-cards-menu::-webkit-scrollbar {
		display: none;
	}

	body.dp-hub .dp-card-module {
		scroll-snap-align: start;
	}
}

/* Tres petits telephones (iPhone SE...) : le bandeau perd sa description. */
@media (max-width: 860px) and (max-height: 700px) {
	body.dp-hub .dp-hero-desc {
		display: none;
	}

	body.dp-hub .dp-hero-slide {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	body.dp-hub .dp-hero-visual {
		width: 56px;
		height: 56px;
	}
}

/* ------------------------------------------------------------ Pubs Gallic (admin/gallic_ads.php) */
.dp-ad-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; }
.dp-ad-stats li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--dp-border); background: var(--dp-bg-elevated); }
.dp-ad-stats strong { font: 800 22px/1.1 'Baloo 2', 'Poppins', sans-serif; color: var(--dp-text); font-variant-numeric: tabular-nums; }
.dp-ad-stats span { font-size: 12px; color: var(--dp-text-faint); }
.dp-ad-side { display: grid; gap: 20px; }
.dp-ad-upload { display: grid; gap: 8px; margin-bottom: 16px; }
.dp-ad-drop {
	display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; cursor: pointer;
	border: 1.5px dashed color-mix(in srgb, var(--dp-parchment) 35%, transparent); color: var(--dp-text-faint); font-size: 12.5px;
}
.dp-ad-drop:hover, .dp-ad-drop:focus-within { border-color: var(--dp-parchment); }
.dp-ad-drop input { order: 3; max-width: 230px; font-size: 12px; color: var(--dp-text-faint); }
.dp-ad-drop input::file-selector-button { margin-right: 8px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--dp-border); background: var(--dp-bg-elevated-2); color: var(--dp-text); font: 600 12px Poppins, sans-serif; cursor: pointer; }
.dp-ad-drop span { flex: 1; min-width: 0; }
.dp-ad-drop i { font-size: 22px; color: var(--dp-parchment); }
.dp-ad-drop b { display: block; color: var(--dp-text); font-size: 13.5px; }
.dp-ad-drop.has-file { border-style: solid; border-color: var(--dp-parchment); }
.dp-ad-upload-row { display: flex; gap: 8px; }
.dp-ad-upload-row input, .dp-ad-edit input[type="text"], .dp-ad-edit input[type="date"], .dp-ad-size input {
	min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--dp-border);
	background: var(--dp-bg); color: var(--dp-text); font: 500 13px 'Poppins', system-ui, sans-serif; color-scheme: dark;
}
.dp-ad-upload-row input { flex: 1; }
.dp-ad-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.dp-ad-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--dp-border); background: var(--dp-bg); }
.dp-ad-preview {
	grid-column: 1 / -1; width: 100%; max-height: 160px; border-radius: 8px; overflow: hidden;
	background: repeating-conic-gradient(#161B26 0 25%, #1C2230 0 50%) 0 0 / 16px 16px;
}
.dp-ad-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dp-ad-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.dp-ad-edit-top { display: flex; align-items: center; gap: 10px; }
.dp-ad-edit-top input { flex: 1; }
.dp-ad-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; color: var(--dp-text-faint); }
.dp-ad-edit-row .dp-st-switch { margin: 0; }
.dp-ad-edit-row label:not(.dp-st-switch) { display: inline-flex; align-items: center; gap: 6px; }
.dp-ad-edit-row input[type="date"] { height: 32px; }
.dp-ad-state { flex: none; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.dp-ad-state.is-on { color: #6FD6A4; background: rgba(63, 178, 127, .14); }
.dp-ad-state.is-wait { color: #7BD3F7; background: rgba(123, 211, 247, .12); }
.dp-ad-state.is-off { color: var(--dp-text-faint); background: var(--dp-bg-elevated-2); }
.dp-ad-warn { margin: 0; font-size: 12px; color: #E7B341; display: flex; gap: 6px; align-items: baseline; }
.dp-ad-settings .dp-ad-size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dp-text-faint); }
.dp-ad-size input { width: 100px; }
.dp-ad-ratio {
	width: 100%; max-height: 120px; display: grid; place-items: center; border-radius: 8px;
	border: 1.5px dashed color-mix(in srgb, var(--dp-parchment) 45%, transparent); color: var(--dp-parchment);
	font: 600 12px 'JetBrains Mono', ui-monospace, monospace; margin: 4px 0;
}
.dp-ad-zone-list { font-size: 12px; color: #6FD6A4; }
.dp-ad-zone-none { font-size: 12px; color: var(--dp-text-faint); font-style: italic; }
@media (max-width: 720px) {
	.dp-ad-stats { grid-template-columns: minmax(0, 1fr); }
	.dp-ad-upload-row { flex-direction: column; }
	.dp-ad-drop { flex-wrap: wrap; }
	.dp-ad-drop input { max-width: 100%; }
}
.dp-st-grid > *, .dp-ad-side > * { min-width: 0; }

/* Page stream_donations.php (dons PayPal d'un streamer) */
.dp-dn-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 28px;
	margin-bottom: 22px;
}

.dp-dn-head > div:first-child { flex: 1 1 380px; min-width: 0; }

.dp-dn-kicker { margin: 0 0 6px; font-size: 12px; }

.dp-dn-kicker a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--dp-text-muted);
	text-decoration: none;
}

.dp-dn-kicker a:hover { color: var(--dp-text); }

.dp-dn-head h1 {
	margin: 0 0 6px;
	font: 800 30px/1.1 'Baloo 2', 'Poppins', sans-serif;
	color: var(--dp-text);
}

.dp-dn-head p {
	margin: 0;
	max-width: 620px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dp-text-muted);
}

.dp-dn-public {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--dp-border);
	background: var(--dp-bg-elevated);
	min-width: 0;
	max-width: 100%;
}

.dp-dn-public > div { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.dp-dn-public strong { color: var(--dp-text); font-size: 13px; }
.dp-dn-public span, .dp-dn-public a { color: var(--dp-text-muted); overflow-wrap: anywhere; }
.dp-dn-public a { color: #FFC3A0; text-decoration: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.dp-dn-public a:hover { text-decoration: underline; }

.dp-dn-dot {
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: var(--dp-text-faint);
}

.dp-dn-public.is-open .dp-dn-dot { background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15); }

.dp-dn-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.dp-dn-pill {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--dp-text-muted);
	border: 1px solid var(--dp-border);
}

.dp-dn-pill.is-ok { color: #8CE5B4; border-color: rgba(52, 211, 153, 0.35); }
.dp-dn-pill.is-err { color: #FF9EA2; border-color: rgba(229, 72, 77, 0.4); }

.dp-dn-steps {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: dn;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.dp-dn-steps li {
	counter-increment: dn;
	position: relative;
	padding-left: 32px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--dp-text-muted);
}

.dp-dn-steps li::before {
	content: counter(dn);
	position: absolute;
	left: 0;
	top: 0;
	width: 21px;
	height: 21px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--dp-parchment) 45%, transparent);
	font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
	color: var(--dp-parchment);
}

.dp-dn-steps b { color: var(--dp-text); font-weight: 600; }
.dp-dn-steps a { color: #FFC3A0; }

.dp-st-settings input[type="password"],
.dp-st-settings input[type="number"],
.dp-st-settings textarea {
	width: 100%;
	min-width: 0;
	padding: 9px 10px;
	border-radius: 10px;
	border: 1px solid var(--dp-border);
	background: var(--dp-bg);
	color: var(--dp-text);
	font: 500 13px 'Poppins', system-ui, sans-serif;
}

.dp-st-settings input[type="password"],
.dp-st-settings input[type="number"] { height: 38px; padding-block: 0; }
.dp-st-settings textarea { resize: vertical; }
.dp-dn-page .dp-st-switch { margin-top: 4px; }
.dp-dn-page > .dp-st-hint { margin-top: -2px; }

.dp-dn-slug {
	display: flex;
	align-items: stretch;
	min-width: 0;
	border-radius: 10px;
	border: 1px solid var(--dp-border);
	background: var(--dp-bg);
	overflow: hidden;
}

.dp-dn-slug span {
	display: flex;
	align-items: center;
	padding: 0 4px 0 10px;
	font: 500 12px 'JetBrains Mono', ui-monospace, monospace;
	color: var(--dp-text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60%;
}

.dp-st-settings .dp-dn-slug input[type="text"] {
	flex: 1 1 auto;
	border: 0;
	border-radius: 0;
	padding-left: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.dp-dn-row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
}

.dp-dn-row > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.dp-dn-row label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dp-parchment);
}

.dp-dn-forget { margin-top: 12px; }

.dp-dn-link-btn {
	padding: 0;
	border: 0;
	background: none;
	font: 500 12px 'Poppins', sans-serif;
	color: var(--dp-text-faint);
	text-decoration: underline;
	cursor: pointer;
}

.dp-dn-link-btn:hover { color: #FF9EA2; }

.dp-dn-list { list-style: none; margin: 0 0 12px; padding: 0; }

.dp-dn-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 2px;
}

.dp-dn-list li + li { border-top: 1px solid color-mix(in srgb, var(--dp-border) 70%, transparent); }

.dp-dn-amount {
	flex: none;
	min-width: 64px;
	font: 700 17px 'Poppins', sans-serif;
	color: #FFC3A0;
}

.dp-dn-amount small { font-size: 12px; color: var(--dp-text-muted); }
.dp-dn-list li.is-pending .dp-dn-amount { color: var(--dp-text-muted); }

.dp-dn-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.dp-dn-who strong { color: var(--dp-text); overflow-wrap: anywhere; }
.dp-dn-msg { color: #C8CEDD; line-height: 1.5; overflow-wrap: anywhere; }
.dp-dn-msg.is-hidden { color: var(--dp-text-faint); font-style: italic; }
.dp-dn-who em { font-size: 11.5px; font-style: normal; color: var(--dp-text-faint); }

.dp-dn-actions form { display: flex; gap: 4px; }
.dp-st-icon-btn.is-neutral:hover { color: var(--dp-text); border-color: var(--dp-border); }

@media (max-width: 640px) {
	.dp-dn-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.dp-dn-row > div:first-child { grid-column: 1 / -1; }
	.dp-dn-public { width: 100%; }
	.dp-dn-head h1 { font-size: 26px; }
}

/* Listes BiS par source (Icy Veins, Murlok, Archon, liste perso) */

.gw-admin-priority {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 12px 12px;
	border-bottom: 1px solid #1C2438;
}

.gw-admin-priority label,
.gw-admin-other label {
	font-size: 12px;
	font-weight: 600;
	color: var(--dp-text-muted);
}

.gw-admin-inline {
	display: flex;
	gap: 8px;
	align-items: center;
}

.gw-admin-inline input,
.gw-admin-other input[type="url"],
.gw-admin-other select {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 8px 11px;
	border-radius: 9px;
	border: 1px solid #262F47;
	background: #0B0F17;
	color: #F2F4F8;
	font-family: inherit;
	font-size: 12.5px;
}

.gw-admin-inline input:focus,
.gw-admin-other input[type="url"]:focus,
.gw-admin-other select:focus {
	outline: none;
	border-color: #E8C26A;
}

.gw-admin-inline .gt-btn {
	flex: none;
}

.gw-admin-sources {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	padding: 12px;
}

.gw-admin-source {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 11px 12px;
	border-radius: 12px;
	border: 1px dashed #2A3350;
	background: #0D1322;
}

.gw-admin-source.is-set {
	border-style: solid;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(91, 208, 143, 0.08), transparent 65%),
		#0F1626;
}

.gw-admin-source .dp-st-hint {
	margin: 0;
}

.gw-admin-source-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.gw-admin-source-head strong {
	font-size: 13px;
	color: #F2F4F8;
}

.gw-admin-source-head span {
	font-size: 11px;
	color: #8A93AC;
	font-variant-numeric: tabular-nums;
}

.gw-admin-source.is-set .gw-admin-source-head span {
	color: #5BD08F;
}

.gw-admin-source details > summary {
	cursor: pointer;
	font-size: 11.5px;
	font-weight: 600;
	color: #B7BED0;
	list-style: none;
}

.gw-admin-source details > summary::-webkit-details-marker {
	display: none;
}

.gw-admin-source details > summary::before {
	content: "+";
	display: inline-block;
	width: 14px;
	color: #7C86A2;
}

.gw-admin-source details[open] > summary::before {
	content: "–";
}

.gw-admin-source .gw-admin-items {
	grid-template-columns: minmax(0, 1fr);
	max-height: 260px;
	overflow: auto;
	padding: 6px 0 0;
}

.gw-admin-source .gw-admin-bis-form,
.gw-admin-source .gw-admin-bis-delete {
	padding: 6px 0 0;
}

.gw-admin-other .gw-admin-bis-form > label {
	margin-top: 4px;
}

@media (max-width: 640px) {
	.gw-admin-inline {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Favori "Envoyer a la Taverne" et reception des objets dans l'admin */

.gw-bookmarklet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px dashed #3A4566;
	background: #0D1322;
}

.gw-bookmarklet span {
	font-size: 11.5px;
	color: #8A93AC;
}

.gw-bookmarklet-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: #EDEFF5;
	color: #0B0F17;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: grab;
	box-shadow: 0 6px 18px -8px rgba(237, 239, 245, 0.5);
}

.gw-bookmarklet-btn:active {
	cursor: grabbing;
}

.gw-admin-receive {
	margin-bottom: 18px;
	border-color: rgba(91, 208, 143, 0.45);
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(91, 208, 143, 0.10), transparent 65%),
		var(--dp-card-bg, #10172A);
}

.gw-admin-receive[hidden] {
	display: none;
}

.gw-admin-receive .dp-st-card-head span {
	color: #5BD08F;
}

.gw-admin-receive-from {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 12px 6px;
	font-size: 12px;
	color: #B7BED0;
	overflow-wrap: anywhere;
}

.gw-admin-receive-from i {
	color: #7C86A2;
}

.gw-admin-receive select,
.gw-admin-receive input[type="text"] {
	width: 100%;
	padding: 9px 11px;
	border-radius: 9px;
	border: 1px solid #262F47;
	background: #0B0F17;
	color: #F2F4F8;
	font-family: inherit;
	font-size: 12.5px;
}

.gw-admin-receive .gw-admin-bis-actions {
	gap: 8px;
}

/* ------------------------- 13. Fiche personnage WoW : carte, stats, panneau */

/* Carte d'en-tete du personnage (gallic_render_wow_hero) */
.gw-hero {
	--gw-accent: #F2894E;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	border-radius: 20px;
	border: 1px solid #262F47;
	background:
		linear-gradient(120deg, color-mix(in srgb, var(--gw-accent) 16%, transparent) 0%, transparent 55%),
		#141B2B;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gw-accent) 45%, transparent);
}

.gw-hero.is-dimmed {
	opacity: 0.6;
}

.gw-hero-faction {
	position: absolute;
	right: -28px;
	top: -36px;
	width: 190px;
	height: 190px;
	opacity: 0.1;
	pointer-events: none;
	user-select: none;
}

.gw-hero-main {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
}

.gw-hero-portrait {
	position: relative;
	flex-shrink: 0;
}

.gw-hero-portrait > img:first-child,
.gw-hero-portrait > span {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	object-fit: cover;
	border: 2px solid var(--gw-accent);
	background: #0B0F17;
	color: #8A93AC;
	font-size: 22px;
	box-shadow: 0 8px 20px -10px var(--gw-accent);
}

.gw-hero-corner {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #141B2B;
}

.gw-hero-id {
	flex: 1;
	min-width: 0;
}

.gw-hero-id h1 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	font-family: 'Baloo 2', sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: #F2F4F8;
}

.gw-hero-id h1 span {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #8A93AC;
}

.gw-hero-meta {
	margin: 2px 0 0;
	font-size: 12px;
	color: #8A93AC;
}

.gw-hero-meta a {
	color: #F2894E;
	font-weight: 600;
}

.gw-hero-meta a:hover {
	color: #FFA366;
}

.gw-hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 7px;
}

.gw-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 99px;
	border: 1px solid #262F47;
	background: #0B0F17;
	color: #F2F4F8;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.gw-chip img {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	object-fit: cover;
}

.gw-chip.is-accent {
	border-color: rgba(242, 137, 78, 0.3);
	background: rgba(242, 137, 78, 0.15);
	color: #FFA366;
}

.gw-chip.is-warn {
	border-color: rgba(245, 158, 11, 0.3);
	background: rgba(245, 158, 11, 0.15);
	color: #FCD34D;
}

/* Stats dans la carte du personnage, sous un trait de separation. */
.gw-hero-stats {
	position: relative;
	padding: 10px 20px 10px;
	border-top: 1px solid rgba(120, 136, 186, 0.22);
	background: rgba(8, 11, 18, 0.35);
}

.gw-hero-stats dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 0;
	margin: 0;
}

.gw-hero-stats dl > div {
	min-width: 0;
	padding: 2px 14px;
	border-left: 1px solid rgba(120, 136, 186, 0.16);
}

.gw-hero-stats dl > div:first-child {
	border-left: 0;
	padding-left: 0;
}

.gw-hero-stats dt {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #7C86A2;
	white-space: nowrap;
}

.gw-hero-stats dt img {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	object-fit: cover;
}

.gw-hero-stats dt i {
	font-size: 10px;
}

.gw-hero-stats dd {
	margin: 2px 0 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	color: #F2F4F8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}

.gw-hero-stats p {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 6px 0 0;
	font-size: 10.5px;
	color: #7C86A2;
}

.gw-hero-stats p:empty {
	display: none;
}

.gw-hero-sync-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #5BD08F;
}

@media (max-width: 640px) {
	.gw-hero-main {
		flex-wrap: wrap;
		padding: 12px 14px;
	}

	.gw-hero-id h1 {
		font-size: 22px;
	}

	.gw-hero-stats {
		padding: 10px 14px;
	}

	.gw-hero-stats dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 8px;
	}

	.gw-hero-stats dl > div,
	.gw-hero-stats dl > div:first-child {
		padding: 2px 10px;
		border-left: 1px solid rgba(120, 136, 186, 0.16);
	}

	.gw-hero-stats dl > div:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}

/* Titre de section du panneau */
.gw-section-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8A93AC;
}

/* Progression PvE : Mythique+ et Raids cote a cote */
.gw-pve-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

@media (min-width: 1100px) {
	.gw-pve-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Point vert "fait cette semaine" */
.gw-week-dot {
	display: inline-block;
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.gw-week-dot.is-on {
	background: #4ADE80;
	box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18), 0 0 8px rgba(74, 222, 128, 0.55);
}

.gw-week-legend {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	font-size: 10.5px;
	color: #7C86A2;
}

/* Mythique+ : une ligne par donjon */
.gw-keys {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 4px 10px;
}

.gw-keys[hidden] {
	display: none;
}

.gw-key {
	--gw-key: #8A93AC;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 4px 9px 4px 4px;
	border-radius: 9px;
	background: #111827;
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.22);
}

.gw-key-img {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 6px;
	object-fit: cover;
	background: #0B0F17;
}

.gw-key-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 600;
	color: #E3E7F0;
}

.gw-key-time {
	font-size: 10.5px;
	color: #7C86A2;
	font-variant-numeric: tabular-nums;
}

.gw-key-lvl {
	min-width: 34px;
	text-align: right;
	font-size: 14px;
	font-weight: 800;
	color: var(--gw-key);
	font-variant-numeric: tabular-nums;
}

.gw-key-lvl small {
	display: block;
	margin-top: -2px;
	font-size: 7px;
	letter-spacing: 1px;
	line-height: 1;
}

.gw-key.is-todo .gw-key-name {
	color: #7C86A2;
}

.gw-key.is-todo .gw-key-img {
	opacity: 0.45;
	filter: grayscale(1);
}

.gw-key.is-depleted .gw-key-lvl {
	color: #7C86A2;
}

/* Raids : une carte compacte par raid, un tableau boss x difficulte */
.gw-raids {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gw-raids[hidden] {
	display: none;
}

.gw-raid {
	border-radius: 10px;
	background: #111827;
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.22);
	overflow: hidden;
}

.gw-raid.is-current {
	box-shadow: inset 0 0 0 1px rgba(242, 137, 78, 0.35);
}

.gw-raid-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 8px 6px 6px;
}

.gw-raid-img {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 7px;
	object-fit: cover;
}

.gw-raid-title {
	flex: 1;
	min-width: 0;
}

.gw-raid-title strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	color: #F2F4F8;
}

.gw-raid-title span {
	display: flex;
	gap: 5px;
	margin-top: 1px;
}

.gw-raid-title em {
	font-style: normal;
	font-size: 9.5px;
	font-weight: 600;
	padding: 0 5px;
	border-radius: 4px;
	background: #262F47;
	color: #8A93AC;
}

.gw-raid-title em.is-current {
	background: rgba(242, 137, 78, 0.15);
	color: #FFA366;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.gw-raid-diffs {
	display: flex;
	flex-shrink: 0;
}

.gw-raid-diff {
	--gw-diff: #0070DD;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 48px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--gw-diff);
	font-variant-numeric: tabular-nums;
}

.gw-raid-diff small {
	font-size: 8.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #7C86A2;
}

.gw-raid-diff.is-none {
	opacity: 0.45;
}

.gw-raid-diff .gw-week-dot {
	position: absolute;
	top: 1px;
	right: 6px;
	width: 6px;
	height: 6px;
}

.gw-raid-bosses {
	list-style: none;
	margin: 0;
	padding: 0 8px 4px 8px;
}

.gw-raid-bosses li {
	display: grid;
	align-items: center;
	min-height: 22px;
	border-top: 1px solid rgba(84, 98, 142, 0.16);
}

.gw-raid-boss {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 11.5px;
	color: #C9D0E0;
}

.gw-raid-boss.is-none {
	color: #6B7590;
}

.gw-raid-cell {
	--gw-diff: #0070DD;
	display: flex;
	justify-content: center;
}

.gw-raid-cell i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.5px solid var(--gw-diff);
	opacity: 0.35;
}

.gw-raid-cell.is-kill i {
	width: 10px;
	height: 10px;
	border: 0;
	background: var(--gw-diff);
	opacity: 0.9;
}

/* Tue cette semaine : la pastille passe au vert */
.gw-raid-cell.is-week i {
	background: #4ADE80;
	box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2), 0 0 8px rgba(74, 222, 128, 0.5);
	opacity: 1;
}

/* Module Statistiques (cibles BiS) */
.gw-stats {
	--gw-bis: #5BD08F;
	--gw-stats: #F0A94B;
	--gw-swap: #EE6863;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgba(120, 136, 186, 0.22);
	background:
		radial-gradient(120% 50% at 0% 0%, rgba(110, 132, 214, 0.10), transparent 70%),
		#0B0F18;
}

.gw-stats-head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: #F2F4F8;
}

.gw-stats-head .gw-advice-kicker {
	margin-bottom: 2px;
}

.gw-stats-view[hidden] {
	display: none;
}

.gw-stats-basis {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin: 0 0 10px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(6, 9, 15, 0.6);
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.32);
	font-size: 11px;
	line-height: 1.45;
	color: #8A93AC;
}

.gw-stats-basis i {
	color: #7C86A2;
	font-size: 10px;
}

.gw-stats-basis strong {
	color: #DDE2EE;
	font-weight: 600;
}

.gw-stat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.gw-stat {
	--gw-v: #8A93AC;
	padding: 10px 11px;
	border-radius: 12px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--gw-v) 9%, transparent), transparent 75%),
		#0F1522;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gw-v) 26%, rgba(84, 98, 142, 0.2));
}

.gw-stat.is-bis { --gw-v: var(--gw-bis); }
.gw-stat.is-stats { --gw-v: var(--gw-stats); }
.gw-stat.is-swap { --gw-v: var(--gw-swap); }
.gw-stat.is-over,
.gw-stat .gw-verdict.is-over { --gw-v: #7FA8F0; }

.gw-stat-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.gw-stat-name {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: #C9D0E0;
}

.gw-stat-name i {
	width: 18px;
	height: 18px;
	display: inline-grid;
	place-items: center;
	border-radius: 6px;
	font-size: 9px;
	color: var(--gw-v);
	background: color-mix(in srgb, var(--gw-v) 14%, transparent);
}

.gw-stat-values {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}

.gw-stat-values strong {
	font-size: 18px;
	font-weight: 800;
	color: #F2F4F8;
}

.gw-stat-values span {
	font-size: 11px;
	color: #8A93AC;
}

.gw-stat-bar {
	height: 5px;
	margin-top: 8px;
	border-radius: 99px;
	background: rgba(29, 37, 57, 0.9);
	overflow: hidden;
}

.gw-stat-bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gw-v);
	box-shadow: 0 0 8px color-mix(in srgb, var(--gw-v) 60%, transparent);
}

.gw-stat-foot {
	margin-top: 5px;
	font-size: 10.5px;
	color: #7C86A2;
	font-variant-numeric: tabular-nums;
}

.gw-stats-note {
	margin: 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: #7C86A2;
}

.gw-stats-group dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 6px;
	margin: 0;
}

.gw-stats-group dl > div {
	padding: 7px 9px;
	border-radius: 10px;
	background: #0F1522;
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.24);
	min-width: 0;
}

.gw-stats-group dt {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #7C86A2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gw-stats-group dd {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: #F2F4F8;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gw-stats-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(84, 98, 142, 0.2);
}

/* Admin BiS : une rubrique par classe */
.gw-admin-class {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid color-mix(in srgb, var(--gw-class, #3A4566) 35%, transparent);
	font-size: 13px;
	font-weight: 700;
	color: var(--gw-class, #F2F4F8);
}

.gw-admin-class:first-of-type {
	margin-top: 4px;
}

.gw-admin-class img {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	object-fit: cover;
}

.gw-admin-class small {
	margin-left: auto;
	font-size: 11px;
	font-weight: 500;
	color: #8A93AC;
}

/* ---------------------------------- 14. "Groupe conseillé" (wow_groupe.php) */

.gw-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

@media (max-width: 640px) {
	.gw-hero-actions {
		width: 100%;
	}

	.gw-hero-actions > * {
		flex: 1 1 100%;
	}
}

/* Bouton dore "Groupe conseille" : meme forme que .gt-btn, reflet qui passe */
.gt-btn-gold {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, #F6DD97 0%, #E4B95C 50%, #C38F36 100%);
	color: #2A1A05;
	text-decoration: none;
	border-color: rgba(255, 236, 180, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 248, 225, 0.8),
		0 0 0 1px rgba(160, 110, 30, 0.35),
		0 6px 20px -8px rgba(232, 186, 90, 0.85);
}

.gt-btn-gold::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: -20%;
	bottom: -20%;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: gt-gold-shine 3.6s ease-in-out infinite;
}

@keyframes gt-gold-shine {
	0%, 55% { left: -60%; }
	85%, 100% { left: 130%; }
}

@media (hover: hover) and (pointer: fine) {
	.gt-btn-gold:hover {
		filter: brightness(1.07);
		box-shadow:
			inset 0 1px 0 rgba(255, 248, 225, 0.85),
			0 0 0 1px rgba(160, 110, 30, 0.4),
			0 8px 26px -8px rgba(232, 186, 90, 1);
	}
}

.gt-btn-gold:focus-visible {
	outline: 2px solid #F3D78F;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gt-btn-gold::after {
		animation: none;
		display: none;
	}
}

.gg-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #E2B65A;
}

.gg-hero {
	margin-bottom: 18px;
	padding: 22px 24px;
	border-radius: 20px;
	border: 1px solid rgba(226, 182, 90, 0.28);
	background:
		radial-gradient(70% 120% at 100% 0%, rgba(226, 182, 90, 0.14), transparent 60%),
		#0D121D;
}

.gg-hero h1 {
	margin: 6px 0 6px;
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	color: #F7F1E1;
}

.gg-hero p {
	margin: 0;
	max-width: 720px;
	font-size: 13px;
	line-height: 1.55;
	color: #A8B0C4;
}

.gg-hero strong {
	color: #F2F4F8;
}

.gg-empty {
	padding: 18px;
	border-radius: 14px;
	border: 1px dashed #3A4566;
	color: #A8B0C4;
	font-size: 13px;
	text-align: center;
}

/* Choix du donjon et du niveau */
.gg-picker {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.gg-dungeons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.gg-dungeon {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	min-height: 78px;
	padding: 10px 11px;
	border-radius: 12px;
	border: 1px solid rgba(84, 98, 142, 0.4);
	background: #0F1522;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.gg-dungeon input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gg-dungeon-art {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.gg-dungeon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 14, 22, 0.1), rgba(10, 14, 22, 0.92) 85%);
}

.gg-dungeon:hover {
	border-color: rgba(226, 182, 90, 0.5);
}

.gg-dungeon:hover .gg-dungeon-art,
.gg-dungeon.is-active .gg-dungeon-art {
	opacity: 0.7;
}

.gg-dungeon.is-active,
.gg-dungeon:has(input:checked) {
	border-color: #E2B65A;
	box-shadow: 0 0 0 1px #E2B65A, 0 10px 24px -14px rgba(226, 182, 90, 0.8);
}

.gg-dungeon:has(input:focus-visible) {
	outline: 2px solid #F3D78F;
	outline-offset: 2px;
}

.gg-dungeon-name {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #F2F4F8;
}

.gg-dungeon-me {
	font-size: 10.5px;
	color: #A8B0C4;
}

.gg-level {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.gg-level label {
	font-size: 12px;
	font-weight: 600;
	color: #A8B0C4;
}

.gg-level input {
	width: 84px;
	padding: 9px 11px;
	border-radius: 10px;
	border: 1px solid #262F47;
	background: #0B0F17;
	color: #F2F4F8;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
}

.gg-level input:focus {
	outline: none;
	border-color: #E2B65A;
}

/* Resultat */
.gg-result {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	border-radius: 20px;
	border: 1px solid rgba(120, 136, 186, 0.22);
	background: #0B0F18;
}

.gg-result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.gg-result-head h2 {
	margin: 4px 0 0;
	font-size: 20px;
	font-weight: 800;
	color: #F2F4F8;
}

.gg-result-head h2 b {
	color: #E2B65A;
}

.gg-target {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(226, 182, 90, 0.08);
	box-shadow: inset 0 0 0 1px rgba(226, 182, 90, 0.3);
	font-size: 11.5px;
	color: #C9B98F;
}

.gg-target a {
	text-decoration: none;
}

.gg-target strong {
	font-size: 22px;
	font-weight: 800;
	color: #F3D78F;
}

.gg-members {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 1200px) {
	.gg-members {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
}

.gg-member {
	--gg-class: #8A93AC;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 12px;
	border-radius: 14px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--gg-class) 14%, transparent), transparent 55%),
		#0F1522;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gg-class) 30%, rgba(84, 98, 142, 0.25));
}

.gg-member.is-anchor {
	box-shadow: inset 0 0 0 1px rgba(226, 182, 90, 0.6), 0 10px 26px -18px rgba(226, 182, 90, 0.9);
}

.gg-member.is-empty {
	justify-content: flex-start;
	background: transparent;
	box-shadow: none;
	border: 1px dashed #3A4566;
}

.gg-member.is-empty p {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: #8A93AC;
}

.gg-role {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #A8B0C4;
}

.gg-role em {
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(226, 182, 90, 0.16);
	color: #F3D78F;
	font-style: normal;
	letter-spacing: 0.06em;
}

.gg-member-id {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.gg-avatar {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	overflow: hidden;
	background: #0B0F17;
	border: 1px solid var(--gg-class);
}

.gg-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gg-member-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gg-member-name strong {
	font-size: 14px;
	font-weight: 800;
	color: var(--gg-class);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gg-member-id:hover strong {
	text-decoration: underline;
}

.gg-member-name small,
.gg-owner {
	font-size: 11px;
	color: #8A93AC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gg-reasons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gg-reasons li {
	padding: 2px 7px;
	border-radius: 6px;
	background: rgba(6, 9, 15, 0.7);
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.3);
	font-size: 10.5px;
	color: #C9D0E0;
}

.gg-reasons li:first-child {
	color: #F2F4F8;
	font-weight: 600;
}

.gg-fit {
	display: block;
	height: 4px;
	margin-top: auto;
	border-radius: 99px;
	background: rgba(29, 37, 57, 0.9);
	overflow: hidden;
}

.gg-fit i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #C08C34, #F3D78F);
}

.gg-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gg-checks li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border-radius: 999px;
	background: #0F1522;
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.3);
	font-size: 12px;
	color: #C9D0E0;
}

.gg-checks li.is-ok i { color: #5BD08F; }
.gg-checks li.is-ko { color: #8A93AC; }
.gg-checks li.is-ko i { color: #EE6863; }

.gg-checks li span {
	color: #8A93AC;
}

.gg-checks li strong {
	color: #F2F4F8;
	font-variant-numeric: tabular-nums;
}

.gg-alts {
	padding-top: 14px;
	border-top: 1px solid rgba(84, 98, 142, 0.25);
}

.gg-alts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 10px;
}

.gg-alts h3 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #A8B0C4;
}

.gg-alts ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gg-alts li {
	--gg-class: #8A93AC;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 10px;
	background: #0F1522;
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.25);
}

.gg-alts li a {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.gg-alts li strong {
	font-size: 12.5px;
	color: var(--gg-class);
}

.gg-alts li small {
	font-size: 10.5px;
	color: #8A93AC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gg-alts li > span {
	flex: none;
	font-size: 10.5px;
	color: #C9D0E0;
}

.gg-how {
	margin: 0;
	font-size: 11px;
	line-height: 1.55;
	color: #7C86A2;
}

/* BiS : favori et pieces a aller chercher par origine */
.gw-sources-switch button.is-favorite i {
	margin-right: 4px;
	font-size: 9px;
	color: #F3D78F;
}

.gw-wish-origin {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 5px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #C9D0E0;
}

.gw-wish-origin::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: #8A93AC;
}

.gw-wish-origin.is-mplus::before { background: #5BC0EB; }
.gw-wish-origin.is-raid::before { background: #E8562A; }

.gw-wish-origin small {
	margin-left: auto;
	font-size: 10px;
	font-weight: 600;
	color: #7C86A2;
}

/* Sources BiS : les libelles ne sont plus coupes ("BiS favori" en entier) */
.gw-sources-switch {
	flex-wrap: wrap;
	gap: 2px;
}

.gw-sources-switch button {
	flex: 1 0 auto;
	padding: 6px 9px;
	overflow: visible;
	text-overflow: clip;
}

/* A aller chercher : donjon et raid bien separes, liste complete qui defile */
.gw-wish-group {
	margin-top: 10px;
	padding: 2px 8px 8px;
	border-radius: 10px;
	background: rgba(9, 13, 22, 0.55);
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.22);
}

.gw-wish-group.is-mplus { box-shadow: inset 0 0 0 1px rgba(91, 192, 235, 0.22); }
.gw-wish-group.is-raid { box-shadow: inset 0 0 0 1px rgba(232, 86, 42, 0.24); }

.gw-wish-group .gw-wish-origin {
	margin: 6px 0 6px;
}

.gw-wish-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gw-wish-list.is-scroll {
	max-height: 152px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: #3A4566 transparent;
	mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}

.gw-wish-list.is-scroll:focus-visible {
	outline: 2px solid rgba(232, 194, 106, 0.5);
	outline-offset: 2px;
}

.gw-wish-list.is-scroll::-webkit-scrollbar { width: 6px; }
.gw-wish-list.is-scroll::-webkit-scrollbar-thumb { background: #3A4566; border-radius: 3px; }

.gw-wish-empty {
	margin: 0 0 2px;
	font-size: 11px;
	color: #6F7893;
}

/* Infobulle : ou trouver la piece */
.gw-tip-where {
	display: grid;
	gap: 3px;
	margin: 7px 0 5px;
	padding: 7px 9px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
}

.gw-tip-where div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
}

.gw-tip-where span {
	color: #8A93AC;
}

.gw-tip-where strong {
	font-weight: 600;
	text-align: right;
	color: #F2F4F8;
}

.gw-tip-where.is-mplus div:first-child strong { color: #8FD6F2; }
.gw-tip-where.is-raid div:first-child strong { color: #F2936F; }

.gw-wish-list li { flex: none; }

/* Admin : table de butin du Journal Blizzard */
.gw-admin-loot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(9, 13, 22, 0.6);
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.28);
}

.gw-admin-loot strong {
	display: block;
	font-size: 12.5px;
	color: #F2F4F8;
}

.gw-admin-loot span {
	font-size: 11.5px;
	color: #8A93AC;
}

/* --- Groupe conseille : invitation Discord, pourquoi, sur quelles infos --- */
.gg-head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.gg-invite {
	margin: 0;
}

.gg-invite-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 100%;
	padding: 8px 16px 8px 13px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #6A76F5 0%, #5865F2 55%, #4752C4 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -14px rgba(88, 101, 242, 0.9);
	color: #FFFFFF;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.gg-invite-btn i {
	font-size: 20px;
}

.gg-invite-btn span {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.gg-invite-btn small {
	font-size: 10.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
}

.gg-invite-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 28px -14px rgba(88, 101, 242, 1);
}

.gg-invite-btn:focus-visible {
	outline: 2px solid #C9CDFB;
	outline-offset: 2px;
}

.gg-invite-btn:disabled {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.gg-invite-setup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.45);
	font-size: 12px;
	font-weight: 600;
	color: #B7BEF8;
	text-decoration: none;
}

.gg-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 12.5px;
}

.gg-notice.is-ok {
	background: rgba(91, 208, 143, 0.08);
	box-shadow: inset 0 0 0 1px rgba(91, 208, 143, 0.3);
	color: #BDEBD0;
}

.gg-notice.is-ok a {
	margin-left: auto;
	font-weight: 700;
	color: #F2F4F8;
}

.gg-notice.is-error {
	background: rgba(238, 104, 99, 0.08);
	box-shadow: inset 0 0 0 1px rgba(238, 104, 99, 0.3);
	color: #F4C3C1;
}

.gg-why,
.gg-basis {
	padding-top: 14px;
	border-top: 1px solid rgba(84, 98, 142, 0.25);
}

.gg-why-grid,
.gg-basis-grid {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}

.gg-why-grid li {
	--gg-tone: #8FA2D8;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 12px;
	border-radius: 12px;
	background: #0F1522;
	box-shadow: inset 0 0 0 1px rgba(84, 98, 142, 0.25);
}

.gg-why-grid li.is-good { --gg-tone: #5BD08F; }
.gg-why-grid li.is-warn { --gg-tone: #F0A04B; }

.gg-why-grid li > i {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--gg-tone) 14%, transparent);
	color: var(--gg-tone);
	font-size: 13px;
}

.gg-why-grid strong,
.gg-basis-grid strong {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: #F2F4F8;
}

.gg-why-grid p,
.gg-basis-grid p {
	margin: 2px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: #9AA3BA;
}

.gg-basis-weights {
	display: flex;
	height: 8px;
	margin-top: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: #0F1522;
}

.gg-basis-weights i {
	display: block;
	height: 100%;
}

.gg-basis-weights i + i {
	box-shadow: -2px 0 0 #0B0F18;
}

.gg-basis-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: #9AA3BA;
}

.gg-basis-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gg-basis-legend b {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

.gg-basis-legend strong {
	color: #F2F4F8;
	font-variant-numeric: tabular-nums;
}

.gg-basis-grid li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 4px 2px;
}

.gg-basis-grid li > i {
	flex: none;
	width: 18px;
	margin-top: 2px;
	text-align: center;
	font-size: 12px;
	color: #6F7FAE;
}

/* Stats : zone des meilleurs joueurs (25e a 75e centile) */
.gw-stat-range {
	position: relative;
	height: 7px;
	margin-top: 8px;
	border-radius: 99px;
	background: rgba(29, 37, 57, 0.9);
}

.gw-stat-range b {
	position: absolute;
	top: -3px;
	bottom: -3px;
	border-radius: 4px;
	background: rgba(91, 208, 143, 0.16);
	box-shadow: inset 0 0 0 1px rgba(91, 208, 143, 0.45);
}

.gw-stat-range i {
	position: relative;
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gw-v);
	box-shadow: 0 0 8px color-mix(in srgb, var(--gw-v) 60%, transparent);
}

.gw-stat-range i::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #F2F4F8;
	box-shadow: 0 0 0 2px var(--gw-v);
	transform: translate(50%, -50%);
}

.gw-stat-foot.is-ahead {
	color: #9FB2E8;
}

/* Groupe conseille : bulle forces et points faibles d'un joueur */
.gg-tip-block {
	margin-top: 8px;
}

.gg-tip-block > span {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #A8B0C4;
}

.gg-tip-block > span::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: #5BD08F;
}

.gg-tip-block.is-work > span::before {
	background: #F0A04B;
}

.gg-tip-block ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.gg-tip-block li {
	padding: 2px 0;
	font-size: 12px;
	line-height: 1.4;
	color: #DDE2EE;
}

/* Groupe conseillé : recherche en cours (un seul clic pris en compte). */
.gg-picker.is-loading { cursor: progress; }
.gg-picker.is-loading label,
.gg-picker.is-loading button { pointer-events: none; opacity: .6; transition: opacity .15s ease; }

/* Admin : spés calculées automatiquement (plus de listes à remplir). */
.gw-admin-spec-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #222B40;
	background: #10172A;
}
.gw-admin-specs > li.is-missing > .gw-admin-spec-row { border-style: dashed; }
.gw-admin-spec-row .gw-admin-spec-state { margin-left: auto; text-align: right; }
@media (max-width: 640px) {
	.gw-admin-spec-row { flex-wrap: wrap; }
	.gw-admin-spec-row .gw-admin-spec-state { display: block; width: 100%; text-align: left; margin-left: 0; }
}
.gw-admin-loot-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gw-admin-loot-actions form { margin: 0; }

/* Talents des meilleurs joueurs (fiche perso) */
.gw-talents {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgba(120, 136, 186, 0.22);
	background: radial-gradient(120% 50% at 100% 0%, rgba(150, 110, 214, 0.10), transparent 70%), #0B0F18;
}
.gw-talents .gw-stats-head h2 { margin: 0; }
.gw-talents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.gw-talents-col { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.gw-talents-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gw-talents-head span, .gw-talents-sub { font-size: 12px; color: rgba(220, 226, 245, 0.6); margin: 0; }
.gw-talents-hero { margin: 0; font-size: 13px; }
.gw-talents-hero i { color: #C9A2F0; margin-right: 6px; }
.gw-talents-build { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.gw-talents-build em.is-same { display: block; font-style: normal; font-size: 12px; color: #5BD08F; }
.gw-talents-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gw-talents-picks li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 42px; align-items: center; gap: 8px; font-size: 13px; }
.gw-talents-picks li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-talents-picks small { color: #C9A2F0; font-size: 11px; }
.gw-talents-picks b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gw-talents-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #C9A2F0 var(--gw-rate), rgba(255, 255, 255, 0.08) var(--gw-rate)); }