/* ============================================================================
   VoidRelay — css/hub.css : système de design unifié pour la famille de pages
   « tableau de bord » (hub.html, faq.html, faq-en.html, compagnon.html).
   Avant : 4 fichiers, chacun avec son propre <style> inline dupliqué (même
   vocabulaire de tokens copié-collé, dérive au fil du temps). Ici : un seul
   fichier, tokens harmonisés avec css/pandaahh.css / css/style.css (mêmes
   valeurs de fond/encre/or que le reste du site, même famille visuelle),
   composants dédupliqués. Toujours sombre (pas de thème clair sur ces pages
   — tableau de bord type "console").
   ========================================================================== */
:root{
  --bg:#090d16; --bg2:#0e1420;
  --card:#141b28; --card2:#0e1420;
  --ink:#eef3fb; --mut:#9fb1cb; --mut2:#7688a2; --line:#26324a;
  --acc:#e2c05a; --acc2:#a78bfa; /* or (identité du site) + violet secondaire — corrige un echec AA verifie (3.97:1 -> 6.34:1) */
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --day:#f0c419; --night:#5b8cff; --warm:#ff7849; --cold:#39c0ff;
  --radius:14px; --radius-sm:10px;
  --sh:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 32px -18px rgba(0,0,0,.75);
  --sh-soft:0 1px 0 rgba(255,255,255,.045) inset, 0 8px 20px -14px rgba(0,0,0,.65);
  --ease:.18s cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(1200px 600px at 80% -10%,#13202b 0,var(--bg) 55%) fixed,var(--bg);
     color:var(--ink);font:15px/1.5 "Inter","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
     padding:20px;max-width:1280px;margin:0 auto;-webkit-font-smoothing:antialiased}
body.narrow{max-width:880px} body.mid{max-width:1000px}
a{color:var(--acc);text-decoration:none;transition:color var(--ease)}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

header.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:6px}
/* Fil d'ariane léger commun aux 4 pages hub.css : ramène toujours vers l'accueil et les 3 autres
   pages de la famille (avant : hub.html et compagnon.html n'avaient aucun lien de retour). */
.hdr-brand{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;width:100%;font-size:13px;color:var(--mut)}
.hdr-brand a{color:var(--mut)}
.hdr-brand a:hover{color:var(--acc)}
/* « Vous êtes ici » (16/07/2026) : même convention class="cur" que la topnav et la vrnav —
   la page courante est marquée sur TOUTES les familles d'en-tête du site. */
.hdr-brand a.cur{color:var(--acc);font-weight:600}
.bc{font-size:12px;color:var(--mut);margin:2px 2px 10px}
.bc a{color:var(--mut)}
.bc a:hover{color:var(--acc)}
.hdr-brand a:first-child{color:var(--ink);font-weight:700}
.hdr-brand a:first-child .frag{color:var(--acc)}
h1{font-family:"Oswald","Inter",system-ui,sans-serif;font-size:22px;margin:0;letter-spacing:.4px;line-height:1.35}
h1 .frag{color:var(--acc)}
.brand{font-size:13px;color:var(--mut)} .brand b{color:var(--ink)} .brand .frag{color:var(--acc)}
.sub{color:var(--mut);font-size:13px}
.lede{color:var(--mut);font-size:13.5px;max-width:74ch;margin:10px 2px 16px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 18px;font-size:12px;color:var(--mut)}

