:root,[data-theme="light"]{--font-display:'Cabinet Grotesk',sans-serif;--font-body:'Satoshi',sans-serif;--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.2rem);--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-md:.75rem;--radius-xl:1.2rem;--radius-full:999px;--color-bg:#f7f8ff;--color-surface:#ffffff;--color-surface-2:#f3f6ff;--color-border:#4b61ff;--color-text:#172033;--color-text-muted:#51607d;--color-primary:#0b2dff;--color-danger:#ff2348;--color-success:#1de068;--color-warning:#ff9a1f;--shadow-sm:0 1px 2px rgba(12,17,58,.08);--shadow-md:0 14px 34px rgba(12,17,58,.12)}[data-theme="dark"]{--color-bg:#0b1022;--color-surface:#121934;--color-surface-2:#192246;--color-border:#4b61ff;--color-text:#eef2ff;--color-text-muted:#9ca8d8;--color-primary:#5c6dff;--color-danger:#ff5b7d;--color-success:#52ff8e;--color-warning:#ffbf5f;--shadow-sm:0 1px 2px rgba(0,0,0,.24);--shadow-md:0 16px 40px rgba(0,0,0,.32)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);font-size:var(--text-base);background:var(--color-bg);color:var(--color-text);line-height:1.6}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}input,select,textarea{width:100%;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}textarea{min-height:110px}.container,.topbar-inner{max-width:1320px;margin:0 auto;padding:1rem 1.25rem}.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--color-bg) 86%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.brand{display:flex;align-items:center;gap:.9rem;font-weight:800}.logo{width:42px;height:42px;border-radius:14px;background:var(--color-primary);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-md)}.layout{display:grid;grid-template-columns:280px 1fr;gap:1.25rem}.sidebar{position:sticky;top:92px;align-self:start;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1rem;box-shadow:var(--shadow-sm)}.nav{display:grid;gap:.5rem;margin-top:1rem}.nav a{padding:.85rem 1rem;border-radius:var(--radius-md);border:1px solid transparent}.nav a.active,.nav a:hover{background:var(--color-surface-2);border-color:var(--color-border)}.main{display:grid;gap:1.25rem}.hero,.panel,.card,.character-card,.kpi{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.hero{padding:1.25rem;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.hero h1,.panel h2,.sidebar h3{font-family:var(--font-display);margin:0}.panel{padding:1rem}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.kpi{padding:1rem}.value{font-size:1.8rem;font-weight:900}.muted,.small,.tiny,.label{color:var(--color-text-muted)}.grid{display:grid;gap:1rem}.grid.two{grid-template-columns:repeat(2,1fr)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.actions{display:flex;gap:.75rem;align-items:center}.actions.inline{gap:.45rem}.wrap{flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.8rem 1.1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);font-weight:800}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-secondary{background:var(--color-surface-2)}.btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:var(--radius-full);background:var(--color-surface-2);border:1px solid var(--color-border);font-size:var(--text-xs)}
.pill.success{background:color-mix(in srgb,var(--color-success) 15%, var(--color-surface));color:var(--color-success)}.pill.error{background:color-mix(in srgb,var(--color-danger) 15%, var(--color-surface));color:var(--color-danger)}.pill.warning{background:color-mix(in srgb,var(--color-warning) 15%, var(--color-surface));color:var(--color-warning)}.character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.character-card{padding:1rem}.character-head,.section-title{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.section-title-left{display:flex;align-items:center;gap:.65rem;min-width:0}.accordion-dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--color-primary);box-shadow:0 0 0 .35rem color-mix(in srgb,var(--color-primary) 14%, transparent)}.class-badge,.mini-class-badge{padding:.5rem .8rem;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-border);font-weight:800;display:inline-flex;align-items:center;justify-content:center;min-width:72px}.meta-list{display:grid;gap:.5rem}.meta-item{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--color-border)}.stack{display:grid;gap:1rem}.compact-list{gap:.45rem}.flash-group{display:grid;gap:.75rem;margin-bottom:1rem}.flash{padding:.9rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)}.footer-note{padding:2rem 0 1rem;color:var(--color-text-muted);font-size:var(--text-sm)}details.card{padding:1rem}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.accordion{padding:0;border:0;box-shadow:none;background:transparent}.member-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem}.member-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-link{display:inline-flex;align-items:center;min-height:40px;font-weight:800;color:inherit}.icon-btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;line-height:1;background:var(--color-surface-2)}.icon-btn.ok{color:var(--color-success)}.icon-btn.no{color:var(--color-danger)}.icon-btn.pause{color:var(--color-warning)}.verified-line .actions.inline{flex-shrink:0}.top-gap{margin-top:1rem}.compact-check{display:flex;align-items:center;gap:.55rem;padding:.35rem 0}.compact-check input{width:16px;height:16px;flex:0 0 16px}.tip-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--color-border)}.tip-content{flex:1;min-width:0}.compact-actions{display:flex;gap:.5rem;flex-wrap:wrap;padding-bottom:.35rem}.compact-actions .btn{min-height:40px;padding:.65rem .9rem}.same-line-actions{flex-wrap:nowrap}.same-line-actions .btn{flex:0 0 auto}.composition-boards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.composition-boards-grid>details{border-right:1px dashed var(--color-border);border-bottom:1px dashed var(--color-border);padding-right:1rem;padding-bottom:1rem}.composition-boards-grid>details:nth-child(even){border-right:none;padding-right:0}.composition-boards-grid>details:last-child{border-right:none;border-bottom:none;padding-right:0;padding-bottom:0}.composition-toolbar{display:grid;grid-template-columns:2fr 1fr;gap:1rem}.composition-table-wrap{overflow-x:auto}.composition-table{width:100%;border-collapse:collapse}.composition-table th,.composition-table td{padding:.75rem;border-bottom:1px dashed var(--color-border);text-align:left;vertical-align:middle}.composition-table th{font-size:var(--text-sm);color:var(--color-text-muted)}.composition-character-field{position:relative;display:block}.composition-character-input,.composition-class-input{width:12ch;min-width:12ch;max-width:12ch}.composition-role-select{width:12ch;min-width:12ch;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.composition-class-input{text-transform:none}.composition-suggestions{display:none;position:absolute;z-index:50;top:100%;left:0;width:100%;margin-top:2px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);max-height:180px;overflow:auto;box-shadow:var(--shadow-md)}.composition-suggestions div{padding:.4rem .6rem;cursor:pointer;font-size:var(--text-sm)}.composition-suggestions div:hover{background:var(--color-surface-2)}.invalid-datalist{border-color:var(--color-danger)!important;box-shadow:0 0 0 1px var(--color-danger) inset}.row-hidden{display:none}.member-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem!important;font-size:var(--text-sm)}.member-row input[type="checkbox"]{width:15px;height:15px;flex:0 0 15px;padding:0;accent-color:var(--color-primary)}.notif-card{padding:1rem}.tips-groups{gap:2rem}.tip-bullet{margin-right:.4rem;font-weight:900;color:var(--color-primary)}.centered-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}.centered-card .actions{justify-content:center}.poll-date{margin-top:.2rem}@media (max-width:1024px){.layout,.grid.two,.kpis,.form-grid,.composition-toolbar,.composition-boards-grid{grid-template-columns:1fr}.composition-boards-grid>details{border-right:none;padding-right:0}.sidebar{position:static}.same-line-actions{flex-wrap:wrap}}@media (max-width:640px){.hero{flex-direction:column}.btn{width:100%}.actions{width:100%}.member-line{align-items:flex-start;flex-direction:column}.member-name{white-space:normal}.tip-row{flex-direction:column}.compact-actions{width:100%}.composition-table th,.composition-table td{min-width:160px}.composition-character-input,.composition-class-input{width:100%;min-width:0;max-width:none}.composition-role-select{width:100%;max-width:none}}




