:root{--bg:#1a1410;--bg-sidebar:#12100d;--bg-card:#2a2018;--bg-card-hover:#2e2518;--bg-slot:#221c14;--border:#3d3020;--border-slot:#4a3a22;--gold:#c8922a;--gold-light:#e8b84b;--gold-dim:#c8922a4d;--text:#b8a882;--text-dim:#6b5e42;--white:#f0e8d0;--slot-empty-bg:#1e1810;--slot-hover:#c8922a1f;--role-tank:#4a7fc1;--role-soutien:#4ac16a;--role-dps:#c14a4a;--danger:#e05656;--danger-soft:#f0a8a8;--space-2xs:2px;--space-xs:4px;--space-sm:6px;--space-md:10px;--space-lg:14px;--space-xl:20px;--space-2xl:28px;--space-3xl:40px;--gutter:clamp(12px, 4vw, 40px);--gutter-tight:clamp(8px, 3vw, 24px);--fs-3xs:clamp(8px, .55rem + .2vw, 9px);--fs-2xs:clamp(9px, .6rem + .25vw, 10px);--fs-xs:clamp(10px, .65rem + .3vw, 11px);--fs-sm:clamp(11px, .72rem + .35vw, 13px);--fs-md:clamp(13px, .85rem + .4vw, 14px);--fs-lg:clamp(14px, .9rem + .6vw, 16px);--fs-xl:clamp(16px, 1rem + 1vw, 18px);--fs-2xl:clamp(18px, 1.1rem + 1.6vw, 28px);--radius-xs:3px;--radius-sm:5px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-pill:999px;--z-base:1;--z-raised:2;--z-overlap:3;--z-tooltip:20;--z-dropdown:50;--z-sticky:100;--z-modal:1000;--tap-min:44px;--tap-min-sm:32px;--sheet-height:80svh;--sheet-tab-h:40px;--left-panel-w:clamp(220px, 22vw, 300px);--templates-panel-w:clamp(200px, 20vw, 280px);--bp-sm:480px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1440px;--bp-2xl:1920px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font:14px/1.5 Segoe UI,system-ui,sans-serif}*,:before,:after{box-sizing:border-box}body{margin:0;overflow-x:hidden}#root{width:100%;min-height:100svh}h1,h2{color:var(--white);margin:0;font-weight:600}@media (pointer:coarse){button,a,[draggable=true],input[type=range]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.page{flex-direction:column;min-height:100svh;display:flex}.top-bar{background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, var(--bg-card)) 0%, var(--bg) 100%);padding:0 var(--gutter-tight);z-index:var(--z-sticky);flex-shrink:0;position:sticky;top:0;box-shadow:inset 0 1px #e8b84b1f}.top-bar-inner{align-items:center;gap:var(--space-md);height:48px;display:flex}.page-title{gap:var(--space-2xs);-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;line-height:1;display:flex}.page-title-dofus{font-size:var(--fs-xl);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);text-shadow:0 0 28px var(--gold-dim), 0 0 8px var(--gold-dim);font-weight:900}.page-title-sub{font-size:var(--fs-3xs);letter-spacing:.45em;text-transform:uppercase;color:var(--text-dim);padding-left:1px;font-weight:700}.main-nav{scrollbar-width:none;flex:1;align-items:stretch;min-width:0;height:100%;display:flex;overflow-x:auto}.main-nav::-webkit-scrollbar{display:none}.nav-item{padding:0 var(--space-md);height:100%;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--text-dim);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;font-weight:600;text-decoration:none;transition:color .2s;display:flex;position:relative}.nav-item--active{color:var(--gold-light)}.nav-item--active:after{content:"";bottom:0;left:var(--space-md);right:var(--space-md);background:var(--gold);height:2px;box-shadow:0 0 10px var(--gold-dim), 0 0 4px var(--gold);border-radius:2px 2px 0 0;position:absolute}.nav-item--soon{opacity:.3;cursor:default}.nav-item--soon:hover{opacity:.5}.nav-item--soon:before{content:"Bientôt disponible";background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-size:var(--fs-2xs);letter-spacing:.03em;text-transform:none;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;z-index:var(--z-tooltip);font-weight:500;transition:opacity .15s;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.nav-item--soon:hover:before{opacity:1}@media (hover:none){.nav-item--soon:before{display:none}}.top-bar-right{align-items:center;gap:var(--space-md);flex-shrink:0;display:flex}.beta-badge{font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bg);background:var(--gold);border-radius:var(--radius-xs);box-shadow:0 0 10px var(--gold-dim);flex-shrink:0;padding:3px 8px;font-weight:800;display:none}.btn-beta-join{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1.5px solid var(--gold);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;background:0 0;flex-shrink:0;font-weight:700;transition:background .18s,color .18s,box-shadow .18s}.btn-beta-join:hover,.btn-beta-join:focus-visible{background:var(--gold);color:var(--bg);box-shadow:0 0 14px var(--gold-dim), 0 0 32px var(--gold-dim);outline:none}@media (width>=768px){.top-bar{padding:0 var(--gutter)}.top-bar-inner{gap:var(--space-2xl);height:56px}.nav-item{padding:0 var(--space-lg)}.nav-item--active:after{left:var(--space-lg);right:var(--space-lg)}.beta-badge{display:inline-block}.btn-beta-join{font-size:var(--fs-sm);padding:var(--space-sm) var(--space-lg)}}.beta-modal-overlay{z-index:var(--z-modal);padding:var(--space-lg);background:#000000b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.beta-modal{background:var(--bg);border:1px solid var(--gold-dim);border-radius:var(--radius-2xl);padding:var(--space-2xl) var(--space-xl) var(--space-xl);width:100%;max-width:420px;max-height:90svh;box-shadow:0 0 40px #0009, 0 0 80px var(--gold-dim);position:relative;overflow-y:auto}.beta-modal-close{top:var(--space-md);right:var(--space-md);width:var(--tap-min-sm);height:var(--tap-min-sm);color:var(--gold-dim);font-size:var(--fs-xl);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;line-height:1;transition:color .15s;display:flex;position:absolute}.beta-modal-close:hover{color:var(--gold)}.beta-modal-title{font-size:var(--fs-xl);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-light);text-shadow:0 0 18px var(--gold-dim);margin:0 0 var(--space-md);font-weight:800}.beta-modal-desc{font-size:var(--fs-sm);color:var(--text-dim);margin:0 0 var(--space-2xl);line-height:1.5}.beta-modal-form{gap:var(--space-sm);flex-direction:column;display:flex}.beta-modal-label{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim);font-weight:600}.beta-modal-label:not(:first-child){margin-top:var(--space-md)}.beta-modal-required{color:var(--gold)}.beta-modal-input{background:color-mix(in srgb, var(--bg) 80%, transparent);border:1px solid var(--gold-dim);border-radius:var(--radius-md);width:100%;padding:var(--space-md) var(--space-md);font-size:var(--fs-lg);color:var(--gold-light);outline:none;transition:border-color .15s,box-shadow .15s}.beta-modal-input::placeholder{color:var(--text-dim)}.beta-modal-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim)}.beta-modal-input:disabled{opacity:.55;cursor:not-allowed}.beta-modal-error{font-size:var(--fs-sm);color:var(--danger);margin:var(--space-sm) 0 0}.btn-beta-confirm{margin-top:var(--space-xl);min-height:var(--tap-min);padding:var(--space-md) var(--space-xl);background:var(--gold);color:var(--bg);border-radius:var(--radius-md);font-size:var(--fs-sm);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 14px var(--gold-dim);border:none;font-weight:800;transition:opacity .15s,box-shadow .18s}.btn-beta-confirm:hover:not(:disabled){box-shadow:0 0 24px var(--gold-dim), 0 0 48px var(--gold-dim)}.btn-beta-confirm:disabled{opacity:.5;cursor:not-allowed}.beta-modal-success{text-align:center;align-items:center;gap:var(--space-lg);flex-direction:column;display:flex}.beta-modal-success-icon{background:var(--gold-dim);width:56px;height:56px;color:var(--gold);box-shadow:0 0 24px var(--gold-dim);border-radius:50%;justify-content:center;align-items:center;font-size:26px;font-weight:900;display:flex}.beta-modal-success h2{font-size:var(--fs-xl);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin:0;font-weight:800}.beta-modal-success p{font-size:var(--fs-sm);color:var(--text-dim);margin:0;line-height:1.5}.layout{flex-direction:column;flex:1;min-height:0;display:flex}.left-panel{flex-direction:column;order:0;width:100%;max-height:48svh;display:none;overflow:hidden}.center-column{flex-direction:column;order:1;width:100%;min-width:0;display:flex}.sidebar{background:var(--bg-sidebar);flex-direction:column;flex:auto;min-height:140px;display:flex;overflow:hidden}.sidebar-header,.role-sidebar-header{padding:var(--space-sm) var(--space-lg);justify-content:space-between;align-items:center;display:flex}.sidebar-header h2,.role-sidebar-header h2{font-size:var(--fs-md);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light)}.sidebar-count{font-size:var(--fs-sm);color:var(--text-dim);background:var(--bg-card);border-radius:var(--radius-xl);border:1px solid var(--border);padding:2px 7px}.class-list{padding:var(--space-md);gap:var(--space-xs);scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-content:start;display:grid;overflow-y:auto}.role-sidebar,.element-sidebar{background:var(--bg-sidebar);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.element-sidebar{flex:1 0 auto}.role-list{gap:var(--space-sm);padding:var(--space-md);flex-wrap:wrap;align-content:flex-start;align-items:flex-start;display:flex;overflow:visible}.class-card,.role-card{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none;min-width:0;transition:border-color .15s,background .15s,transform .1s;display:flex}.role-card{border-left:3px solid #0000}.class-card:hover,.role-card:hover{border-color:var(--gold);background:var(--bg-card-hover)}.class-card:active,.role-card:active{cursor:grabbing;transform:scale(.97)}.class-card[draggable=true]:active,.role-card[draggable=true]:active{opacity:.6}.role-card--tank,.role-card--soutien,.role-card--dps,.role-card--el-air,.role-card--el-terre,.role-card--el-feu,.role-card--el-eau,.role-card--el-multi{border-left-color:var(--border)}.class-icon-wrap,.role-icon-wrap{border-radius:var(--radius-md);background:var(--bg-slot);border:1px solid var(--border-slot);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}.class-icon,.role-icon{object-fit:contain;width:32px;height:32px}.class-name,.role-name{font-size:var(--fs-sm);color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.role-sidebar .role-list,.element-sidebar .role-list{padding:var(--space-sm);gap:var(--space-xs)}.role-sidebar .role-card,.element-sidebar .role-card{padding:var(--space-xs) var(--space-sm);gap:var(--space-sm)}.role-sidebar .role-icon-wrap,.element-sidebar .role-icon-wrap{border-radius:var(--radius-sm);width:28px;height:28px}.role-sidebar .role-icon,.element-sidebar .role-icon{width:24px;height:24px}.role-sidebar .role-name,.element-sidebar .role-name{font-size:var(--fs-xs)}.team-area{min-height:0;padding:var(--space-md) var(--gutter-tight) var(--space-lg);flex-direction:column;flex:1;align-items:center;display:flex;overflow:visible}.team-header{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap;flex-shrink:0;width:100%;display:flex}.team-header-left{align-items:center;gap:var(--space-md);flex-shrink:0;display:flex}.team-title{font-size:var(--fs-2xl);color:var(--text);letter-spacing:.03em;font-weight:500}.team-count{font-size:var(--fs-sm);color:var(--text-dim);background:var(--bg-card);padding:3px var(--space-md);border-radius:var(--radius-2xl);border:1px solid var(--border)}.pick-banner{align-items:center;gap:var(--space-md);width:100%;margin-bottom:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:var(--slot-hover);border:1px solid var(--gold-dim);color:var(--gold-light);font-size:var(--fs-sm);display:flex}.pick-banner-text{flex:1;line-height:1.35}.pick-banner-text strong{color:var(--gold-light)}.pick-banner-close{min-width:var(--tap-min);min-height:var(--tap-min);border:1px solid var(--gold-dim);border-radius:var(--radius-md);color:var(--gold-light);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0 var(--space-md);background:0 0;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.pick-banner-close:hover{background:var(--gold-dim)}.team-grid-wrap{flex:none;justify-content:center;align-items:center;width:100%;display:flex;overflow:visible}.formation{--slot-sz:clamp(62px, 16.5vw, 86px);--slot-gap:clamp(8px, 2.5vw, 16px);gap:var(--space-md);flex-direction:column;width:100%;max-width:680px;margin:0 auto;display:flex}.formation-row{align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-md);border-radius:var(--radius-xl);border:1.5px dashed var(--border-slot);background:var(--bg-card);flex:none;min-height:0;transition:border-color .15s,background .15s,box-shadow .15s;display:flex}.formation-row--over{border-color:var(--gold);background:var(--slot-hover);box-shadow:inset 0 0 16px var(--gold-dim)}.formation-row-label{font-size:var(--fs-2xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;flex-shrink:0;width:64px;font-weight:700}.formation-row-slots{gap:var(--slot-gap);flex-wrap:wrap;flex:1;justify-content:center;align-items:center;display:flex}.slot-wrapper{align-items:center;gap:var(--space-2xs);width:var(--slot-sz);flex-direction:column;display:flex;overflow:visible}.slot-name{font-size:var(--fs-xs);min-height:1.2em;color:var(--white);letter-spacing:.04em;text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-weight:600;line-height:1.2;overflow:hidden}.slot-circle-wrap{width:var(--slot-sz);height:var(--slot-sz);position:relative}.team-slot{width:var(--slot-sz);height:var(--slot-sz);border:2px dashed var(--border-slot);background:var(--slot-empty-bg);border-radius:50%;justify-content:center;align-items:center;transition:border-color .15s,background .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.team-slot.empty{color:var(--text-dim);cursor:grab}.team-slot.empty:hover{border-color:var(--gold-dim);background:var(--slot-hover)}.team-slot.empty:active{cursor:grabbing}.team-slot.occupied{border-style:solid;border-color:var(--border-slot);background:var(--bg-card);cursor:grab}.team-slot.occupied:active{cursor:grabbing}.team-slot.drag-over{border-color:var(--gold);background:var(--slot-hover);box-shadow:0 0 0 3px var(--gold-dim), inset 0 0 20px var(--gold-dim)}.team-slot--selected,.team-slot--selected.occupied,.team-slot--selected.empty{border-style:solid;border-color:var(--gold-light);box-shadow:0 0 0 3px var(--gold-dim), 0 0 18px var(--gold-dim)}.slot-placeholder{opacity:.35;justify-content:center;align-items:center;display:flex}.slot-placeholder svg{width:calc(var(--slot-sz) * .28);height:calc(var(--slot-sz) * .28)}.slot-icon{object-fit:cover;object-position:center center;width:100%;height:100%;display:block;position:absolute;inset:0}.role-badge{width:calc(var(--slot-sz) * .32);height:calc(var(--slot-sz) * .32);background:var(--bg-sidebar);border:2px solid var(--bg);z-index:var(--z-raised);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0;overflow:hidden}.role-badge-icon{object-fit:contain;width:80%;height:80%}.team-slot.role--tank .role-badge{border-color:var(--role-tank);background:#4a7fc126}.team-slot.role--soutien .role-badge{border-color:var(--role-soutien);background:#4ac16a26}.team-slot.role--dps .role-badge{border-color:var(--role-dps);background:#c14a4a26}.team-slot.empty.role--tank{border-color:#4a7fc173}.team-slot.empty.role--soutien{border-color:#4ac16a73}.team-slot.empty.role--dps{border-color:#c14a4a73}.slot-dots{width:var(--slot-sz);height:var(--slot-sz);z-index:var(--z-overlap);pointer-events:none;position:absolute;top:0;left:0}.slot-dot{width:calc(var(--slot-sz) * .3);height:calc(var(--slot-sz) * .3);background:var(--bg-sidebar);border:2px solid var(--bg);pointer-events:auto;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.slot-dot-icon{object-fit:contain;width:80%;height:80%}.slot-dot--pos-0{top:85.4%;left:14.6%}.slot-dot--pos-1{top:100%;left:50%}.slot-dot--pos-2{top:85.4%;left:85.4%}.element-remove-btn{border:1px solid var(--border);background:var(--bg-sidebar);width:14px;height:14px;color:var(--text-dim);font-size:var(--fs-2xs);cursor:pointer;opacity:0;z-index:var(--z-raised);border-radius:50%;justify-content:center;align-items:center;padding:0;line-height:1;transition:opacity .15s,color .15s,border-color .15s;display:none;position:absolute;top:-5px;right:-5px}.slot-wrapper:hover .element-remove-btn{opacity:1}.element-remove-btn:hover{color:var(--danger);border-color:var(--danger)}.clear-btn{width:calc(var(--slot-sz) * .22);height:calc(var(--slot-sz) * .22);border:1px solid var(--border);background:var(--bg-sidebar);min-width:18px;min-height:18px;color:var(--text-dim);font-size:var(--fs-lg);cursor:pointer;opacity:0;z-index:var(--z-raised);border-radius:50%;justify-content:center;align-items:center;padding:0;line-height:1;transition:opacity .15s,color .15s,border-color .15s;display:none;position:absolute;top:0;right:0}.slot-wrapper:hover .clear-btn{opacity:1}.clear-btn:hover{color:var(--danger);border-color:var(--danger)}.btn-vider{min-height:var(--tap-min-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--danger-soft);white-space:nowrap;background:#c846461f;border:1.5px solid #dc5a5a8c;flex-shrink:0;font-weight:700;transition:color .18s,border-color .18s,background .18s,box-shadow .18s}.btn-vider:not(:disabled):hover,.btn-vider:not(:disabled):focus-visible{color:#fff;background:#dc505047;border-color:#e66;outline:none;box-shadow:0 0 12px #dc505040}.btn-vider:disabled{opacity:.35;cursor:default}.huzounet-wrap{flex-shrink:0;position:relative}.btn-huzounet{height:var(--tap-min-sm);border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--bg-card);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);flex-shrink:0;transition:border-color .15s,background .15s;display:flex}.btn-huzounet:hover,.btn-huzounet:focus-visible{border-color:var(--gold-dim);background:var(--bg-card-hover);outline:none}.btn-huzounet-label{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--text);white-space:nowrap;font-weight:700}.huzounet-logo{object-fit:contain;border-radius:var(--radius-xs);flex-shrink:0;width:22px;height:22px}.huzounet-dropdown{background:var(--bg-sidebar);border:1px solid var(--border);border-radius:var(--radius-xl);min-width:240px;max-width:min(86vw,320px);z-index:var(--z-dropdown);flex-direction:column;max-height:70svh;display:flex;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden auto;box-shadow:0 8px 32px #00000080}.huzounet-empty{padding:var(--space-lg) var(--space-lg);font-size:var(--fs-sm);color:var(--text-dim);text-align:center;font-style:italic}.huzounet-row{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);min-height:var(--tap-min);color:var(--text);font-size:var(--fs-sm);border-bottom:1px solid var(--border);text-decoration:none;transition:background .12s;display:flex}.huzounet-row:last-of-type{border-bottom:none}.huzounet-row:hover{background:var(--bg-card);color:var(--gold-light)}.huzounet-row-icon{object-fit:cover;border-radius:50%;flex-shrink:0;width:26px;height:26px}.huzounet-row-name{flex:1;font-weight:500}.huzounet-row-tags{flex-shrink:0;align-items:center;gap:3px;display:flex}.huzounet-row-el{object-fit:contain;opacity:.85;width:16px;height:16px}.team-size-slider{align-items:center;gap:var(--space-md);flex:100%;order:3;min-width:0;display:flex}.team-size-label{font-size:var(--fs-2xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;flex-shrink:0;font-weight:700;display:none}.team-size-track-wrap{max-width:240px;height:var(--tap-min-sm);flex:1;position:relative}.team-size-blocks{gap:var(--space-xs);pointer-events:none;display:flex;position:absolute;inset:0}.size-block{border-radius:var(--radius-sm);background:var(--slot-empty-bg);flex:1;height:100%;transition:background .12s}.size-block--filled{background:#5c2e08}.size-block--active{background:var(--gold);box-shadow:0 0 8px var(--gold-dim)}.team-size-range{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.team-size-val{font-size:var(--fs-md);color:var(--white);text-align:center;background:var(--bg-slot);border:1px solid var(--border-slot);border-radius:var(--radius-md);flex-shrink:0;min-width:26px;padding:3px 7px;font-weight:700;line-height:1.4}.charts-panel{background:var(--bg-sidebar);flex-direction:column;flex-shrink:0;display:flex}.chart-card{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);flex-direction:column;flex:1;min-width:0;display:flex}.chart-card:last-child{border-bottom:none}.chart-header{margin-bottom:var(--space-md);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.chart-label{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);font-weight:700}.chart-tag{font-size:var(--fs-2xs);border-radius:var(--radius-xl);border:1px solid var(--border);color:var(--text-dim);padding:2px 7px;font-weight:600;line-height:1.4}.chart-tag--ok{border-color:var(--role-soutien)!important;color:var(--role-soutien)!important}.chart-tag--warn{color:#e07b39!important;border-color:#e07b39!important}.donut-wrap{align-items:center;gap:var(--space-md);flex-direction:row;flex:1;min-height:0;display:flex}.chart-legend{gap:var(--space-sm);flex-direction:column;flex:1;justify-content:center;display:flex}.legend-row{align-items:center;gap:var(--space-sm);display:flex}.chart-legend-icon{object-fit:contain;flex-shrink:0;width:14px;height:14px}.legend-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.legend-name{font-size:var(--fs-sm);color:var(--text);flex:1}.legend-val{font-size:var(--fs-sm);text-align:right;min-width:14px;font-weight:700;transition:color .2s}.bars-wrap{gap:var(--space-sm);flex-direction:column;flex:1;justify-content:center;display:flex}.bar-row{align-items:center;gap:var(--space-sm);display:flex}.bar-label{align-items:center;gap:var(--space-xs);flex-shrink:0;min-width:52px;display:flex}.chart-bar-icon{object-fit:contain;flex-shrink:0;width:12px;height:12px}.bar-name{font-size:var(--fs-sm);color:var(--text-dim);text-align:left}.bar-track{border-radius:var(--radius-xs);background:var(--bg-slot);flex:1;height:5px;overflow:hidden}.bar-fill{border-radius:var(--radius-xs);height:100%;transition:width .35s,box-shadow .35s}.bar-val{font-size:var(--fs-sm);text-align:right;flex-shrink:0;min-width:12px;font-weight:700;transition:color .2s}.templates-panel{background:var(--bg-sidebar);flex-direction:column;flex-shrink:0;order:2;width:100%;max-height:60svh;display:flex;position:relative;overflow:hidden}.templates-panel-resize-handle{z-index:var(--z-overlap);cursor:col-resize;touch-action:none;background:0 0;border:none;width:8px;margin:0;padding:0;display:none;position:absolute;top:0;bottom:0;left:0}.templates-panel-resize-handle:after{content:"";background:0 0;border-radius:1px;width:2px;transition:background .15s;position:absolute;top:0;bottom:0;left:3px}.templates-panel-resize-handle:hover:after,.templates-panel-resize-handle:focus-visible:after{background:var(--gold-dim)}.templates-panel--resizing{-webkit-user-select:none;user-select:none}body.templates-panel--resizing,body.templates-panel--resizing *{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.templates-panel-header{padding:var(--space-lg) var(--space-lg) var(--space-md);flex-shrink:0}.templates-panel-header h2{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);font-weight:800}.templates-filters{padding:var(--space-md) var(--space-lg);gap:var(--space-md);flex-direction:column;flex-shrink:0;display:flex}.templates-filter-label{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);justify-content:space-between;align-items:center;font-weight:700;display:flex}.templates-filter-val{color:var(--gold);font-size:var(--fs-sm);letter-spacing:0;text-transform:none}.templates-search{width:100%;padding:var(--space-md) var(--space-md);font-size:var(--fs-lg);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);outline:none;transition:border-color .15s}.templates-search:focus{border-color:var(--gold-dim)}.templates-member-slider{height:var(--tap-min-sm);margin-top:var(--space-xs);position:relative}.templates-member-blocks{height:100%;padding-right:var(--space-xs);align-items:center;gap:3px;display:flex}.templates-member-all{width:var(--tap-min-sm);height:var(--tap-min-sm);font-size:var(--fs-xs);color:var(--text-dim);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;flex-shrink:0;font-weight:700;transition:background .15s,color .15s,border-color .15s}.templates-member-all--active{color:var(--bg);background:var(--gold);border-color:var(--gold)}.templates-member-block{background:var(--bg-card);border:1px solid var(--border);border-radius:2px;flex:1;height:10px}.templates-member-block--filled{background:var(--gold-dim);border-color:var(--gold-dim)}.templates-member-block--active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px var(--gold-dim)}.templates-member-range{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.templates-error{padding:var(--space-md) var(--space-lg);font-size:var(--fs-xs);color:var(--role-dps);flex-shrink:0;margin:0}.templates-list{padding:var(--space-md);gap:var(--space-md);flex-direction:column;flex:1;display:flex;overflow-y:auto}.templates-hint{font-size:var(--fs-sm);color:var(--text-dim);text-align:center;padding:var(--space-lg) var(--space-md)}.template-card{align-items:flex-start;gap:var(--space-xs);width:100%;padding:var(--space-md) var(--space-md);text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;flex-direction:column;transition:border-color .15s,box-shadow .15s;display:flex}.template-card:hover:not(:disabled),.template-card:focus-visible:not(:disabled){border-color:var(--gold-dim);box-shadow:0 0 12px var(--gold-dim);outline:none}.template-card:disabled{opacity:.55;cursor:wait}.template-card-name{font-size:var(--fs-sm);color:var(--text);font-weight:600;line-height:1.3}.template-card-meta{align-items:center;gap:var(--space-sm);font-size:var(--fs-xs);color:var(--text-dim);flex-wrap:wrap;display:flex}.template-card-classes{flex-wrap:wrap;align-items:center;gap:2px;display:flex}.template-card-class-icon{object-fit:cover;opacity:.9;border-radius:50%;width:18px;height:18px}.template-card-loading{font-size:var(--fs-2xs);color:var(--gold);font-style:italic}.page-footer{background:var(--bg);flex-shrink:0;height:36px}@media (width>=480px){.charts-panel{flex-direction:row;height:130px}.chart-card{border-bottom:none;border-right:1px solid var(--border)}.chart-card:last-child{border-right:none}}@media (width>=768px){.formation{--slot-sz:clamp(68px, 11vw, 96px);--slot-gap:clamp(10px, 2vw, 18px);max-width:760px}.formation-row{padding:var(--space-lg) var(--space-lg);gap:var(--space-xl)}.formation-row-label{font-size:var(--fs-2xs)}.team-size-slider{flex:1;order:0}.team-size-label{display:inline}.charts-panel{height:140px}}@media (width>=1024px){.page{height:100svh}.layout{flex-direction:row;overflow:hidden}.left-panel{width:var(--left-panel-w);flex-shrink:0;max-height:none;display:flex}.center-column{flex:1;overflow:hidden}.templates-panel{width:var(--templates-panel-w);flex-shrink:0;order:2;min-width:200px;max-width:480px;max-height:none}.team-area{padding:var(--space-md) var(--gutter) var(--space-lg);overflow:hidden}.team-grid-wrap{flex:1;min-height:0;overflow:hidden}.team-header{flex-wrap:nowrap}.formation{--slot-sz:clamp(52px, 8.5svh, 88px);--slot-gap:clamp(6px, 1.1svh, 12px);max-width:none;height:100%;margin:0}.formation-row{gap:var(--space-lg);padding:var(--space-md) var(--space-lg);flex:1}.formation-row-label{width:100px;font-size:var(--fs-2xs)}.team-title{font-size:clamp(18px,3.2svh,28px)}.team-size-slider{flex:1;order:0}.team-size-label{display:inline}.element-remove-btn,.clear-btn{display:flex}.templates-panel-resize-handle{display:block}}@media (width>=1440px){.class-list{grid-template-columns:1fr 1fr}}@media (width>=1920px){.charts-panel{height:170px}.class-icon-wrap,.role-icon-wrap{width:42px;height:42px}.class-icon,.role-icon{width:38px;height:38px}.role-sidebar .role-icon-wrap,.element-sidebar .role-icon-wrap{width:32px;height:32px}.role-sidebar .role-icon,.element-sidebar .role-icon{width:28px;height:28px}.formation{--slot-sz:clamp(90px, 9svh, 140px);--slot-gap:clamp(10px, 1.2svh, 20px)}}@media (pointer:coarse){.class-card,.role-card{min-height:var(--tap-min-sm)}.is-touch .team-slot{cursor:pointer}}.sheet-overlay{z-index:var(--z-modal);background:#0000009e;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:720px;height:var(--sheet-height,80svh);background:var(--bg);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;touch-action:pan-y;flex-direction:column;animation:.26s ease-out sheet-in;display:flex;position:relative;overflow:hidden;box-shadow:0 -8px 40px #0009}@keyframes sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-handle{border-radius:var(--radius-pill);background:var(--border);width:36px;height:4px;margin:var(--space-md) auto var(--space-xs);flex-shrink:0}.sheet-header{align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-xl) var(--space-md);border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.sheet-title{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:800;overflow:hidden}.sheet-slot-preview{align-items:center;gap:var(--space-md);flex:1;min-width:0;display:flex}.sheet-slot-icon{object-fit:cover;border:1px solid var(--border-slot);border-radius:50%;flex-shrink:0;width:40px;height:40px}.sheet-slot-info{flex-direction:column;gap:2px;min-width:0;display:flex}.sheet-slot-class{font-size:var(--fs-sm);color:var(--gold-light);white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.sheet-slot-role{font-size:var(--fs-xs);color:var(--text-dim)}.sheet-clear-btn{min-height:var(--tap-min-sm);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);color:var(--danger-soft);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;white-space:nowrap;background:#c846461f;border:1px solid #dc5a5a73;flex-shrink:0;font-weight:700;transition:background .15s,color .15s}.sheet-clear-btn:hover{color:#fff;background:#dc505047}.sheet-close-btn{min-width:var(--tap-min);min-height:var(--tap-min);color:var(--text-dim);font-size:var(--fs-xl);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s;display:flex}.sheet-close-btn:hover{color:var(--gold-light)}.sheet-tabs{border-bottom:1px solid var(--border);background:var(--bg-sidebar);flex-shrink:0;display:flex}.sheet-tab{min-height:var(--sheet-tab-h,40px);color:var(--text-dim);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;font-weight:700;transition:color .15s,border-color .15s;display:flex}.sheet-tab--active{color:var(--gold-light);border-bottom-color:var(--gold)}.sheet-tab:hover:not(.sheet-tab--active){color:var(--text)}.sheet-content{flex:1;position:relative;overflow:hidden}.sheet-panel{padding:var(--space-lg);scrollbar-width:thin;scrollbar-color:var(--border) transparent;display:none;position:absolute;inset:0;overflow-y:auto}.sheet-panel--active{display:block}.sheet-grid{gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));display:grid}.sheet-grid--dense{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.sheet-selected-mark{color:var(--gold-light);font-size:var(--fs-sm);flex-shrink:0;margin-left:auto}.class-card--selected,.role-card--selected{border-color:var(--gold)!important;background:var(--slot-hover)!important}.role-card--disabled{opacity:.4;cursor:not-allowed}.sheet-elements-counter{font-size:var(--fs-sm);color:var(--text-dim);text-align:right;margin-bottom:var(--space-md);font-weight:600}.sheet-footer{padding:var(--space-md) var(--space-xl) max(var(--space-md), env(safe-area-inset-bottom));border-top:1px solid var(--border);flex-shrink:0}.sheet-done-btn{width:100%;min-height:var(--tap-min);background:var(--gold);color:var(--bg);border-radius:var(--radius-lg);font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 14px var(--gold-dim);border:none;font-weight:800;transition:box-shadow .18s}.sheet-done-btn:hover{box-shadow:0 0 28px var(--gold-dim)}.sheet--templates{height:90svh}.sheet--templates .sheet-content .templates-panel{flex:1;width:100%;min-width:0;max-width:none;height:100%;max-height:none;position:relative;overflow:hidden;display:flex!important}.btn-templates-sheet{min-height:var(--tap-min-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--gold);border:1.5px solid var(--gold-dim);white-space:nowrap;background:0 0;flex-shrink:0;font-weight:700;transition:color .18s,border-color .18s,background .18s}.btn-templates-sheet:hover,.btn-templates-sheet:focus-visible{background:var(--slot-hover);border-color:var(--gold);outline:none}@media (width>=1024px){.btn-templates-sheet{display:none}}