/* ==========================================================================
   Barre de navigation « pilule » + menu profil + carte Discord large
   (thème sombre conservé ; le panel admin et les API ne sont pas concernés)
   ========================================================================== */
html[data-theme="dark"]{
  --pill-bg:#0c1119;
  --pill-line:#262e40;
  --pill-line-2:#323c52;
  --pill-ink:#f5f7fb;
  --pill-muted:#aab4c3;
  --pill-soft:#8b95a7;
  --pill-hover:rgba(255,255,255,.06);
  --pill-active:rgba(148,163,184,.15);
}

/* ---------- Barre ---------- */
html[data-theme="dark"] body .header{
  position:sticky;top:12px;z-index:100;
  width:min(1140px,calc(100% - 28px));
  margin:14px auto 0;padding:8px 10px;
  background:rgba(12,17,25,.9) !important;
  border:1px solid var(--pill-line) !important;
  border-radius:26px;
  -webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9);
}
html[data-theme="dark"] body .header.is-stuck{
  background:rgba(12,17,25,.9) !important;
  border-color:var(--pill-line) !important;
}
html body .header .header__inner{
  display:flex;align-items:center;justify-content:flex-start;gap:6px;
  width:100%;max-width:none;height:auto !important;min-height:0 !important;padding:0;margin:0;
}

/* ---------- Liens ---------- */
html body .header .nav{display:flex !important;align-items:center;gap:4px}
html body .header .nav__link{
  position:relative;display:inline-flex;align-items:center;
  padding:13px 22px;border-radius:16px;
  font-family:var(--nav-font,"Montserrat Daruma",system-ui,sans-serif);
  font-weight:800;font-size:1rem;line-height:1;letter-spacing:-.005em;
  color:var(--pill-muted);
  transition:background .2s ease,color .2s ease;
}
html body .header .nav__link::after{content:none !important}
html body .header .nav__link:hover{background:var(--pill-hover);color:var(--pill-ink)}
html body .header .nav__link.is-active{background:var(--pill-active);color:var(--pill-ink)}

/* ---------- Groupe de droite ---------- */
html body .header .header__right{display:flex;align-items:center;margin-left:auto}
html body .header .header__sep{display:block;width:2px;height:38px;border-radius:2px;background:var(--pill-line-2);margin:0 16px}

/* ---------- Bouton profil ---------- */
html body .header .pm{position:relative}
html body .header .pm__btn{
  display:flex;align-items:center;gap:12px;
  padding:6px 14px 6px 8px;
  background:rgba(255,255,255,.015);
  border:1px solid var(--pill-line);border-radius:18px;
  color:var(--pill-ink);cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1;
  transition:background .2s ease,border-color .2s ease;
}
html body .header .pm__btn:hover,
html body .header .pm.is-open .pm__btn{background:rgba(255,255,255,.055);border-color:var(--pill-line-2)}
html body .header .pm__btn:focus-visible{outline:2px solid #6cc9ff;outline-offset:2px}
html body .header .pm__avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--pill-line-2);background:#0f141b;
}
html body .header .pm__name,
html body .header .pm__btn .brand__name{
  display:block;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:0;color:inherit;
}
html body .header .pm__name::before,
html body .header .pm__btn .brand__name::before{content:none !important;display:none}
html body .header .pm__chevron{width:18px;height:18px;flex:none;color:var(--pill-muted);transition:transform .25s ease}
html body .header .pm.is-open .pm__chevron{transform:rotate(180deg)}

/* ---------- Menu déroulant ---------- */
html body .header .pm__menu{
  position:absolute;right:0;top:calc(100% + 17px);z-index:120;
  width:min(380px,calc(100vw - 28px));
  padding:20px 22px 12px;
  background:#121826;border:1px solid var(--pill-line);border-radius:28px;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.985);transform-origin:top right;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
html body .header .pm.is-open .pm__menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html body .header .pm__head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--pill-line)}
html body .header .pm__head-avatar{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--pill-line-2);background:#0f141b}
html body .header .pm__head-name{display:block;font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1.15;color:var(--pill-ink)}
html body .header .pm__head-name::before{content:none !important;display:none}
html body .header .pm__head-role{display:block;margin-top:3px;font-size:1.02rem;font-weight:700;color:var(--pill-soft)}
html body .header .pm__item{
  display:block;margin-top:8px;padding:15px 12px;border-radius:14px;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--pill-muted);
  transition:background .2s ease,color .2s ease;
}
html body .header .pm__item:hover,
html body .header .pm__item:focus-visible{background:var(--pill-hover);color:var(--pill-ink);outline:none}