/* Adaptation automatique du ratio des médias (tips images/vidéos) */
.media-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}




.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}





.optimization-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.optimization-categories>details{min-width:0}
.optimization-scroll{max-height:calc(5 * 3.1rem);overflow-y:auto;padding-right:.35rem}
.optimization-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--color-border)}
.optimization-row:last-child{border-bottom:none}
.optimization-row .compact-check{flex:1;min-width:0;padding:0}
.optimization-row .compact-actions{flex:0 0 auto;padding-bottom:0;gap:.4rem}
.btn-sm{min-height:32px;padding:.4rem .65rem;font-size:var(--text-sm)}
@media (max-width: 900px){.optimization-categories{grid-template-columns:1fr}}





.leaderboard-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.leaderboard-categories>details{min-width:0}
.leaderboard-categories .active-class-board{
  grid-column:1 / -1;
  max-width:640px;
  width:100%;
  margin:0 auto;
}
.leaderboard-scroll{max-height:calc(5 * 3.4rem);overflow-y:auto;padding-right:.35rem;display:grid;gap:0}
.leaderboard-row{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px dashed var(--color-border);flex-wrap:wrap}
.leaderboard-row:last-child{border-bottom:none}
.leaderboard-rank{font-weight:900;min-width:2.4rem;color:var(--color-primary)}
.leaderboard-account{font-weight:700;min-width:110px}
.leaderboard-character{flex:1;min-width:100px;color:var(--color-text-muted)}
.leaderboard-level{min-width:70px;color:var(--color-text-muted);font-size:var(--text-sm)}




