| m0z4r | … Sur desktop : table normale. Sur mobile : chaque
| affiche son data-label en gras à gauche. */
@media(max-width:768px){
table.tbl-stack thead{display:none}
table.tbl-stack tr{display:block;margin-bottom:8px;padding:8px 10px;
border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
table.tbl-stack td{display:flex;justify-content:space-between;align-items:center;
padding:4px 0;border:none;text-align:right}
table.tbl-stack td:not(:last-child){border-bottom:1px dashed var(--border)}
table.tbl-stack td::before{
content:attr(data-label);
font-weight:600;color:var(--text3);font-size:11px;text-align:left;
flex:0 0 auto;margin-right:12px}
table.tbl-stack td:empty::before{opacity:.4}
}
/* ── Touch targets : minimum 44×44 sur mobile (WCAG) ──────────────── */
@media(max-width:768px){
.tab-btn{min-height:44px;padding:12px 14px;font-size:14px}
.btn,button{min-height:44px;padding:10px 16px}
.btn-sm{min-height:36px;padding:8px 12px;font-size:12px}
input[type="number"],input[type="text"],select,textarea{
min-height:42px;padding:10px 12px;font-size:14px;
-webkit-appearance:none;border-radius:8px}
/* Filter bars : 1 colonne sur mobile */
.card[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
/* ── Tables → cartes empilées sur très petit écran (≤640px) ───────── */
@media(max-width:640px){
/* Tables longues passent en mode "card stack" : chaque tr devient
un bloc empilé, chaque td devient une ligne label/valeur.
On opt-in en ajoutant la classe .tbl-stack sur la table. */
.tbl-stack thead{display:none}
.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
.tbl-stack tr{background:var(--bg2);border:1px solid var(--border);
border-radius:8px;padding:10px;margin-bottom:8px}
.tbl-stack td{display:flex;justify-content:space-between;align-items:center;
border:0;padding:4px 0;font-size:12px}
.tbl-stack td::before{content:attr(data-label);color:var(--text2);
font-size:11px;font-weight:600;text-transform:uppercase;
letter-spacing:.5px;margin-right:8px}
/* Tables non stackées : scroll horizontal explicite avec hint visuel */
table[style*="min-width"]{
box-shadow:inset -12px 0 10px -10px rgba(245,158,11,.25);
}
/* KPI strips : passer en 2 colonnes max sur mobile */
div[style*="grid-template-columns:repeat(4,1fr)"],
div[style*="grid-template-columns:repeat(5,1fr)"],
div[style*="grid-template-columns:repeat(6,1fr)"]{
grid-template-columns:repeat(2,1fr) !important;
}
div[style*="grid-template-columns:repeat(3,1fr)"]{
grid-template-columns:1fr 1fr !important;
}
}
/* ── Très petit écran : KPI en colonne ─────────────────────────────── */
@media(max-width:400px){
div[style*="grid-template-columns:repeat(2,1fr)"]{
grid-template-columns:1fr !important;
}
}
/* ── Réduire le motion pour les utilisateurs sensibles ─────────────── */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* ── Mode haute densité (Retina) : crispness des bordures ──────────── */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
.card{border-width:.5px}
}
/* ═══════════════════════════════════════════════════════════════════════
🎨 SIDEBAR NAVIGATION — Refonte fluide & artistique (2026-05-23)
Grid layout : sidebar fixe à gauche + main scrollable
Mobile : sidebar transformé en drawer (slide-in via hamburger)
═══════════════════════════════════════════════════════════════════════ */
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 60px);
position:relative}
/* ── Sidebar conteneur ─────────────────────────────────────────────── */
.sidenav{position:sticky;top:0;height:100vh;overflow-y:auto;
background:linear-gradient(180deg,#10141a 0%, #0c1015 100%);
border-right:1px solid var(--border);padding:14px 0;z-index:30;
box-shadow:inset -1px 0 0 rgba(245,158,11,.06)}
.sidenav-header{display:flex;align-items:center;justify-content:space-between;
padding:0 16px 14px;border-bottom:1px solid var(--border);margin-bottom:10px}
.sidenav-brand{font-weight:800;font-size:14px;letter-spacing:.6px;
background:linear-gradient(135deg,#fbbf24,#f97316);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sidenav-close{display:none;background:none;border:none;color:var(--text2);
font-size:18px;cursor:pointer;padding:4px 8px}
/* ── Catégorie de groupe ───────────────────────────────────────────── */
.navcat{margin-bottom:6px}
.navcat-header{display:flex;align-items:center;gap:10px;width:100%;
padding:9px 16px;border:none;background:transparent;cursor:pointer;
color:var(--text2);font-size:11px;font-weight:700;letter-spacing:.7px;
text-transform:uppercase;text-align:left;border-radius:0;
transition:color .15s, background .15s}
.navcat-header:hover{color:var(--text);background:rgba(245,158,11,.04)}
.navcat-icon{font-size:14px}
.navcat-label{flex:1}
.navcat-arrow{font-size:10px;transition:transform .2s;opacity:.6}
.navcat.collapsed .navcat-arrow{transform:rotate(-90deg)}
/* ── Items (onglets dans la catégorie) ─────────────────────────────── */
.navcat-items{display:flex;flex-direction:column;gap:2px;padding:0 8px 6px}
.navitem{position:relative;display:flex;align-items:center;gap:10px;
padding:9px 12px;border:none;background:transparent;cursor:pointer;
color:var(--text);font-size:13px;font-weight:500;text-align:left;
border-radius:8px;transition:all .18s;width:100%}
.navitem:hover{background:rgba(245,158,11,.07);color:#fbbf24}
.navitem-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.navitem-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navitem-active-marker{position:absolute;left:-8px;top:50%;transform:translateY(-50%);
width:3px;height:0;background:linear-gradient(180deg,#fbbf24,#f97316);
border-radius:0 3px 3px 0;transition:height .25s}
.navitem.active{background:linear-gradient(90deg,rgba(245,158,11,.14),
rgba(245,158,11,.04) 60%, transparent);color:#fbbf24;font-weight:700;
box-shadow:inset 0 0 0 1px rgba(245,158,11,.18)}
.navitem.active .navitem-active-marker{height:60%}
/* ── Main area (contenu) ───────────────────────────────────────────── */
.app-main{min-width:0;display:flex;flex-direction:column;
background:radial-gradient(circle at 20% 0%, rgba(245,158,11,.04) 0%, transparent 40%),
radial-gradient(circle at 80% 100%, rgba(168,85,247,.04) 0%, transparent 40%),
var(--bg)}
/* ── Mobile topbar (hamburger) ─────────────────────────────────────── */
.mobile-topbar{display:none;position:sticky;top:0;z-index:40;
align-items:center;gap:14px;padding:10px 14px;
background:rgba(20,24,28,.94);backdrop-filter:blur(10px);
border-bottom:1px solid var(--border)}
.hamburger{display:flex;flex-direction:column;justify-content:space-between;
width:38px;height:28px;padding:5px 0;background:none;border:none;cursor:pointer}
.hamburger span{display:block;height:2px;width:100%;background:var(--text);
border-radius:2px;transition:all .25s}
.mobile-topbar.navopen .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.mobile-topbar.navopen .hamburger span:nth-child(2){opacity:0}
.mobile-topbar.navopen .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-breadcrumb{font-size:13px;font-weight:600;color:var(--text);
display:flex;align-items:center;gap:8px;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;flex:1}
/* ── Backdrop pour fermer drawer au tap ────────────────────────────── */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
backdrop-filter:blur(2px);z-index:25}
/* ── Masque l'ancienne barre horizontale (compatibilité) ──────────── */
nav.tabs, div.tabs{display:none !important}
/* ── Responsive : drawer mobile ≤900px ─────────────────────────────── */
@media (max-width:900px){
.app-shell{grid-template-columns:1fr}
.mobile-topbar{display:flex}
.sidenav{position:fixed;top:0;left:0;width:280px;
transform:translateX(-100%);transition:transform .28s ease;
box-shadow:8px 0 24px rgba(0,0,0,.4)}
.sidenav.open{transform:translateX(0)}
.sidenav-close{display:block}
.nav-backdrop{display:none}
.nav-backdrop[style*="display: block"]{display:block !important}
}
/* ── Ajustements main : padding + scroll smooth ────────────────────── */
.app-main .tab-content{padding:20px 24px}
@media(max-width:900px){.app-main .tab-content{padding:14px 12px}}
@media(max-width:480px){.app-main .tab-content{padding:10px 8px}}
/* ── Animation arrivée d'un onglet ─────────────────────────────────── */
.tab-content > div[x-show]{animation:tabFadeIn .25s ease}
@keyframes tabFadeIn{from{opacity:0;transform:translateY(4px)}
to{opacity:1;transform:translateY(0)}}
/* ═══════════════════════════════════════════════════════════════════════
#36 WAR ROOM — visuels guerriers immersifs (refonte 2026-05-24)
═══════════════════════════════════════════════════════════════════════ */
/* Jauge radiale (conic-gradient pure CSS, pas de JS, pas de SVG) */
.war-gauge{
--pct: 0;
--color: #f59e0b;
width:130px;height:130px;position:relative;border-radius:50%;
background: conic-gradient(var(--color) calc(var(--pct)*1%),
rgba(255,255,255,.06) 0);
display:inline-flex;align-items:center;justify-content:center;
filter:drop-shadow(0 0 12px rgba(245,158,11,.25));
transition:--pct .8s cubic-bezier(.34,1.56,.64,1);
}
.war-gauge::before{
content:"";position:absolute;inset:14px;border-radius:50%;
background:linear-gradient(135deg, var(--bg2), var(--bg3));
box-shadow:inset 0 4px 12px rgba(0,0,0,.4);
}
.war-gauge-value{
position:relative;z-index:1;font-size:22px;font-weight:800;
color:var(--text);font-family:var(--font-mono);line-height:1
}
.war-gauge-label{
position:absolute;bottom:-24px;left:0;right:0;text-align:center;
font-size:10px;text-transform:uppercase;letter-spacing:1.5px;
color:var(--text2);font-weight:700;
}
.war-gauge-sublabel{
position:relative;z-index:1;font-size:9px;color:var(--text3);
text-align:center;margin-top:2px;font-family:var(--font-mono);
}
@property --pct{ syntax:' du HTML.
═══════════════════════════════════════════════════════════════════════ */
/* ── HERO ──────────────────────────────────────────────────────────────── */
.mc-hero{
position:relative;overflow:hidden;
display:flex;align-items:flex-end;justify-content:space-between;
gap:20px;flex-wrap:wrap;
padding:26px 28px;margin-bottom:20px;
border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius-xl);
background:
radial-gradient(120% 140% at 0% 0%, rgba(245,158,11,.14), transparent 55%),
radial-gradient(120% 160% at 100% 120%, rgba(168,85,247,.12), transparent 55%),
linear-gradient(160deg, var(--color-ink-700), var(--color-ink-900));
box-shadow:var(--shadow-lg), var(--inset-soft);
}
.mc-hero-glow{
position:absolute;right:-50px;top:-60px;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle, rgba(245,158,11,.22), transparent 65%);
filter:blur(16px);pointer-events:none;
}
.mc-hero-lead{position:relative;z-index:1;min-width:0}
.mc-hero-eyebrow{
display:flex;align-items:center;gap:7px;margin-bottom:10px;
font-family:var(--font-display);
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--fg-2);
}
.mc-hero-eyebrow .live-dot{width:8px;height:8px;margin:0}
.mc-hero-sep{opacity:.4}
.mc-hero-title{
margin:0;font-family:var(--font-display);font-weight:700;
font-size:clamp(1.9rem, 4.5vw, 2.8rem);line-height:1.04;letter-spacing:-.025em;
background:linear-gradient(135deg,#fff7ed 0%,#fde68a 32%,#fbbf24 68%,#f59e0b 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mc-hero-aside{position:relative;z-index:1}
.mc-hero-pulse{
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:104px;padding:14px 18px;border-radius:var(--radius-lg);
background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.35);
box-shadow:0 0 24px -8px rgba(34,197,94,.55);
}
.mc-hero-pulse-num{
font-family:var(--font-mono);font-variant-numeric:tabular-nums;
font-size:2rem;font-weight:700;line-height:1;color:var(--color-green-400);
}
.mc-hero-pulse-lbl{
margin-top:5px;text-align:center;
font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--fg-2);
}
/* ── Le vieux titre de section devient redondant (le hero le porte) ─────── */
[x-show="activeTab===0"] > .section-title{display:none}
/* ── TUILES KPI (les 4 cartes du grid-4, scopées au Tab 0) ─────────────── */
[x-show="activeTab===0"] > .grid-4{gap:14px;margin-bottom:20px}
[x-show="activeTab===0"] > .grid-4 > .card{
position:relative;overflow:hidden;
padding:18px 18px 16px;
border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius-lg);
background:linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
box-shadow:var(--shadow-md);
transition:transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
[x-show="activeTab===0"] > .grid-4 > .card::before{
content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
}
[x-show="activeTab===0"] > .grid-4 > .card:nth-child(1)::before{background:linear-gradient(180deg,#fbbf24,#f97316)}
[x-show="activeTab===0"] > .grid-4 > .card:nth-child(2)::before{background:linear-gradient(180deg,#60a5fa,#3b82f6)}
[x-show="activeTab===0"] > .grid-4 > .card:nth-child(3)::before{background:linear-gradient(180deg,#4ade80,#22c55e)}
[x-show="activeTab===0"] > .grid-4 > .card:nth-child(4)::before{background:linear-gradient(180deg,#94a3b8,#64748b)}
[x-show="activeTab===0"] > .grid-4 > .card.card-click{cursor:pointer}
[x-show="activeTab===0"] > .grid-4 > .card.card-click:hover{
transform:translateY(-3px);border-color:var(--border-amber);
box-shadow:var(--shadow-lg), var(--glow-amber);
}
[x-show="activeTab===0"] > .grid-4 .card-title{
color:var(--fg-accent);letter-spacing:.06em;
}
[x-show="activeTab===0"] > .grid-4 .card-value{
font-size:clamp(1.8rem, 4vw, 2.3rem);line-height:1.05;margin:7px 0 2px;color:var(--fg-1);
}
/* ── Carte Live Rounds rehaussée ───────────────────────────────────────── */
[x-show="activeTab===0"] > .card{
border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius-lg);
background:linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
box-shadow:var(--shadow-md);
}
/* ── Mobile : hero plus compact, pulse masqué ──────────────────────────── */
@media(max-width:900px){
.mc-hero{padding:20px 18px}
.mc-hero-title{font-size:clamp(1.6rem, 7vw, 2rem)}
.mc-hero-aside{display:none}
}
/* ═══════════════════════════════════════════════════════════════════════
⚔️ PHASE 2 · VAGUE 3 — SYSTÈME GLOBAL (2026-05-30)
Refonte des primitives partagées par TOUS les onglets : cartes, titres de
section, tableaux, pills/badges, boutons. Évolution cohérente avec la
coque (Vague 1) et l'accueil (Vague 2). Appended → réversible (supprimer
ce bloc). Les overrides Tab-0 (Vague 2) restent plus spécifiques et gardent
la main là où ils s'appliquent.
═══════════════════════════════════════════════════════════════════════ */
/* ── CARTES ────────────────────────────────────────────────────────────── */
.card{
background:linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm), var(--inset-soft);
}
.card-click:hover{
border-color:var(--border-amber);
box-shadow:var(--shadow-md), 0 0 0 1px rgba(245,158,11,.18);
}
.card-title{color:var(--fg-2);letter-spacing:.06em}
/* ── TITRES DE SECTION : heading blanc + accent souligné ───────────────── */
.section-title{
position:relative;
font-size:18px;color:var(--fg-1);
padding-bottom:11px;margin-bottom:18px;
}
.section-title::after{
content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;border-radius:2px;
background:linear-gradient(90deg,#fbbf24,#f97316);
}
/* ── TABLEAUX ──────────────────────────────────────────────────────────── */
.tbl th{
background:color-mix(in oklab, var(--color-ink-800) 70%, transparent);
color:var(--fg-2);
border-bottom:1px solid var(--border-default);
}
.tbl td{border-bottom:1px solid var(--border-subtle)}
.tbl tr:hover td{background:rgba(245,158,11,.06)}
.tbl .link{color:var(--fg-accent)}
/* ── PILLS & BADGES : pleine pilule + chiffres tabulaires ──────────────── */
.pill{border-radius:var(--radius-pill);font-variant-numeric:tabular-nums;padding:3px 9px}
.badge{border-radius:var(--radius-pill)}
/* ── BOUTONS : CTA primaire en dégradé de marque ───────────────────────── */
.btn-primary{
background:var(--gradient-amber);border-color:transparent;
color:#1a1206;font-weight:600;
}
.btn-primary:hover{
background:var(--gradient-amber);color:#1a1206;
box-shadow:var(--glow-amber);
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 2 · VAGUE 4 — FORMULAIRES & CONTRÔLES (réversible : supprimer ce bloc
+ repasser le cache-bust w6→w5 dans dashboard.html ligne 34)
Restyle des primitives partagées .inp / select / textarea / .toggle / labels
pour l'identité "war room" : champ encastré sombre, focus ring ambré, chevron
custom, micro-labels en capitales. Append-only → la cascade gagne.
═══════════════════════════════════════════════════════════════════════════ */
/* ── CHAMPS : input / textarea / select ────────────────────────────────── */
.inp{
background-color:var(--color-ink-900);
border:1px solid var(--border-default);
border-radius:var(--radius-sm);
color:var(--fg-1);
box-shadow:var(--inset-soft);
transition:border-color .18s var(--ease-out),
box-shadow .18s var(--ease-out),
background-color .18s var(--ease-out);
}
.inp::placeholder{color:var(--fg-muted);opacity:1}
.inp:hover{border-color:var(--border-strong)}
.inp:focus{
border-color:var(--color-amber-500);
background-color:var(--color-ink-800);
box-shadow:0 0 0 3px rgba(245,158,11,.15), var(--inset-soft);
}
textarea.inp{min-height:64px;line-height:1.5}
/* ── SELECT : chevron custom (slate) au lieu de la flèche native ───────── */
select.inp{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
cursor:pointer;
padding-right:30px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 11px center;
}
select.inp:focus{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* ── LABELS : micro-capitales tracées, cohérentes avec .card-title ─────── */
label.lbl{
text-transform:uppercase;
letter-spacing:.04em;
font-size:11px;
font-weight:600;
color:var(--fg-2);
}
/* ── TOGGLE : rail encastré + lueur verte à l'activation ───────────────── */
.toggle .slider{
background:var(--color-ink-900);
border-color:var(--border-default);
box-shadow:var(--inset-soft);
}
.toggle .slider:before{box-shadow:0 1px 2px rgba(0,0,0,.45)}
.toggle input:checked + .slider{
background:#0d2818;
border-color:var(--color-green-500);
box-shadow:0 0 12px -3px rgba(34,197,94,.50), var(--inset-soft);
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 2 · VAGUE 5 — DEEP-DIVE « LEAGUES & CLANS » (onglet vedette, activeTab===2)
(réversible : supprimer ce bloc + retirer le bloc HERO HTML dans dashboard.html
sous + repasser le cache-bust w7→w6)
Réutilise la coquille .mc-hero (cohérence Vague 2) + cluster KPI .lc-* dédié,
transforme les cartes en panneaux console et les tables en « battle tables ».
Scopé par l'attribut [x-show="activeTab===2"] → zéro impact sur les autres onglets.
═══════════════════════════════════════════════════════════════════════════ */
/* ── L'ancien titre de section devient redondant (le hero le porte) ─────── */
[x-show="activeTab===2"] > .section-title{display:none}
/* #417 — Markets (1) & History (5) portent maintenant le hero : on masque les vieux titres redondants */
[x-show="activeTab===1"] > .section-title{display:none}
[x-show="activeTab===5"] > .section-title,
[x-show="activeTab===5"] > .section-sub{display:none}
/* ── CLUSTER KPI dans le hero (rollup live : ligues / clans / joueurs) ──── */
.lc-kpis{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lc-kpi{
display:flex;flex-direction:column;align-items:flex-end;
min-width:62px;padding:9px 14px;
border-radius:var(--radius-md);
background:color-mix(in oklab, var(--color-ink-900) 55%, transparent);
border:1px solid var(--border-subtle);
}
.lc-kpi-num{
font-family:var(--font-mono);font-variant-numeric:tabular-nums;
font-size:clamp(1.15rem, 2.4vw, 1.55rem);font-weight:700;line-height:1;color:var(--fg-1);
}
.lc-kpi-lbl{
margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.07em;
text-transform:uppercase;color:var(--fg-3);
}
/* ── CARTES = PANNEAUX CONSOLE : liseré supérieur dégradé (intégré au fond,
donc clippé par le radius — PAS d'overflow:hidden, le menu cycle déborde) ── */
[x-show="activeTab===2"] .card{
background:
linear-gradient(90deg, var(--color-amber-500), var(--color-purple-500) 70%, transparent) top/100% 2px no-repeat,
linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
border:1px solid rgba(255,255,255,.07);
}
/* ── BATTLE TABLES : en-tête appuyé + accent de ciblage au survol ──────── */
[x-show="activeTab===2"] .tbl th{
background:color-mix(in oklab, var(--color-ink-800) 88%, transparent);
border-bottom:1px solid var(--border-amber);
color:var(--fg-accent);
}
[x-show="activeTab===2"] .tbl .link{font-weight:600}
[x-show="activeTab===2"] .tbl tr:hover td:first-child{
box-shadow:inset 3px 0 0 var(--color-amber-500);
}
/* ── Pill multiplicateur live : légère lueur verte (mise en avant combat) ── */
[x-show="activeTab===2"] .pill-green{box-shadow:0 0 10px -3px rgba(34,197,94,.45)}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 2 · VAGUE 6 — DEEP-DIVE « PLAYERS / SCOUT » (onglet vedette, activeTab===3)
(réversible : supprimer ce bloc + retirer le bloc HERO HTML dans dashboard.html
sous + repasser le cache-bust w8→w7)
Onglet piloté par la recherche → le hero porte un pulse contextuel (résultats
trouvés) qui s'allume après une recherche ; cartes en panneaux console +
tables « battle tables », cohérent avec la Vague 5.
Scopé par l'attribut [x-show="activeTab===3"] → zéro impact sur les autres onglets.
═══════════════════════════════════════════════════════════════════════════ */
/* ── L'ancien titre de section devient redondant (le hero le porte) ─────── */
[x-show="activeTab===3"] > .section-title{display:none}
/* ── CARTES = PANNEAUX CONSOLE : liseré supérieur dégradé (intégré au fond,
donc clippé par le radius — PAS d'overflow:hidden) ──────────────────── */
[x-show="activeTab===3"] > .card{
background:
linear-gradient(90deg, var(--color-amber-500), var(--color-purple-500) 70%, transparent) top/100% 2px no-repeat,
linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
border:1px solid rgba(255,255,255,.07);
}
/* ── BATTLE TABLES : en-tête appuyé + accent de ciblage au survol ──────── */
[x-show="activeTab===3"] .tbl th{
background:color-mix(in oklab, var(--color-ink-800) 88%, transparent);
border-bottom:1px solid var(--border-amber);
color:var(--fg-accent);
}
[x-show="activeTab===3"] .tbl .link{font-weight:600}
[x-show="activeTab===3"] .tbl tr:hover td:first-child{
box-shadow:inset 3px 0 0 var(--color-amber-500);
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 2 · VAGUE 7 — MASTHEAD GLOBAL DES EN-TÊTES D'ONGLET (~30 onglets)
Unifie l'accent de TOUS les .section-title : on remplace l'ancien souligné
bas (V3, ::after ambre→orange) par une BARRE VERTICALE GAUCHE dégradé
ambre→violet — signature qui fait écho au hero et aux liserés de cartes V5/V6.
Bloc append-only (dernier dans la cascade) → bat la règle V3 (~l.1067) à
spécificité égale. Ne touche PAS « display » : les en-têtes flagship (0/2/3)
restent masqués par leurs règles dédiées (spécificité 0,2,0 > 0,1,0).
Réversible : supprimer ce bloc (le souligné V3 réapparaît), w9→w8.
═══════════════════════════════════════════════════════════════════════════ */
.section-title{position:relative;padding-left:15px;padding-bottom:0}
.section-title::after{display:none}
.section-title::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:4px;height:1.05em;border-radius:2px;
background:linear-gradient(180deg, var(--color-amber-400), var(--color-purple-500));
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 2 · VAGUE 8 — DYNAMISME · THÈME MINIONS/MINING · COHÉRENCE GLOBALE
Cache-bust : 20260530w10
(réversible : supprimer ce bloc, cache-bust w10→w9)
A) Cohérence cross-onglets — top-strip + battle-table header promus à la BASE
pour les ~30 onglets sans traitement dédié. Les rules flagship
(tabs 0/2/3, spécificité ≥ 0,2,0) écrasent toujours cette rule 0,1,0.
B) Dynamisme — 5 @keyframes + micro-animations héros/section/cards/btns/pills.
Tout dans @media(prefers-reduced-motion:no-preference) — accessibilité OK.
C) Minions/Mining — watermark logo officiel en empty-states + coin héros +
glow animé logo brand. Discret, pro, on-theme.
═══════════════════════════════════════════════════════════════════════════ */
/* ── A. COHÉRENCE GLOBALE ───────────────────────────────────────────────── */
/* Top-strip 1px pour TOUTES les cartes — flagships (spéc.0,2,0) prévalent */
.card{
background:
linear-gradient(90deg,rgba(251,191,36,.38),rgba(168,85,247,.22) 55%,transparent)
top/100% 1px no-repeat,
linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
transition:box-shadow .22s var(--ease-out,cubic-bezier(.16,1,.3,1)),
border-color .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
/* En-tête de table ambre unifié pour TOUS les onglets */
.tbl th{
background:color-mix(in oklab, var(--color-ink-800) 88%, transparent);
border-bottom:1px solid var(--border-amber,rgba(251,191,36,.25));
color:var(--fg-accent,#fbbf24);
}
/* Accent de ciblage gauche au survol de ligne — global */
.tbl tr:hover td:first-child{
box-shadow:inset 3px 0 0 var(--color-amber-500,#f59e0b);
}
/* ── B. DYNAMISME ────────────────────────────────────────────────────────── */
@keyframes heroGlowDrift{
0%,100%{transform:translate(0,0) scale(1);opacity:.7}
30%{transform:translate(14px,-10px) scale(1.08);opacity:.9}
65%{transform:translate(-9px,7px) scale(.96);opacity:.6}
}
@keyframes heroTitleReveal{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes kpiPop{
from{opacity:0;transform:scale(.8)}
to{opacity:1;transform:scale(1)}
}
@keyframes barBreath{
0%,100%{opacity:1}50%{opacity:.42}
}
@keyframes miningGlow{
0%,100%{filter:drop-shadow(0 0 3px rgba(251,191,36,.28))}
50%{filter:drop-shadow(0 0 9px rgba(251,191,36,.62)) drop-shadow(0 0 18px rgba(168,85,247,.12))}
}
@media(prefers-reduced-motion:no-preference){
/* Glow hero : dérive organique lente (14 s pour rester très subtil) */
.mc-hero-glow{animation:heroGlowDrift 14s ease-in-out infinite}
/* Titre hero : révélation slide-up à chaque affichage d'onglet */
.mc-hero-title{
animation:heroTitleReveal .55s var(--ease-out,cubic-bezier(.16,1,.3,1)) both;
animation-delay:.08s;
}
/* Compteur KPI pulse : pop au chargement */
.mc-hero-pulse-num{
animation:kpiPop .4s var(--ease-out,cubic-bezier(.16,1,.3,1)) both;
animation-delay:.15s;
}
/* Barre verticale section-title : respiration 4 s */
.section-title::before{animation:barBreath 4s ease-in-out infinite}
/* Cartes : lueur ambre au survol */
.card:hover{
box-shadow:var(--shadow-md,0 4px 20px rgba(0,0,0,.35)),
0 0 0 1px rgba(251,191,36,.15),
0 0 24px rgba(251,191,36,.07);
}
/* Boutons : micro-lift + bounce retour */
.btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.btn:not(:disabled):active{transform:translateY(0) scale(.98)}
/* Pills : micro-scale au survol */
.pill{transition:transform .14s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.pill:hover{transform:scale(1.05)}
/* Logo brand header : glow minage pulsé via filter (évite conflit inline box-shadow) */
.logo img{animation:miningGlow 4.5s ease-in-out infinite}
/* Logo sidenav : glow discret au survol */
.sidenav-brand img{transition:filter .3s}
.sidenav-brand:hover img{filter:drop-shadow(0 0 10px rgba(251,191,36,.5))}
}
/* ── C. THÈME MINIONS/MINING — DISCRET ──────────────────────────────────── */
/* Watermark logo officiel dans le coin bas-droit des empty-states
overflow:hidden → clippé net, pas d'impact layout */
.empty-state{position:relative;overflow:hidden}
.empty-state::after{
content:"";position:absolute;
bottom:-14px;right:-14px;
width:80px;height:80px;
background:url('/static/pwa/icon-192.png') center/cover no-repeat;
opacity:.07;
pointer-events:none;
border-radius:50%;
}
/* Watermark dans le coin haut-droit de chaque hero masthead
mc-hero a déjà overflow:hidden → clippé net */
.mc-hero::before{
content:"";position:absolute;
top:-28px;right:-28px;
width:130px;height:130px;
background:url('/static/pwa/icon-192.png') center/cover no-repeat;
opacity:.07;
pointer-events:none;
border-radius:50%;
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 2 · VAGUE 9 — MASTHEAD COMPACT UNIVERSEL (#406)
Objectif : donner aux ~38 onglets sans hero dédié un EN-TÊTE « titre » aussi
soigné que les heroes flagship (0/2/3) mais PLUS PETIT — exactement la demande
« un design un peu plus petit mais autant sophistiqué que les catégories ».
Recette = signature du hero, réduite : police display + dégradé ambre clippé
au texte + liseré gauche renforcé (glow) + filet de séparation bas dégradé.
CIBLAGE — .section-title DIRECT enfant d'un panneau d'onglet
(.tab-content > [x-cloak] > .section-title) → uniquement les en-têtes de
NIVEAU ONGLET. Les sous-titres imbriqués (dans cartes/grilles/sous-vues)
gardent l'accent V7 → hiérarchie visuelle préservée.
NE TOUCHE JAMAIS « display » : les 3 heroes (0/2/3) masquent leur
.section-title direct via une règle dédiée (display:none, spéc. 0,2,0) — non
contestée ici (on ne déclare que de la typo), donc AUCUN double-titre.
Réversible : supprimer ce bloc → l'accent V7 seul réapparaît.
═══════════════════════════════════════════════════════════════════════════ */
.tab-content > [x-cloak] > .section-title{
font-family:var(--font-display);
font-size:clamp(1.32rem, 2.4vw, 1.68rem);
line-height:1.12;letter-spacing:-.02em;font-weight:700;
padding-left:18px;padding-bottom:15px;margin-bottom:20px;
background:linear-gradient(135deg,#fff7ed 0%,#fde68a 34%,#fbbf24 70%,#f59e0b 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* Liseré gauche renforcé pour le niveau onglet (plus large/haut + glow que V7).
On n'écrase PAS le dégradé du ::before (boîte séparée, jamais clippée au
texte) → la barre ambre→violet V7 reste pleine et lisible. */
.tab-content > [x-cloak] > .section-title::before{
width:5px;height:1.18em;border-radius:3px;
box-shadow:0 0 12px -2px rgba(245,158,11,.5);
}
/* Filet de séparation bas dégradé qui s'estompe — structure « masthead » nette
entre l'en-tête et le contenu (écrase le ::after:display:none de V7). */
.tab-content > [x-cloak] > .section-title::after{
content:"";display:block;position:absolute;left:18px;right:0;bottom:0;height:1px;
background:linear-gradient(90deg, rgba(251,191,36,.45), rgba(168,85,247,.18) 45%, transparent 80%);
}
@media(max-width:640px){
.tab-content > [x-cloak] > .section-title{
font-size:clamp(1.12rem, 5.4vw, 1.4rem);padding-bottom:11px;margin-bottom:14px;
}
}
@media(prefers-reduced-motion:no-preference){
/* Révélation slide-up à chaque affichage d'onglet — écho exact du hero */
.tab-content > [x-cloak] > .section-title{
animation:heroTitleReveal .5s var(--ease-out,cubic-bezier(.16,1,.3,1)) both;
}
}
/* ── VAGUE 9b — IDENTITÉ « titre or » pour les en-têtes RICHES (type B) ──────
~17 onglets portent déjà un en-tête soigné : titre + sous-titre + sous-nav
dans une barre flex (ex. Discord Studio, Dépenses, Core Team…). Leur
.section-title n'est PAS enfant direct du panneau (il vit dans ce wrapper) →
non touché par la Vague 9 ci-dessus. On lui donne ICI la MÊME identité or
(police display + dégradé clippé) MAIS sans la chrome masthead (pas de
changement de taille / filet / padding) → zéro perturbation des layouts
compacts (titres inline, margin:0, sous-titre adjacent).
Ciblage : .section-title DESCENDANT du PREMIER enfant-élément du panneau =
le bloc d'en-tête. Les sous-titres de section vivent dans des enfants
ULTÉRIEURS (zone de contenu) → jamais le 1er → restent blancs (hiérarchie
intacte : 1 seul titre or par onglet, comme les heroes). ════════════════ */
.tab-content > [x-cloak] > *:first-child .section-title{
font-family:var(--font-display);letter-spacing:-.01em;
background:linear-gradient(135deg,#fff7ed 0%,#fde68a 34%,#fbbf24 70%,#f59e0b 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* ═══════════════════════════════════════════════════════════════════════════
#419 — TUILE KPI GLOBALE (signature Overview propagée à TOUS les tableaux)
Demande : « le style tuile KPI exact d'Overview (liseré accent + hover) … et
ce genre de changement doit être bon pour tous les tableaux du dashboard. »
Effet : chaque carte KPI (enfant DIRECT d'une grille → .grid-2/3/4 > .card)
reçoit le même langage qu'Overview — LISERÉ ACCENT à gauche (palette cyclique
ambre·bleu·vert·ardoise) + SOULÈVEMENT au survol. Le top-strip global (Vague 8)
est neutralisé sur ces cartes → liseré gauche SEUL, identique aux tuiles d'Overview.
Sûreté (le risque visuel signalé est neutralisé) :
• accent via box-shadow INSET — pas de ::before, pas d'overflow:hidden, pas de
position:relative → respecte le radius, ne décale rien, ne CLIPPE aucun menu
déroulant, ne recrée aucun contexte de positionnement (boutons 📸 intacts).
• portée limitée aux vraies .card en enfant direct de grille : les mini-KPI en
inline (Ligues, Joueurs, VPS…) et les panneaux pleine largeur sont épargnés.
• onglets vedettes intacts : Overview (Tab 0, ::before nth-child, spéc. 0,3,x) et
Ligues/Joueurs (Tabs 2/3 console-panels ; leurs KPI ne sont pas des .card).
• lift gated sous prefers-reduced-motion:no-preference (a11y).
Réversible : supprimer ce bloc + repasser le cache-bust w16→w14.
═══════════════════════════════════════════════════════════════════════════ */
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card{
--kpi-accent:#f59e0b;
background:linear-gradient(160deg, var(--color-ink-700), var(--color-ink-800));
box-shadow:inset 3px 0 0 var(--kpi-accent), var(--shadow-sm), var(--inset-soft);
transition:transform .2s var(--ease-out,cubic-bezier(.16,1,.3,1)),
box-shadow .2s ease, border-color .2s ease;
}
/* palette cyclique cohérente avec Overview (ambre · bleu · vert · ardoise) */
.grid-2 > .card:nth-child(4n+2), .grid-3 > .card:nth-child(4n+2), .grid-4 > .card:nth-child(4n+2){--kpi-accent:#3b82f6}
.grid-2 > .card:nth-child(4n+3), .grid-3 > .card:nth-child(4n+3), .grid-4 > .card:nth-child(4n+3){--kpi-accent:#22c55e}
.grid-2 > .card:nth-child(4n+4), .grid-3 > .card:nth-child(4n+4), .grid-4 > .card:nth-child(4n+4){--kpi-accent:#64748b}
/* survol : bord ambre + halo + liseré conservé (feedback même en reduced-motion) */
.grid-2 > .card:hover, .grid-3 > .card:hover, .grid-4 > .card:hover{
border-color:var(--border-amber);
box-shadow:inset 3px 0 0 var(--kpi-accent), var(--shadow-lg), var(--glow-amber);
}
/* soulèvement réservé si l'utilisateur accepte le mouvement (a11y) */
@media(prefers-reduced-motion:no-preference){
.grid-2 > .card:hover, .grid-3 > .card:hover, .grid-4 > .card:hover{transform:translateY(-3px)}
}
|