/* ---------- Burger (mobile uniquement) ---------- */
html body .header .header__inner .burger{display:none !important}

@media (max-width:900px){
  html body .header .nav{display:none !important}
  html body .header .header__sep{display:none}
  html body .header .header__inner .burger{
    display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    order:0;margin:0 !important;width:46px !important;height:46px !important;padding:0;
    background:rgba(255,255,255,.015);border:1px solid var(--pill-line);border-radius:16px;box-shadow:none;
  }
  html body .header .header__inner .burger span{width:20px !important;height:2px !important;margin:0 !important;background:var(--pill-ink)}
  html body .header .header__inner .burger.is-open{order:0;margin:0 !important;background:rgba(255,255,255,.055);border-color:var(--pill-line-2)}
  html body .header .header__inner .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html body .header .header__inner .burger.is-open span:nth-child(2){opacity:0;transform:none}
  html body .header .header__inner .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html body .mobile-menu{top:calc(var(--mobile-menu-top,62px) + 26px) !important}
}
@media (max-width:480px){
  html[data-theme="dark"] body .header{padding:7px 8px;border-radius:22px}
  html body .header .pm__btn{padding:5px 11px 5px 6px;gap:9px}
  html body .header .pm__avatar{width:32px;height:32px}
  html body .header .pm__menu{border-radius:24px;padding:18px 18px 10px}
}

/* ==========================================================================
   Carte Discord large
   ========================================================================== */
.home-discord{padding:0 0 clamp(2.5rem,5vw,4rem)}
html body #discord-profile{width:100%}
html body #discord-profile .discord-card{width:100%;max-width:100%;margin:0}

html body #discord-profile .dc{
  position:relative;display:flex;align-items:center;
  padding:clamp(1.3rem,2.6vw,2.1rem) clamp(1.3rem,3vw,2.5rem);
  background:linear-gradient(135deg,#182032 0%,#121826 55%,#0f1420 100%);
  border:1px solid #262e40;border-radius:clamp(26px,3.4vw,40px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
}
.dc__who{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.2rem);flex:1 1 auto;min-width:0}