/* ---- badges / chips / tags : une seule grammaire ---- */
.badge,.chip,.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  border:1px solid var(--line);background:#0d1b22;color:var(--mut);transition:border-color var(--ease),color var(--ease)}
.badge{margin:0 6px 6px 0} .chip{margin-left:4px}
.badge.ok,.chip.ok{color:var(--ok);border-color:#16402f;background:#0c2018}
.badge.warn,.chip.warn{color:var(--warn);border-color:#42330f;background:#211808}
.badge.acc,.chip.acc{color:var(--acc);border-color:#0d3a3d;background:#082426}
.tag{font-size:10.5px;padding:1px 7px;border-radius:6px;margin-left:8px}
.tag.update{color:var(--acc2);border-color:#3a2c7a}
.tag.primeAccess{color:var(--day);border-color:#5a4a12}
.tag.stream{color:var(--bad);border-color:#5a2030}

#banner{display:none;margin:0 0 16px;padding:10px 14px;border-radius:10px;
  background:#211808;border:1px solid #42330f;color:var(--warn);font-size:13px}

/* ---- cartes : élévation cohérente avec le reste du site (filet + ombre + survol doré) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-items:start}
/* Anti-CLS (10/07/2026) : #grid est vide au 1er rendu HTML, rempli en un seul
   passage JS (render(), ~11 cartes -> 7000-11000px selon l'etat du jeu et le
   viewport) une fois les donnees chargees -> le footer, juste apres, se
   retrouve pousse loin sous la ligne de flottaison. Mesure en CLS reel
   (PerformanceObserver, repete 3x, prod ET local) : ~0.19 (mobile et
   desktop), constant, pas du bruit publicitaire.
   Insight verifie empiriquement (900px a deja suffi en test, 1400px pour
   une marge sure sur tout appareil realiste) : la distance du decalage
   n'est PAS ce qui compte ici -- ce qui compte, c'est qu'un element ne
   contribue au CLS QUE s'il est visible dans le viewport a un moment du
   decalage. Des que #grid reserve plus que la hauteur du plus grand
   viewport realiste, le footer demarre DEJA hors-champ (jamais visible ni
   avant ni apres) -> sa contribution tombe a zero, sans avoir besoin
   d'egaler la hauteur finale reelle (tres variable, 7-11 Ko px selon le
   nombre de failles/invasions actives). CLS mesure 0.0000 apres ce
   correctif (desktop et mobile, 3 essais chacun). */
#grid{min-height:1400px}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--sh-soft);
  transition:border-color var(--ease),box-shadow var(--ease)}
.card:hover{border-color:rgba(226,192,90,.32);box-shadow:var(--sh)}
.card.wide{grid-column:1/-1}
.card h2{font-family:"Oswald","Inter",system-ui,sans-serif;font-size:12px;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--acc);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card h2 .n{color:var(--mut);font-weight:400;letter-spacing:0}
.card h2 .hub-ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.card.todoCard{grid-column:1/-1;border-color:#225;background:linear-gradient(180deg,#10182b,#0d1320)}

.row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed #16222d}
.row:first-of-type{border-top:0}
.row .k{color:var(--mut)} .row .v{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;
  background:#0d2a2c;color:var(--acc);border:1px solid #154}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--mut)}
.dot.day{background:var(--day)} .dot.night{background:var(--night)}
.dot.warm{background:var(--warm)} .dot.cold{background:var(--cold)}
.dot.fass{background:var(--warm)} .dot.vome{background:var(--acc2)}

.cyc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed #16222d}
.cyc:first-child{border-top:0}
.cyc .lbl{display:flex;align-items:center;gap:9px}
.cyc .state{font-weight:600}
.cyc .cd{font-variant-numeric:tabular-nums;color:var(--ink);min-width:84px;text-align:right}
.cyc .next{font-size:11px;color:var(--mut)}
.big{font-size:15px}
.countdown{font-variant-numeric:tabular-nums;font-weight:600}
.countdown.soon{color:var(--warn)} .countdown.live{color:var(--ok)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--mut);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;padding:0 0 6px;border-bottom:1px solid var(--line)}
td{padding:5px 0;border-top:1px dashed #16222d;vertical-align:middle}
td.r,th.r{text-align:right}
table.cmp th,table.cmp td{padding:6px 8px;border-top:1px dashed #16222d;text-align:left;vertical-align:top}
table.cmp thead th{color:var(--acc);border-top:0;font-size:12px}
table.cmp tbody th{color:var(--mut);font-weight:500;white-space:nowrap}
table.cmp td.win{color:var(--ok);font-weight:600}

.bar{height:7px;border-radius:999px;background:#0c1822;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.tierTag{display:inline-block;min-width:54px;text-align:center;padding:1px 7px;border-radius:6px;
  font-size:11px;border:1px solid var(--line);color:var(--ink)}
.tier-Lith{background:#1a2a14;border-color:#2c5} .tier-Meso{background:#10222b;border-color:#2aa}
.tier-Neo{background:#241a2b;border-color:#a6f} .tier-Axi{background:#2b2410;border-color:#fc4}
.tier-Requiem{background:#2b1020;border-color:#f6a} .tier-Omnia{background:#102b1f;border-color:#3da}
.sp{color:var(--warn);font-weight:600}

.controls{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.controls input,.controls select,.controls button{
  background:#0c1620;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px}
.controls button{cursor:pointer} .controls button:hover,.chip.on{border-color:var(--acc);color:var(--acc)}
.chip{cursor:pointer;user-select:none}

.trend.up{color:var(--bad)} .trend.down{color:var(--ok)} .trend.flat{color:var(--mut)}
.alert{outline:1px solid var(--warn);outline-offset:-1px}
.spark{vertical-align:middle}

.news{display:flex;flex-direction:column;gap:0}
.news .it{display:flex;gap:12px;padding:10px 0;border-top:1px dashed #16222d}
.news .it:first-child{border-top:0}
.news .when{color:var(--mut);font-size:12px;min-width:78px;white-space:nowrap}

footer{color:var(--mut);font-size:12px;margin:22px 2px 8px;line-height:1.7}
/* Cible tactile (07/2026, WCAG 2.5.8) : liens nus (~15px de haut, compagnon.html
   uniquement -- footer + nav.share de partage), sous 24x24. Meme trucage que les
   autres liens en texte courant du site (inline-block + marge negative). */
footer a{display:inline-block;padding:6px 4px;margin:-6px -4px;min-width:24px;text-align:center}
.muted,.mut{color:var(--mut)} .nowrap{white-space:nowrap}

/* ---- barre outils ---- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 2px 16px}
.toolbar a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),var(--card2));color:var(--ink);font-size:13px;font-weight:500;
  transition:border-color var(--ease),color var(--ease)}
.toolbar a:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
.toolbar a .em{font-size:15px;line-height:1}
.toolbar button{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),var(--card2));color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.toolbar button:hover,.toolbar button[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}

#notifPanel{margin:0 2px 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--card),var(--card2))}
#notifPanel[hidden]{display:none}
#notifPanel .ttl{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--acc);margin:0 0 4px}
#notifPanel .lead{font-size:12px;color:var(--mut);margin:0 0 8px}
#notifPanel label{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;cursor:pointer}
#notifPanel input[type=checkbox]{width:16px;height:16px;accent-color:var(--acc)}
#notifPanel .note{margin-top:8px;font-size:11.5px;color:var(--mut)}
#notifPanel .note.bad{color:var(--warn)}
.share{margin-top:10px;font-size:12px;color:var(--mut)}

.todo{display:flex;flex-direction:column;gap:0}
.todoit{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px dashed #1b2740}
.todoit:first-child{border-top:0}
.todoit .ti{font-size:17px;line-height:1;width:22px;text-align:center;flex:0 0 auto}
.todoit .tt{flex:1 1 auto;min-width:0}
.todoit .tt b{color:var(--ink)}
.todoit .when{color:var(--mut);font-size:12px;white-space:nowrap;flex:0 0 auto}
.plat{color:var(--acc)}

/* ---- faq : sommaire + questions/réponses ---- */
nav.toc{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 16px;font-size:13px;margin-bottom:18px}
nav.toc b{color:var(--acc);font-size:12px;text-transform:uppercase;letter-spacing:1.2px}
nav.toc ol{margin:8px 0 0;padding-left:20px;columns:2;column-gap:24px}
nav.toc li{margin:3px 0;break-inside:avoid}
/* Cible tactile (07/2026, WCAG 2.5.8) : lien nu ~16px de haut (13px sur nav.toc), sous
   24x24 -- 19 liens sur cette seule page (faq.html/faq-en.html). display:block remplit
   le <li> (colonne CSS, un lien par ligne) : plus simple et plus large que le trucage
   marge negative utilise pour du texte courant. */
nav.toc li a{display:block;padding:6px 4px;margin:-6px -4px}
@media (max-width:560px){ nav.toc ol{columns:1} }
article.qa{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;margin:0 0 14px}
article.qa h2{font-family:"Oswald","Inter",system-ui,sans-serif;font-size:16px;margin:0 0 8px;color:var(--ink);line-height:1.4}
article.qa h2 a{color:inherit}
article.qa p{margin:0 0 8px}
article.qa p:last-child{margin-bottom:0}
.a1{font-weight:600}
.tool{font-size:12.5px;color:var(--mut);border-top:1px dashed #16222d;padding-top:8px;margin-top:10px}
.tool a{white-space:nowrap}
.src{font-size:11.5px;color:var(--mut)}
.term{font-style:normal}

/* ---- compagnon : recherche, comparateur, favoris ---- */
.field{display:flex;gap:8px;margin:4px 0 6px;position:relative}
input[type=text]{flex:1;background:#0c151d;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 12px;font-size:15px;transition:border-color var(--ease)}
input[type=text]:focus{outline:none;border-color:var(--acc)}
button{background:#0d2a2c;color:var(--acc);border:1px solid #154;border-radius:10px;
  padding:10px 16px;font-size:14px;cursor:pointer;transition:background var(--ease)} button:hover{background:#103438}
.big{font-size:30px;font-weight:700;color:var(--ok)}
.safe{margin:14px 0 18px;padding:10px 14px;border-radius:10px;background:#0c2018;border:1px solid #16402f;color:var(--ok);font-size:13px}
.ex{font-size:12px;color:var(--mut);margin-top:6px} .ex a{cursor:pointer}
.sect{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sect h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--acc2);margin:0 0 8px}
.comp{padding:7px 0;border-top:1px dashed #16222d} .comp:first-child{border-top:0}
.comp .nm{font-weight:600} .comp .src{color:var(--mut);font-size:12.5px;margin-top:2px}
.duc{color:var(--warn);font-size:12px}
.vault{margin:8px 0;padding:9px 12px;border-radius:10px;background:#211808;border:1px solid #42330f;color:var(--warn);font-size:12.5px}
.vbox{margin-top:8px;padding:9px 12px;border-radius:10px;background:#0d1b22;border:1px solid var(--line);font-size:13px}
.vbox.ok{background:#0c2018;border-color:#16402f;color:var(--ok)}
.src .chip{margin:2px 4px 0 0}
.watchbtn{margin-top:10px;background:#0c1620;color:var(--mut);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:13px;cursor:pointer}
.watchbtn:hover{border-color:var(--acc);color:var(--acc)} .watchbtn.on{color:var(--day);border-color:#5a4a12;background:#1a1606}
.rmw{background:none;border:0;color:var(--mut);cursor:pointer;font-size:13px;padding:0 4px;margin-left:8px} .rmw:hover{color:var(--bad)}
.cmp2{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.cmp2 input{flex:1;min-width:130px}
.cmp2 .vs{color:var(--mut);font-size:13px}
.ac{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:#0c151d;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5);display:none}
.ac.on{display:block} .ac .opt{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;border-top:1px solid #111c25}
.ac .opt:first-child{border-top:0} .ac .opt:hover,.ac .opt.sel{background:#10222b} .ac .opt .ty{color:var(--mut);font-size:11.5px}

@media (max-width:520px){
  body{padding:14px} h1{font-size:19px} .grid{gap:11px}
  .todoit{flex-wrap:wrap} .todoit .when{flex-basis:100%;padding-left:33px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Transitions de page douces (16/07/2026) : même opt-in CSS pur que pandaahh.css /
   style.css (09/07) — le passage hub <-> reste du site fond au lieu de flasher.
   Ignoré silencieusement par les navigateurs sans View Transitions cross-document. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}