/* IMPORTS */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;700&display=swap');

/* =========================
   Thème & variables
========================= */
:root{
   --font-family: 'Baloo 2', sans-serif;
	/* Teintes vert/marron/doré sobres */
	--green-600:#2d5a3f;
	--green-500:#356b4a;
	--green-400:#3f7a55;

	--brown-700:#3b2a18;   /* plus marron que doré */
	--brown-650:#442f1a;
	--brown-600:#4a341e;

	--gold-400:#b7954b;    /* doré atténué */
	--gold-500:#c2a057;

	--bg:#141312;          /* arrière-plan global (remplaçable par image) */
	--panel:#1a1816;
	--panel-2:#201d1a;

	--text:#e8e5df;
	--muted:#cfc9bd;
	--shadow: 0 8px 24px rgba(0,0,0,.35);

	/* Dimensions */
	--radius: 12px;
	--gap: 16px;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
}

body{
   font-family: var(--font-family);
	background: url("../img/background.jpg") no-repeat center/cover fixed;
	color:var(--text);
	line-height:1.4;
}

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background: #171513}
*::-webkit-scrollbar-thumb{
	background: linear-gradient(180deg, var(--brown-700), var(--gold-400));
	border: 3px solid #171513;
	border-radius: 999px;
}
/* Scrollbar (Firefox) */
*{scrollbar-width: thin; scrollbar-color: var(--gold-400) #171513;}

a{color:inherit;text-decoration:none}
button{font:inherit}

.container-discord{
	max-width:1024px; 
	margin-inline:auto; 
	padding: 0 20px;
}

.container {
	margin-inline:auto; 
	padding: 0 20px;
}

.small{font-size:13px; opacity:.9}
.limit{max-width:75ch}

/* =========================
   Header / Navigation
========================= */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(6px);
    transition: background 5.0s ease;
}

/* Page d'accueil */
.home-header {
    background: linear-gradient(180deg, rgb(26 24 22 / 25%), rgb(26 24 22 / 5%));
}

/* Autres pages */
.default-header {
    background: linear-gradient(145deg, rgb(26 24 22 / 95%), rgb(67 67 67 / 95%));
}

.header.scrolled {
    background: linear-gradient(180deg, rgb(26 24 22 / 60%), rgb(26 24 22 / 12%));
}

.header::after{
  content:""; position:absolute; inset:0 0 auto 0; height:100%;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));
}

.nav{
	display:flex; align-items:center; justify-content:space-around;
	height:92px;
}
.brand{
	display:flex; align-items:center; gap:12px; font-weight:700;
	letter-spacing:.5px;
}
.brand-logo {
    height: 144px;
    display: block;
    margin-top: -8px;
}
.brand-badge{
	width:36px;height:36px; border-radius:8px;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}
.brand span{
	background: linear-gradient(90deg, var(--gold-500), var(--muted));
	-webkit-background-clip:text; background-clip:text; color:transparent;
}

.menu { display:flex; gap:10px; flex-wrap:wrap; }

.nav-link{
   font-size: 18px;
	position:relative;
	padding:18px 16px;
	border-radius:16px;
	border:0;
   color: #fff; 
	font-weight:600;
	letter-spacing:.2px;
	transition: transform .12s ease, box-shadow .2s ease, background .25s ease, color .2s ease;
	white-space:nowrap;
}

/* halo doré subtil au hover */
.nav-link::after{
	content:"";
	position:absolute; inset:-1px;
	border-radius:16px;
	pointer-events:none;
	box-shadow: 0 0 0 0 rgba(199,160,87,0); /* gold-500 */
	transition: box-shadow .25s ease;
}

.nav-link[aria-current="page"]{
	color:#C9A343;
}

/* Hover / focus */
.nav-link:hover{
	transform: translateY(-5px);
}

.nav-link:hover::after{
	content:"";
	position:absolute; left:16px; right:16px; top:42px; height:2px;
	border-radius:2px;
	background: linear-gradient(90deg, var(--gold-500), #e6d4a0);
	opacity:.9;
}

/* Focus clavier clair et net */
.nav-link:focus-visible{
	outline: none;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.08),
		inset 0 -1px 0 rgba(0,0,0,.45),
		0 0 0 3px rgba(183,149,75,.45);
}

