@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/bangers.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/fonts/nunito.woff2') format('woff2')}
:root{
  --bg:#0b0804;--bg2:#120d07;--card:#1a1309;--card2:#241a0c;--line:#3a2c14;
  --honey:#ffb32b;--orange:#f07f13;--deep:#8a4c00;--txt:#f7ecd7;--mut:#c4b28e;
  --green:#4ade80;--red:#ff6b6b;--blue:#8fd0ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  background:var(--bg) url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23ffb32b' fill-opacity='0.045' fill-rule='evenodd'/%3E%3C/svg%3E");
  color:var(--txt);font:400 16px/1.65 'Nunito',system-ui,Segoe UI,Arial,sans-serif;
}
h1,h2,h3.display,.cd-num{font-family:'Bangers','Arial Black',sans-serif;font-weight:400;letter-spacing:.045em}
a{color:var(--honey)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:60px 0}
h2{font-size:clamp(30px,4.5vw,42px);color:var(--honey);margin-bottom:8px;text-shadow:0 2px 0 rgba(0,0,0,.55)}
.sub{color:var(--mut);margin-bottom:28px;max-width:720px}
/* ───── NAV ───── */
nav{position:sticky;top:0;z-index:60;background:rgba(11,8,4,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1080px;margin:auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;color:var(--txt);text-decoration:none}
.brand img{width:36px;height:36px;border-radius:50%;border:2px solid var(--honey)}
.nav-links{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav-links a{color:var(--mut);text-decoration:none;font-weight:800;font-size:14px}
.nav-links a:hover{color:var(--honey)}
#nav-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
/* ───── HERO ───── */
.hero{position:relative;text-align:center;padding:84px 20px 66px;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,8,4,.38),rgba(11,8,4,.78) 58%,var(--bg) 97%),url('/img/banner-1280-v3.jpg') center 32%/cover no-repeat}
.hero-logo{width:148px;height:148px;border-radius:50%;border:3px solid var(--honey);box-shadow:0 0 42px rgba(255,179,43,.55),0 10px 30px rgba(0,0,0,.6)}
.hero h1{font-size:clamp(46px,9vw,88px);color:#ffd873;text-shadow:0 3px 0 #6b3300,0 10px 34px rgba(240,127,19,.5);margin:14px 0 6px}
.tagline{font-size:clamp(16px,2.2vw,19.5px);color:#f2e4c6;max-width:640px;margin:0 auto 18px}
.tagline b{color:var(--honey)}
.chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(20,13,6,.72);border:1px solid var(--line);padding:6px 13px;border-radius:999px;font-size:13.5px;font-weight:800}
.chip.sec{border-color:#2f6b3f;background:rgba(20,40,24,.72);color:#7ce29a}
.status-card{max-width:430px;margin:0 auto 26px;background:rgba(18,12,6,.82);border:1px solid var(--line);border-radius:18px;padding:16px 20px;backdrop-filter:blur(6px)}
.status-line{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:900;font-size:17.5px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--mut);box-shadow:0 0 12px currentColor;flex:none}
.dot.on{background:var(--green);color:var(--green)}
.dot.off{background:var(--red);color:var(--red)}
.bar{height:10px;background:#2a1f10;border-radius:99px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--honey),var(--orange));border-radius:99px;transition:width .8s ease}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(180deg,#ffc44d,#f07f13);color:#1a1000;font-weight:900;font-size:17px;border:0;border-radius:14px;padding:14px 27px;cursor:pointer;text-decoration:none;box-shadow:0 6px 0 var(--deep),0 12px 28px rgba(240,127,19,.35);transition:transform .12s,box-shadow .12s;font-family:inherit}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--deep),0 16px 34px rgba(240,127,19,.45)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--deep)}
.btn.ghost{background:rgba(18,12,6,.65);color:var(--honey);border:2px solid var(--honey);box-shadow:0 6px 0 rgba(0,0,0,.45)}
.hint{margin-top:18px;font-size:14px;color:var(--mut)}
code{font-family:ui-monospace,Consolas,monospace;background:#241a0c;border:1px solid var(--line);border-radius:8px;padding:2.5px 9px;color:#ffd77a;font-size:13.5px}
.bee{position:absolute;font-size:27px;opacity:.55;filter:drop-shadow(0 3px 7px rgba(0,0,0,.65));animation:fly 9s ease-in-out infinite;pointer-events:none}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-9deg)}50%{transform:translate(20px,-30px) rotate(9deg)}}
@media (prefers-reduced-motion: reduce){.bee{animation:none}}
/* ───── CARDS ───── */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:23px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.card h3{font-size:18.5px;margin:13px 0 7px}
.card p{color:var(--mut);font-size:14.8px}
.hex{display:inline-grid;place-items:center;width:62px;height:62px;font-size:30px;background:radial-gradient(circle at 50% 35%,rgba(255,179,43,.28),rgba(255,179,43,.07));border:2px solid var(--honey);clip-path:polygon(25% 4%,75% 4%,99% 50%,75% 96%,25% 96%,1% 50%)}
/* ───── KV / fiche ───── */
.two{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10.5px 2px;border-bottom:1px dashed var(--line);font-size:15px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--mut);font-weight:700}
.kv .v{font-weight:900;text-align:right}
.mini{background:var(--card2);border:1px solid var(--line);color:var(--honey);border-radius:8px;font-size:12px;font-weight:900;padding:4px 9px;cursor:pointer;font-family:inherit}
.mini:hover{background:var(--line)}
/* ───── steps ───── */
.step{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.step .n{flex:none;display:grid;place-items:center;width:46px;height:46px;font-family:'Bangers';font-size:23px;color:#1a1000;background:linear-gradient(180deg,#ffc44d,#f07f13);clip-path:polygon(25% 4%,75% 4%,99% 50%,75% 96%,25% 96%,1% 50%)}
.warn{border-color:#6b4a1d;background:linear-gradient(180deg,#221604,var(--bg2))}
.warn b{color:var(--honey)}
/* ───── countdown ───── */
.cd{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin:20px 0 8px}
.cd div{background:var(--card2);border:1px solid var(--line);border-radius:15px;min-width:86px;padding:13px 8px;text-align:center}
.cd-num{display:block;font-size:43px;color:var(--honey);line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.cd small{color:var(--mut);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.wipe-next{text-align:center;font-size:18px;font-weight:900;margin-top:8px}
.wipe-list{list-style:none;margin-top:16px;text-align:center;color:var(--mut);font-size:14.5px}
.wipe-list li{padding:3px 0}
/* ───── lists ───── */
.ticks{list-style:none}
.ticks li{padding:8px 0 8px 34px;position:relative;font-size:15.3px}
.ticks li::before{content:attr(data-i);position:absolute;left:0;top:8px}
/* ───── discord CTA ───── */
.cta{text-align:center;background:linear-gradient(180deg,var(--card2),var(--bg2));border:1px solid var(--line);border-radius:22px;padding:44px 26px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.cta h2{margin-bottom:4px}
footer{border-top:1px solid var(--line);padding:30px 20px 40px;text-align:center;color:var(--mut);font-size:13.5px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--honey);color:#1a1000;font-weight:900;padding:12px 22px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:all .3s;z-index:100;pointer-events:none;max-width:92vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ═══════════ SOUS-MENU ÉVÉNEMENTS (ajout 2026-07-27) ═══════════ */
.has-sub{position:relative}
.has-sub>a{display:inline-flex;align-items:center;gap:5px}
.has-sub>a::after{content:"▾";font-size:11px;opacity:.75;transition:transform .15s}
.has-sub:hover>a::after,.has-sub:focus-within>a::after{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:238px;background:rgba(16,11,5,.98);border:1px solid var(--line);border-radius:14px;
  padding:7px;box-shadow:0 16px 40px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.16s;
  display:flex;flex-direction:column;gap:2px;z-index:70;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.has-sub.open .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.submenu a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  font-size:14px;font-weight:800;color:var(--txt);white-space:nowrap;
}
.submenu a:hover,.submenu a:focus-visible{background:rgba(255,179,43,.12);color:var(--honey)}
.submenu a i{font-style:normal;font-size:16px;width:20px;text-align:center}
.submenu .sep{height:1px;background:var(--line);margin:5px 2px}
.submenu a small{display:block;font-weight:600;font-size:12px;color:var(--mut);margin-top:1px}
.submenu a span{display:flex;flex-direction:column;line-height:1.28}
@media (max-width:760px){
  .submenu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;
           background:none;border:0;box-shadow:none;padding:4px 0 0 14px}
  .has-sub{width:100%}
}

/* ═══════════ PAGES ÉVÉNEMENT ═══════════ */
.page-hero{
  position:relative;padding:44px 0 34px;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 150% at 14% -30%,rgba(255,179,43,.16),transparent 62%),var(--bg2);
}
.crumb{font-size:13px;font-weight:800;color:var(--mut);margin-bottom:12px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(34px,6vw,56px);color:#ffd873;text-shadow:0 3px 0 #6b3300;line-height:1.02}
.page-hero .sub{margin:12px 0 18px;font-size:17px}
.page-hero .chips{justify-content:flex-start;margin-bottom:0}
.evt-tag{
  display:inline-block;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--honey);margin-bottom:9px;
}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:17px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step-n{font-family:'Bangers','Arial Black',sans-serif;font-size:29px;color:var(--honey);text-align:right;line-height:1.1}
.step h3{font-size:20px;margin-bottom:3px;color:var(--txt)}
.step p{color:var(--mut);font-size:15.2px}
.step .fine{display:block;margin-top:6px;font-size:13.5px;color:#8d7d61}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--card),var(--bg2))}
table.evt{width:100%;border-collapse:collapse;font-size:15px}
table.evt th,table.evt td{padding:10px 16px;text-align:left;border-bottom:1px solid rgba(58,44,20,.75)}
table.evt tbody tr:last-child td{border-bottom:0}
table.evt thead th{font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#8d7d61;background:var(--card2);white-space:nowrap}
table.evt td.n,table.evt th.n{text-align:right;font-variant-numeric:tabular-nums}
table.evt tbody tr:hover{background:rgba(255,179,43,.05)}
table.evt .big{font-weight:900;color:#ffd873}
.evt-note{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  border:1px solid var(--line);border-left:3px solid var(--honey);border-radius:0 14px 14px 0;
  padding:15px 19px;background:var(--card);color:var(--mut);font-size:14.8px;
}
.evt-note.hot{border-left-color:var(--red)}
.evt-note b{color:var(--txt)}
.evt-note .ic{font-size:18px}
.stackv{display:flex;flex-direction:column;gap:14px}
.card.link{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .14s,border-color .14s}
.card.link:hover{transform:translateY(-3px);border-color:#54401e}
.card.link .more{margin-top:auto;padding-top:14px;color:var(--honey);font-weight:900;font-size:14.5px}
.phone-num{
  font-family:'Bangers','Arial Black',sans-serif;font-size:clamp(30px,7vw,46px);color:#ffd873;
  letter-spacing:.08em;text-shadow:0 3px 0 #6b3300;
}

/* ═══════════ MODE À VENIR / ARBRE DE COMPÉTENCES (ajout 2026-07-27) ═══════════ */
.chip.soon{border-color:#4d6c86;background:rgba(18,30,42,.72);color:var(--blue)}
.badge-soon{
  display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);border:1px solid #4d6c86;background:rgba(18,30,42,.72);
  border-radius:999px;padding:3px 9px;vertical-align:middle;margin-left:8px;
}
/* paliers d'une caste */
.tier{
  font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#8d7d61;
  margin:16px 0 6px;padding-top:13px;border-top:1px solid var(--line);
}
.tier:first-of-type{margin-top:14px}
.tier .pt{color:var(--honey);letter-spacing:.06em}
.tier.ult{color:var(--honey)}
/* liste de compétences */
.skills{list-style:none}
.skills li{
  padding:6px 0;font-size:14.4px;color:var(--mut);line-height:1.5;
  border-bottom:1px dashed rgba(58,44,20,.65);
}
.skills li:last-child{border-bottom:0}
.skills b{color:var(--txt);font-weight:900}
.skills i{font-style:normal;color:#8d7d61;font-size:12.5px;font-weight:800}
.skills.ult li{color:#d9c39a}
.skills.ult b{color:#ffd873}

/* ───────── choix de langue ─────────
   Drapeaux en SVG et non en emoji : sous Windows, les emojis drapeaux ne sont
   pas rendus comme des drapeaux mais comme les lettres du pays. */
.lang-pick{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang-btn{width:28px;height:20px;padding:0;border:1px solid #6b5628;border-radius:4px;cursor:pointer;
  background:none;overflow:hidden;line-height:0;
  opacity:.55;transition:opacity .15s,border-color .15s,transform .15s}
.lang-btn:hover{opacity:1;transform:translateY(-1px)}
.lang-btn[aria-pressed="true"]{opacity:1;border-color:var(--honey);box-shadow:0 0 0 1px rgba(255,179,43,.35)}
.lang-btn:focus-visible{outline:2px solid var(--honey);outline-offset:2px}

.lang-btn svg{display:block;width:100%;height:100%}