/* Avatar + décoration */
.dc__avatar-wrap{position:relative;width:clamp(96px,10vw,128px);height:clamp(96px,10vw,128px);flex:none;margin:6px}
.dc__avatar,.dc__decoration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dc__avatar{border-radius:50%;border:5px solid #2a3245;background:#0f141b;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.dc__decoration{transform:scale(1.2);pointer-events:none;border:0;border-radius:0}
.dc__status{
  position:absolute;right:-12px;bottom:-8px;z-index:2;
  width:clamp(38px,3.8vw,48px);height:clamp(38px,3.8vw,48px);border-radius:50%;
  display:grid;place-items:center;background:#131927;border:4px solid #182032;
}
.dc__status svg{width:60%;height:60%}
.dc__bubble{
  position:absolute;left:-18px;bottom:-6px;z-index:3;
  min-width:36px;height:36px;padding:0 6px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#111;font-size:19px;line-height:1;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.6);
}
.dc__bubble img{width:22px;height:22px;object-fit:contain}

/* Identité */
.dc__identity{min-width:0}
.dc__name{
  margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(2rem,4.2vw,3rem);color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dc__handle{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:.85rem}
.dc__user{font-family:var(--font-display);font-weight:800;font-size:clamp(1.05rem,1.8vw,1.45rem);color:#d3dae6}
.dc__dot{width:8px;height:8px;border-radius:50%;background:#5a6479;display:block}
.dc__clan{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  background:#0e131d;border:1px solid #2a3245;border-radius:14px;
  font-family:var(--font-display);font-weight:800;font-size:.9rem;color:#e6ebf4;
}
.dc__clan img{width:22px;height:22px;object-fit:contain;display:block}
.dc__badges{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:1.1rem}
.dc__badge{display:grid;place-items:center;width:clamp(28px,2.6vw,36px);height:clamp(28px,2.6vw,36px)}
.dc__badge img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* Panneau statut */
.dc__panel{
  position:relative;flex:0 0 clamp(260px,27vw,350px);margin-left:clamp(2.6rem,5vw,4.2rem);
  background:#0b0f17;border:1px solid #262e40;border-radius:28px;padding:0 clamp(1.1rem,2vw,1.7rem);
}
.dc__panel::before{content:"";position:absolute;left:calc(clamp(2.6rem,5vw,4.2rem) / -2);top:-14px;bottom:-14px;width:1px;background:#262e40}
.dc__row{display:flex;align-items:center;gap:14px;min-height:68px}
.dc__row--status{font-family:var(--font-display);font-size:clamp(1.15rem,1.7vw,1.45rem);color:#fff}
.dc__row--status strong{font-weight:800}
.dc__row--status svg{flex:none}
.dc__row--sub{border-top:1px solid #262e40;color:#8b95a7;font-family:var(--font-display);font-weight:800;font-size:clamp(.95rem,1.25vw,1.08rem)}
.dc__row--sub svg{flex:none;color:#8b95a7}
.dc__row--sub span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Chargement / erreur */
.discord-card--loading .discord-card__banner,
.discord-card--error .discord-card__banner{aspect-ratio:auto;min-height:180px;border-radius:clamp(26px,3.4vw,40px);border-color:#262e40;box-shadow:none}
.discord-card--loading .discord-card__banner::after,
.discord-card--error .discord-card__banner::after{display:none}
.discord-card--loading .discord-card__skeleton{position:absolute;inset:0;min-height:180px;background:linear-gradient(90deg,#141a28,#1b2335,#141a28);background-size:200% 100%}

@media (max-width:900px){
  html body #discord-profile .dc{flex-direction:column;align-items:stretch}
  .dc__panel{flex:none;margin:1.6rem 0 0}
  .dc__panel::before{display:none}
}
@media (max-width:560px){
  .dc__who{gap:1.1rem}
  .dc__name{font-size:1.75rem}
  .dc__badges{gap:10px}
}

/* L'ancien CSS masquait .brand__name quand le menu mobile est ouvert : on garde le nom visible. */
body:has(.mobile-menu.is-open) html body .header .pm__name,
html body:has(.mobile-menu.is-open) .header .pm__btn .brand__name,
html body:has(.mobile-menu.is-open) .header .pm__avatar{display:block !important}

/* ==========================================================================
   Carte Discord compacte, à l'intérieur du bloc « Expertise » de l'accueil
   ========================================================================== */
.home-profile #discord-profile .dc{
  flex-direction:column;align-items:stretch;
  padding:0;background:none;border:0;border-radius:0;box-shadow:none;
}
.home-profile .dc__who{gap:1.15rem;align-items:center}
.home-profile .dc__avatar-wrap{width:84px;height:84px;margin:4px 6px 4px 4px}
.home-profile .dc__avatar{border-width:4px}
.home-profile .dc__status{width:34px;height:34px;right:-9px;bottom:-6px;border-width:3px;background:#0f141d;border-color:#121826}
.home-profile .dc__bubble{min-width:28px;height:28px;font-size:14px;left:-12px;bottom:-4px}
.home-profile .dc__bubble img{width:16px;height:16px}
.home-profile .dc__name{font-size:clamp(1.7rem,2.3vw,2.1rem)}
.home-profile .dc__handle{gap:9px;margin-top:.5rem}
.home-profile .dc__user{font-size:1rem}
.home-profile .dc__clan{padding:4px 9px;gap:6px;border-radius:11px;font-size:.78rem}
.home-profile .dc__clan img{width:17px;height:17px}
.home-profile .dc__badges{gap:9px;margin-top:.7rem}
.home-profile .dc__badge{width:24px;height:24px}
.home-profile .dc__panel{
  flex:none;margin:1.25rem 0 0;border-radius:20px;padding:0 1.1rem;background:#0b0f17;
}
.home-profile .dc__panel::before{display:none}
.home-profile .dc__row{min-height:54px;gap:12px}
.home-profile .dc__row--status{font-size:1.1rem}
.home-profile .dc__row--status svg{width:24px;height:24px}
.home-profile .dc__row--sub{font-size:.92rem}
.home-profile .dc__row--sub svg{width:22px;height:22px}
.home-profile .discord-card--loading .discord-card__banner,
.home-profile .discord-card--error .discord-card__banner{min-height:150px;border-radius:20px}
.home-profile .discord-card--loading .discord-card__skeleton{min-height:150px}
.home-profile .home-profile__divider{margin:1.3rem 0}
@media (max-width:560px){
  .home-profile .dc__avatar-wrap{width:72px;height:72px}
  .home-profile .dc__name{font-size:1.5rem}
}