/* ===== The Great Codex — feuille de style principale =====
   Extraite du monolithe index.html (audit §3, v1.21.2). Aucun changement de regle :
   le contenu est repris tel quel, seul son emplacement change.

   ⚠️ Beaucoup de blocs sont scopes par faction — body[data-faction="stormcast|skaven|
   sylvaneth"] — pour les tuiles, bannieres et marbres. Ne pas les casser.

   Cache-busting : index.html reference ce fichier avec ?v=<APP_VERSION>. Les deux DOIVENT
   rester alignes ; tools/verif/check-index.js le verifie et echoue sinon. */
  :root{
    --bg:#070a14; --panel:#10182b; --panel2:#182238; --border:#33405f; --border-gold:#7a6428;
    --gold:#c9a227; --gold2:#ecd384; --gold3:#8a7430; --blue:#4f7fc4; --azure:#2c4a7c;
    --text:#e9edf6; --muted:#8c97b3; --ok:#5fbf77; --warn:#e0a23c; --bad:#e06c5c;
    --serif:"Cinzel",serif; --body:"Alegreya Sans","Segoe UI",sans-serif;
  }
  /* ===== Skin Skaven (pierre, laiton terni, malepierre en lueur) =====
     Palette RELEVEE SUR LA BANNIERE, pas choisie a vue. Echantillonnage des zones
     (moyenne des pixels les plus lumineux, pour capter la matiere et non l'ombre) :
     titre #989660, embleme #908e87, pilier #555635, laiton #9b936f, eclairs #989f6e,
     nuees #313a2a, dallage #363b29. Tout y est desature — c'est une scene de PIERRE
     et de LAITON dans une brume verdatre, pas une scene verte.
     ⚠️ D'ou l'abandon du vert vif d'origine (#8ac53d en accent, #c2f255 en eclat) :
     il ne se retrouvait nulle part dans l'image et faisait jurer l'interface avec
     son propre en-tete. Le vert malepierre subsiste, mais en LUEUR seulement
     (halos, ombres portees), jamais en couleur d'interface. Ne pas le repromouvoir
     en accent en croyant « raviver » la faction. */
  body[data-faction="skaven"]{
    --bg:#080a06; --panel:#15170f; --panel2:#1f221a; --border:#3a3e30; --border-gold:#6e6f55;
    --gold:#9b936f; --gold2:#c4bc95; --gold3:#6a664b; --blue:#7e8a6a; --azure:#2b3024;
    --text:#e4e4d6; --muted:#9a9a86; --ok:#8fa86a; --warn:#c9a94a; --bad:#c0664a;
    background:radial-gradient(ellipse 90% 45% at 50% -8%, rgba(152,159,110,.10), transparent 60%), linear-gradient(180deg,#0b0d09,#050605);
  }
  body[data-faction="skaven"] #appTitle{ text-shadow:0 0 16px rgba(152,159,110,.42); }
  body[data-faction="skaven"] #appSigil{ filter:drop-shadow(0 0 8px rgba(152,159,110,.45)); }
  body[data-faction="skaven"] .home-card:hover{ box-shadow:0 0 16px rgba(155,147,111,.22); }
  /* --- Bannière Skaven : enlève l'imagerie Stormcast (or/bleu/frise/colonnes) --- */
  body[data-faction="skaven"] header{
    background:
      radial-gradient(ellipse 72% 120% at 50% -22%, rgba(152,159,110,.22), transparent 60%),
      radial-gradient(ellipse 36% 55% at 50% 118%, rgba(106,102,75,.12), transparent 70%),
      linear-gradient(180deg,#191c12 0%,#101208 55%,#070806 100%);
    border-bottom:2px solid #6e6f55;
    box-shadow:0 10px 40px rgba(0,0,0,.6), inset 0 -1px 0 rgba(196,188,149,.18);
  }
  body[data-faction="skaven"] header h1{
    background:linear-gradient(180deg,#efe8c8 0%,#c4bc95 30%,#9b936f 56%,#5d5941 74%,#d4cba4 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(150,225,60,.5));
  }
  body[data-faction="skaven"] header .sub{ color:#a8a68c; }
  /* --- Ornements Skaven : liséré dents + éclats malepierre + colonnes --- */
  body[data-faction="skaven"] .frieze{
    display:block; height:12px; opacity:.85; border:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 1 L4 10 L8 1 L12 10 L16 1 L20 10 L24 1' fill='none' stroke='%239b936f' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat:repeat-x; background-position:center;
    filter:drop-shadow(0 0 3px rgba(196,188,149,.40));
  }
  body[data-faction="skaven"] .hdr-sym{
    font-size:0; display:inline-block; width:62px; height:16px; vertical-align:middle;
    background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='16' viewBox='0 0 62 16'%3E%3Cg stroke='%236a664b' stroke-width='1'%3E%3Cpath d='M9 8 L13 3 L17 8 L13 13 Z' fill='%239b936f'/%3E%3Cpath d='M25 8 L31 1 L37 8 L31 15 Z' fill='%23c4bc95'/%3E%3Cpath d='M45 8 L49 3 L53 8 L49 13 Z' fill='%239b936f'/%3E%3C/g%3E%3C/svg%3E");
  }
  body[data-faction="skaven"] header::before,
  body[data-faction="skaven"] header::after{
    content:""; position:absolute; bottom:0; width:72px; height:90%; opacity:.5; pointer-events:none; z-index:0;
    background:bottom center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='300' viewBox='0 0 74 300'%3E%3Cpath d='M14 24 L22 8 L32 18 L42 6 L52 18 L60 12 L60 300 L14 300 Z' fill='%23232418' stroke='%236a664b' stroke-width='2'/%3E%3Cg stroke='%239b936f' stroke-width='1.4' opacity='.65' fill='none'%3E%3Cpath d='M30 46 L26 96 L34 150 L28 210 L33 280'/%3E%3Cpath d='M46 36 L50 110 L44 180 L49 260'/%3E%3C/g%3E%3Cpath d='M22 130 L26 122 L30 130 L26 138 Z' fill='%23c4bc95'/%3E%3Cpath d='M44 206 L48 198 L52 206 L48 214 Z' fill='%23c4bc95'/%3E%3C/svg%3E");
  }
  body[data-faction="skaven"] header::before{ left:12px; }
  body[data-faction="skaven"] header::after{ right:12px; transform:scaleX(-1); }
  body[data-faction="skaven"] .col-deco{ display:none; }

  /* ===== Skin Sylvaneth (forêt / lianes) ===== */
  body[data-faction="sylvaneth"]{
    --bg:#05100a; --panel:#0d1c12; --panel2:#15291b; --border:#2e4e33; --border-gold:#5f8438;
    --gold:#9cc24a; --gold2:#e2f2ab; --gold3:#5a7d30; --blue:#7bb648; --azure:#234019;
    --text:#e9f2dc; --muted:#93a87f; --ok:#7fc55f; --warn:#d9b23c; --bad:#d96b4b;
    background:radial-gradient(ellipse 90% 45% at 50% -8%, rgba(156,194,74,.13), transparent 60%), linear-gradient(180deg,#091509,#04090a);
  }
  body[data-faction="sylvaneth"] #appTitle{ text-shadow:0 0 16px rgba(156,194,74,.45); }
  body[data-faction="sylvaneth"] #appSigil{ filter:drop-shadow(0 0 12px rgba(156,210,80,.6)); transform:scale(1.06); }
  body[data-faction="sylvaneth"] .home-card:hover{ box-shadow:0 0 16px rgba(156,194,74,.22); }
  body[data-faction="sylvaneth"] header{
    background:
      radial-gradient(ellipse 70% 120% at 50% -22%, rgba(156,194,74,.26), transparent 60%),
      radial-gradient(ellipse 40% 60% at 50% 120%, rgba(90,125,48,.16), transparent 70%),
      linear-gradient(180deg,#13230f 0%,#0e1a0b 55%,#060d07 100%);
    border-bottom:2px solid #5f8438;
    box-shadow:0 10px 40px rgba(0,0,0,.6), inset 0 -1px 0 rgba(156,210,80,.18);
  }
  body[data-faction="sylvaneth"] header h1{
    background:linear-gradient(180deg,#f0f7c6 0%,#d2e89a 28%,#9cc24a 56%,#5a7d30 76%,#cfe89a 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(156,210,80,.45));
  }
  body[data-faction="sylvaneth"] header .sub{ color:#9fb27a; }
  body[data-faction="sylvaneth"] .frieze{
    display:block; height:15px; opacity:.9; border:0;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'46'%20height%3D'15'%20viewBox%3D'0%200%2046%2015'%3E%3Cpath%20d%3D'M0%208%20Q11%201%2023%208%20T46%208'%20fill%3D'none'%20stroke%3D'%238fbf45'%20stroke-width%3D'1.6'%2F%3E%3Cg%20transform%3D'translate(11%207)%20rotate(-38)%20scale(0.62)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%23b9d36a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(35%209)%20rotate(150)%20scale(0.62)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%239cc24a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'23'%20cy%3D'8'%20r%3D'1.6'%20fill%3D'%23d8b24a'%2F%3E%3C%2Fsvg%3E");
    background-repeat:repeat-x; background-position:center;
    filter:drop-shadow(0 0 3px rgba(140,200,70,.4));
  }
  body[data-faction="sylvaneth"] .hdr-sym{
    font-size:0; display:inline-block; width:66px; height:18px; vertical-align:middle;
    background:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'66'%20height%3D'18'%20viewBox%3D'0%200%2066%2018'%3E%3Cg%20transform%3D'translate(2%209)%20rotate(-12)%20scale(0.8)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%239cc24a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(33%209)'%3E%3Ccircle%20r%3D'3'%20fill%3D'%23d8b24a'%20stroke%3D'%23264018'%20stroke-width%3D'0.8'%2F%3E%3Cpath%20d%3D'M0%20-3%20V-7%20M0%203%20V7%20M-3%200%20H-7%20M3%200%20H7'%20stroke%3D'%238fbf45'%20stroke-width%3D'1.4'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(50%209)%20rotate(168)%20scale(0.8)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%23b9d36a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  body[data-faction="sylvaneth"] header::before,
  body[data-faction="sylvaneth"] header::after{
    content:""; position:absolute; bottom:0; width:74px; height:94%; opacity:.62; pointer-events:none; z-index:0;
    background:bottom center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'76'%20height%3D'300'%20viewBox%3D'0%200%2076%20300'%3E%3Cpath%20d%3D'M48%20-6%20C26%2036%2066%2070%2044%20112%20C24%20152%2062%20188%2042%20230%20C28%20262%2054%20286%2046%20306'%20fill%3D'none'%20stroke%3D'%23264018'%20stroke-width%3D'7'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M48%20-6%20C26%2036%2066%2070%2044%20112%20C24%20152%2062%20188%2042%20230%20C28%20262%2054%20286%2046%20306'%20fill%3D'none'%20stroke%3D'%238fbf45'%20stroke-width%3D'2.6'%20opacity%3D'0.85'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M52%206%20C72%2044%2036%2080%2056%20120%20C72%20160%2040%20196%2058%20238%20C66%20262%2050%20282%2054%20300'%20fill%3D'none'%20stroke%3D'%2333571f'%20stroke-width%3D'1.6'%20opacity%3D'0.7'%2F%3E%3Cpath%20d%3D'M46%20292%20c-10%202%20-14%20-8%20-7%20-13%20c5%20-3%2011%201%208%207'%20fill%3D'none'%20stroke%3D'%238fbf45'%20stroke-width%3D'1.8'%20opacity%3D'0.8'%2F%3E%3Cg%20transform%3D'translate(40%2040)%20rotate(-150)%20scale(1.15)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%239cc24a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(54%2074)%20rotate(-18)%20scale(1.05)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%23b9d36a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(34%20112)%20rotate(158)%20scale(1.2)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%239cc24a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(56%20150)%20rotate(-12)%20scale(1)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%23b9d36a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(36%20190)%20rotate(150)%20scale(1.15)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%239cc24a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(54%20228)%20rotate(-20)%20scale(1.05)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%23b9d36a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(40%20262)%20rotate(160)%20scale(1)'%3E%3Cpath%20d%3D'M0%200%20C3%20-5%2011%20-5%2016%200%20C11%205%203%205%200%200%20Z'%20fill%3D'%239cc24a'%20stroke%3D'%23264018'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M2%200%20H13'%20stroke%3D'%23264018'%20stroke-width%3D'0.7'%20opacity%3D'0.8'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'50'%20cy%3D'96'%20r%3D'2.4'%20fill%3D'%23d8b24a'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'170'%20r%3D'2.2'%20fill%3D'%23d8b24a'%2F%3E%3C%2Fsvg%3E");
  }
  body[data-faction="sylvaneth"] header::before{ left:10px; }
  body[data-faction="sylvaneth"] header::after{ right:10px; transform:scaleX(-1); }
  body[data-faction="sylvaneth"] .col-deco{ display:none; }

  /* ===== Skaven : banniere pleine largeur, 3840x872 (ratio 4,404) =====
     Nouvelle banniere de Vincent (1983x793), fournie avec 84 px de bandes noires en
     haut et en bas. Bandes rognees, puis recadrage vertical centre a 4,404:1 : servi
     brut, le contenu fait 3,17:1, soit un en-tete de 605 px sur un 24 pouces — plus
     de 60 % de la hauteur utile. Le recadrage retire du ciel et du dallage, garde les
     deux figures, l'embleme et le titre. 4,404 est exactement le ratio des Esclaves
     des Tenebres : ce n'est pas un hasard, c'est la borne haute deja admise dans
     l'application. */
  body[data-faction="skaven"] header{
    background:#000 center/cover no-repeat url("images/aos/skaven/skaven-banner-v2.jpg");
    width:100%; aspect-ratio:3840/872; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    box-shadow:none;
  }
  body[data-faction="skaven"] .hdr-inner,
  body[data-faction="skaven"] .frieze,
  body[data-faction="skaven"] header::before,
  body[data-faction="skaven"] header::after{ display:none !important; }

  /* ===== Stormcast : banniere pleine largeur, 2804x561 (ratio 4,998) =====
     Redessinee par Vincent. `aspect-ratio` du fichier, donc banniere entiere a toute
     largeur : sa frise grecque court sur les quatre bords, un recadrage l'entamerait.
     ⚠️ 2804 px de large, pas 3840 : sur un 32 pouces 4K non mis a l'echelle elle est
     agrandie x1,37. Acceptable, mais c'est la seule des banneres « entieres » qui ne
     soit pas native a la largeur maximale.
     ⚠️ Suffixe `-v2` : IMG_CACHE n'est pas versionne (v1.23.4). */
  body[data-faction="stormcast"] header{
    background:#000 center/cover no-repeat url("images/aos/stormcast/stormcast-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    box-shadow:none;
  }
  body[data-faction="stormcast"] .hdr-inner,
  body[data-faction="stormcast"] .frieze,
  body[data-faction="stormcast"] .col-deco{ display:none !important; }

  /* ===== Sylvaneth : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="sylvaneth"] header{
    background:#000 center/cover no-repeat url("images/aos/sylvaneth/sylvaneth-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    box-shadow:none;
  }
  body[data-faction="sylvaneth"] .hdr-inner,
  body[data-faction="sylvaneth"] .frieze,
  body[data-faction="sylvaneth"] .col-deco,
  body[data-faction="sylvaneth"] header::before,
  body[data-faction="sylvaneth"] header::after{ display:none !important; }


  /* ===== Cinq factions qui n'avaient aucune banniere. Traitement MINIMAL : l'image
     et le masquage du titre, pas de skin complet (couleurs, tuiles, marbres). Elles
     gardent donc la palette par defaut ; c'est volontaire, pas un travail a moitie. ===== */

  /* ===== Filles de Khaine : banniere pleine largeur, 3840x666 (ratio 5,766) ===== */
  body[data-faction="dok"] header{
    background:#000 center/cover no-repeat url("images/aos/dok/dok-banner-v3.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #a4232c;
    box-shadow:none;
  }
body[data-faction="dok"] .hdr-inner,
body[data-faction="dok"] .frieze,
body[data-faction="dok"] .col-deco{ display:none !important; }

  /* ===== Cours de Mangechairs : banniere pleine largeur, 3840x669 (ratio 5,740) ===== */
  body[data-faction="fec"] header{
    background:#000 center/cover no-repeat url("images/aos/fec/fec-banner-v3.jpg");
    width:100%; aspect-ratio:1774/403; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #9aa64a;
    box-shadow:none;
  }
body[data-faction="fec"] .hdr-inner,
body[data-faction="fec"] .frieze,
body[data-faction="fec"] .col-deco{ display:none !important; }

  /* ===== Skin COMPLET Clans Orruk (5e skin complet, apres stormcast/skaven/
     sylvaneth/slaves/helsmiths). Palette RELEVEE SUR LA BANNIERE, pas choisie a
     vue — echantillonnage par zones de orruk-banner-v3.jpg : drapeaux ocre
     #a57825, parchemin du cadre #b8af89 (17 225 px, la matiere dominante),
     oranges #825520, bruns d'ombre #16130c. ⚠️ PAS de vert vif : la peau orque
     de cette banniere est desaturee (#4c4c37, 5 px a peine) — c'est une scene
     de PARCHEMIN et d'OCRE, la meme lecon que le skin Skaven. ===== */
  body[data-faction="orruk"]{
    --bg:#0a0806; --panel:#1b1710; --panel2:#262015; --border:#4a4130; --border-gold:#7a683a;
    --gold:#a57825; --gold2:#d8d0b2; --gold3:#6e5a2a; --blue:#9a8a55; --azure:#4a3f22;
    --text:#e8e3d2; --muted:#a89f86; --ok:#8fae6a; --warn:#c9a94a; --bad:#c0664a;
  }
  body[data-faction="orruk"] #appTitle{ text-shadow:0 0 16px rgba(184,175,137,.42); }
  body[data-faction="orruk"] #appSigil{ filter:drop-shadow(0 0 8px rgba(165,120,37,.5)); }
  /* .card et .stat-card portent des degrades bleu nuit EN DUR (pas des variables) :
     chaque skin complet les surcharge — modele sobre des Slaves, teinte banniere. */
  body[data-faction="orruk"] .card{ background:linear-gradient(180deg, rgba(63,58,41,.55), rgba(22,19,12,.92)); }
  body[data-faction="orruk"] .card:hover{ border-color:#7a683a; }
  body[data-faction="orruk"] .stat-card{ background:linear-gradient(180deg,rgba(74,65,48,.8),rgba(22,19,12,.9)); }
  body[data-faction="orruk"] .ws-stat{ background:linear-gradient(180deg,rgba(74,65,48,.85),rgba(22,19,12,.95)); }
  body[data-faction="orruk"] select,
  body[data-faction="orruk"] input[type=text],
  body[data-faction="orruk"] input[type=number]{ background:#14100b; }

  /* ===== Clans Guerriers Orruks : banniere pleine largeur, 3840x665 (ratio 5,774) ===== */
  body[data-faction="orruk"] header{
    background:#000 center/cover no-repeat url("images/aos/orruk/orruk-banner-v3.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #6b9a3a;
    box-shadow:none;
  }
body[data-faction="orruk"] .hdr-inner,
body[data-faction="orruk"] .frieze,
body[data-faction="orruk"] .col-deco{ display:none !important; }

  /* ===== Clans Orruk : pack complet de Vincent (fond + icones de menu) =====
     Memes mecanismes que Slaves to Darkness : icones raster 256x256 en palette
     adaptative a la place des silhouettes SVG, et fond de page dedie. Le fond
     est la texture pierre fond-touche.jpg (fournie par Vincent, repetee — elle
     est assez uniforme pour ne pas montrer ses raccords) ; fond.png du pack est
     arrive DEUX FOIS tronque a l'identique : le fichier source est corrompu sur
     son disque, a reexporter. fond-menu.jpg et fond-clair.jpg en variantes. */
  body[data-faction="orruk"]{
    background:linear-gradient(180deg,rgba(6,8,4,.35),rgba(4,5,3,.55)),url("images/aos/orruk/fond-touche.jpg") repeat fixed #14100b;
  }
  body[data-faction="orruk"] .home-card .hc-i{ width:56px; height:56px; background:center/contain no-repeat;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); transition:transform .15s ease, filter .15s ease; }
  body[data-faction="orruk"] .home-card .hc-i svg{ display:none; }
  body[data-faction="orruk"] .home-card:hover .hc-i{ transform:scale(1.08);
    filter:drop-shadow(0 0 13px rgba(122,186,60,.65)); }
  body[data-faction="orruk"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/orruk/menu-codex.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/orruk/menu-armies.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/orruk/menu-pool.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/orruk/menu-gallery.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/orruk/menu-stats.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/orruk/menu-buy.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/orruk/menu-regles.png"); }
  body[data-faction="orruk"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/orruk/menu-reglages.png"); }
  /* Tuiles teintées aux couleurs de la banniere (palette extraite de
     orruk-banner-v3.jpg : bruns terreux #3f3a29/#16130c, lisere parchemin
     #bcb490) — le bleu nuit par defaut jurait avec le parchemin du cadre. */
  body[data-faction="orruk"] .home-card{
    background:linear-gradient(180deg, rgba(63,58,41,.72), rgba(22,19,12,.93));
    border-color:#5a4d31; border-top-color:#bcb490;
  }
  body[data-faction="orruk"] .home-card:hover{
    border-color:#bcb490;
    box-shadow:0 0 18px rgba(188,180,144,.30);
  }
  body[data-faction="orruk"] .home-card .hc-t{ color:#d8d0b2; }

  /* ===== Skin COMPLET Hantenuits (7e, apres les Clans Orruk). Palette RELEVEE
     SUR LA BANNIERE par zones : sarcelle spectrale #34716b (2 787 px), spectres
     pales #a6ccc1, ombres abyssales #0a1515 (la matiere dominante, 53 760 px).
     Ici le "gold" de l'interface DEVIENT la sarcelle : c'est une scene d'ombre
     et de lueur froide, aucun or n'y existe. ===== */
  body[data-faction="nighthaunt"]{
    --bg:#060d0d; --panel:#0e1b1b; --panel2:#152525; --border:#28423f; --border-gold:#3f6b64;
    --gold:#4f9a8f; --gold2:#a6ccc1; --gold3:#2b524c; --blue:#5f8f96; --azure:#1c3a3c;
    --text:#dfeae6; --muted:#8fa5a0; --ok:#7fae8a; --warn:#c9a94a; --bad:#c0664a;
  }
  body[data-faction="nighthaunt"] #appTitle{ text-shadow:0 0 16px rgba(166,204,193,.45); }
  body[data-faction="nighthaunt"] #appSigil{ filter:drop-shadow(0 0 8px rgba(63,176,168,.55)); }
  body[data-faction="nighthaunt"] .card{ background:linear-gradient(180deg, rgba(21,37,37,.60), rgba(7,19,20,.93)); }
  body[data-faction="nighthaunt"] .card:hover{ border-color:#3f6b64; }
  body[data-faction="nighthaunt"] .stat-card{ background:linear-gradient(180deg,rgba(30,52,50,.8),rgba(7,19,20,.9)); }
  body[data-faction="nighthaunt"] .ws-stat{ background:linear-gradient(180deg,rgba(30,52,50,.85),rgba(7,19,20,.95)); }
  body[data-faction="nighthaunt"] select,
  body[data-faction="nighthaunt"] input[type=text],
  body[data-faction="nighthaunt"] input[type=number]{ background:#0a1515; }

  /* Pack Hantenuits de Vincent (fond + icones de menu), memes mecanismes que
     Slaves/Orruk : icones raster 256x256 en palette adaptative a la place des
     silhouettes SVG, fond.jpg (variante sombre recommandee du pack, saine cette
     fois) sous un voile degrade ; fond-menu.jpg et fond-clair.jpg en variantes. */
  body[data-faction="nighthaunt"]{
    background:linear-gradient(180deg,rgba(4,9,9,.45),rgba(3,7,7,.72)),url("images/aos/nighthaunt/fond.jpg") center/cover no-repeat fixed #060d0d;
  }
  body[data-faction="nighthaunt"] .home-card .hc-i{ width:56px; height:56px; background:center/contain no-repeat;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); transition:transform .15s ease, filter .15s ease; }
  body[data-faction="nighthaunt"] .home-card .hc-i svg{ display:none; }
  body[data-faction="nighthaunt"] .home-card:hover .hc-i{ transform:scale(1.08);
    filter:drop-shadow(0 0 13px rgba(63,176,168,.65)); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-codex.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-armies.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-pool.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-gallery.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-stats.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-buy.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-regles.png"); }
  body[data-faction="nighthaunt"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/nighthaunt/menu-reglages.png"); }

  /* ===== Hantenuits : banniere pleine largeur, 3840x700 (ratio 5,486) ===== */
  body[data-faction="nighthaunt"] header{
    background:#000 center/cover no-repeat url("images/aos/nighthaunt/nighthaunt-banner-v3.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #3fb0a8;
    box-shadow:none;
  }
body[data-faction="nighthaunt"] .hdr-inner,
body[data-faction="nighthaunt"] .frieze,
body[data-faction="nighthaunt"] .col-deco{ display:none !important; }

  /* ===== Séraphons : banniere pleine largeur, 3840x665 (ratio 5,774) ===== */
  body[data-faction="seraphon"] header{
    background:#000 center/cover no-repeat url("images/aos/seraphon/seraphon-banner-v3.jpg");
    width:100%; aspect-ratio:2172/493; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #3fa66b;
    box-shadow:none;
  }
body[data-faction="seraphon"] .hdr-inner,
body[data-faction="seraphon"] .frieze,
body[data-faction="seraphon"] .col-deco{ display:none !important; }


  /* ===== Cites de Sigmar : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="cities"] header{
    background:#000 center/cover no-repeat url("images/aos/cities/cities-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #b08d2f;
    box-shadow:none;
  }
body[data-faction="cities"] .hdr-inner,
body[data-faction="cities"] .frieze,
body[data-faction="cities"] .col-deco,
body[data-faction="cities"] header::before,
body[data-faction="cities"] header::after{ display:none !important; }

  /* ===== Magnats Kharadrons : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="kharadron"] header{
    background:#000 center/cover no-repeat url("images/aos/kharadron/kharadron-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #c9a14a;
    box-shadow:none;
  }
body[data-faction="kharadron"] .hdr-inner,
body[data-faction="kharadron"] .frieze,
body[data-faction="kharadron"] .col-deco,
body[data-faction="kharadron"] header::before,
body[data-faction="kharadron"] header::after{ display:none !important; }


  /* ===== Suzerains Lumineths : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="lumineth"] header{
    background:#000 center/cover no-repeat url("images/aos/lumineth/lumineth-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #d8c66a;
    box-shadow:none;
  }
body[data-faction="lumineth"] .hdr-inner,
body[data-faction="lumineth"] .frieze,
body[data-faction="lumineth"] .col-deco,
body[data-faction="lumineth"] header::before,
body[data-faction="lumineth"] header::after{ display:none !important; }


  /* ===== Abyssaux Idoneths : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="idoneth"] header{
    background:#000 center/cover no-repeat url("images/aos/idoneth/idoneth-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #2e8b8b;
    box-shadow:none;
  }
body[data-faction="idoneth"] .hdr-inner,
body[data-faction="idoneth"] .frieze,
body[data-faction="idoneth"] .col-deco,
body[data-faction="idoneth"] header::before,
body[data-faction="idoneth"] header::after{ display:none !important; }

  /* ===== Putrescents de Nurgle : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="nurgle"] header{
    background:#000 center/cover no-repeat url("images/aos/nurgle/nurgle-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #7a8a3a;
    box-shadow:none;
  }
body[data-faction="nurgle"] .hdr-inner,
body[data-faction="nurgle"] .frieze,
body[data-faction="nurgle"] .col-deco,
body[data-faction="nurgle"] header::before,
body[data-faction="nurgle"] header::after{ display:none !important; }

  /* ===== Pyrotueurs : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="fyreslayers"] header{
    background:#000 center/cover no-repeat url("images/aos/fyreslayers/fyreslayers-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #d97a2b;
    box-shadow:none;
  }
body[data-faction="fyreslayers"] .hdr-inner,
body[data-faction="fyreslayers"] .frieze,
body[data-faction="fyreslayers"] .col-deco,
body[data-faction="fyreslayers"] header::before,
body[data-faction="fyreslayers"] header::after{ display:none !important; }

  /* ===== Disciples de Tzeentch : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="tzeentch"] header{
    background:#000 center/cover no-repeat url("images/aos/tzeentch/tzeentch-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #3f7fd9;
    box-shadow:none;
  }
body[data-faction="tzeentch"] .hdr-inner,
body[data-faction="tzeentch"] .frieze,
body[data-faction="tzeentch"] .col-deco,
body[data-faction="tzeentch"] header::before,
body[data-faction="tzeentch"] header::after{ display:none !important; }


  /* ===== Fils de Behemat : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="sob"] header{
    background:#000 center/cover no-repeat url("images/aos/sob/sob-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #8a7a5a;
    box-shadow:none;
  }
body[data-faction="sob"] .hdr-inner,
body[data-faction="sob"] .frieze,
body[data-faction="sob"] .col-deco,
body[data-faction="sob"] header::before,
body[data-faction="sob"] header::after{ display:none !important; }

  /* ===== Collecteurs Ossiarques : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="obr"] header{
    background:#000 center/cover no-repeat url("images/aos/obr/obr-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #d9d3c0;
    box-shadow:none;
  }
body[data-faction="obr"] .hdr-inner,
body[data-faction="obr"] .frieze,
body[data-faction="obr"] .col-deco,
body[data-faction="obr"] header::before,
body[data-faction="obr"] header::after{ display:none !important; }

  /* ===== Hedonites de Slaanesh : banniere pleine largeur, 1774x403 (ratio 4,402) ===== */
  body[data-faction="slaanesh"] header{
    background:#000 center/cover no-repeat url("images/aos/slaanesh/slaanesh-banner-v2.jpg");
    width:100%; aspect-ratio:1774/403; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #c76bb5;
    box-shadow:none;
  }
body[data-faction="slaanesh"] .hdr-inner,
body[data-faction="slaanesh"] .frieze,
body[data-faction="slaanesh"] .col-deco,
body[data-faction="slaanesh"] header::before,
body[data-faction="slaanesh"] header::after{ display:none !important; }

  /* ===== Lames de Khorne : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="khorne"] header{
    background:#000 center/cover no-repeat url("images/aos/khorne/khorne-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #b03a2e;
    box-shadow:none;
  }
body[data-faction="khorne"] .hdr-inner,
body[data-faction="khorne"] .frieze,
body[data-faction="khorne"] .col-deco,
body[data-faction="khorne"] header::before,
body[data-faction="khorne"] header::after{ display:none !important; }

  /* ===== Hordegueules Ogors : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="ogor"] header{
    background:#000 center/cover no-repeat url("images/aos/ogor/ogor-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #c9975a;
    box-shadow:none;
  }
body[data-faction="ogor"] .hdr-inner,
body[data-faction="ogor"] .frieze,
body[data-faction="ogor"] .col-deco,
body[data-faction="ogor"] header::before,
body[data-faction="ogor"] header::after{ display:none !important; }

  /* ===== Seigneurs Ruinemanes : banniere pleine largeur, 2804x561 (ratio 4,998) ===== */
  body[data-faction="soulblight"] header{
    background:#000 center/cover no-repeat url("images/aos/soulblight/soulblight-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #7a2e4a;
    box-shadow:none;
  }
body[data-faction="soulblight"] .hdr-inner,
body[data-faction="soulblight"] .frieze,
body[data-faction="soulblight"] .col-deco,
body[data-faction="soulblight"] header::before,
body[data-faction="soulblight"] header::after{ display:none !important; }

  /* ===== Vils du Fielobscur : banniere pleine largeur, 1774x403 (ratio 4,402) ===== */
  body[data-faction="gloomspite"] header{
    background:#000 center/cover no-repeat url("images/aos/gloomspite/gloomspite-banner-v2.jpg");
    width:100%; aspect-ratio:1774/403; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid #7ac143;
    box-shadow:none;
  }
body[data-faction="gloomspite"] .hdr-inner,
body[data-faction="gloomspite"] .frieze,
body[data-faction="gloomspite"] .col-deco,
body[data-faction="gloomspite"] header::before,
body[data-faction="gloomspite"] header::after{ display:none !important; }

  *{box-sizing:border-box;margin:0;padding:0}
  body{
    color:var(--text);font-family:var(--body);min-height:100vh;font-size:15px;
    background:
      radial-gradient(ellipse 60% 40% at 50% -5%, rgba(79,127,196,.22), transparent 60%),
      radial-gradient(ellipse 40% 30% at 85% 10%, rgba(201,162,39,.08), transparent 60%),
      radial-gradient(ellipse 50% 60% at 10% 100%, rgba(44,74,124,.18), transparent 60%),
      linear-gradient(180deg,#0b1020 0%, #070a14 40%, #05070e 100%);
    background-attachment:fixed;
  }
  body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(1px 1px at 12% 22%, #cfe0ff 40%, transparent 60%),
      radial-gradient(1px 1px at 78% 8%, #ffffff 40%, transparent 60%),
      radial-gradient(1.5px 1.5px at 55% 15%, #e7d9a8 40%, transparent 60%),
      radial-gradient(1px 1px at 30% 6%, #cfe0ff 40%, transparent 60%),
      radial-gradient(1px 1px at 92% 30%, #cfe0ff 40%, transparent 60%),
      radial-gradient(1px 1px at 45% 55%, #cfe0ff 30%, transparent 60%),
      radial-gradient(1.5px 1.5px at 8% 70%, #e7d9a8 30%, transparent 60%);
  }
  /* ===== entête ===== */
  header{
    position:relative;padding:40px 28px 34px;overflow:hidden;text-align:center;
    background:
      radial-gradient(ellipse 75% 130% at 50% -25%, rgba(79,127,196,.38), transparent 62%),
      radial-gradient(ellipse 30% 50% at 12% 100%, rgba(201,162,39,.10), transparent 70%),
      radial-gradient(ellipse 30% 50% at 88% 100%, rgba(201,162,39,.10), transparent 70%),
      linear-gradient(180deg,#1c2845 0%,#131e38 55%,#0d1628 100%);
    border-bottom:2px solid var(--border-gold);
    box-shadow:0 10px 40px rgba(0,0,0,.55);
  }
  .frieze{position:absolute;left:0;right:0;height:14px;opacity:.85;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='14'%3E%3Cg%20fill='none'%20stroke='%23c9a227'%20stroke-width='2'%3E%3Cpath%20d='M2%2014%20V2%20H26%20V14'/%3E%3Cpath%20d='M8%2014%20V8%20H20%20V14'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat-x;}
  .frieze-top{top:6px}
  .frieze-bottom{bottom:6px;transform:scaleY(-1)}
  .col-deco{position:absolute;bottom:16px;width:88px;height:82%;opacity:.22;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%)}
  .col-l{left:22px}.col-r{right:22px}
  .hdr-inner{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
  .hdr-center{display:flex;flex-direction:column;align-items:center;gap:6px}
  .sigil{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(236,211,132,.55))}
  header h1{
    font-family:var(--serif);font-weight:900;font-size:1.8rem;letter-spacing:4px;text-transform:uppercase;
    background:linear-gradient(180deg,#fff3cf 0%,#f0d68a 30%,#c9a227 55%,#8a6c1a 72%,#eed27e 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  }
  .hdr-rule{display:flex;align-items:center;gap:10px;color:var(--gold);font-size:.8rem;letter-spacing:6px}
  .hdr-rule::before,.hdr-rule::after{content:"";width:110px;height:1px;background:linear-gradient(90deg,transparent,var(--gold2));}
  .hdr-rule::after{background:linear-gradient(90deg,var(--gold2),transparent)}
  header .sub{color:#a9b4cd;font-size:.78rem;letter-spacing:.8px}

  /* ===== navigation ===== */
  nav{display:flex;gap:10px;padding:22px 28px 0;max-width:1280px;margin:0 auto;flex-wrap:wrap;align-items:center}
  .nav-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  nav button{
    font-family:var(--serif);font-weight:700;letter-spacing:1px;font-size:.85rem;text-transform:uppercase;
    background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--muted);
    border:1px solid var(--border);border-bottom-color:var(--border-gold);
    padding:12px 26px;cursor:pointer;position:relative;
    clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    transition:color .15s, background .15s;
  }
  nav button:hover{color:var(--gold2)}
  nav button.active{
    background:linear-gradient(180deg,#2a3654,#1c2640);color:var(--gold2);
    border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,39,.25), inset 0 0 12px rgba(201,162,39,.12);
  }
  main{padding:20px 28px;max-width:1280px;margin:0 auto}
  .tab{display:none}.tab.active{display:block}
  /* ===== cartouches ===== */
  .card{
    background:linear-gradient(180deg, rgba(24,34,56,.7), rgba(16,24,43,.92));
    border:1px solid var(--border);border-top-color:var(--border-gold);
    padding:18px;margin-bottom:18px;position:relative;
    clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    box-shadow:0 8px 30px rgba(0,0,0,.35);
  }
  .card::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold2),transparent);opacity:.5}
  .card h2{
    font-family:var(--serif);font-weight:700;color:var(--gold2);font-size:1rem;margin-bottom:14px;
    letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:10px;
  }
  .card h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold3),transparent)}
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .dnd-row[draggable="true"]{cursor:grab}
  .dnd-row[draggable="true"]:active{cursor:grabbing}
  .dnd-target.dnd-over{outline:2px dashed var(--gold2);outline-offset:-5px;box-shadow:inset 0 0 0 3px rgba(201,162,39,.14)}
  select,input[type=text],input[type=number]{
    background:#0a101f;color:var(--text);border:1px solid var(--border);border-radius:0;
    padding:9px 10px;font-size:.9rem;font-family:var(--body);
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  }
  select:focus,input:focus{outline:1px solid var(--gold3)}
  input[type=number]{width:84px}
  button.btn{
    font-family:var(--serif);font-weight:700;letter-spacing:.8px;font-size:.78rem;text-transform:uppercase;
    background:linear-gradient(180deg,#f0d68a 0%,#c9a227 55%,#9b7c22 100%);color:#1a1408;
    border:1px solid #f6e7b2;padding:9px 16px;cursor:pointer;
    clip-path:polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
    text-shadow:0 1px 0 rgba(255,255,255,.3);
  }
  button.btn.sec{background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--gold2);border:1px solid var(--border-gold);text-shadow:none}
  button.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bad);text-shadow:none}
  button.btn:hover{filter:brightness(1.15)}
  /* ===== tables ===== */
  table{width:100%;border-collapse:collapse;font-size:.92rem}
  th{font-family:var(--serif);color:var(--gold);text-align:left;padding:8px;border-bottom:1px solid var(--border-gold);
     font-weight:700;font-size:.74rem;letter-spacing:1.2px;text-transform:uppercase}
  td{padding:9px 8px;border-bottom:1px solid rgba(51,64,95,.55);vertical-align:middle}
  tr:hover td{background:rgba(79,127,196,.08)}
  .pts{font-family:var(--serif);color:var(--gold2);font-weight:700;white-space:nowrap}
  .eur-cell{font-family:var(--body);font-weight:600;font-size:.8rem;color:var(--blue);margin-top:2px}
  .muted{color:var(--muted);font-size:.82rem}
  .badge{display:inline-block;padding:3px 10px;font-size:.74rem;font-weight:600;white-space:nowrap;
    clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
  /* ===== barre de total ===== */
  .total-bar{
    position:sticky;top:0;z-index:5;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;
    margin-bottom:16px;flex-wrap:wrap;gap:10px;
    background:linear-gradient(180deg,#222e4c,#141d33);border:1px solid var(--gold3);
    clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    box-shadow:0 0 24px rgba(201,162,39,.15), 0 8px 24px rgba(0,0,0,.4);
  }
  .total-bar .big{font-family:var(--serif);font-size:1.3rem;font-weight:900;color:var(--gold2);letter-spacing:1px}
  .progress{height:10px;background:#0a101f;overflow:hidden;flex:1;min-width:120px;border:1px solid var(--border);
    clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
  .progress>div{height:100%;background:linear-gradient(90deg,var(--azure),var(--blue) 60%,var(--gold2));box-shadow:0 0 10px rgba(236,211,132,.5)}
  /* ===== stats ===== */
  .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
  .stat-card{
    background:linear-gradient(180deg,rgba(34,46,76,.8),rgba(16,24,43,.9));border:1px solid var(--border);border-top-color:var(--border-gold);
    padding:14px 10px;text-align:center;
    clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }
  .stat-card .n{font-family:var(--serif);font-size:1.45rem;font-weight:900;color:var(--gold2);text-shadow:0 0 14px rgba(201,162,39,.3)}
  .stat-card .l{color:var(--muted);font-size:.74rem;margin-top:3px;letter-spacing:.5px;text-transform:uppercase}
  .status-select{font-size:.82rem;padding:5px 6px}
  .src{font-size:.76rem;color:var(--muted);margin-top:12px;line-height:1.6;border-top:1px solid rgba(51,64,95,.5);padding-top:10px}
  .src a{color:var(--blue)}
  .warn-msg{color:var(--warn);font-size:.85rem;margin-top:6px}
  .ok-msg{color:var(--ok);font-size:.85rem;margin-top:6px}
  .list-pill{
    font-family:var(--serif);font-size:.82rem;background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--border);padding:7px 16px;cursor:pointer;letter-spacing:.5px;
    clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);
  }
  .list-pill.active{border-color:var(--gold);color:var(--gold2);font-weight:700;box-shadow:0 0 14px rgba(201,162,39,.25)}
  .small{font-size:.8rem}
  .flex-sb{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
  .qty-btn{background:var(--panel2);border:1px solid var(--border-gold);color:var(--gold2);width:26px;height:26px;cursor:pointer;font-weight:700;
    clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%)}
  .qty-btn:hover{filter:brightness(1.3)}
  .ws-stats{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
  .ws-stat{min-width:74px;text-align:center;padding:8px 10px;background:linear-gradient(180deg,rgba(34,46,76,.85),rgba(16,24,43,.95));border:1px solid var(--border-gold);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
  .ws-stat .v{font-family:var(--serif);font-weight:900;font-size:1.25rem;color:var(--gold2)}
  .ws-stat .k{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
  .ws-table{margin:10px 0}
  .ws-abi{margin:8px 0;padding:9px 12px;background:rgba(79,127,196,.07);border-left:3px solid var(--border-gold);font-size:.88rem;line-height:1.45}
  .ws-abi b{color:var(--gold2);font-family:var(--serif);letter-spacing:.5px}
  .ws-kw{margin-top:10px;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
  details.cat-acc{margin:10px 0;border:1px solid var(--border);border-top-color:var(--border-gold)}
  details.cat-acc summary{cursor:pointer;list-style:none;padding:12px 14px;font-family:var(--serif);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold2);background:linear-gradient(180deg,rgba(34,46,76,.8),rgba(16,24,43,.9));display:flex;align-items:center;gap:10px}
  details.cat-acc summary::-webkit-details-marker{display:none}
  details.cat-acc summary::before{content:"▸";color:var(--gold);transition:transform .15s}
  details.cat-acc[open] summary::before{transform:rotate(90deg)}
  details.cat-acc summary .muted{text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;margin-left:auto}
  details.cat-acc .acc-body{padding:6px 12px 12px}
  .th-sort{cursor:pointer;user-select:none;white-space:nowrap}
  .th-sort:hover{color:var(--gold2);text-decoration:underline}
  .modal-bg{position:fixed;inset:0;background:rgba(4,6,12,.78);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:28px 14px;overflow:auto}
  .modal{max-width:920px;width:100%}
  .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
  .photo-cell{position:relative}
  .photo-cell img{width:100%;height:110px;object-fit:cover;cursor:zoom-in;border:1px solid var(--border-gold);display:block}
  .photo-del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;width:20px;height:20px;cursor:pointer;font-size:.7rem}
  .photo-add{display:flex;align-items:center;justify-content:center;height:110px;border:1px dashed var(--border-gold);color:var(--gold2);cursor:pointer;font-size:.85rem;text-align:center;padding:4px}
  .photo-add:hover{background:rgba(201,162,39,.08)}
  .ws-frame{width:100%;height:620px;border:1px solid var(--border);background:#fff}
  .unit-link{cursor:pointer}
  .unit-link b{border-bottom:1px dotted var(--gold3)}
  .unit-link:hover b{color:var(--gold2)}
  .footer-note{padding:18px 28px;color:var(--muted);font-size:.74rem;margin-top:34px;text-align:center;border-top:1px solid var(--border);letter-spacing:.4px}
  /* ===== détachement / lores ===== */
  .lore-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
  .lore-row:first-of-type{border-top:none}
  .lore-name{flex:0 0 100%;color:var(--gold2);font-weight:500;font-size:.9rem}
  @media(min-width:760px){.lore-name{flex:0 0 230px}}
  .lore-chips{display:flex;flex-wrap:wrap;gap:6px}
  .lore-chip{font-family:var(--body);font-size:.8rem;color:var(--muted);background:var(--panel2);border:1px solid var(--border);padding:5px 11px;border-radius:14px;cursor:pointer;transition:all .12s}
  .lore-chip:hover{color:var(--gold2);border-color:var(--gold3)}
  .lore-chip.on{color:#1a1408;background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:var(--gold);font-weight:600}
  /* ===== validation checklist ===== */
  .valid-banner{padding:10px 14px;margin-bottom:12px;font-weight:500;border-left:3px solid}
  .vb-ok{background:rgba(95,191,119,.12);border-color:var(--ok);color:#bdeccb}
  .vb-bad{background:rgba(224,108,92,.12);border-color:var(--bad);color:#f0c4bd}
  .chk{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:.9rem;line-height:1.35}
  .chk-i{flex:0 0 20px;height:20px;line-height:20px;text-align:center;border-radius:50%;font-size:.72rem;font-weight:700}
  .chk-ok .chk-i{background:rgba(95,191,119,.2);color:var(--ok)}
  .chk-warn .chk-i{background:rgba(224,162,60,.2);color:var(--warn)}
  .chk-err .chk-i{background:rgba(224,108,92,.2);color:var(--bad)}
  .chk-warn{color:#e8cfa3}.chk-err{color:#f0c4bd}
  /* ===== vignettes d'ajout (ma collection) ===== */
  .pick-label{font-family:var(--serif);color:var(--gold2);font-size:.82rem;letter-spacing:1px;text-transform:uppercase;margin:6px 0}
  .pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin-bottom:4px}
  .pick-chip{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--text);
    border:1px solid var(--border);border-left:3px solid var(--pc,var(--blue));padding:8px 11px;transition:all .12s;font-family:var(--body)}
  .pick-chip:hover{border-color:var(--pc,var(--gold));box-shadow:0 0 0 1px var(--pc,var(--gold)) inset, 0 4px 14px rgba(0,0,0,.3);transform:translateY(-1px)}
  .pick-chip .pc-n{font-weight:600;font-size:.9rem;line-height:1.15}
  .pick-chip .pc-m{font-size:.74rem;color:var(--muted)}
  .pick-chip.pc-off{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
  button.btn.sec.mode-on{background:linear-gradient(180deg,#2a3654,#1c2640);color:#ecd384;box-shadow:0 0 0 2px var(--gold) inset}
  .rule-diagram{margin-top:10px;background:transparent;border:none;padding:0;overflow-x:auto}
  textarea{background:#0a101f;color:var(--text);border:1px solid var(--border);width:100%;padding:8px 10px;font-family:var(--body);font-size:.88rem;resize:vertical}
  textarea:focus{outline:1px solid var(--gold3)}
  @media(max-width:600px){
    header{padding:24px 12px 20px} header h1{font-size:1.2rem;letter-spacing:2px}
    nav{padding:12px 12px 0;gap:6px} nav button{padding:9px 16px;font-size:.78rem}
    main{padding:14px 10px} .card{padding:14px 11px}
    .home-grid{grid-template-columns:1fr}
    select,input[type=text],input[type=number]{max-width:100%}
    table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
    .ws-table{font-size:.76rem} .ws-table th,.ws-table td{padding:3px 7px}
    .total-bar{flex-direction:column;align-items:flex-start;gap:8px}
    .stat-cards{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
    .ws-frame{height:460px}
  }
  .home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
  .stat2grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
  .home-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;padding:24px 14px;color:var(--text);
    background:linear-gradient(180deg, rgba(24,34,56,.7), rgba(16,24,43,.92));border:1px solid var(--border);border-top:2px solid var(--border-gold);
    clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);transition:border-color .15s, box-shadow .15s}
  .home-card:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,39,.28)}
  .home-card .hc-i{font-size:2.1rem;filter:drop-shadow(0 0 10px rgba(236,211,132,.35))}
  .home-card .hc-t{font-family:var(--serif);font-weight:700;color:var(--gold2);letter-spacing:1px;font-size:1.02rem}
  .home-card .hc-d{font-size:.8rem;color:var(--muted);line-height:1.4;display:none} /* menu unifié premium : descriptions masquées pour toutes les factions AoS */
  #printArea{display:none}
  .pr-doc{color:#1a140c;font-family:Georgia,"Times New Roman",serif;padding:10px 14px;max-width:760px;margin:0 auto}
  .pr-doc h1{font-size:24px;margin:0 0 2px;color:#3a2b0c}
  .pr-head{border-bottom:3px double #b08d2f;margin-bottom:14px;padding-bottom:8px}
  .pr-sub{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#7a5f14}
  .pr-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;font-size:12px;color:#555}
  .pr-meta .pr-total{font-size:16px;font-weight:bold;color:#3a2b0c}
  .pr-extra{margin-top:8px;font-size:12px;color:#444;line-height:1.5}
  .pr-reg{margin:14px 0;break-inside:avoid}
  .pr-reg h2{font-size:14px;color:#7a5f14;border-bottom:1px solid #d8c79a;margin:0 0 6px;padding-bottom:3px;letter-spacing:.5px}
  .pr-u{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px;border-bottom:1px dotted #ddd}
  .pr-u .pr-d{color:#777;font-size:11px}
  .pr-u .pr-pts{white-space:nowrap;font-weight:bold;color:#3a2b0c}
  .pr-tot{margin-top:16px;font-weight:bold;border-top:3px double #b08d2f;padding-top:8px;font-size:15px;text-align:right;color:#3a2b0c}
  .pr-foot{margin-top:10px;font-size:10px;color:#999;text-align:center;letter-spacing:1px}
  .pr-head{position:relative}
  .pr-rt{float:right;font-weight:bold}
  .pr-stats{margin-top:6px;font-size:11px;color:#777;text-align:right;letter-spacing:.3px}
  /* --- Fiche thématisée (couleurs faction) --- */
  .pr-theme{color:#e9e5da;background:linear-gradient(180deg,#12151f,#0b0d13);border:2px solid var(--pr-col,#b08d2f);border-radius:10px;padding:22px 26px;max-width:760px}
  .pr-theme h1{color:#f0e6c8}
  .pr-theme .pr-head{border-bottom:3px double var(--pr-col,#b08d2f);padding-left:70px;min-height:56px}
  .pr-theme .pr-logo{position:absolute;left:0;top:2px;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
  .pr-theme .pr-sub{color:var(--pr-col,#c9a45a);filter:brightness(1.5)}
  .pr-theme .pr-meta{color:#aeb8cf}
  .pr-theme .pr-meta .pr-total{color:#f0e6c8}
  .pr-theme .pr-extra{color:#cfd3dc;border-left:3px solid var(--pr-col,#b08d2f);padding-left:10px}
  .pr-theme .pr-reg h2{color:var(--pr-col,#c9a45a);filter:brightness(1.4);border-bottom-color:rgba(150,165,195,.3)}
  .pr-theme .pr-u{border-bottom-color:rgba(150,165,195,.14)}
  .pr-theme .pr-u .pr-d{color:#9aa3b5}
  .pr-theme .pr-u .pr-pts{color:#f0e6c8}
  .pr-theme .pr-tot{color:#f0e6c8;border-top-color:var(--pr-col,#b08d2f)}
  .pr-theme .pr-stats{color:#8c97a8}
  .pr-u-img{align-items:center;padding:5px 0}
  .pr-th{flex:0 0 46px;width:46px;height:46px;object-fit:cover;border-radius:6px;margin-right:10px;border:1px solid var(--pr-col,#b08d2f)}
  .pr-th-x{flex:0 0 46px;width:46px;height:46px;border-radius:6px;margin-right:10px;border:1px dashed rgba(150,165,195,.3);background:repeating-linear-gradient(45deg,rgba(150,165,195,.05),rgba(150,165,195,.05) 4px,transparent 4px,transparent 8px)}
  .pr-u-img .pr-n{flex:1}
  /* --- Galerie de collection premium --- */
  .cl-doc{color:#e9e5da;font-family:Georgia,"Times New Roman",serif;background:#0a0e17;-webkit-print-color-adjust:exact;print-color-adjust:exact;max-width:100%;padding:0;margin:0}
  .cl-head{position:relative;padding:26px 30px 20px 118px;background:linear-gradient(120deg,var(--pr-col,#2c4a7c) -10%,rgba(10,14,23,.2) 46%),linear-gradient(180deg,#141c2e,#0a0e17);border-bottom:3px double var(--pr-col,#b08d2f);overflow:hidden}
  .cl-head .cl-logo{position:absolute;left:26px;top:20px;width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
  .cl-head h1{font-size:27px;margin:0;color:#f4ead0;letter-spacing:.5px}
  .cl-head .cl-sub{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--pr-col,#c9a45a);filter:brightness(1.7);margin-top:3px}
  .cl-kpis{display:flex;gap:26px;margin-top:12px}
  .cl-kpi .n{font-size:22px;font-weight:bold;color:#f4ead0;line-height:1}
  .cl-kpi .l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#9aa3b5;margin-top:2px}
  .cl-cat{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--pr-col,#c9a45a);filter:brightness(1.6);margin:20px 26px 8px;padding-bottom:5px;border-bottom:1px solid rgba(201,164,90,.35)}
  .cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 26px}
  .cl-card{border:1px solid var(--pr-col,#b08d2f);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#161d2c,#0d1119);break-inside:avoid;display:flex;flex-direction:column}
  .cl-card.done{box-shadow:inset 0 0 0 1px rgba(224,198,122,.5);border-color:#e0c67a}
  .cl-photo{width:100%;height:190px;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#0a0d14;display:block;border-bottom:1px solid var(--pr-col,#b08d2f)}
  .cl-photo-x{width:100%;height:130px;display:flex;align-items:center;justify-content:center;color:#4a5468;font-size:34px;background:repeating-linear-gradient(45deg,rgba(150,165,195,.05),rgba(150,165,195,.05) 6px,transparent 6px,transparent 12px);border-bottom:1px dashed rgba(150,165,195,.25)}
  .cl-body{padding:11px 14px 13px;flex:1;display:flex;flex-direction:column}
  .cl-name{font-size:16px;color:#f4ead0;line-height:1.15}
  .cl-meta{font-size:11px;color:#9aa3b5;margin-top:2px}
  .cl-bar{height:8px;background:rgba(150,165,195,.15);border-radius:5px;margin-top:9px;overflow:hidden;position:relative}
  .cl-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--pr-col,#8a6f2f),#e0c67a);border-radius:5px}
  .cl-bar-l{font-size:10.5px;color:#c9cfdb;margin-top:4px;display:flex;justify-content:space-between}
  .cl-badges{margin-top:8px}
  .cl-badge{display:inline-block;font-size:10px;padding:1px 8px;border-radius:10px;border:1px solid;margin:0 4px 4px 0;white-space:nowrap}
  .cl-foot{margin:22px 26px 10px;font-size:10px;color:#8c97a8;text-align:center;letter-spacing:1.5px;border-top:1px solid rgba(150,165,195,.2);padding-top:8px}
  .cl-strip{margin:12px 26px 0;font-size:12px;color:#cfd3dc;line-height:1.7;border-left:3px solid var(--pr-col,#b08d2f);padding-left:12px}
  .cl-strip b{color:var(--pr-col,#c9a45a);filter:brightness(1.5)}
  .cl-badge.pts{color:#e0c67a;border-color:#e0c67a;font-weight:bold}
  .cl-cat .sub{float:right;font-size:13px;color:#e0c67a;letter-spacing:0;text-transform:none;font-weight:bold}
  .cl-card .cl-photo{height:150px}
  @media print{
    body{background:#fff !important} body>*{display:none !important} #printArea{display:block !important}
    .pr-theme,.cl-doc,.cl-doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .cl-card{page-break-inside:avoid}
    .cl-cat{page-break-after:avoid}
  }
  .pick-chip.pc-off:hover{border-color:var(--border);box-shadow:none;transform:none}
  .pick-chip:hover .pc-n{color:var(--gold2)}
  /* ===== onglet partie en cours ===== */
  .g-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
  .g-dash{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
  @media(min-width:780px){.g-dash{grid-template-columns:1.3fr .8fr 1fr}}
  .g-panel{margin-bottom:0}
  .g-panel-t{font-family:var(--serif);color:var(--gold2);font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;text-align:center}
  .g-rounds{display:flex;gap:6px;justify-content:center}
  .g-round{width:42px;height:42px;font-family:var(--serif);font-weight:700;font-size:1.1rem;cursor:pointer;
    background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--muted);border:1px solid var(--border)}
  .g-round.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1408;border-color:var(--gold);box-shadow:0 0 14px rgba(201,162,39,.4)}
  .g-active{display:flex;gap:8px;margin-top:12px}
  .g-ab{flex:1;padding:9px;cursor:pointer;font-family:var(--body);font-size:.85rem;background:var(--panel2);color:var(--muted);border:1px solid var(--border)}
  .g-ab.on{background:var(--azure);color:#fff;border-color:var(--blue)}
  .g-counter{display:flex;align-items:center;justify-content:center;gap:14px}
  .g-counter.sm{gap:8px}
  .g-cbtn{width:40px;height:40px;font-size:1.4rem;line-height:1;cursor:pointer;background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--gold2);border:1px solid var(--border-gold)}
  .g-counter.sm .g-cbtn{width:30px;height:30px;font-size:1.1rem}
  .g-cbtn:hover{background:var(--panel2);color:#fff}
  .g-cval{font-family:var(--serif);font-weight:900;font-size:2rem;color:var(--gold2);min-width:46px;text-align:center}
  .g-counter.sm .g-cval{font-size:1.4rem;min-width:32px}
  .g-vp{display:flex;gap:14px;justify-content:center}
  .g-vp-l{font-size:.75rem;color:var(--muted);text-align:center;margin-bottom:4px}
  .g-lore{font-size:.88rem;margin:3px 0}
  .g-units{display:grid;grid-template-columns:1fr;gap:10px}
  @media(min-width:680px){.g-units{grid-template-columns:1fr 1fr}}
  .g-unit{border:1px solid var(--border);border-left:3px solid var(--blue);background:linear-gradient(180deg,rgba(24,34,56,.5),rgba(16,24,43,.7));padding:11px 13px;transition:opacity .15s}
  .g-unit.g-done{opacity:.5}
  .g-unit.g-dead{border-left-color:var(--bad);background:rgba(224,108,92,.07)}
  .g-u-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .g-u-title{font-size:.96rem;line-height:1.2}
  .g-gen{color:var(--gold)}
  .g-donebtn{flex:0 0 auto;font-size:.72rem;padding:4px 9px;cursor:pointer;background:var(--panel2);color:var(--muted);border:1px solid var(--border);white-space:nowrap}
  .g-donebtn.on{background:rgba(95,191,119,.2);color:var(--ok);border-color:var(--ok)}
  .g-profile{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
  .g-chip{font-size:.8rem;background:var(--panel);border:1px solid var(--border);padding:3px 8px;color:var(--text)}
  .g-enh{font-size:.8rem;color:var(--gold2);margin-bottom:7px}
  .g-track{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--border)}
  .g-track-l{font-size:.8rem;color:var(--muted)}
  .g-remain{font-family:var(--serif);font-weight:700;color:var(--ok);min-width:78px;text-align:center}
  .g-r-dead{color:var(--bad)}
  .g-reset{cursor:pointer;background:none;border:1px solid var(--border);color:var(--muted);width:26px;height:26px}
  .g-deadtag{font-size:.72rem;color:var(--bad);border:1px solid var(--bad);padding:2px 6px}
  .g-details{margin-top:9px}
  .g-details summary{cursor:pointer;font-size:.8rem;color:var(--gold3)}
  .g-details summary:hover{color:var(--gold2)}
  .g-details[open] summary{margin-bottom:8px}


  /* ============================================================
     THÈME STORMCAST ETERNALS — application STRICTE de la charte
     (tokens §12 ; ne s'applique qu'à data-faction="stormcast")
     ============================================================ */
  body[data-faction="stormcast"]{
    /* §12 — variables exactes de la charte */
    --bg-main:#08111F; --bg-surface:#102743; --bg-card:#1C3F68;
    --gold-main:#C9A45A; --gold-light:#E0C67A;
    --text-main:#E9E2D0; --text-muted:#8C97A8; --line-neutral:#5B6C84;
    --accent-lightning:#77C8FF; --accent-alert:#B44A30;
    /* mappage vers les variables du moteur (uniquement des couleurs charte) */
    --bg:#08111F; --surface:#102743;
    --panel:#102743; --panel2:#1C3F68;
    --border:#5B6C84; --border-gold:#C9A45A;
    --gold:#C9A45A; --gold2:#E0C67A; --gold3:#C9A45A;
    --blue:#77C8FF; --azur:#77C8FF; --azure:#102743;
    --text:#E9E2D0; --muted:#8C97A8; --muted2:#5B6C84;
    --bad:#B44A30; --warn:#E0A23C; --ok:#5FBF77;
    --serif2:"Marcellus SC","Cinzel",serif;
    --mono:"Roboto Mono",ui-monospace,SFMono-Regular,monospace;
    --body:"Inter","Segoe UI",system-ui,sans-serif;
    /* §4 — fond bleu nuit presque noir + halo céleste d'Azyr */
    background:
      radial-gradient(ellipse 60% 42% at 50% -6%, rgba(119,200,255,.13), transparent 60%),
      radial-gradient(ellipse 44% 30% at 84% 6%, rgba(201,164,90,.05), transparent 60%),
      radial-gradient(ellipse 56% 60% at 12% 100%, rgba(28,63,104,.22), transparent 60%),
      linear-gradient(180deg,#0a1626 0%, #08111F 45%, #04080f 100%);
  }
  /* §2/§3 — Sous-titres en Marcellus SC, capitales gravées */
  body[data-faction="stormcast"] .card h2,
  body[data-faction="stormcast"] .home-card .hc-t,
  body[data-faction="stormcast"] details.cat-acc summary,
  body[data-faction="stormcast"] .g-panel-t,
  body[data-faction="stormcast"] .pick-label,
  body[data-faction="stormcast"] .card h2,
  body[data-faction="stormcast"] .home-card .hc-t{ color:var(--gold-light); text-shadow:0 1px 0 rgba(0,0,0,.55); }
  /* §6 — Cartes : bleu acier #1C3F68, bordure or antique, haut lumineux, filet doré interne, élévation hover */
  body[data-faction="stormcast"] .card,
  body[data-faction="stormcast"] .home-card,
  body[data-faction="stormcast"] .stat-card{
    background:linear-gradient(180deg, #25507f 0%, #1C3F68 16%, #163350 100%);
    border-color:#5B6C84; border-top-color:#C9A45A;
    box-shadow:inset 0 0 0 1px rgba(201,164,90,.10), 0 8px 26px rgba(0,0,0,.4);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  body[data-faction="stormcast"] .card::before{ background:linear-gradient(90deg,transparent,var(--gold-light),transparent); opacity:.7; box-shadow:0 0 9px rgba(224,198,122,.5); }
  body[data-faction="stormcast"] .card:hover,
  body[data-faction="stormcast"] .home-card:hover,
  body[data-faction="stormcast"] .stat-card:hover{ border-color:#C9A45A; box-shadow:inset 0 0 0 1px rgba(201,164,90,.20), 0 0 20px rgba(119,200,255,.10), 0 12px 30px rgba(0,0,0,.45); }
  body[data-faction="stormcast"] .home-card:hover{ transform:translateY(-2px); }
  @media(min-width:760px){ body[data-faction="stormcast"] .card{ padding:20px 22px; } }
  /* §4 — texture marbre subtile par-dessus le fond carte */
  body[data-faction="stormcast"] .card,
  body[data-faction="stormcast"] .home-card{
    background-image:linear-gradient(180deg, #25507f 0%, #1C3F68 16%, #163350 100%), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23a8b7c8'%20stroke-width%3D'0.6'%20opacity%3D'0.045'%3E%3Cpath%20d%3D'M0%2040%20C40%2030%2090%2060%20160%2044'%2F%3E%3Cpath%20d%3D'M0%2096%20C50%20110%20110%2080%20160%20104'%2F%3E%3Cpath%20d%3D'M0%20140%20C60%20128%20100%20150%20160%20136'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  /* §7 — Icônes menu premium (trait, recolorées par faction via currentColor) */
  .hc-i{line-height:0}
  .hc-i svg{width:38px;height:38px;display:block;color:var(--gold2);filter:drop-shadow(0 0 8px rgba(0,0,0,.4));transition:transform .15s ease, filter .15s ease}
  .home-card:hover .hc-i svg{transform:scale(1.07)}
  body[data-faction="stormcast"] .hc-i svg{filter:drop-shadow(0 0 9px rgba(224,198,122,.4))}
  body[data-faction="stormcast"] .home-card:hover .hc-i svg{filter:drop-shadow(0 0 14px rgba(224,198,122,.7))}
  /* §5 — Boutons : primaire or, hover lumineux, focus azur, actif plein, désactivé grisé */
  body[data-faction="stormcast"] button.btn{ transition:filter .14s ease, box-shadow .14s ease; }
  body[data-faction="stormcast"] button.btn:hover{ filter:brightness(1.1); box-shadow:0 0 14px rgba(224,198,122,.32); }
  body[data-faction="stormcast"] button.btn:active{ filter:brightness(1.06) saturate(1.08); }
  body[data-faction="stormcast"] button.btn:disabled,
  body[data-faction="stormcast"] button.btn[disabled]{ filter:grayscale(.6) brightness(.7); opacity:.5; cursor:not-allowed; box-shadow:none; }
  body[data-faction="stormcast"] nav button.active{ box-shadow:0 0 16px rgba(201,164,90,.25), 0 0 22px rgba(119,200,255,.12), inset 0 0 12px rgba(201,164,90,.12); }
  /* §10 — Champs : fond sombre, bordure acier céleste, focus foudre d'Azyr */
  body[data-faction="stormcast"] select,
  body[data-faction="stormcast"] input[type=text],
  body[data-faction="stormcast"] input[type=number],
  body[data-faction="stormcast"] textarea{ background:#0b1626; border-color:#5B6C84; color:#E9E2D0; }
  body[data-faction="stormcast"] select:focus,
  body[data-faction="stormcast"] input:focus,
  body[data-faction="stormcast"] textarea:focus{ outline:1px solid #77C8FF; box-shadow:0 0 10px rgba(119,200,255,.4); }
  /* Focus clavier visible (accessibilité) */
  body[data-faction="stormcast"] a:focus-visible,
  body[data-faction="stormcast"] button:focus-visible,
  body[data-faction="stormcast"] select:focus-visible,
  body[data-faction="stormcast"] input:focus-visible,
  body[data-faction="stormcast"] textarea:focus-visible,
  body[data-faction="stormcast"] summary:focus-visible,
  body[data-faction="stormcast"] [tabindex]:focus-visible{ outline:2px solid #77C8FF; outline-offset:2px; box-shadow:0 0 12px rgba(119,200,255,.55); border-radius:2px; }
  /* §9 — Tableaux : en-tête or sombre, hover azur, coût en pastille or (mono) */
  body[data-faction="stormcast"] th{ background:linear-gradient(180deg, rgba(201,164,90,.18), rgba(201,164,90,.05)); color:var(--gold-light); border-bottom:1px solid var(--gold-main); }
  body[data-faction="stormcast"] tr:hover td{ background:rgba(119,200,255,.07); }
  body[data-faction="stormcast"] .pts,
  body[data-faction="stormcast"] .eur-cell,
  body[data-faction="stormcast"] .ws-stat .v,
  body[data-faction="stormcast"] .total-bar .big{ font-family:var(--mono); letter-spacing:0; }
  body[data-faction="stormcast"] td .pts{ display:inline-block; padding:2px 11px; color:var(--gold-light);
    background:linear-gradient(180deg, rgba(201,164,90,.20), rgba(201,164,90,.06)); border:1px solid var(--gold-main);
    clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%); }
  /* §8 — Barre de total / progression / filet de séparation dorés */
  body[data-faction="stormcast"] .total-bar{ background:linear-gradient(180deg,#1d4170,#15315a); border-color:var(--gold-main); box-shadow:0 0 22px rgba(119,200,255,.08), 0 8px 24px rgba(0,0,0,.45); }
  body[data-faction="stormcast"] .progress>div{ background:linear-gradient(90deg,#102743,#77C8FF 55%,#E0C67A); box-shadow:0 0 10px rgba(119,200,255,.45); }
  body[data-faction="stormcast"] .card h2::after{ background:linear-gradient(90deg,var(--gold-main),transparent); }
  /* §11 — Largeur de lecture confortable */
  body[data-faction="stormcast"] .home-card .hc-d,
  body[data-faction="stormcast"] .src,
  body[data-faction="stormcast"] .ws-abi{ max-width:72ch; }
  /* Mouvements réduits */
  @media (prefers-reduced-motion: reduce){
    body[data-faction="stormcast"] *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  }


  /* §7 — Icônes premium Stormcast (pack officiel, raster) : remplacent les silhouettes vectorielles
     UNIQUEMENT pour Stormcast ; les autres factions gardent les SVG recolorés. */
  body[data-faction="stormcast"] .home-card .hc-i{ width:56px; height:56px; background:center/contain no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); transition:transform .15s ease, filter .15s ease; }
  body[data-faction="stormcast"] .home-card .hc-i svg{ display:none; }
  body[data-faction="stormcast"] .home-card:hover .hc-i{ transform:scale(1.08); filter:drop-shadow(0 0 13px rgba(224,198,122,.6)); }
  body[data-faction="stormcast"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/stormcast/menu-codex.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/stormcast/menu-armies.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/stormcast/menu-pool.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/stormcast/menu-gallery.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/stormcast/menu-stats.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/stormcast/menu-buy.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/stormcast/menu-regles.png"); }
  body[data-faction="stormcast"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/stormcast/menu-reglages.png"); }

  /* === Tuiles du menu Stormcast : cadre marbre+or du pack (border-image 9-slice) === */
  body[data-faction="stormcast"] .home-card{
    position:relative;
    background:linear-gradient(135deg,#f2dc9a 0%,#cda85e 45%,#a8842f 100%) !important;
    border:0;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
    box-shadow:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding:22px 16px;
    filter:drop-shadow(0 6px 15px rgba(0,0,0,.45));
    transition:transform .16s ease, filter .16s ease;
  }
  body[data-faction="stormcast"] .home-card::before{
    content:""; position:absolute; inset:3px; z-index:0; display:block;
    background:linear-gradient(rgba(8,15,28,.90),rgba(8,15,28,.90)), url("images/aos/stormcast/marble-stormcast.jpg") center/cover; background-color:#070f1c;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  }
  body[data-faction="stormcast"] .home-card > *{ position:relative; z-index:1; }
  body[data-faction="stormcast"] .home-card:hover{
    transform:translateY(-3px);
    box-shadow:none;
    filter:drop-shadow(0 0 16px rgba(119,200,255,.45)) drop-shadow(0 8px 18px rgba(0,0,0,.5));
  }
  @media(max-width:600px){
    body[data-faction="stormcast"] .home-card{ border-width:30px; padding:2px 6px 8px; }
  }

  /* === Panneaux de contenu Stormcast : cadre marbre+or du pack === */
  body[data-faction="stormcast"] .card{
    position:relative;
    background:linear-gradient(135deg,#f2dc9a 0%,#cda85e 45%,#a8842f 100%) !important;
    border:0 !important; border-image:none !important;
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
    box-shadow:none;
    padding:24px 24px;
  }
  body[data-faction="stormcast"] .card > *{ position:relative; z-index:1; }
  body[data-faction="stormcast"] .card .total-bar{ z-index:6; }
  body[data-faction="stormcast"] .card::before{
    content:""; position:absolute; inset:2.5px; height:auto; z-index:0; display:block; opacity:1;
    background:linear-gradient(rgba(8,15,28,.90),rgba(8,15,28,.90)), url("images/aos/stormcast/marble-stormcast.jpg") center/cover; background-color:#070f1c;
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); box-shadow:none;
  }
  body[data-faction="stormcast"] .card:hover{ box-shadow:none; }
  @media(max-width:600px){ body[data-faction="stormcast"] .card{ padding:16px 14px; } }

  /* Anti-répétition : chaque tuile/panneau montre une zone différente du marbre */
  body[data-faction="stormcast"] .home-card[onclick*="'codex'"]{ background-position:0% 0% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'armies'"]{ background-position:100% 0% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'pool'"]{ background-position:100% 100% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'gallery'"]{ background-position:25% 40% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'stats'"]{ background-position:80% 55% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'buy'"]{ background-position:50% 10% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'regles'"]{ background-position:95% 45% !important; }
  body[data-faction="stormcast"] .home-card[onclick*="'reglages'"]{ background-position:65% 92% !important; }
  body[data-faction="stormcast"] .card:nth-of-type(3n){ background-position:100% 0% !important; }
  body[data-faction="stormcast"] .card:nth-of-type(3n+1){ background-position:0% 100% !important; }
  body[data-faction="stormcast"] .card:nth-of-type(3n+2){ background-position:50% 50% !important; }

  /* Tuiles Stormcast : garder seulement le nom (masquer la description) */
  body[data-faction="stormcast"] .home-card .hc-d{ display:none; }

  /* anti-répétition marbre par tuile */
  body[data-faction="stormcast"] .home-card[onclick*="'codex'"]::before{ background-position:0% 0%; }
  body[data-faction="stormcast"] .home-card[onclick*="'armies'"]::before{ background-position:100% 0%; }
  body[data-faction="stormcast"] .home-card[onclick*="'pool'"]::before{ background-position:100% 100%; }
  body[data-faction="stormcast"] .home-card[onclick*="'gallery'"]::before{ background-position:25% 40%; }
  body[data-faction="stormcast"] .home-card[onclick*="'stats'"]::before{ background-position:80% 55%; }
  body[data-faction="stormcast"] .home-card[onclick*="'buy'"]::before{ background-position:50% 10%; }
  body[data-faction="stormcast"] .home-card[onclick*="'regles'"]::before{ background-position:95% 45%; }
  body[data-faction="stormcast"] .home-card[onclick*="'reglages'"]::before{ background-position:65% 92%; }

  /* Boutons nav Stormcast harmonisés (bordure or + intérieur navy) */
  body[data-faction="stormcast"] nav{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:14px !important; }
  body[data-faction="stormcast"] nav button{
    position:relative; border:0 !important; border-image:none !important; box-shadow:none !important;
    background:linear-gradient(135deg,#f2dc9a 0%,#cda85e 45%,#a8842f 100%) !important;
    clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px) !important;
    color:var(--gold-light) !important; text-shadow:0 1px 0 rgba(0,0,0,.55);
    padding:14px 16px; width:auto; text-align:center; transition:filter .15s ease;
  }
  body[data-faction="stormcast"] nav button::before{
    content:""; position:absolute; inset:2px; z-index:0; display:block;
    background:linear-gradient(rgba(8,15,28,.90),rgba(8,15,28,.90)), url("images/aos/stormcast/marble-stormcast.jpg") center/cover; background-color:#070f1c;
    clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  }
  body[data-faction="stormcast"] nav button > *{ position:relative; z-index:1; }
  body[data-faction="stormcast"] nav button:hover{ filter:brightness(1.08); }
  body[data-faction="stormcast"] nav button.active{ filter:drop-shadow(0 0 8px rgba(119,200,255,.3)); }

  /* ===== Tuiles SKAVEN : fond malepierre + bordure bronze-vert + icônes pack ===== */
  body[data-faction="skaven"] .home-card{
    position:relative;
    background:linear-gradient(135deg,#c4bc95 0%,#8a8468 45%,#4a4838 100%) !important;
    border:0 !important; border-image:none !important;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
    box-shadow:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding:22px 16px;
    filter:drop-shadow(0 6px 15px rgba(0,0,0,.5));
    transition:transform .16s ease, filter .16s ease;
  }
  body[data-faction="skaven"] .home-card::before{
    content:""; position:absolute; inset:3px; z-index:0; display:block;
    background:linear-gradient(rgba(9,10,7,.90),rgba(9,10,7,.90)), url("images/aos/skaven/skaven-marble.jpg") center/cover; background-color:#0b0d09;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  }
  body[data-faction="skaven"] .home-card > *{ position:relative; z-index:1; }
  body[data-faction="skaven"] .home-card .hc-i{ width:58px; height:58px; background:center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)); }
  body[data-faction="skaven"] .home-card .hc-i svg{ display:none; }
  body[data-faction="skaven"] .home-card:hover{ transform:translateY(-3px); filter:drop-shadow(0 0 14px rgba(196,188,149,.38)) drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
  body[data-faction="skaven"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-codex.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'codex'"]::before{ background-position:0% 0%; }
  body[data-faction="skaven"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-armies.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'armies'"]::before{ background-position:100% 0%; }
  body[data-faction="skaven"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-pool.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'pool'"]::before{ background-position:100% 100%; }
  body[data-faction="skaven"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-gallery.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'gallery'"]::before{ background-position:25% 40%; }
  body[data-faction="skaven"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-stats.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'stats'"]::before{ background-position:80% 55%; }
  body[data-faction="skaven"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-buy.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'buy'"]::before{ background-position:50% 10%; }
  body[data-faction="skaven"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-regles.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'regles'"]::before{ background-position:95% 45%; }
  body[data-faction="skaven"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/skaven/skaven-menu-reglages.png"); }
  body[data-faction="skaven"] .home-card[onclick*="'reglages'"]::before{ background-position:65% 92%; }

  /* ===== SKAVEN : descriptions masquées + boutons + panneaux (miroir Stormcast) ===== */
  body[data-faction="skaven"] .home-card .hc-d{ display:none; }
  /* nav en grille + boutons */
  body[data-faction="skaven"] nav{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:14px !important; }
  body[data-faction="skaven"] nav button{
    position:relative; border:0 !important; border-image:none !important; box-shadow:none !important;
    background:linear-gradient(135deg,#c4bc95 0%,#8a8468 45%,#4a4838 100%) !important; clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px) !important;
    color:#e0d9b8 !important; text-shadow:0 1px 0 rgba(0,0,0,.6);
    padding:14px 16px; width:auto; text-align:center; transition:filter .15s ease;
  }
  body[data-faction="skaven"] nav button::before{
    content:""; position:absolute; inset:2px; z-index:0; display:block;
    background:linear-gradient(rgba(9,10,7,.90),rgba(9,10,7,.90)), url("images/aos/skaven/skaven-marble.jpg") center/cover; background-color:#0b0d09; clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  }
  body[data-faction="skaven"] nav button > *{ position:relative; z-index:1; }
  body[data-faction="skaven"] nav button:hover{ filter:brightness(1.08); }
  body[data-faction="skaven"] nav button.active{ filter:drop-shadow(0 0 8px rgba(196,188,149,.38)); }
  /* panneaux .card */
  body[data-faction="skaven"] .card{
    position:relative; background:linear-gradient(135deg,#c4bc95 0%,#8a8468 45%,#4a4838 100%) !important; border:0 !important; border-image:none !important;
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); box-shadow:none; padding:24px 24px;
  }
  body[data-faction="skaven"] .card::before{
    content:""; position:absolute; inset:2.5px; height:auto; z-index:0; display:block; opacity:1;
    background:linear-gradient(rgba(9,10,7,.90),rgba(9,10,7,.90)), url("images/aos/skaven/skaven-marble.jpg") center/cover; background-color:#0b0d09; clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  }
  body[data-faction="skaven"] .card > *{ position:relative; z-index:1; }
  body[data-faction="skaven"] .card .total-bar{ z-index:6; }

  /* ===== SKAVEN : recolorer les fonds bleus codés en dur (vert malepierre) ===== */
  body[data-faction="skaven"] .ws-stat{ background:linear-gradient(180deg,rgba(48,50,38,.85),rgba(14,16,10,.95)) !important; border-color:#6e6f55 !important; }
  body[data-faction="skaven"] .stat-card{ background:linear-gradient(180deg,rgba(48,50,38,.8),rgba(14,16,10,.9)) !important; }
  body[data-faction="skaven"] details.cat-acc summary{ background:linear-gradient(180deg,rgba(48,50,38,.8),rgba(14,16,10,.9)) !important; }
  body[data-faction="skaven"] .total-bar{ background:linear-gradient(180deg,#303226,#14160e) !important; }
  body[data-faction="skaven"] .ws-abi{ background:rgba(196,188,149,.08) !important; }
  body[data-faction="skaven"] tr:hover td{ background:rgba(196,188,149,.09) !important; }
  body[data-faction="skaven"] .g-unit{ background:linear-gradient(180deg,rgba(48,50,38,.5),rgba(14,16,10,.7)) !important; }
  body[data-faction="skaven"] select,
  body[data-faction="skaven"] input[type=text],
  body[data-faction="skaven"] input[type=number],
  body[data-faction="skaven"] textarea{ background:#0d0f0a !important; }
  body[data-faction="skaven"] .progress{ background:#0d0f0a !important; }
  body[data-faction="skaven"] .progress>div{ background:linear-gradient(90deg,#3a3c2c,#9b936f 60%,#c4bc95) !important; box-shadow:0 0 10px rgba(196,188,149,.40) !important; }

  /* ===== Tuiles SYLVANETH : fond foret + bordure or-vert + icones pack ===== */
  body[data-faction="sylvaneth"] .home-card{
    position:relative;
    background:linear-gradient(135deg,#d4c46e 0%,#94a64a 45%,#4d6128 100%) !important;
    border:0 !important; border-image:none !important;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
    box-shadow:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding:22px 16px;
    filter:drop-shadow(0 6px 15px rgba(0,0,0,.5));
    transition:transform .16s ease, filter .16s ease;
  }
  body[data-faction="sylvaneth"] .home-card::before{
    content:""; position:absolute; inset:3px; z-index:0; display:block;
    background:linear-gradient(rgba(6,16,8,.90),rgba(6,16,8,.90)), url("images/aos/sylvaneth/sylvaneth-marble.jpg") center/cover; background-color:#070f08;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  }
  body[data-faction="sylvaneth"] .home-card > *{ position:relative; z-index:1; }
  body[data-faction="sylvaneth"] .home-card .hc-i{ width:58px; height:58px; background:center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)); }
  body[data-faction="sylvaneth"] .home-card .hc-i svg{ display:none; }
  body[data-faction="sylvaneth"] .home-card:hover{ transform:translateY(-3px); filter:drop-shadow(0 0 14px rgba(156,210,80,.4)) drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-codex.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'codex'"]::before{ background-position:0% 0%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-armies.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'armies'"]::before{ background-position:100% 0%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-pool.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'pool'"]::before{ background-position:100% 100%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-gallery.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'gallery'"]::before{ background-position:25% 40%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-stats.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'stats'"]::before{ background-position:80% 55%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-buy.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'buy'"]::before{ background-position:50% 10%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-regles.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'regles'"]::before{ background-position:95% 45%; }
  body[data-faction="sylvaneth"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/sylvaneth/sylvaneth-menu-reglages.png"); }
  body[data-faction="sylvaneth"] .home-card[onclick*="'reglages'"]::before{ background-position:65% 92%; }

  /* ===== SYLVANETH : descriptions masquees + boutons + panneaux (miroir Stormcast) ===== */
  body[data-faction="sylvaneth"] .home-card .hc-d{ display:none; }
  body[data-faction="sylvaneth"] nav{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:14px !important; }
  body[data-faction="sylvaneth"] nav button{
    position:relative; border:0 !important; border-image:none !important; box-shadow:none !important;
    background:linear-gradient(135deg,#d4c46e 0%,#94a64a 45%,#4d6128 100%) !important; clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px) !important;
    color:#e2f2ab !important; text-shadow:0 1px 0 rgba(0,0,0,.6);
    padding:14px 16px; width:auto; text-align:center; transition:filter .15s ease;
  }
  body[data-faction="sylvaneth"] nav button::before{
    content:""; position:absolute; inset:2px; z-index:0; display:block;
    background:linear-gradient(rgba(6,16,8,.90),rgba(6,16,8,.90)), url("images/aos/sylvaneth/sylvaneth-marble.jpg") center/cover; background-color:#070f08; clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  }
  body[data-faction="sylvaneth"] nav button > *{ position:relative; z-index:1; }
  body[data-faction="sylvaneth"] nav button:hover{ filter:brightness(1.08); }
  body[data-faction="sylvaneth"] nav button.active{ filter:drop-shadow(0 0 8px rgba(156,210,80,.4)); }
  body[data-faction="sylvaneth"] .card{
    position:relative; background:linear-gradient(135deg,#d4c46e 0%,#94a64a 45%,#4d6128 100%) !important; border:0 !important; border-image:none !important;
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); box-shadow:none; padding:24px 24px;
  }
  body[data-faction="sylvaneth"] .card::before{
    content:""; position:absolute; inset:2.5px; height:auto; z-index:0; display:block; opacity:1;
    background:linear-gradient(rgba(6,16,8,.90),rgba(6,16,8,.90)), url("images/aos/sylvaneth/sylvaneth-marble.jpg") center/cover; background-color:#070f08; clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  }
  body[data-faction="sylvaneth"] .card > *{ position:relative; z-index:1; }
  body[data-faction="sylvaneth"] .card .total-bar{ z-index:6; }

  /* ===== SYLVANETH : recolorer les fonds bleus codes en dur (vert foret) ===== */
  body[data-faction="sylvaneth"] .ws-stat{ background:linear-gradient(180deg,rgba(35,58,25,.85),rgba(10,18,8,.95)) !important; border-color:#5f8438 !important; }
  body[data-faction="sylvaneth"] .stat-card{ background:linear-gradient(180deg,rgba(35,58,25,.8),rgba(10,18,8,.9)) !important; }
  body[data-faction="sylvaneth"] details.cat-acc summary{ background:linear-gradient(180deg,rgba(35,58,25,.8),rgba(10,18,8,.9)) !important; }
  body[data-faction="sylvaneth"] .total-bar{ background:linear-gradient(180deg,#23391a,#101d0c) !important; }
  body[data-faction="sylvaneth"] .ws-abi{ background:rgba(156,194,74,.08) !important; }
  body[data-faction="sylvaneth"] tr:hover td{ background:rgba(156,194,74,.09) !important; }
  body[data-faction="sylvaneth"] .g-unit{ background:linear-gradient(180deg,rgba(35,58,25,.5),rgba(10,18,8,.7)) !important; }
  body[data-faction="sylvaneth"] select,
  body[data-faction="sylvaneth"] input[type=text],
  body[data-faction="sylvaneth"] input[type=number],
  body[data-faction="sylvaneth"] textarea{ background:#0b1407 !important; }
  body[data-faction="sylvaneth"] .progress{ background:#0b1407 !important; }
  body[data-faction="sylvaneth"] .progress>div{ background:linear-gradient(90deg,#2c3a16,#9cc24a 60%,#e2f2ab) !important; box-shadow:0 0 10px rgba(156,210,80,.45) !important; }

  /* =========================================================================
     ESCLAVES DES TENEBRES (slaves) — skin complet, meme ossature que les
     Forgeruines. Palette relevee sur la banniere : or/laiton de l'etoile du
     Chaos et du titre, braise des coulees de lave, rouge sang des etendards,
     basalte brun. Le violet des losanges reste une touche, pas un accent
     d'interface. Tout est CSS hormis la banniere et les 8 icones fournies.
     ========================================================================= */
  body[data-faction="slaves"]{
    --sld-void:#140C0C; --sld-deep:#241615; --sld-stone:#33211E;
    --sld-ember:#E0712C; --sld-ember-hi:#F5A867;
    --sld-brass:#C9A45A; --sld-brass-hi:#E5C97F; --sld-brass-lo:#7D6230;
    --sld-blood:#8B1F1F;
    --bg:#140C0C; --surface:#241615;
    --panel:#241615; --panel2:#33211E;
    --border:#5A3A2E; --border-gold:#C9A45A;
    --gold:#C9A45A; --gold2:#E5C97F; --gold3:#7D6230;
    --blue:#E0712C; --azur:#F5A867; --azure:#4A2018;
    --text:#F0E4D6; --muted:#B09A88; --muted2:#7A6656;
    --ok:#87A04A; --warn:#E0A23C; --bad:#C4441F;
    background:
      radial-gradient(ellipse 62% 42% at 50% -6%, rgba(224,113,44,.16), transparent 60%),
      radial-gradient(ellipse 40% 28% at 86% 8%, rgba(139,31,31,.12), transparent 60%),
      radial-gradient(ellipse 56% 58% at 10% 100%, rgba(201,164,90,.09), transparent 60%),
      linear-gradient(180deg,#1E1210 0%, #140C0C 48%, #080505 100%);
  }
  /* En-tete : meme reglage que les Forgeruines, et que les trois factions
     habillees avant elles — `cover` plein cadre, `clamp(160px,18vw,330px)`.
     Voir le commentaire des Forgeruines : le rognage vertical est assume,
     c'est le prix d'une banniere qui touche les deux bords sur grand ecran. */
  body[data-faction="slaves"] header{
    background:#000 center/cover no-repeat url("images/aos/slaves/slaves-banner-v2.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid var(--sld-brass);
    box-shadow:inset 0 -1px 0 rgba(229,201,127,.35), 0 6px 24px rgba(0,0,0,.55);
  }
  body[data-faction="slaves"] .hdr-inner,
  body[data-faction="slaves"] .frieze,
  body[data-faction="slaves"] .hdr-sym,
  body[data-faction="slaves"] header::before,
  body[data-faction="slaves"] header::after{ display:none !important; }
  body[data-faction="slaves"] .col-deco{ display:none; }
  body[data-faction="slaves"] #appTitle{ color:var(--sld-brass-hi); }
  body[data-faction="slaves"] #appSigil{ filter:drop-shadow(0 0 10px rgba(224,113,44,.65)); }

  /* Icones fournies par Vincent (1024x1024, jusqu'a 1 Mo piece a l'origine ;
     ramenees a 256x256 en palette adaptative, canal alpha preserve). Le raster
     remplace la silhouette vectorielle du moteur, comme chez Stormcast. */
  body[data-faction="slaves"] .home-card .hc-i{ width:56px; height:56px; background:center/contain no-repeat;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); transition:transform .15s ease, filter .15s ease; }
  body[data-faction="slaves"] .home-card .hc-i svg{ display:none; }
  body[data-faction="slaves"] .home-card:hover .hc-i{ transform:scale(1.08);
    filter:drop-shadow(0 0 13px rgba(224,113,44,.65)); }
  body[data-faction="slaves"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/slaves/menu-codex.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/slaves/menu-armies.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/slaves/menu-pool.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/slaves/menu-gallery.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/slaves/menu-stats.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/slaves/menu-buy.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/slaves/menu-regles.png"); }
  body[data-faction="slaves"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/slaves/menu-reglages.png"); }

  body[data-faction="slaves"] .home-card{
    background:linear-gradient(180deg,var(--sld-stone),var(--sld-deep));
    border:1px solid var(--sld-brass-lo); box-shadow:0 6px 18px rgba(0,0,0,.5);
  }
  body[data-faction="slaves"] .home-card::before{
    background:radial-gradient(ellipse 90% 70% at 50% 0%, rgba(224,113,44,.20), transparent 68%); opacity:.9;
  }
  body[data-faction="slaves"] .home-card:hover{
    border-color:var(--sld-brass);
    box-shadow:0 0 20px rgba(224,113,44,.35), 0 8px 22px rgba(0,0,0,.55);
    transform:translateY(-3px);
  }
  body[data-faction="slaves"] .home-card .hc-t{ color:var(--sld-brass-hi); }
  body[data-faction="slaves"] .home-card .hc-d{ color:var(--muted); }
  body[data-faction="slaves"] nav button{ color:var(--muted); }
  body[data-faction="slaves"] nav button:hover{ color:var(--sld-brass-hi); }
  body[data-faction="slaves"] nav button.active{
    color:var(--sld-brass-hi); border-bottom-color:var(--sld-ember);
    text-shadow:0 0 12px rgba(224,113,44,.5);
    background-image:linear-gradient(180deg,#4A2018,#241615);
  }
  body[data-faction="slaves"] .card{
    background:linear-gradient(180deg,var(--sld-stone),var(--sld-deep)); border:1px solid var(--border);
  }
  body[data-faction="slaves"] .card:hover{ border-color:var(--sld-brass-lo); }
  body[data-faction="slaves"] .card h2::after{ background:linear-gradient(90deg,var(--sld-ember),transparent); }
  body[data-faction="slaves"] .stat-card{ border-color:var(--sld-brass-lo); }
  body[data-faction="slaves"] .stat-card:hover{ box-shadow:0 0 14px rgba(224,113,44,.3); }
  body[data-faction="slaves"] .total-bar .big{ color:var(--sld-brass-hi); }
  body[data-faction="slaves"] .progress>div{ background:linear-gradient(90deg,var(--sld-brass-lo),var(--sld-ember)); }
  body[data-faction="slaves"] button.btn{
    background:linear-gradient(180deg,#4A2018,#241615);
    border:1px solid var(--sld-brass-lo); color:var(--sld-brass-hi);
  }
  body[data-faction="slaves"] button.btn:hover{ border-color:var(--sld-brass); box-shadow:0 0 12px rgba(224,113,44,.35); }
  body[data-faction="slaves"] button.btn:active{ transform:translateY(1px); }
  body[data-faction="slaves"] button.btn[disabled]{ opacity:.45; box-shadow:none; }
  body[data-faction="slaves"] th{ color:var(--sld-brass-hi); border-bottom-color:var(--sld-brass-lo); }
  body[data-faction="slaves"] tr:hover td{ background:rgba(224,113,44,.08); }
  body[data-faction="slaves"] td .pts{ color:var(--sld-ember-hi); }
  body[data-faction="slaves"] textarea{ background:var(--sld-void); border-color:var(--border); color:var(--text); }
  body[data-faction="slaves"] textarea:focus{ border-color:var(--sld-ember); }
  body[data-faction="slaves"] [tabindex]:focus-visible,
  body[data-faction="slaves"] button:focus-visible{ outline:2px solid var(--sld-ember-hi); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){
    body[data-faction="slaves"] *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  }

  /* =========================================================================
     FORGERUINES DE HASHUT (helsmiths) — skin complet, calqué sur Stormcast.
     Palette relevée sur la bannière : améthyste des flammes et des portails,
     bronze vieilli des cadres, vert-de-gris toxique des fumées, sur un noir
     violacé. Le vert reste une TOUCHE (états « ok ») et jamais un accent
     d'interface : sur ce fond sombre il deviendrait illisible.
     ⚠️ 100 % CSS, aucune image. Contrairement à Stormcast, Skaven et
     Sylvaneth, cette faction n'a pas de pack d'icônes raster : on garde donc
     les silhouettes SVG du moteur et on les recolore. Ne PAS reprendre le
     `.hc-i svg{display:none}` de Stormcast, qui ne vaut que pour son pack.
     ========================================================================= */
  body[data-faction="helsmiths"]{
    /* charte de la faction */
    --forge-void:#0B0713; --forge-deep:#1B1026; --forge-stone:#2A1B3D;
    --forge-amethyst:#9B6FD8; --forge-amethyst-hi:#C6A6F0;
    --forge-bronze:#A8863F; --forge-bronze-hi:#D9BD72; --forge-bronze-lo:#6D5526;
    --forge-verdigris:#7FA83A; --forge-ember:#C4543A;
    /* mappage vers les variables du moteur */
    --bg:#0B0713; --surface:#1B1026;
    --panel:#1B1026; --panel2:#2A1B3D;
    --border:#4A3163; --border-gold:#A8863F;
    --gold:#A8863F; --gold2:#D9BD72; --gold3:#6D5526;
    --blue:#9B6FD8; --azur:#C6A6F0; --azure:#3A2255;
    --text:#EFE8F5; --muted:#A595BB; --muted2:#6E5C86;
    --ok:#7FA83A; --warn:#D9A23C; --bad:#C4543A;
    /* fond : lueur des forges en haut, braises au loin, nuit violacée */
    background:
      radial-gradient(ellipse 62% 42% at 50% -6%, rgba(155,111,216,.16), transparent 60%),
      radial-gradient(ellipse 40% 28% at 86% 8%, rgba(127,168,58,.07), transparent 60%),
      radial-gradient(ellipse 56% 58% at 10% 100%, rgba(168,134,63,.10), transparent 60%),
      linear-gradient(180deg,#150C20 0%, #0B0713 48%, #050309 100%);
  }

  /* En-tête : bannière pleine largeur, redessinee par Vincent en 3840x768 (ratio 5:1).
     Elle porte deja le titre « FORGERUINES DE HASHUT », donc on masque le texte de
     l'en-tete et les piliers de forge — sinon le titre s'affiche deux fois.
     ⚠️ Le chemin est en minuscules : Cloudflare sert depuis un systeme sensible a la
     casse, un dossier « Helsmith » donnerait un 404 en prod sans rien casser en local.

     ⚠️ `aspect-ratio`, PAS une hauteur en `vw` ni un plafond en pixels. C'est ce qui
     rend la banniere ENTIERE a toute largeur : la boite prend exactement le ratio du
     fichier, donc `cover` n'a plus rien a rogner. Un plafond (`clamp(...,330px)`)
     ferait varier le ratio de la boite avec la largeur de l'ecran — 5,8 sur un 24
     pouces, 7,8 sur un 27, 11,6 sur un 32 — et rognerait sur au moins deux des trois.
     `aspect-ratio` se calcule sur la largeur de l'ELEMENT, contrairement a `vw` qui
     inclut la barre de defilement : c'est ce demi pour cent d'ecart qui, sinon,
     rogne quand meme le cadre ornemental.
     ⚠️ Ce reglage n'est PAS transposable tel quel aux autres factions : il suppose un
     fichier en 5:1. Les bannieres encore en 2,4:1 (Esclaves, Stormcast, Skaven,
     Sylvaneth) gardent `clamp(160px,18vw,330px)` — leur donner 5:1 les rognerait de
     moitie. A basculer une par une, quand leur fichier 3840x768 arrive.
     `min-height` couvre le telephone, ou 5:1 ne ferait que 78 px de haut : la
     banniere y est recadree sur ses 56 % centraux, d'ou le titre bien au centre.
     ⚠️ Nom de fichier suffixe `-v3` a dessein : `IMG_CACHE` n'est pas versionne, une
     image remplacee sans changer de nom reste servie une visite (v1.23.4).
     ⚠️ Cette banniere-ci porte « HELSMITH OF HASHUT », en ANGLAIS, alors que tout le
     reste de l'interface est en francais — et comme le titre HTML est masque, c'est
     elle qui NOMME la faction a l'ecran. Choix explicite de Vincent, « pour le
     moment » : la version francaise (« FORGERUINES DE HASHUT », 3840x768, donc 1,9
     fois plus de pixels) reste dans l'historique git au commit b819061. Ne pas
     « corriger » la langue sans le lui demander. */
  body[data-faction="helsmiths"] header{
    background:#000 center/cover no-repeat url("images/aos/helsmiths/helsmiths-banner-v3.jpg");
    width:100%; aspect-ratio:2804/561; min-height:140px; height:auto; padding:0;
    border-top:2px solid #000;
    border-bottom:2px solid var(--forge-bronze);
    box-shadow:inset 0 -1px 0 rgba(217,189,114,.35), 0 6px 24px rgba(0,0,0,.55);
  }
  body[data-faction="helsmiths"] .hdr-inner,
  body[data-faction="helsmiths"] .frieze,
  body[data-faction="helsmiths"] .hdr-sym,
  body[data-faction="helsmiths"] header::before,
  body[data-faction="helsmiths"] header::after{ display:none !important; }
  body[data-faction="helsmiths"] .col-deco{ display:none; }
  body[data-faction="helsmiths"] #appTitle{ color:var(--forge-bronze-hi); }
  body[data-faction="helsmiths"] #appSigil{ filter:drop-shadow(0 0 10px rgba(155,111,216,.65)); }

  /* Tuiles du menu : cadre bronze, braise au survol, icônes SVG recolorées */
  body[data-faction="helsmiths"] .home-card{
    background:linear-gradient(180deg,var(--forge-stone),var(--forge-deep));
    border:1px solid var(--forge-bronze-lo);
    box-shadow:0 6px 18px rgba(0,0,0,.5);
  }
  body[data-faction="helsmiths"] .home-card::before{
    background:radial-gradient(ellipse 90% 70% at 50% 0%, rgba(155,111,216,.20), transparent 68%);
    opacity:.9;
  }
  body[data-faction="helsmiths"] .home-card:hover{
    border-color:var(--forge-bronze);
    box-shadow:0 0 20px rgba(155,111,216,.35), 0 8px 22px rgba(0,0,0,.55);
    transform:translateY(-3px);
  }
  body[data-faction="helsmiths"] .home-card .hc-t{ color:var(--forge-bronze-hi); }
  body[data-faction="helsmiths"] .home-card .hc-d{ color:var(--muted); }
  /* Icones de menu propres aux Forgeruines (PNG fournis par Vincent, generes puis
     optimises : 1254x1254 et ~2 Mo piece a l'origine, ramenes a 256x256 en palette
     adaptative, ~20 Ko piece, alpha preserve). Meme mecanique que Stormcast : le
     raster remplace la silhouette vectorielle du moteur, d'ou le `display:none` sur
     le SVG — il ne vaut QUE pour les factions qui ont leur propre pack.
     ⚠️ Le prefixe `images/` les fait tomber dans IMG_CACHE, non versionne : remplacer
     une icone SANS la renommer la laisse servie UNE visite (contrepartie v1.23.4). */
  body[data-faction="helsmiths"] .home-card .hc-i{ width:56px; height:56px; background:center/contain no-repeat;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); transition:transform .15s ease, filter .15s ease; }
  body[data-faction="helsmiths"] .home-card .hc-i svg{ display:none; }
  body[data-faction="helsmiths"] .home-card:hover .hc-i{ transform:scale(1.08);
    filter:drop-shadow(0 0 13px rgba(155,111,216,.65)); }
  body[data-faction="helsmiths"] .home-card[onclick*="'codex'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-codex.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'armies'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-armies.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'pool'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-pool.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'gallery'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-gallery.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'stats'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-stats.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'buy'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-buy.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'regles'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-regles.png"); }
  body[data-faction="helsmiths"] .home-card[onclick*="'reglages'"] .hc-i{ background-image:url("images/aos/helsmiths/menu-reglages.png"); }

  /* Navigation, cartes, boutons, tableaux */
  body[data-faction="helsmiths"] nav button{ color:var(--muted); }
  body[data-faction="helsmiths"] nav button:hover{ color:var(--forge-bronze-hi); }
  body[data-faction="helsmiths"] nav button.active{
    color:var(--forge-bronze-hi);
    border-bottom-color:var(--forge-amethyst);
    text-shadow:0 0 12px rgba(155,111,216,.5);
    background-image:linear-gradient(180deg,#3A2255,#1B1026);
  }
  body[data-faction="helsmiths"] .card{
    background:linear-gradient(180deg,var(--forge-stone),var(--forge-deep));
    border:1px solid var(--border);
  }
  body[data-faction="helsmiths"] .card:hover{ border-color:var(--forge-bronze-lo); }
  body[data-faction="helsmiths"] .card h2::after{
    background:linear-gradient(90deg,var(--forge-amethyst),transparent);
  }
  body[data-faction="helsmiths"] .stat-card{ border-color:var(--forge-bronze-lo); }
  body[data-faction="helsmiths"] .stat-card:hover{ box-shadow:0 0 14px rgba(155,111,216,.3); }
  body[data-faction="helsmiths"] .total-bar .big{ color:var(--forge-bronze-hi); }
  body[data-faction="helsmiths"] .progress>div{
    background:linear-gradient(90deg,var(--forge-bronze-lo),var(--forge-amethyst));
  }
  body[data-faction="helsmiths"] button.btn{
    background:linear-gradient(180deg,#3A2255,#1B1026);
    border:1px solid var(--forge-bronze-lo); color:var(--forge-bronze-hi);
  }
  body[data-faction="helsmiths"] button.btn:hover{
    border-color:var(--forge-bronze); box-shadow:0 0 12px rgba(155,111,216,.35);
  }
  body[data-faction="helsmiths"] button.btn:active{ transform:translateY(1px); }
  body[data-faction="helsmiths"] button.btn[disabled]{ opacity:.45; box-shadow:none; }
  body[data-faction="helsmiths"] th{
    color:var(--forge-bronze-hi);
    border-bottom-color:var(--forge-bronze-lo);
  }
  body[data-faction="helsmiths"] tr:hover td{ background:rgba(155,111,216,.08); }
  body[data-faction="helsmiths"] td .pts{ color:var(--forge-amethyst-hi); }
  body[data-faction="helsmiths"] textarea{
    background:var(--forge-void); border-color:var(--border); color:var(--text);
  }
  body[data-faction="helsmiths"] textarea:focus{ border-color:var(--forge-amethyst); }
  body[data-faction="helsmiths"] [tabindex]:focus-visible,
  body[data-faction="helsmiths"] button:focus-visible{
    outline:2px solid var(--forge-amethyst-hi); outline-offset:2px;
  }
  /* Mouvements réduits — même garde que Stormcast */
  @media (prefers-reduced-motion: reduce){
    body[data-faction="helsmiths"] *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  }


  /* ===== Écran de choix d'univers (scène gothique) ===== */
  .uni-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
  .uni-scene{ position:relative; background:#000 center/cover no-repeat url("images/ui/universe-bg-v3.jpg"); width:min(100vw, calc(100vh * 1672 / 941)); height:min(100vh, calc(100vw * 941 / 1672)); }
  .uni-cards{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3.4%; }
  .uni-card{ background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; width:15%; min-width:118px; transition:transform .18s ease, filter .18s ease; }
  .uni-card:hover{ transform:translateY(-7px); filter:drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
  .uni-card .uc-face{ position:relative; width:100%; aspect-ratio:.72; border-radius:7px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(0,0,0,.6); }
  .uni-card .uc-img{ width:64%; height:auto; object-fit:contain; filter:drop-shadow(0 2px 7px rgba(0,0,0,.75)); }
  .uni-aos .uc-face{ background:linear-gradient(160deg,#7d1d22,#46070a); border:2px solid #c9a45a; box-shadow:0 8px 26px rgba(0,0,0,.6), inset 0 0 0 4px rgba(201,164,90,.18); }
  .uni-40k .uc-face{ background:linear-gradient(160deg,#212126,#070708); border:2px solid #cfd2d8; box-shadow:0 8px 26px rgba(0,0,0,.6), inset 0 0 0 4px rgba(207,210,216,.14); }
  .uni-40k .uc-soon{ position:absolute; bottom:7%; left:50%; transform:translateX(-50%); font-family:var(--serif,serif); font-size:.66rem; letter-spacing:2px; color:#e0a23c; border:1px solid #e0a23c; border-radius:20px; padding:1px 11px; background:rgba(0,0,0,.5); white-space:nowrap; }
  .uni-card .uc-badge{ margin-top:9%; width:54%; padding:3px 0; text-align:center; border-radius:5px; font-size:.95rem; box-shadow:0 3px 9px rgba(0,0,0,.55); }
  .uc-gold{ background:linear-gradient(180deg,#e7cf86,#a8842f); border:1px solid #6e561d; color:#3a2a08; }
  .uc-red{ background:linear-gradient(180deg,#3a1010,#140505); border:1px solid #7a1418; color:#d98a86; }
  .uni-hot{ position:absolute; background:transparent; border:0; padding:0; cursor:pointer; border-radius:10px; transition:box-shadow .2s ease, transform .2s ease; }
  .uni-hot:hover{ box-shadow:0 0 0 2px rgba(201,164,90,.9), 0 0 16px rgba(201,164,90,.35); }
  .uni-hot:focus-visible{ outline:2px solid #c9a45a; outline-offset:2px; }

  /* ===== Sélection de faction v2 ===== */
  .fg-head{text-align:center;margin-bottom:16px}
  .fg-title{justify-content:center;font-family:var(--serif);color:var(--gold2,#e0c67a);letter-spacing:2px;font-size:1.7rem;margin:0 0 8px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
  .fg-nav{position:relative;max-width:760px;margin:0 auto}
  .fg-nav-bg{width:100%;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
  .fg-hot{position:absolute;top:6%;height:88%;background:transparent;border:0;cursor:pointer;border-radius:12px;mix-blend-mode:screen;transition:background .15s ease}
  .fg-hot:hover{background:radial-gradient(ellipse 62% 95% at center,rgba(255,216,132,.22),rgba(255,216,132,.06) 55%,transparent 78%)}
  .fg-hot:active{background:radial-gradient(ellipse 62% 95% at center,rgba(255,228,160,.34),rgba(255,216,132,.09) 55%,transparent 78%)}
  .fg-comm{display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;color:var(--text);padding:12px 22px;margin-bottom:14px;border:1px solid rgba(201,164,90,.55);border-radius:14px;background:linear-gradient(to left,rgba(11,18,32,0) 0,rgba(11,18,32,0) 260px,rgba(11,18,32,1) 520px),url("images/ui/community-banner.jpg") right center/auto 100% no-repeat,#0b1220}
  .fg-comm:hover{border-color:#e0c67a;box-shadow:0 0 16px rgba(201,164,90,.3)}
  .fg-comm-i{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(236,211,132,.35))}
  .fg-comm-t{display:block;font-family:var(--serif);font-weight:700;font-size:1.35rem;color:#e8c877;letter-spacing:1.5px;text-shadow:0 2px 6px rgba(0,0,0,.85)}
  .fg-comm-d{display:block;font-size:.92rem;color:#dfe5f0;text-shadow:0 1px 4px rgba(0,0,0,.9)}
  .fg-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .fg-search{display:flex;align-items:center;gap:8px;flex:1 1 240px;border:1px solid rgba(201,164,90,.45);border-radius:10px;padding:8px 12px;background:rgba(8,12,24,.75)}
  .fg-search input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:.95rem;min-width:0}
  .fg-chips{display:flex;gap:8px;flex-wrap:wrap}
  .fg-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(8,12,24,.75);border:1px solid rgba(201,164,90,.35);border-radius:10px;color:#d8cba0;font-family:var(--serif);letter-spacing:1px;font-size:.85rem;padding:9px 14px;cursor:pointer}
  .fg-chip .chip-i{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
  .fg-chip.on{border-color:#e0c67a;color:#ffe9b0;background:rgba(201,162,39,.16);box-shadow:0 0 10px rgba(201,164,90,.25)}
  .fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .fac-card{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;color:var(--text);padding:12px 14px;border:1px solid rgba(201,164,90,.45);border-radius:12px;background:linear-gradient(180deg,rgba(20,30,54,.82),rgba(8,12,24,.92));transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
  .fac-card:hover{transform:translateY(-2px);border-color:#e0c67a;box-shadow:0 4px 16px rgba(0,0,0,.45),0 0 12px rgba(201,164,90,.22)}
  .fac-card.off{opacity:.45;cursor:not-allowed}
  .fc-logo{flex:0 0 58px;width:58px;height:58px;display:flex;align-items:center;justify-content:center}
  .fc-logo img{max-width:58px;max-height:58px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
  .fc-emoji{font-size:2rem}
  .fc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
  .fc-name{font-family:var(--serif);font-weight:700;color:var(--gold2,#e0c67a);letter-spacing:.5px;font-size:.98rem;line-height:1.25}
  .fc-st{font-size:.76rem;color:var(--muted)}
  .fc-st.ok{color:#7fc76f}

  .uni-aos{ left:19.9%; top:24.8%; width:18.2%; height:54.5%; }
  .uni-40k{ left:61.7%; top:24.8%; width:18.2%; height:54.5%; }
  .uni-tow{ left:39.3%; top:24%; width:21.2%; height:55.5%; }

  .uni-version{ position:absolute; bottom:2.4%; left:0; right:0; text-align:center; font-family:var(--serif,serif); font-size:.82rem; letter-spacing:3px; color:#d9c187; text-shadow:0 1px 3px #000, 0 0 10px rgba(201,164,90,.25); }
  .uni-logout{ position:fixed; top:14px; right:16px; background:rgba(6,9,16,.88); border:1px solid #c9a45a; color:#e7cf86; border-radius:8px; padding:7px 16px; font-size:.8rem; letter-spacing:1px; cursor:pointer; z-index:210; box-shadow:0 2px 10px rgba(0,0,0,.6); }
  .uni-logout:hover{ background:rgba(0,0,0,.7); }
  @media(max-width:760px){ .uni-card{ width:26%; } .uni-cards{ gap:6%; } }
  /* ===== Partie 2 joueurs (refonte) ===== */
  .g-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  @media(max-width:900px){ .g-2col{ grid-template-columns:1fr; } }
  .g-col{ }
  .g-col-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
  .g-col-counters{ display:flex; gap:14px; margin-bottom:12px; }
  .g-cnt{ flex:1; text-align:center; }
  .g-cnt-l{ font-size:.68rem; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
  .g-col .g-units{ display:flex; flex-direction:column; gap:10px; }
  .g-reg-t{ font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold2,#cdb876); margin:8px 0 2px; }
  .g-roundbar{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
  /* fond plein écran adaptatif (décor étendu flouté) derrière la scène univers */
  #universeGate::before{ content:""; position:fixed; inset:0; z-index:0; background:#04050a center/cover no-repeat url("images/ui/universe-bg.jpg?v=2"); filter:blur(24px) brightness(.42) saturate(1.05); transform:scale(1.15); }
  .uni-wrap{ position:relative; z-index:1; }
  @media (max-aspect-ratio:1/1){
    #universeGate::before{ background-image:url("images/ui/universe-bg-mobile-v4.jpg"); filter:blur(26px) brightness(.4); }
    .uni-scene{ background-image:url("images/ui/universe-bg-mobile-v4.jpg"); width:min(100vw, calc(100vh * 941 / 1672)); height:min(100vh, calc(100vw * 1672 / 941)); }
    .uni-aos{ left:27%; top:10.5%; width:46%; height:28%; }
    .uni-40k{ left:27%; top:69.5%; width:46%; height:22.5%; }
    .uni-tow{ left:27%; top:40.5%; width:46%; height:27%; border:0; background:transparent; }
  }
/* ===== Liserés de statut — bronze (wishlist), argent (commandé), or épique (terminé) ===== */
tr.lis-bronze>td{background:linear-gradient(90deg,rgba(197,130,68,.13),transparent 70%)}
tr.lis-bronze>td:first-child{border-left:4px solid #c08347;box-shadow:inset 2px 0 0 rgba(255,214,165,.35)}
tr.lis-argent>td{background:linear-gradient(90deg,rgba(205,214,224,.11),transparent 70%)}
tr.lis-argent>td:first-child{border-left:4px solid #c3cdd9;box-shadow:inset 2px 0 0 rgba(255,255,255,.4)}
tr.lis-or>td{background:linear-gradient(90deg,rgba(224,198,122,.17),rgba(224,198,122,.05) 55%,transparent);border-top:1px solid rgba(224,198,122,.28);border-bottom:1px solid rgba(224,198,122,.28)}
tr.lis-or>td:first-child{border-left:5px solid #d9b662;box-shadow:inset 3px 0 0 rgba(255,236,180,.55),inset 8px 0 10px -5px rgba(224,198,122,.4)}
tr.lis-or>td:first-child b::before{content:"❖ ";color:var(--gold2,#e0c67a)}
div.lis-bronze{border-left:4px solid #c08347;padding-left:8px;border-radius:4px;background:linear-gradient(90deg,rgba(197,130,68,.13),transparent 70%);box-shadow:inset 2px 0 0 rgba(255,214,165,.3)}
div.lis-argent{border-left:4px solid #c3cdd9;padding-left:8px;border-radius:4px;background:linear-gradient(90deg,rgba(205,214,224,.11),transparent 70%);box-shadow:inset 2px 0 0 rgba(255,255,255,.35)}
div.lis-or{border-left:5px solid #d9b662;padding-left:8px;border-radius:4px;background:linear-gradient(90deg,rgba(224,198,122,.17),transparent 70%);box-shadow:inset 3px 0 0 rgba(255,236,180,.5),inset 8px 0 10px -5px rgba(224,198,122,.4);border-top:1px solid rgba(224,198,122,.25);border-bottom:1px solid rgba(224,198,122,.25)}
/* ===== Charte 40K — menu de sélection des armées (grimdark gothique) ===== */#factionGate[data-uni=w40k] .fg-title{font-family:Georgia,"Times New Roman",serif;color:#E8CD7F;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 16px rgba(185,147,61,.4),0 2px 4px rgba(0,0,0,.9)}#factionGate[data-uni=w40k] .fac-card{background:linear-gradient(180deg,rgba(17,26,44,.9),rgba(11,14,21,.95)),url(images/w40k/card-tex.jpg) center/cover;border:1px solid rgba(185,147,61,.45);border-radius:6px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.55)}#factionGate[data-uni=w40k] .fac-card::before,#factionGate[data-uni=w40k] .fac-card::after{content:"";position:absolute;width:13px;height:13px;border-color:#B9933D;border-style:solid;pointer-events:none;opacity:.9}#factionGate[data-uni=w40k] .fac-card::before{top:3px;left:3px;border-width:1px 0 0 1px}#factionGate[data-uni=w40k] .fac-card::after{bottom:3px;right:3px;border-width:0 1px 1px 0}#factionGate[data-uni=w40k] .fac-card:hover{border-color:#E8CD7F;box-shadow:0 0 18px rgba(224,198,122,.3),inset 0 0 0 1px rgba(0,0,0,.55)}#factionGate[data-uni=w40k] .fac-card.off{opacity:.55}#factionGate[data-uni=w40k] .fc-name{font-family:Georgia,serif;font-variant:small-caps;letter-spacing:.09em;color:#E8E0C7;font-size:1.04rem}#factionGate[data-uni=w40k] .fc-st.ok{color:#4ED265}#factionGate[data-uni=w40k] .fg-chip{background:#0E1423;border:1px solid rgba(185,147,61,.5);color:#cfd3dc;border-radius:6px;font-family:Georgia,serif;font-variant:small-caps;letter-spacing:.07em}#factionGate[data-uni=w40k] .fg-chip:hover{border-color:#E8CD7F;color:#E8E0C7}#factionGate[data-uni=w40k] .fg-chip.on{border-color:#E8CD7F;color:#E8CD7F;background:linear-gradient(180deg,rgba(185,147,61,.2),rgba(185,147,61,.05));box-shadow:0 0 10px rgba(224,198,122,.25)}#factionGate[data-uni=w40k] .fg-search{background:#0B0E15;border:1px solid rgba(185,147,61,.42);border-radius:6px}#factionGate[data-uni=w40k] .fg-search input{color:#E8E0C7}#factionGate[data-uni=w40k] .fg-search input::placeholder{color:#8C97A8}
  /* ===== Nav & tuiles teintees par la banniere (palettes extraites en median cut
     de chaque banniere ; genere par outil, voir CLAUDE.md — les 5 skins complets
     (stormcast, skaven, sylvaneth, slaves, helsmiths) gardent leur habillage). ===== */
  body[data-faction="cities"] nav button{ background:linear-gradient(180deg,#42382d,#17140f); border-color:#614b33; border-bottom-color:#9e7a54; }
  body[data-faction="cities"] nav button:hover{ color:#d1a373; }
  body[data-faction="cities"] nav button.active{ background:linear-gradient(180deg,#42382d,#17140f); color:#d1a373; border-color:#9e7a54; box-shadow:0 0 18px rgba(158,122,84,0.28), inset 0 0 12px rgba(158,122,84,0.14); }
  body[data-faction="cities"] .home-card{ background:linear-gradient(180deg,rgba(66,56,45,0.72),rgba(23,20,15,0.93)); border-color:#614b33; border-top-color:#9e7a54; }
  body[data-faction="cities"] .home-card:hover{ border-color:#9e7a54; box-shadow:0 0 18px rgba(158,122,84,0.3); }
  body[data-faction="cities"] .home-card .hc-t{ color:#d1a373; }
  body[data-faction="dok"] nav button{ background:linear-gradient(180deg,#422c2a,#170f0e); border-color:#612924; border-bottom-color:#9e433a; }
  body[data-faction="dok"] nav button:hover{ color:#d17b73; }
  body[data-faction="dok"] nav button.active{ background:linear-gradient(180deg,#422c2a,#170f0e); color:#d17b73; border-color:#9e433a; box-shadow:0 0 18px rgba(158,67,58,0.28), inset 0 0 12px rgba(158,67,58,0.14); }
  body[data-faction="dok"] .home-card{ background:linear-gradient(180deg,rgba(66,44,42,0.72),rgba(23,15,14,0.93)); border-color:#612924; border-top-color:#9e433a; }
  body[data-faction="dok"] .home-card:hover{ border-color:#9e433a; box-shadow:0 0 18px rgba(158,67,58,0.3); }
  body[data-faction="dok"] .home-card .hc-t{ color:#d17b73; }
  body[data-faction="fec"] nav button{ background:linear-gradient(180deg,#423c33,#171512); border-color:#61271e; border-bottom-color:#9e3f31; }
  body[data-faction="fec"] nav button:hover{ color:#d17f73; }
  body[data-faction="fec"] nav button.active{ background:linear-gradient(180deg,#423c33,#171512); color:#d17f73; border-color:#9e3f31; box-shadow:0 0 18px rgba(158,63,49,0.28), inset 0 0 12px rgba(158,63,49,0.14); }
  body[data-faction="fec"] .home-card{ background:linear-gradient(180deg,rgba(66,60,51,0.72),rgba(23,21,18,0.93)); border-color:#61271e; border-top-color:#9e3f31; }
  body[data-faction="fec"] .home-card:hover{ border-color:#9e3f31; box-shadow:0 0 18px rgba(158,63,49,0.3); }
  body[data-faction="fec"] .home-card .hc-t{ color:#d17f73; }
  body[data-faction="fyreslayers"] nav button{ background:linear-gradient(180deg,#422818,#170e08); border-color:#61391d; border-bottom-color:#ad6633; }
  body[data-faction="fyreslayers"] nav button:hover{ color:#d19a73; }
  body[data-faction="fyreslayers"] nav button.active{ background:linear-gradient(180deg,#422818,#170e08); color:#d19a73; border-color:#ad6633; box-shadow:0 0 18px rgba(173,102,51,0.28), inset 0 0 12px rgba(173,102,51,0.14); }
  body[data-faction="fyreslayers"] .home-card{ background:linear-gradient(180deg,rgba(66,40,24,0.72),rgba(23,14,8,0.93)); border-color:#61391d; border-top-color:#ad6633; }
  body[data-faction="fyreslayers"] .home-card:hover{ border-color:#ad6633; box-shadow:0 0 18px rgba(173,102,51,0.3); }
  body[data-faction="fyreslayers"] .home-card .hc-t{ color:#d19a73; }
  body[data-faction="gloomspite"] nav button{ background:linear-gradient(180deg,#424228,#17170e); border-color:#615f34; border-bottom-color:#9e9c54; }
  body[data-faction="gloomspite"] nav button:hover{ color:#d1ce73; }
  body[data-faction="gloomspite"] nav button.active{ background:linear-gradient(180deg,#424228,#17170e); color:#d1ce73; border-color:#9e9c54; box-shadow:0 0 18px rgba(158,156,84,0.28), inset 0 0 12px rgba(158,156,84,0.14); }
  body[data-faction="gloomspite"] .home-card{ background:linear-gradient(180deg,rgba(66,66,40,0.72),rgba(23,23,14,0.93)); border-color:#615f34; border-top-color:#9e9c54; }
  body[data-faction="gloomspite"] .home-card:hover{ border-color:#9e9c54; box-shadow:0 0 18px rgba(158,156,84,0.3); }
  body[data-faction="gloomspite"] .home-card .hc-t{ color:#d1ce73; }
  body[data-faction="idoneth"] nav button{ background:linear-gradient(180deg,#133942,#061417); border-color:#1b5361; border-bottom-color:#2d889e; }
  body[data-faction="idoneth"] nav button:hover{ color:#73bfd1; }
  body[data-faction="idoneth"] nav button.active{ background:linear-gradient(180deg,#133942,#061417); color:#73bfd1; border-color:#2d889e; box-shadow:0 0 18px rgba(45,136,158,0.28), inset 0 0 12px rgba(45,136,158,0.14); }
  body[data-faction="idoneth"] .home-card{ background:linear-gradient(180deg,rgba(19,57,66,0.72),rgba(6,20,23,0.93)); border-color:#1b5361; border-top-color:#2d889e; }
  body[data-faction="idoneth"] .home-card:hover{ border-color:#2d889e; box-shadow:0 0 18px rgba(45,136,158,0.3); }
  body[data-faction="idoneth"] .home-card .hc-t{ color:#73bfd1; }
  body[data-faction="kharadron"] nav button{ background:linear-gradient(180deg,#42311c,#17110a); border-color:#614e36; border-bottom-color:#caa271; }
  body[data-faction="kharadron"] nav button:hover{ color:#d1a875; }
  body[data-faction="kharadron"] nav button.active{ background:linear-gradient(180deg,#42311c,#17110a); color:#d1a875; border-color:#caa271; box-shadow:0 0 18px rgba(202,162,113,0.28), inset 0 0 12px rgba(202,162,113,0.14); }
  body[data-faction="kharadron"] .home-card{ background:linear-gradient(180deg,rgba(66,49,28,0.72),rgba(23,17,10,0.93)); border-color:#614e36; border-top-color:#caa271; }
  body[data-faction="kharadron"] .home-card:hover{ border-color:#caa271; box-shadow:0 0 18px rgba(202,162,113,0.3); }
  body[data-faction="kharadron"] .home-card .hc-t{ color:#d1a875; }
  body[data-faction="khorne"] nav button{ background:linear-gradient(180deg,#421a0f,#170905); border-color:#614027; border-bottom-color:#9e6940; }
  body[data-faction="khorne"] nav button:hover{ color:#d19c73; }
  body[data-faction="khorne"] nav button.active{ background:linear-gradient(180deg,#421a0f,#170905); color:#d19c73; border-color:#9e6940; box-shadow:0 0 18px rgba(158,105,64,0.28), inset 0 0 12px rgba(158,105,64,0.14); }
  body[data-faction="khorne"] .home-card{ background:linear-gradient(180deg,rgba(66,26,15,0.72),rgba(23,9,5,0.93)); border-color:#614027; border-top-color:#9e6940; }
  body[data-faction="khorne"] .home-card:hover{ border-color:#9e6940; box-shadow:0 0 18px rgba(158,105,64,0.3); }
  body[data-faction="khorne"] .home-card .hc-t{ color:#d19c73; }
  body[data-faction="lumineth"] nav button{ background:linear-gradient(180deg,#414142,#171717); border-color:#4f5561; border-bottom-color:#838da0; }
  body[data-faction="lumineth"] nav button:hover{ color:#abb8d1; }
  body[data-faction="lumineth"] nav button.active{ background:linear-gradient(180deg,#414142,#171717); color:#abb8d1; border-color:#838da0; box-shadow:0 0 18px rgba(131,141,160,0.28), inset 0 0 12px rgba(131,141,160,0.14); }
  body[data-faction="lumineth"] .home-card{ background:linear-gradient(180deg,rgba(65,65,66,0.72),rgba(23,23,23,0.93)); border-color:#4f5561; border-top-color:#838da0; }
  body[data-faction="lumineth"] .home-card:hover{ border-color:#838da0; box-shadow:0 0 18px rgba(131,141,160,0.3); }
  body[data-faction="lumineth"] .home-card .hc-t{ color:#abb8d1; }
  body[data-faction="nighthaunt"] nav button{ background:linear-gradient(180deg,#1b3c42,#091517); border-color:#38615b; border-bottom-color:#5c9e94; }
  body[data-faction="nighthaunt"] nav button:hover{ color:#79d1c3; }
  body[data-faction="nighthaunt"] nav button.active{ background:linear-gradient(180deg,#1b3c42,#091517); color:#79d1c3; border-color:#5c9e94; box-shadow:0 0 18px rgba(92,158,148,0.28), inset 0 0 12px rgba(92,158,148,0.14); }
  body[data-faction="nighthaunt"] .home-card{ background:linear-gradient(180deg,rgba(27,60,66,0.72),rgba(9,21,23,0.93)); border-color:#38615b; border-top-color:#5c9e94; }
  body[data-faction="nighthaunt"] .home-card:hover{ border-color:#5c9e94; box-shadow:0 0 18px rgba(92,158,148,0.3); }
  body[data-faction="nighthaunt"] .home-card .hc-t{ color:#79d1c3; }
  body[data-faction="nurgle"] nav button{ background:linear-gradient(180deg,#42381b,#171409); border-color:#615e39; border-bottom-color:#9f9a5d; }
  body[data-faction="nurgle"] nav button:hover{ color:#d1cb7a; }
  body[data-faction="nurgle"] nav button.active{ background:linear-gradient(180deg,#42381b,#171409); color:#d1cb7a; border-color:#9f9a5d; box-shadow:0 0 18px rgba(159,154,93,0.28), inset 0 0 12px rgba(159,154,93,0.14); }
  body[data-faction="nurgle"] .home-card{ background:linear-gradient(180deg,rgba(66,56,27,0.72),rgba(23,20,9,0.93)); border-color:#615e39; border-top-color:#9f9a5d; }
  body[data-faction="nurgle"] .home-card:hover{ border-color:#9f9a5d; box-shadow:0 0 18px rgba(159,154,93,0.3); }
  body[data-faction="nurgle"] .home-card .hc-t{ color:#d1cb7a; }
  body[data-faction="obr"] nav button{ background:linear-gradient(180deg,#153742,#071317); border-color:#285761; border-bottom-color:#428e9e; }
  body[data-faction="obr"] nav button:hover{ color:#73c1d1; }
  body[data-faction="obr"] nav button.active{ background:linear-gradient(180deg,#153742,#071317); color:#73c1d1; border-color:#428e9e; box-shadow:0 0 18px rgba(66,142,158,0.28), inset 0 0 12px rgba(66,142,158,0.14); }
  body[data-faction="obr"] .home-card{ background:linear-gradient(180deg,rgba(21,55,66,0.72),rgba(7,19,23,0.93)); border-color:#285761; border-top-color:#428e9e; }
  body[data-faction="obr"] .home-card:hover{ border-color:#428e9e; box-shadow:0 0 18px rgba(66,142,158,0.3); }
  body[data-faction="obr"] .home-card .hc-t{ color:#73c1d1; }
  body[data-faction="ogor"] nav button{ background:linear-gradient(180deg,#423a35,#171413); border-color:#615249; border-bottom-color:#9e8678; }
  body[data-faction="ogor"] nav button:hover{ color:#d1b29f; }
  body[data-faction="ogor"] nav button.active{ background:linear-gradient(180deg,#423a35,#171413); color:#d1b29f; border-color:#9e8678; box-shadow:0 0 18px rgba(158,134,120,0.28), inset 0 0 12px rgba(158,134,120,0.14); }
  body[data-faction="ogor"] .home-card{ background:linear-gradient(180deg,rgba(66,58,53,0.72),rgba(23,20,19,0.93)); border-color:#615249; border-top-color:#9e8678; }
  body[data-faction="ogor"] .home-card:hover{ border-color:#9e8678; box-shadow:0 0 18px rgba(158,134,120,0.3); }
  body[data-faction="ogor"] .home-card .hc-t{ color:#d1b29f; }
  body[data-faction="orruk"] nav button{ background:linear-gradient(180deg,#3f3a29,#16130c); border-color:#5a4d31; border-bottom-color:#bcb490; }
  body[data-faction="orruk"] nav button:hover{ color:#d8d0b2; }
  body[data-faction="orruk"] nav button.active{ background:linear-gradient(180deg,#3f3a29,#16130c); color:#d8d0b2; border-color:#bcb490; box-shadow:0 0 18px rgba(188,180,144,0.28), inset 0 0 12px rgba(188,180,144,0.14); }
  body[data-faction="seraphon"] nav button{ background:linear-gradient(180deg,#32423e,#111715); border-color:#615b4d; border-bottom-color:#b1a78c; }
  body[data-faction="seraphon"] nav button:hover{ color:#d1c5a5; }
  body[data-faction="seraphon"] nav button.active{ background:linear-gradient(180deg,#32423e,#111715); color:#d1c5a5; border-color:#b1a78c; box-shadow:0 0 18px rgba(177,167,140,0.28), inset 0 0 12px rgba(177,167,140,0.14); }
  body[data-faction="seraphon"] .home-card{ background:linear-gradient(180deg,rgba(50,66,62,0.72),rgba(17,23,21,0.93)); border-color:#615b4d; border-top-color:#b1a78c; }
  body[data-faction="seraphon"] .home-card:hover{ border-color:#b1a78c; box-shadow:0 0 18px rgba(177,167,140,0.3); }
  body[data-faction="seraphon"] .home-card .hc-t{ color:#d1c5a5; }
  body[data-faction="slaanesh"] nav button{ background:linear-gradient(180deg,#3f2a42,#160f17); border-color:#614158; border-bottom-color:#9e6a90; }
  body[data-faction="slaanesh"] nav button:hover{ color:#d18cbe; }
  body[data-faction="slaanesh"] nav button.active{ background:linear-gradient(180deg,#3f2a42,#160f17); color:#d18cbe; border-color:#9e6a90; box-shadow:0 0 18px rgba(158,106,144,0.28), inset 0 0 12px rgba(158,106,144,0.14); }
  body[data-faction="slaanesh"] .home-card{ background:linear-gradient(180deg,rgba(63,42,66,0.72),rgba(22,15,23,0.93)); border-color:#614158; border-top-color:#9e6a90; }
  body[data-faction="slaanesh"] .home-card:hover{ border-color:#9e6a90; box-shadow:0 0 18px rgba(158,106,144,0.3); }
  body[data-faction="slaanesh"] .home-card .hc-t{ color:#d18cbe; }
  body[data-faction="sob"] nav button{ background:linear-gradient(180deg,#422f24,#17100d); border-color:#614d40; border-bottom-color:#9e7d68; }
  body[data-faction="sob"] nav button:hover{ color:#d1a68a; }
  body[data-faction="sob"] nav button.active{ background:linear-gradient(180deg,#422f24,#17100d); color:#d1a68a; border-color:#9e7d68; box-shadow:0 0 18px rgba(158,125,104,0.28), inset 0 0 12px rgba(158,125,104,0.14); }
  body[data-faction="sob"] .home-card{ background:linear-gradient(180deg,rgba(66,47,36,0.72),rgba(23,16,13,0.93)); border-color:#614d40; border-top-color:#9e7d68; }
  body[data-faction="sob"] .home-card:hover{ border-color:#9e7d68; box-shadow:0 0 18px rgba(158,125,104,0.3); }
  body[data-faction="sob"] .home-card .hc-t{ color:#d1a68a; }
  body[data-faction="soulblight"] nav button{ background:linear-gradient(180deg,#3b3e42,#141517); border-color:#613937; border-bottom-color:#9e5d5a; }
  body[data-faction="soulblight"] nav button:hover{ color:#d17b77; }
  body[data-faction="soulblight"] nav button.active{ background:linear-gradient(180deg,#3b3e42,#141517); color:#d17b77; border-color:#9e5d5a; box-shadow:0 0 18px rgba(158,93,90,0.28), inset 0 0 12px rgba(158,93,90,0.14); }
  body[data-faction="soulblight"] .home-card{ background:linear-gradient(180deg,rgba(59,62,66,0.72),rgba(20,21,23,0.93)); border-color:#613937; border-top-color:#9e5d5a; }
  body[data-faction="soulblight"] .home-card:hover{ border-color:#9e5d5a; box-shadow:0 0 18px rgba(158,93,90,0.3); }
  body[data-faction="soulblight"] .home-card .hc-t{ color:#d17b77; }
  body[data-faction="tzeentch"] nav button{ background:linear-gradient(180deg,#191d42,#080a17); border-color:#274e61; border-bottom-color:#40809f; }
  body[data-faction="tzeentch"] nav button:hover{ color:#73b2d1; }
  body[data-faction="tzeentch"] nav button.active{ background:linear-gradient(180deg,#191d42,#080a17); color:#73b2d1; border-color:#40809f; box-shadow:0 0 18px rgba(64,128,159,0.28), inset 0 0 12px rgba(64,128,159,0.14); }
  body[data-faction="tzeentch"] .home-card{ background:linear-gradient(180deg,rgba(25,29,66,0.72),rgba(8,10,23,0.93)); border-color:#274e61; border-top-color:#40809f; }
  body[data-faction="tzeentch"] .home-card:hover{ border-color:#40809f; box-shadow:0 0 18px rgba(64,128,159,0.3); }
  body[data-faction="tzeentch"] .home-card .hc-t{ color:#73b2d1; }