/* Version "active au clic" légère */
.nav-link:active{ transform: translateY(0); }

/* Burger (mobile) */
.burger{display:none; border:0; background:transparent; width:42px; height:42px; border-radius:8px}
.burger:focus-visible{outline:2px solid var(--gold-400)}
.burger svg{width:24px; height:24px}

@media (max-width: 980px){
	.menu{display:none}
	.burger{display:inline-grid; place-items:center}
	.drawer{
		position:fixed; inset:84px 0 auto 0; z-index:40;
		background: linear-gradient(180deg, #171513, #151311);
		border-top:1px solid rgba(255,255,255,.06);
		box-shadow: var(--shadow);
		display:none;
	}
	.drawer.open{display:block}
	.drawer .menu{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; }
	.drawer .nav-link{ text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =========================
   Hero minimal
========================= */
.hero{ padding: clamp(48px, 8vw, 96px) 0; }
.hero-card{
	border-radius: var(--radius);
   background: linear-gradient(180deg, rgba(26, 24, 22, .95), rgb(26 24 22 / 70%));
	border:1px solid rgba(255,255,255,.07);
	box-shadow: var(--shadow);
	padding: clamp(20px, 5vw, 36px);
}
.hero h1{
	margin:0 0 10px; font-size: clamp(28px, 5vw, 44px);
	font-weight:800; letter-spacing:.4px;
	color:#C9A343;
}
.hero p{margin:0; color: var(--muted)}

.cta-row{margin-top:22px; display:flex; gap:12px;flex-wrap:wrap;}

.cta-row-auth{margin-top:22px; display:flex; justify-content:space-around; gap:12px;flex-wrap:wrap;}

a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: linear-gradient(180deg, #C9A343, #4b3a11);
	color: #f3efe6;
	padding: 12px 16px;
	border-radius: 12px;
	font: inherit;
	cursor: pointer;
	transition: transform .12s ease, filter .2s ease, border-color .2s;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

a.btn:hover,
button.btn:hover,
input[type="submit"].btn:hover,
input[type="button"].btn:hover {
	transform: translateY(-3px);
	filter: brightness(1.06);
	border-color: rgba(255,255,255,.18);
}

a.btn.ghost,
button.btn.ghost,
input[type="submit"].btn.ghost,
input[type="button"].btn.ghost {
	background: linear-gradient(180deg, var(--panel), var(--panel-2));
}

.btn-vote{
	margin-bottom:30px;
}


/* =========================
   Sections Discord & Présentation
========================= */
.section{ padding: clamp(32px, 6vw, 40px) 0; }
.card{
	border:1px solid rgba(255,255,255,.07);
	background: linear-gradient(180deg, rgba(26, 24, 22, .95), rgb(26 24 22 / 70%));
	border-radius: var(--radius);
	padding: 60px;
	box-shadow: var(--shadow);
	position: relative;
}
.section h2{ margin:0 0 10px; font-size: clamp(22px, 4vw, 32px); }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }

.widget-ph{ border:1px dashed rgba(255,255,255,.18); border-radius:12px; padding:18px; }
.ph-area{ height:120px; opacity:.6; display:grid; place-items:center; }
.btn-discord{
	padding:12px 16px; 
	border-radius:12px;
	background: linear-gradient(180deg, #5666F1, #2c347b);
	color: #f3efe6;
	transition: transform .12s ease, filter .2s ease, border-color .2s;
}
.btn-discord:hover{ transform: translateY(-3px); filter: brightness(1.06); border-color: rgba(255,255,255,.18)}
.btn-discord.ghost{ background: linear-gradient(180deg, var(--panel), var(--panel-2)); }

/* zone Discord à l’intérieur de la .card */
.discord-grid{
  display: grid;
  grid-template-columns: 1fr auto;     /* texte à gauche, wumpus à droite */
  grid-template-areas:
    "text wumpus"
    "cta  wumpus";                      /* le bouton s’aligne sur le bas du wumpus */
  column-gap: 18px;
  align-items: start;
}

/* mapping des zones */
.discord-grid .limit{ grid-area: text; }
.discord-grid .wumpus{
  grid-area: wumpus;
  align-self: end;                      /* colle l’image en bas de sa colonne */
  width: 120px;                         /* ajuste à ton goût */
  height: auto;
}
.discord-grid .cta-row{
  grid-area: cta;
  align-self: end;                      /* s’aligne au bas = bas du wumpus */
  margin-top: 0;                        /* plus de marge négative */
}

/* Responsive : tout en colonne, propre */
@media (max-width: 680px){
  .discord-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "wumpus"
      "text"
      "cta";
    row-gap: 12px;
  }
  .discord-grid .wumpus{
    justify-self: center;
    width: 88px;
  }
  .discord-grid .cta-row{
    justify-content: flex-start;        /* ou center si tu préfères */
  }
}

/* =========================
   Footer
========================= */
.footer{
	border-top:1px solid rgba(255,255,255,.07);
	background: #161412;
	color:#bfb8aa;
}
.footer .container{
    padding: 22px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* Focus visible */
a:focus-visible, .nav-link:focus-visible, .btn:focus-visible{
	outline:2px solid var(--gold-400); outline-offset:2px;
}

.hero-section {
    align-items: center;      /* Centre horizontalement */
    height: 100vh;            /* Plein écran avant scroll */
    text-align: center;
}

.hero-logo-img {
    max-width: 90%;
    width: 700px; /* Taille du logo */
    height: auto;
    margin-top: -50px;
}

.hero-cta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 60vw;
}

.hero-btn {
    font-size: 20px;
    padding: 16px 28px;
    border-radius: 14px;
    font-weight: 700;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.hero-btn.primary, .hero-btn.secondary {
    color: #fff;
}

.hero-btn.primary {
    background: linear-gradient(180deg, #C9A343, #5f4a15);
}

.hero-btn.secondary {
	 background: linear-gradient(180deg, #9f8449, #473918);
}

.hero-btn.primary:hover, .hero-btn.secondary:hover {
    transform: translateY(-8px);
}

.hero-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.scroll-image {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    pointer-events: auto;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.3s ease;
    cursor: pointer;
}


.scroll-image.hidden {
    opacity: 0;
}

.scroll-image img {
    max-width: 100px;
    height: auto;
}

.serveur-prive img {

	max-width: 256px;
    position: absolute;
    left: 20px;
    bottom: 10px;
}

/* =========================
   Admin Tools (Vote page)
========================= */
.admin-tools {
    border: 1px dashed rgba(255,255,255,0.4);
    padding: 10px 15px;
    display: inline-block;
    margin-top: 15px;
    border-radius: 6px;
    text-align: left;
}

.admin-tools legend {
    font-size: 14px;
    padding: 0 6px;
    color: var(--muted);
}

.admin-tools .cta-row {
    justify-content: center;
    margin-top: 5px;
}

/* =========================
   Classements
========================= */

.ranking-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.ranking-tabs button {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.1);
}
.ranking-tabs button.active {
    background: var(--gold-500);
    color: #fff;
}
.ranking-table table th, .ranking-table table td {
    font-weight: bold;
	text-align: left;
    padding: 8px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.ranking-table-alt {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* =========================
   Captcha
========================= */

.grecaptcha-badge{ visibility:hidden; }

.recaptcha-legal{ padding: 0px 20px 2px; font-size:13px; opacity:.8; color:var(--muted);}

.login-link {
    color: burlywood;
}

/* Forms – commun login/register */
.fields{
    display:grid;
    gap:12px;
    --bleed: 48px;
    overflow: visible;
}
.form-group{ display:flex; gap:6px; max-width: 250px; }
.form-group label{ font-size:14px; color:var(--muted); }

.form-input{
	width:100%;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.08);
	background: linear-gradient(180deg, rgba(26,24,22,.96), rgba(26,24,22,.82));
	color:var(--text);
	outline: none;
	transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}
.form-input::placeholder{ color:var(--muted); opacity:.6; }
.form-input:focus{
	border-color: rgba(201,163,67,.45);
	box-shadow: 0 0 0 3px rgba(201,163,67,.18);
}

.form-note {
    display: block;
    width: calc(100% + 2 * var(--bleed));
    margin-left: calc(-1 * var(--bleed));
    margin-right: calc(-1 * var(--bleed));
    text-align: center;
    margin-top: 10px;
    opacity: .9;
}

.card--auth{
  width: 100%;
  max-width: 520px;                /* 400px si tu veux comme login */
  margin-inline: auto;             /* centre horizontalement */
  place-items: center;
}

/* Grille 2 colonnes pour les cadres (même largeur/hauteur fermés) */
.grid-two{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 900px){ .grid-two{ grid-template-columns: 1fr; } }

.setting-card{
  position: relative;
  border:1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(26,24,22,.95), rgba(26,24,22,.75));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex; flex-direction:column;
}

/* Bouton d’ouverture */
.setting-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,0);
  border-radius:12px;
  background: #00000000;
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, filter .2s ease, border-color .2s;
}
.setting-toggle:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.setting-toggle:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }

.setting-toggle svg{
  width:22px; height:22px; flex:0 0 auto; opacity:.9;
  transform: rotate(0deg); transition: transform .2s ease;
  fill: none; stroke: #d8c7a2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Panneau déroulant (hauteur animée) */
.setting-panel{
  overflow:hidden;
  max-height: 0;
  transition: max-height .35s ease;
}

/* Espace interne du panneau */
.setting-panel .fields{ margin-top: 14px; max-width: 360px; }
.setting-panel .form-group{ max-width: 100%; }

/* État ouvert */
.setting-card.is-open .setting-toggle svg{ transform: rotate(180deg); }
.setting-card.is-open .setting-panel{ /* max-height est forcé par JS au scrollHeight exact */ }

.container#account-options {
	padding: 12px;
}

.account-settings.grid-two{
  align-items: start;
}

/* Empêche le débordement horizontal du tableau en mobile */
@media (max-width: 640px){
  .widget-ph{
    overflow-x: auto;                 /* scroll horizontal propre */
    -webkit-overflow-scrolling: touch;
  }
  .widget-ph table{
    min-width: 680px;                 /* largeur mini pour que les colonnes respirent */
  }
  .widget-ph th,
  .widget-ph td{
    padding: 6px 8px;                 /* un peu plus compact */
    white-space: nowrap;              /* évite les retours moches sur 2 lignes */
  }
}

/* ====== Responsive compact & propre (remplace tous les patchs précédents) ====== */

/* 1) Paddings fluides, sans media queries */
.container{ padding-inline: clamp(10px, 4vw, 20px); }
.card{ padding: clamp(18px, 6vw, 60px); }

/* Carte d'auth dédiée (login/register) */
.card.card--auth{ padding: clamp(16px, 5vw, 28px); max-width: 520px; }

/* 2) Formulaires auth : pleine largeur en mobile */
@media (max-width: 640px){
  .card--auth .fields{ gap: 10px; }
  .card--auth .form-group{ max-width: none; width: 100%; }
  .card--auth .form-input{ width: 100%; }
  .card--auth .btn{ width: 100%; margin-top: 8px; }
  .card--auth label{ display:flex; align-items:center; gap:10px; }
  /* évite le zoom iOS */
  input, select, textarea, button { font-size: 16px; }
}

/* 3) Tableau “Mes personnages” : ne déborde jamais */
.widget-ph{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.widget-ph table{ min-width: 680px; }      /* laisse respirer les colonnes */
@media (max-width: 640px){
  .widget-ph th, .widget-ph td{ padding:6px 8px; white-space:nowrap; }
}

/* 4) Logo serveur-prive : posé proprement en mobile */
@media (max-width: 640px){
  .serveur-prive{ text-align: center; }
  .serveur-prive img{
    position: static; display:block; height:auto;
    width: 60%; max-width:160px; margin: 14px auto 0;
  }
}

/* 5) Sécurité anti-scroll horizontal (une seule fois) */
html, body{ overflow-x: clip; }  /* mieux que hidden : pas de tuer les positions/fixes */

/* 1) Empêche tout dépassement dû aux paddings/borders */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Autorise la réduction du champ à l’intérieur du flex container */
.form-group { min-width: 0; }

/* 3) (optionnel mais safe) Évite un micro-scroll horizontal résiduel */
html, body { overflow-x: clip; }


/* Classements — répartition fluide des colonnes */
.ranking-table-alt{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;                 /* <-- plus de fixed */
}

/* Rang : le plus étroit possible, centré, pas de wrap */
.ranking-table-alt th:nth-child(1),
.ranking-table-alt td:nth-child(1){
  width:10%;                          /* hint min-width, pas une largeur fixe */
  white-space:nowrap;
  text-align:center;
}

/* Icône : minimum, centré */
.ranking-table-alt th:nth-child(2),
.ranking-table-alt td:nth-child(2){
  width:25%;
  white-space:nowrap;
  text-align:center;
}
.ranking-table-alt td:nth-child(2) img{
  width:36px; height:36px; display:block; margin:0 auto; border-radius:8px;
}

/* Nom : colonne flexible, ellipsis si trop long */
.ranking-table-alt th:nth-child(3),
.ranking-table-alt td:nth-child(3){
  width:auto;                        /* prend le reste */
  text-align:center;
}
.ranking-table-alt td:nth-child(3){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

/* Valeur (niveau/temps) : étroite, alignée à droite */
.ranking-table-alt th:nth-child(4),
.ranking-table-alt td:nth-child(4){
  width:25%;
  white-space:nowrap;
  text-align:center;
}

/* Un peu d’air en mobile + scroll si vraiment trop serré */
@media (max-width:640px){
  .ranking-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== Wiki layout ===== */
.wiki-card { padding-top: 28px; } /* petite respiration sous le H2 */

.wiki-layout{
    display:flex;
    gap: var(--gap);
    align-items: flex-start;
}

.wiki-sidebar{
    flex: 0 0 240px;              /* largeur volet gauche */
    display:flex;
    flex-direction:column;
    gap: 8px;
}

.wiki-tab{
    display:block;
    width: 100%;
    text-align:left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    transition: transform .08s ease, filter .2s ease, border-color .2s;
}
.wiki-tab:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.wiki-tab.is-active{
    background: var(--gold-500);
    color: #fff;
    border-color: rgba(255,255,255,.18);
}

.wiki-content{
    flex: 1;
    min-width: 0;                  /* évite débordement */
}

.wiki-panel[hidden]{ display: none !important; }
.wiki-panel{
    border:1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(26,24,22,.95), rgba(26,24,22,.75));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

/* Responsive : le volet devient une rangée scrollable */
@media (max-width: 900px){
    .wiki-layout{ flex-direction: column; }
    .wiki-sidebar{
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .wiki-tab{
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* ===== Wiki tables ===== */
.wiki-panel table{
  width:100%;
  margin:12px 0;
  border-collapse:collapse;                 /* fusionne les traits */
  border:1px solid rgba(255,255,255,.14);   /* bordure extérieure */
}
.wiki-panel th,
.wiki-panel td{
  padding:10px 12px;
  text-align:left;
  border:1px solid rgba(255,255,255,.12);   /* traits intérieurs */
}
.wiki-panel thead th{
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
}
.wiki-panel tbody tr:nth-child(odd){
  background: rgba(255,255,255,.03);        /* zébrage discret */
}
.wiki-panel tbody tr:hover{
  background: rgba(201,163,67,.10);         /* hover doré léger */
}
.wiki-panel caption{
  caption-side: top;
  padding:6px 0 10px;
  color: var(--muted);
  font-weight:600;
  text-align:left;
}

/* Mobile : éviter que ça casse la mise en page */
@media (max-width:640px){
  .wiki-panel{ overflow-x:auto; }
  .wiki-panel table{ min-width:520px; }
}

/* Liste d'icônes du wiki */
.wiki-icon-list{
    list-style:none;
    margin:8px 0 16px;
    padding:0;
}
.wiki-icon-list li{
    display:flex;
    align-items:center;
    gap:10px;
    margin:6px 0;
    line-height:1.35;
}
.wiki-icon-list img{
    width:18px; height:18px;
    flex:0 0 18px;
    vertical-align:middle;
    image-rendering: -webkit-optimize-contrast;
}