@media (max-width: 900px){.leaderboard-categories{grid-template-columns:1fr}.leaderboard-categories .active-class-board{max-width:none}}




/* Sélecteur de langue (drapeaux locaux + libellé) */
.lang-switcher{
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.25rem;
  border-radius:var(--radius-full);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
}



.lang-switcher form{
  display:inline-flex;
  margin:0;
}



.lang-btn{
  width:auto;
  height:36px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:0 .7rem;
  font-size:.85rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}



.lang-flag{
  width:20px;
  height:14px;
  border-radius:2px;
  object-fit:cover;
  display:block;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-text) 12%, transparent);
}



.lang-label{
  color:var(--color-text-muted);
}



.lang-btn:hover{
  background:var(--color-surface);
  border-color:var(--color-border);
  transform:translateY(-1px);
}



.lang-btn:active{
  transform:translateY(0);
}



.lang-btn.active{
  background:var(--color-surface);
  border-color:var(--color-primary);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--color-primary) 16%, transparent);
}



.lang-btn.active .lang-label{
  color:var(--color-primary);
}



@media (max-width:640px){
  .lang-switcher{
    gap:.2rem;
    padding:.2rem;
  }
  .lang-btn{
    height:32px;
    padding:0 .5rem;
    font-size:.78rem;
  }
  .lang-label{
    display:none;
  }
}




/* Icônes de classes */


/* Effectif / Personnages créés : icône en filtre plein fond de carte, jamais dans le flux */
.character-card{position:relative;overflow:hidden}
.character-card>*:not(.class-icon-bg){position:relative;z-index:1}


.class-icon-bg{
  position:absolute!important;
  top:0;
  left:0;
  width:100%;
  height:100%;
  max-width:none;
  transform:none;
  object-fit:contain;
  opacity:.16;
  pointer-events:none;
  z-index:0;
  margin:0;
}



.class-badge{position:relative;overflow:hidden}
.class-badge-icon-bg{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.class-badge>*:not(.class-badge-icon-bg){position:relative;z-index:1}



.composition-class-cell{position:relative}
.composition-class-corner-icon{
  position:absolute;
  top:2px;
  right:2px;
  width:18px;
  height:18px;
  object-fit:contain;
  pointer-events:none;
}



/* Composition : icône en overlay dans la cellule Classe, n'affecte plus la largeur du tableau */
.composition-class-field{
  position: relative;
  display: block;
  width: 12ch;
  min-width: 12ch;
  max-width: 12ch;
}
.composition-class-icon{
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.composition-class-input{
  width: 100%;
  min-width: 0;
  max-width: none;
}



.class-select-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:.4rem;
}



.class-name-with-icon{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}



.tip-class-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:.4rem;
}



.logo-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:var(--shadow-md);
}



/* Leaderboard : logo Guild.png en grand fond, plus d'icônes de classe individuelles */
.leaderboard-guild-bg{
  position:relative;
  overflow:hidden;
}
.leaderboard-guild-bg::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url('/static/Guild.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.08;
  pointer-events:none;
  z-index:0;
}
.leaderboard-guild-bg>*{
  position:relative;
  z-index:1;
}



/* Scrollbar universelle, cohérente avec l'UI (remplace le style natif du navigateur partout) */
.optimization-scroll,
.leaderboard-scroll,
#member-list,
[data-scroll-styled] {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-surface-2);
}
.optimization-scroll::-webkit-scrollbar,
.leaderboard-scroll::-webkit-scrollbar,
#member-list::-webkit-scrollbar,
[data-scroll-styled]::-webkit-scrollbar {
  width: 8px;
}
.optimization-scroll::-webkit-scrollbar-track,
.leaderboard-scroll::-webkit-scrollbar-track,
#member-list::-webkit-scrollbar-track,
[data-scroll-styled]::-webkit-scrollbar-track {
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
}
.optimization-scroll::-webkit-scrollbar-thumb,
.leaderboard-scroll::-webkit-scrollbar-thumb,
#member-list::-webkit-scrollbar-thumb,
[data-scroll-styled]::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.optimization-scroll::-webkit-scrollbar-thumb:hover,
.leaderboard-scroll::-webkit-scrollbar-thumb:hover,
#member-list::-webkit-scrollbar-thumb:hover,
[data-scroll-styled]::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}