/* ============================================================
   YO_LAN MINECRAFT PRO CUP — TOKENS
   ============================================================ */
:root{
  --void:#0a0f0d;
  --panel:#121915;
  --panel-2:#1a231d;
  --panel-3:#212c24;
  --line: rgba(234,230,214,0.10);
  --grass:#6f9d3f;
  --grass-deep:#4d7a2c;
  --grass-bright:#8fc257;
  --pumpkin:#d9821f;
  --pumpkin-deep:#a85f14;
  --bone:#eae6d6;
  --bone-dim:#b9b6a6;
  --stone:#8b9088;
  --redstone:#b3402b;
  --sky-dusk:#3a2a1d;

  --font-display:'Chakra Petch', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--font-body);
  line-height:1.55;
  padding-bottom:86px; /* room for bottom hotbar */
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--bone);
  margin:0 0 .5em 0;
  letter-spacing:.01em;
  font-weight:600;
}
p{color:var(--bone-dim); margin:0 0 1em 0;}
a{color:var(--grass-bright);}
::selection{background:var(--grass-deep); color:var(--bone);}

:focus-visible{
  outline:2px solid var(--pumpkin);
  outline-offset:2px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grass-bright);
  display:flex; align-items:center; gap:.5em;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--pumpkin);
  display:inline-block;
}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---- pixel/inventory-slot bevel, the recurring signature motif ---- */
.slot{
  background:var(--panel-2);
  border-radius:2px;
  box-shadow:
    inset 2px 2px 0 rgba(0,0,0,.55),
    inset -2px -2px 0 rgba(255,255,255,.06);
}

/* ============================================================
   TOP HEADER — org logos + persistent ticket CTA
   ============================================================ */
header.top{
  position:sticky; top:0; z-index:40;
  background:rgba(10,15,13,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.top-inner{
  max-width:1080px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.orgs{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.org-logo{
  height:38px; width:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.org-divider{width:1px; height:26px; background:var(--line);}
.beneficiary-pill{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; color:var(--bone-dim);
  padding:4px 12px 4px 6px; border:1px dashed var(--line); border-radius:20px;
}
.beneficiary-pill b{color:var(--bone); font-weight:600;}
.beneficiary-logo{height:24px; width:24px; object-fit:contain; border-radius:50%; background:#fff; padding:2px;}
/* legacy badge style, still used as fallback avatar tiles elsewhere */
.logo-badge{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--bone); border-radius:2px;
}
.logo-badge.yolan{background:var(--grass-deep);}
.logo-badge.revive{background:#2f4d63;}
.btn{
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  padding:10px 18px; border-radius:2px; border:none; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{
  background:var(--pumpkin); color:#1a1000;
  box-shadow:0 3px 0 var(--pumpkin-deep);
}
.btn-primary:hover{box-shadow:0 4px 0 var(--pumpkin-deep);}
.btn-primary:active{transform:translateY(2px); box-shadow:0 1px 0 var(--pumpkin-deep);}
.btn-ghost{
  background:transparent; color:var(--bone); border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--grass-bright); color:var(--grass-bright);}
.btn-outline-discord{
  background:var(--panel-2); color:var(--bone); border:1px solid var(--line);
}
.btn-small{padding:7px 12px; font-size:.75rem;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:100px 0 100px;
  background:var(--void);
  border-bottom:2px solid var(--line);
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{
  width:100%; height:100%; object-fit:fill;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-size:28px 28px;
  pointer-events:none;
  mask-image:linear-gradient(180deg, black, transparent 85%);
}
.hero-inner{position:relative; z-index:1;}
.hero h1{
  font-size:clamp(2.1rem, 5.5vw, 3.6rem);
  line-height:1.05;
  margin:.4em 0 .3em;
  max-width:14ch;
}
.hero h1 .accent{color:var(--pumpkin);}
.hero .tagline{
  max-width:56ch; font-size:1.05rem; color:var(--bone-dim);
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 26px;
}
.meta-chip{
  font-family:var(--font-mono); font-size:.78rem;
  padding:8px 12px; background:var(--panel); border:1px solid var(--line);
  border-radius:2px; color:var(--bone-dim); display:flex; gap:8px; align-items:center;
}
.meta-chip b{color:var(--bone); font-weight:600;}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;}

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:12px; margin-top:8px;
}
.stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px;
}
.stat-card .label{font-family:var(--font-mono); font-size:.68rem; color:var(--stone); text-transform:uppercase; letter-spacing:.08em;}
.countdown{display:flex; gap:10px; margin-top:8px;}
.countdown .box{text-align:center;}
.countdown .num{font-family:var(--font-mono); font-size:1.6rem; font-weight:600; color:var(--grass-bright);}
.countdown .u{font-family:var(--font-mono); font-size:.6rem; color:var(--stone); text-transform:uppercase;}
.gauge-track{
  height:10px; background:var(--panel-3); border-radius:20px; overflow:hidden; margin:10px 0 6px;
}
.gauge-fill{height:100%; background:linear-gradient(90deg, var(--grass-deep), var(--grass-bright));}
.gauge-text{font-family:var(--font-mono); font-size:.78rem; color:var(--bone-dim);}

/* ============================================================
   PAGE / TAB SYSTEM
   ============================================================ */
main{max-width:1080px; margin:0 auto; padding:48px 24px 40px;}
.page{display:none; animation:fadeUp .25s ease;}
.page.active{display:block;
  image-rendering: auto;

}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
.page-head{margin-bottom:28px;}
.page-head h2{font-size:1.8rem;}
.page-head .desc{max-width:64ch;}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px;
}
.grid{display:grid; gap:14px;}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(260px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(200px,1fr));}

ul.plain{list-style:none; margin:0; padding:0;}
ul.check{list-style:none; margin:0; padding:0;}
ul.check li{
  padding:9px 0 9px 26px; border-bottom:1px solid var(--line);
  position:relative; color:var(--bone-dim); font-size:.92rem;
}
ul.check li:last-child{border-bottom:none;}
ul.check li::before{
  content:"▢"; position:absolute; left:0; top:9px; color:var(--grass-bright);
}
ul.check.no li::before{content:"✕"; color:var(--redstone);}

.pill-nav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.pill{
  font-family:var(--font-mono); font-size:.75rem;
  padding:8px 14px; border-radius:20px; border:1px solid var(--line);
  background:var(--panel); color:var(--bone-dim); cursor:pointer;
}
.pill[aria-selected="true"]{
  background:var(--grass-deep); color:var(--bone); border-color:var(--grass-deep);
}
.subpage{display:none;}
.subpage.active{display:block;}

table.tickets{width:100%; border-collapse:collapse; font-size:.9rem;}
table.tickets th, table.tickets td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
table.tickets th{
  font-family:var(--font-mono); text-transform:uppercase; font-size:.68rem;
  color:var(--stone); letter-spacing:.06em;
}

.timeline{border-left:2px solid var(--panel-3); margin-left:6px; padding-left:22px;}
.timeline-item{position:relative; padding-bottom:22px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:""; position:absolute; left:-28px; top:4px;
  width:11px; height:11px; background:var(--pumpkin); border-radius:50%;
  box-shadow:0 0 0 3px var(--void);
}
.timeline-item .time{font-family:var(--font-mono); color:var(--grass-bright); font-size:.82rem;}
.timeline-item h4{margin:2px 0 2px; font-size:1rem;}

.creator-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; gap:12px; align-items:center;
}
.avatar-slot{
  width:52px; height:52px; flex:none; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--bone-dim);
}
.creator-card .role{font-family:var(--font-mono); font-size:.68rem; color:var(--pumpkin); text-transform:uppercase;}

.warn-box{
  border:1px solid rgba(179,64,43,.4); background:rgba(179,64,43,.08);
  border-radius:var(--radius); padding:14px 16px; font-size:.88rem; color:var(--bone-dim);
}

form{display:grid; gap:14px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
label{font-family:var(--font-mono); font-size:.72rem; color:var(--stone); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:5px;}
input, select, textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--bone);
  padding:10px 12px; border-radius:2px; font-family:var(--font-body); font-size:.92rem;
}
input:focus, select:focus, textarea:focus{border-color:var(--grass-bright); outline:none;}
.checkbox-row{display:flex; align-items:flex-start; gap:8px;}
.checkbox-row input{width:auto; margin-top:3px;}
.checkbox-row label{margin:0; text-transform:none; font-family:var(--font-body); font-size:.85rem; color:var(--bone-dim);}
fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:14px;}
fieldset legend{font-family:var(--font-mono); font-size:.72rem; color:var(--stone); padding:0 6px;}
.mission-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px;}

@media (max-width:640px){
  .form-row{grid-template-columns:1fr;}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;
  border-top:1px solid var(--line); background:var(--panel);
  padding:40px 0 100px;
}
footer::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--grass-deep), var(--pumpkin), var(--grass-deep));
}
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px;
  margin-bottom:24px;
}
.footer-grid h4{font-size:.85rem; color:var(--bone);}
.footer-grid a{display:block; color:var(--bone-dim); text-decoration:none; font-size:.85rem; margin-bottom:8px;}
.footer-grid a:hover{color:var(--grass-bright);}
.footer-logos{display:flex; align-items:center; gap:18px; margin-bottom:24px; flex-wrap:wrap;}
.footer-logo{height:52px; width:auto; object-fit:contain;}
.footer-logo-round{background:#fff; border-radius:12px; padding:6px; height:52px; box-sizing:content-box;}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:18px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  font-family:var(--font-mono); font-size:.72rem; color:var(--stone);
}

/* ============================================================
   BOTTOM HOTBAR NAVIGATION — the signature element
   9 slots, like the real in-game hotbar (keys 1–9)
   ============================================================ */
nav.hotbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:center;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,15,13,0), rgba(6,9,7,.96) 30%);
  pointer-events:none;
}
.hotbar-inner{
  pointer-events:auto;
  display:flex; gap:4px;
  background:rgba(18,25,21,.92);
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  max-width:100%;
  overflow-x:auto;
}
.hb-slot{
  position:relative;
  width:58px; height:58px; flex:none;
  background:var(--panel-2);
  border-radius:2px;
  box-shadow:
    inset 2px 2px 0 rgba(0,0,0,.55),
    inset -2px -2px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  cursor:pointer; border:2px solid transparent;
  color:var(--bone-dim);
  font-family:var(--font-body);
}
.hb-slot .key{
  position:absolute; top:2px; left:4px;
  font-family:var(--font-mono); font-size:.6rem; color:var(--stone);
}
.hb-slot .ico{font-size:1.1rem; line-height:1;}
.hb-slot .lbl{font-size:.52rem; letter-spacing:.02em; text-align:center; padding:0 2px;}
.hb-slot[aria-selected="true"]{
  border-color:var(--bone);
  background:var(--panel-3);
  color:var(--bone);
}
.hb-slot[aria-selected="true"] .key{color:var(--pumpkin);}
.hb-slot:hover{background:var(--panel-3);}

@media (max-width:720px){
  .hb-slot{width:50px; height:50px;}
  .hb-slot .lbl{display:none;}
  .top-inner .beneficiary-pill{display:none;}
}

/* --- Carte Profil Bénévole (Style Minecraft Yo_Lan) --- */
.benevole-profile-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
  width: 100%;
}

.benevole-profile-card:hover {
  transform: translateY(-2px);
  border-color: var(--grass-bright);
}

/* --- Avatar façon Slot d'inventaire --- */
.card-avatar {
  width: 90px;
  height: 90px;
  margin: 0 auto 16px auto;
  background: var(--panel-2);
  border-radius: 2px;
  padding: 4px;
  /* Effet biseauté de slot d'inventaire Minecraft */
  box-shadow:
    inset 2px 2px 0 rgba(0,0,0,.55),
    inset -2px -2px 0 rgba(255,255,255,.06);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px; /* Carré style Pixel Art */
  display: block;
}

/* --- Pseudo (Typographie de l'interface) --- */
.benevole-pseudo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bone);
  margin: 0;
  letter-spacing: .02em;
}

.benevole-profile-card:hover .benevole-pseudo {
  color: var(--pumpkin); /* Le pseudo s'illumine en orange au survol */
}