/* KS Battle Lab · feuille commune */
:root{
  --bg:#0B111B; --panel:#151E2C; --panel-2:#1C2738; --line:#2A3649; --line-2:#3A4860;
  --text:#E7ECF4; --muted:#97A4B8; --dim:#5F6C80;
  --gold:#E3B24F; --gold-soft:rgba(227,178,79,.14);
  --blue:#4F8FF0; --blue-soft:rgba(79,143,240,.16);
  --red:#EF5A57; --red-soft:rgba(239,90,87,.16);
  --head:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --r-sm:8px;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html[lang="zh-Hant"]{--head:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; --body:var(--head)}
html[lang="zh-Hans"]{--head:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --body:var(--head)}
html[lang="ko"]{--head:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; --body:var(--head)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(5rem + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
html[lang^="zh"] body, html[lang="ko"] body{line-height:1.8; font-size:1rem}
html[lang="ko"] body{word-break:keep-all; overflow-wrap:anywhere}
html[lang="de"] body{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}   /* allemand (09/11) : mots composés longs */
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

/* Affichage par langue */
html:not([lang="fr"]) [data-l="fr"], html:not([lang="en"]) [data-l="en"],
html:not([lang="zh-Hant"]) [data-l="zh-Hant"], html:not([lang="zh-Hans"]) [data-l="zh-Hans"],
html:not([lang="ko"]) [data-l="ko"], html:not([lang="pt-BR"]) [data-l="pt-BR"],
html:not([lang="de"]) [data-l="de"], html:not([lang="es"]) [data-l="es"]{display:none !important}

/* En-tête */
.site-head{position:sticky; top:0; padding-top:env(safe-area-inset-top,0px); z-index:50; background:rgba(11,17,27,.95); backdrop-filter:blur(10px); border-bottom:1px solid #222E40}
.site-head .in{max-width:77.5rem; margin:0 auto; padding:.6rem 2rem; display:flex; align-items:center; gap:.9rem}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); flex-shrink:0}
.logo .logo-mark{position:relative; display:inline-flex}
.logo svg{width:2.1rem; height:2.1rem; display:block}
.logo b{font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:.05em; line-height:1; white-space:nowrap}
.logo b i{font-style:normal; color:var(--gold)}
/* menu : 3 groupes en menus déroulants (05/11/2026) */
.nav{display:flex; align-items:center; justify-content:center; gap:.3rem; flex:1 1 auto; min-width:0}
.dd{position:relative}
.dd-btn{display:flex; align-items:center; gap:.4rem; min-height:2.5rem; padding:0 .85rem; border:0; border-radius:8px; background:transparent; color:var(--text); font:600 1.15rem var(--head); letter-spacing:.02em; white-space:nowrap; cursor:pointer; transition:color .15s, background .15s}
.dd-btn small{font-size:.68rem; color:var(--muted); transition:transform .18s}
.dd-btn:hover, .dd.open .dd-btn{background:var(--panel-2)}
.dd.open .dd-btn small{transform:rotate(180deg)}
.dd.cur .dd-btn, .dd.cur .dd-btn small{color:var(--gold)}
.dd.cur .dd-btn{box-shadow:inset 0 -2px 0 var(--gold); border-radius:8px 8px 0 0}
.dd-menu{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:.45rem; z-index:60}
.dd.open .dd-menu{display:block}
.dd-pn{display:flex; flex-direction:column; gap:.1rem; width:max-content; min-width:16rem; max-width:21rem; padding:.4rem; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.5); animation:ksMenu .18s ease both}
.dd-pn a{display:flex; flex-direction:column; gap:.12rem; padding:.55rem .75rem; border-radius:8px; text-decoration:none; color:var(--text)}
.dd-pn a b{font:700 1.15rem/1.15 var(--head); letter-spacing:.02em}
.dd-pn a span{font-size:.86rem; line-height:1.3; color:var(--muted)}
.dd-pn a:hover, .dd-pn a:focus-visible{background:var(--panel-2)}
.dd-pn a:hover b{color:var(--gold)}
.dd-pn a[aria-current="page"]{background:var(--gold-soft); box-shadow:inset 3px 0 0 var(--gold)}
.dd-pn a[aria-current="page"] b{color:var(--gold)}
/* bouton « Simuler » (05/11) : l'outil phare, à droite des menus */
.hcta{display:inline-flex; align-items:center; gap:.45rem; min-height:2.5rem; padding:0 1rem; flex-shrink:0; border-radius:8px; border:1px solid var(--gold); background:var(--gold); color:#1A1406; font:700 1.12rem var(--head); letter-spacing:.03em; text-decoration:none; white-space:nowrap; transition:filter .15s, background .15s}
.hcta svg{width:1.05rem; height:1.05rem}
.hcta:hover{filter:brightness(1.08)}
.hcta[aria-current="page"]{background:var(--gold-soft); color:var(--gold)}
.dcta{display:none}
/* renvoi vers le Simulateur en fin de page */
.simcta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.5rem; margin:2.5rem 0 0; padding:1.1rem 1.3rem; border-radius:14px; border:1px solid rgba(227,178,79,.55); background:linear-gradient(rgba(227,178,79,.1),rgba(227,178,79,.1)),var(--panel)}
.simcta p{margin:0; flex:1 1 22rem; font-size:1.05rem; line-height:1.45; max-width:none}
.btn-sim{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.9rem; padding:0 1.3rem; border-radius:10px; background:var(--gold); color:#1A1406; font:700 1.2rem var(--head); letter-spacing:.03em; text-decoration:none; white-space:nowrap}
.btn-sim svg{width:1.15rem; height:1.15rem}
.btn-sim:hover{filter:brightness(1.08)}
@media (max-width:40rem){.simcta{padding:1rem} .simcta p{font-size:.98rem} .btn-sim{width:100%}}
.lang{position:relative; margin-left:auto; flex-shrink:0}
.lang-btn{display:flex; align-items:center; gap:.45rem; min-height:2.5rem; padding:0 .75rem; border:1px solid var(--line-2); border-radius:8px; background:transparent; color:var(--text); font:700 .9rem var(--body); cursor:pointer}
.lang-btn svg{width:1.1rem; height:1.1rem}
.lang-btn small{font-size:.7rem; color:var(--muted)}
.lang-menu{display:none; position:absolute; right:0; top:calc(100% + .45rem); z-index:60; min-width:11rem; padding:.35rem; flex-direction:column; background:var(--panel); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.lang.open .lang-menu{display:flex; animation:ksMenu .18s ease both}
.lang-menu a{display:flex; align-items:center; min-height:2.5rem; padding:0 .8rem; border:0; border-radius:6px; background:transparent; color:var(--text); font:500 .95rem var(--body); text-align:left; text-decoration:none; cursor:pointer}
.lang-menu a:hover{background:var(--panel-2)}
.lang-menu a[aria-current="true"]{color:var(--gold); font-weight:700; background:var(--panel-2)}
.hshare{display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; flex-shrink:0; border:1px solid var(--line-2); border-radius:8px; background:transparent; color:var(--text); cursor:pointer}
.hshare svg{width:1.1rem; height:1.1rem}
.burger{display:none; width:2.75rem; height:2.75rem; flex-shrink:0; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:8px; background:transparent; color:var(--text); cursor:pointer}
.burger svg{width:1.35rem; height:1.35rem}
.ks-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
.drawer{display:none}
/* en-tête aligné sur la largeur du contenu (.wrap : 77,5rem, marges 2rem) */
@media (max-width:56rem){   /* menu ☰ (05/11 : 3 menus déroulants + bouton Simuler ; le menu complet tient dès 56rem) */
  .site-head .in{flex-wrap:wrap; gap:.6rem; padding:.55rem 1rem}
  .nav, .lang, .hcta{display:none}
  .drawer .dcta{display:flex; justify-content:center; gap:.5rem; min-height:3rem; margin:.6rem 0 .35rem; border:0; border-radius:10px; background:var(--gold); color:#1A1406; font:700 1.25rem var(--head); letter-spacing:.03em}
  .drawer .dcta svg{width:1.15rem; height:1.15rem}
  .drawer .dcta[aria-current="page"]{background:var(--gold-soft); color:var(--gold)}
  .logo{flex:1 1 auto}
  .burger{display:inline-flex}
  /* le tiroir défile seul quand il est plus haut que l'écran (05/11) ; hauteur exacte posée par site.js, celle-ci en secours */
  /* tiroir posé par-dessus la page, sous l'en-tête (05/11) : la hauteur de l'en-tête ne change pas, la page ne saute pas à l'ouverture ni à la fermeture */
  .site-head.open .drawer{display:block; position:absolute; left:0; right:0; top:100%; padding:0 1rem; background:#0B111B; border-top:1px solid #222E40; border-bottom:1px solid #222E40; box-shadow:0 18px 30px rgba(0,0,0,.45); animation:ksMenu .25s ease both;
    max-height:calc(100vh - 3.9rem - env(safe-area-inset-top,0px)); max-height:calc(100dvh - 3.9rem - env(safe-area-inset-top,0px)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  /* tiroir compact (08/11) : trois blocs distincts, liens de 44 px, page actuelle surlignée, profil et langue sur une ligne */
  .drawer nav{display:flex; flex-direction:column; gap:.5rem; padding:.65rem 0 calc(.9rem + env(safe-area-inset-bottom,0px))}
  .drawer a{color:var(--text); text-decoration:none; display:flex; align-items:center; min-height:2.75rem}
  .drawer .dgrps{display:grid; gap:.5rem; grid-template-columns:minmax(0,1fr)}
  .drawer .dgrp{display:flex; flex-direction:column; padding:.1rem .35rem .3rem; border:1px solid var(--line); border-radius:12px; background:#121A27}
  .drawer .grp{display:flex; align-items:center; gap:.45rem; min-height:1.85rem; padding:0 .45rem; font:700 .8rem var(--head); letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
  html[lang^="zh"] .drawer .grp, html[lang="ko"] .drawer .grp{letter-spacing:.04em}
  .drawer .grp svg{width:.95rem; height:.95rem; flex:none}
  .drawer .dgrp a{gap:.7rem; padding:0 .5rem; border-radius:8px; font:600 1.02rem/1.2 var(--body)}
  .drawer .dgrp a .di{flex:none; display:grid; place-items:center; width:1.25rem; height:1.25rem; color:var(--muted)}
  .drawer .dgrp a .di svg{width:1.2rem; height:1.2rem}
  .drawer .dgrp a .dt{flex:1; min-width:0}
  .drawer .dgrp a:hover{background:rgba(255,255,255,.03)}
  .drawer .dgrp a[aria-current="page"]{background:rgba(227,178,79,.16); color:var(--gold); font-weight:700}
  .drawer .dgrp a[aria-current="page"] .di{color:var(--gold)}
  .drawer .here{flex:none; font:600 .7rem var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--gold)}
  .drawer .dfoot{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem}
  .drawer .dfoot .dprof, .drawer .dlang-btn{display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.75rem; min-width:0; padding:0 .6rem; border:1px solid var(--line-2); border-radius:10px; background:transparent; color:var(--text); font:600 .95rem var(--body); cursor:pointer}
  .drawer .dfoot .dprof[aria-current="page"]{border-color:var(--gold); color:var(--gold)}
  .drawer .dlang-btn svg{flex:none; width:1.05rem; height:1.05rem}
  .drawer .dlang-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .drawer .dlang-btn[aria-expanded="true"]{border-color:var(--gold)}
  .drawer .dlang-btn small{font-size:.7rem; color:var(--muted)}
  .drawer .dlangs[hidden]{display:none}
  .drawer .langs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem}
  .drawer .langs a{display:flex; align-items:center; justify-content:center; min-height:2.75rem; border-radius:8px; border:1px solid var(--line-2); background:transparent; color:var(--text); font:600 .9rem var(--body); text-decoration:none; cursor:pointer}
  .drawer .langs a[aria-current="true"]{background:var(--gold); border-color:var(--gold); color:#1A1406}
}
@media (max-width:24rem){.logo b{font-size:1.35rem} .hshare{display:none}}


/* Mise en page */
.wrap{max-width:68rem; margin:0 auto; padding:0 1.25rem}
.page-hero{padding:2.5rem 0 1.5rem}
.page-hero h1{font-family:var(--head); font-weight:800; font-size:clamp(2.4rem,6vw,3.8rem); line-height:1.02; margin:0 0 .8rem}
.page-hero p.lead{font-size:1.2rem; color:var(--muted); max-width:none; margin:0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem}
.stack{display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr)}
.card, .tile{min-width:0}
h2.sec{font-family:var(--head); font-weight:700; font-size:clamp(1.7rem,4vw,2.2rem); line-height:1.1; margin:0; display:flex; align-items:baseline; gap:.75rem}
h2.sec .k{font-size:1.1rem; color:var(--bg); background:var(--gold); border-radius:6px; padding:.05rem .5rem; font-weight:800; transform:translateY(-.2rem)}
h3{font-family:var(--head); font-weight:700; font-size:1.3rem; margin:1.6rem 0 .4rem; color:var(--text)}
p{margin:.55rem 0; max-width:none}
ul{padding-left:1.15rem; margin:.6rem 0; max-width:none} li{margin:.4rem 0}
li::marker{color:var(--gold)}
strong{font-weight:700; color:#fff}
.muted{color:var(--muted)}
.tw{overflow-x:auto; margin:1rem 0; max-width:100%}
table{border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:100%}
th,td{padding:.55rem .8rem; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--head); font-weight:600; font-size:1rem; color:var(--muted)}
tbody tr:last-child td{border-bottom:0}
@media (max-width:40rem){th,td{padding:.5rem .5rem} .card{padding:1.1rem} .tile{padding:1rem}}
.c-b{color:var(--blue)} .c-r{color:var(--red)} .zero{color:var(--dim)}
.site-foot{max-width:68rem; margin:3rem auto 0; padding:1.5rem 1.25rem 3rem; color:var(--dim); font-size:.9rem; border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){:not(.arena *):not(.rdot-fx *){transition:none !important; animation:none !important}}

/* Aide repliable : « Quelles captures faire ? » */
.help{margin:.9rem 0;padding:0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2)}
.help>summary{cursor:pointer;padding:.75rem 1rem;font-weight:700;color:var(--gold);list-style:none}
.help>summary::-webkit-details-marker{display:none}
.help>summary::after{content:" ▾";opacity:.7}
.help[open]>summary::after{content:" ▴"}
.help[open]>summary{border-bottom:1px solid var(--line)}
.help .hb{padding:.9rem 1rem}
.help .hb>p{margin:0 0 .8rem}
.help .figs{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:52rem){.help .figs.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.help figure{margin:0}
.help figcaption{font-weight:700;margin:0 0 .4rem}
.help img{display:block;width:100%;max-width:28rem;height:auto;border-radius:8px;border:1px solid var(--line)}
.help ol.num{list-style:none;padding:0;margin:.6rem 0 0}
.help ol.num li{display:flex;gap:.55rem;align-items:flex-start;margin:.35rem 0}
.help .n{flex:none;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--gold);color:#1e160e;font-weight:800;font-size:.85rem;display:grid;place-items:center}

/* Le point rouge est ton ami */
.rdot{position:absolute; top:calc(var(--s) * -.3); right:calc(var(--s) * -.3); z-index:30; width:var(--s); height:var(--s); border-radius:50%; background:radial-gradient(circle at 35% 30%,#FF5A4E,#E3201B 60%,#C4120F); box-shadow:0 1px 2px rgba(0,0,0,.35); color:#fff; font:800 calc(var(--s) * .66)/1 var(--body); display:grid; place-items:center; cursor:pointer; animation:rdot-in .35s cubic-bezier(.3,1.7,.5,1) both}
.rdot.big{background:#E23B33; box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.4); text-shadow:0 1px 1px rgba(0,0,0,.35)}
.rdot.inset{top:3px; right:3px}
.rdot::after{content:""; position:absolute; inset:-6px}
.rdot.pop{animation:rdot-out .3s ease-in forwards; pointer-events:none}
@keyframes rdot-in{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes rdot-out{40%{transform:scale(1.5)}to{transform:scale(0); opacity:0}}
.rdot-fx{position:fixed; inset:0; z-index:200; pointer-events:none; overflow:hidden; background:rgba(8,12,20,0); transition:background .4s}
.rdot-fx.dim{background:rgba(8,12,20,.74)}
.rdot-fx.out{background:rgba(8,12,20,0)}
.rdot-inv{position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; background:radial-gradient(circle at 35% 30%,#FF5A4E,#E3201B 60%,#C4120F); box-shadow:0 1px 3px rgba(0,0,0,.4); display:grid; place-items:center; color:#fff; font:800 calc(var(--s) * .55)/1 var(--body); animation:rdot-in .3s cubic-bezier(.3,1.7,.5,1) both}
.rdot-inv.num{background:#E3271F; box-shadow:0 0 0 1.5px #fff}
.rdot-inv.go{transition:left .95s cubic-bezier(.7,0,.3,1),top .95s cubic-bezier(.7,0,.3,1),transform .95s}
.rdot-inv{background:#E3271F; box-shadow:none}
.rdot-stage{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--k,1))}
.rdot-say{position:relative; width:18rem; height:18rem; animation:rdot-say-in 1s cubic-bezier(.2,1.6,.4,1) both}
.rdot-fx.out .rdot-say{animation:rdot-say-out .5s cubic-bezier(.6,-.4,.8,.4) forwards}
.rdot-big{position:absolute; left:0; bottom:0; width:8.5rem; height:8.5rem; border-radius:50%; background:#E3271F; box-shadow:0 0 0 4px #fff; display:grid; place-items:center; color:#fff; font:900 4rem/1 "Nunito",var(--body)}
.rdot-bubble{position:absolute; right:0; top:0; width:12.5rem; background:#fff; color:#1F2633; border-radius:22px; padding:1rem 1.1rem; font:900 1.45rem/1.15 "Nunito",var(--body); text-align:center; text-wrap:balance; transform-origin:10% 100%; animation:rdot-bub .5s cubic-bezier(.2,1.8,.4,1) .55s both}
.rdot-bubble::after{content:""; position:absolute; left:1.6rem; bottom:-1rem; border:1rem solid transparent; border-top-color:#fff; border-bottom:0; transform:skewX(25deg)}
@keyframes rdot-say-in{0%{transform:scale(0)}45%{transform:scale(1.08)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes rdot-say-out{to{transform:scale(0) rotate(20deg); opacity:0}}
@keyframes rdot-bub{from{transform:scale(0)}}

/* Partager la page */
.hshare{display:inline-grid; place-items:center; flex-shrink:0; width:2.6rem; height:2.6rem; margin-left:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); cursor:pointer}
.hshare:hover{border-color:var(--gold); color:var(--gold)}
.hshare svg{width:1.15rem; height:1.15rem}
.hshare + .discord{margin-left:0}
@media (min-width:84.01rem){.hshare{order:5; margin-left:0}}
.hshare-ok{position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:150; background:var(--panel-2); color:var(--text); border:1px solid var(--gold); border-radius:999px; padding:.5rem 1rem; font:600 .95rem var(--body); box-shadow:0 6px 18px rgba(0,0,0,.5)}
@media (min-width:40.01rem) and (max-width:56rem){.drawer .dgrps{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* tablette : les 3 blocs du tiroir côte à côte (08/11) */
@media (max-width:40rem){.site-head .in{gap:.45rem; padding-left:.8rem; padding-right:.8rem} .site-head.open .drawer{padding:0 .8rem} .hshare,.site-head .discord,.burger{width:2.45rem; height:2.45rem}}


/* boutons d'en-tête : même hauteur et même arrondi partout */
.site-head .discord{height:2.6rem; border-radius:var(--r-sm); box-sizing:border-box}
.hshare,.burger{box-sizing:border-box}
@media (max-width:40rem){.site-head .discord{height:2.45rem}}

/* ===== KS Battle Lab : habillage commun ===== */
@keyframes ksIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ksMenu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ksFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html{scroll-behavior:smooth}
.wrap{max-width:77.5rem; padding:0 2rem}
.page-hero{padding:3rem 0 2rem}
.page-hero .kicker{display:block; font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:600; font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem}
html[lang^="zh"] .page-hero .kicker, html[lang="ko"] .page-hero .kicker{font-family:var(--head); letter-spacing:.06em}
.page-hero h1{font-size:clamp(2.6rem,6vw,4rem); line-height:.95; text-transform:uppercase; letter-spacing:.005em; overflow-wrap:break-word; hyphens:auto}
html[lang^="zh"] .page-hero h1, html[lang="ko"] .page-hero h1{line-height:1.15}
.page-hero p.lead{color:#B4BFCE; font-size:1.2rem; max-width:44em; margin-top:.9rem}
.card{border-radius:14px; padding:1.75rem}
@media (min-width:48rem){.card{padding:2rem}}
h2.sec{text-transform:uppercase; align-items:center; gap:.85rem; font-size:clamp(1.55rem,3.6vw,2.15rem); line-height:1.05}
h2.sec .k{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:999px; padding:0; background:var(--gold); color:#1A1406; font:800 1.35rem/1 "Barlow Condensed","Arial Narrow",sans-serif; transform:none}
summary{transition:color .2s}
details[open] > :not(summary){animation:ksFade .3s ease both}
button{transition:transform .12s ease, filter .15s ease, background-color .2s, border-color .2s}
button:active{transform:scale(.97)}
a.guide, a.tile{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
a.guide:hover, a.tile:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.35)}
main > .card, main > section, main > details, .stack > .card{animation:ksIn .55s cubic-bezier(.2,.7,.2,1) both}
main > :nth-child(2){animation-delay:.06s} main > :nth-child(3){animation-delay:.12s} main > :nth-child(n+4){animation-delay:.18s}
/* partie « outil » pleine largeur (calculateur, comparateur) */
section.band{position:relative; margin-top:1.5rem; padding:2.8rem 0 3.2rem; background:#0F1622; box-shadow:0 0 0 100vmax #0F1622; clip-path:inset(0 -100vmax); border-top:1px solid var(--line); scroll-margin-top:-1.2rem}
.band-head{display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.4rem}
.band-head .kk{font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:600; font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.band-head .tt{display:flex; align-items:center; gap:1.1rem}
.band-head .ic{width:4rem; height:4rem; border-radius:1rem; background:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.band-head .ic svg{width:2.25rem; height:2.25rem}
.band-head h2{margin:0; font-family:var(--head); font-weight:800; font-size:clamp(2.2rem,5.5vw,3.6rem); line-height:.95; text-transform:uppercase}
.band-head p{margin:0; color:#B4BFCE; font-size:1.1rem; max-width:52em}
@media (max-width:40rem){
  .wrap{padding:0 1rem}
  .page-hero{padding:2rem 0 1.25rem}
  .card{padding:1.15rem 1rem; border-radius:12px}
  h2.sec .k{width:2rem; height:2rem; font-size:1.1rem}
  section.band{padding:1.8rem 0 2rem}
  .band-head .ic{width:3rem; height:3rem; border-radius:.75rem}
  .band-head .ic svg{width:1.7rem; height:1.7rem}
}
/* pied de page */
.site-foot{max-width:77.5rem; padding:1.5rem 2rem 3rem; color:var(--muted); border-top-color:#222E40}
.site-foot .sig{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; margin-top:.9rem; font-size:.9rem}
.site-foot .sig b{color:var(--text)}
.site-foot p + .sig, .site-foot span + .sig{padding-top:.9rem; border-top:1px solid #1C2738}
.flangs a{background:none; border:0; padding:0; color:var(--muted); font:inherit; text-decoration:none; cursor:pointer}
.flangs a:hover, .flangs a[aria-current="true"]{color:var(--gold)}
@media (max-width:40rem){.site-foot{padding:1.5rem 1rem 3rem}}
/* point rouge : plus grand, posé sur le coin des encadrés */
.rdot{font-size:calc(var(--s) * .62)}

/* KS Battle Lab : alignement des éléments repris de l'ancien site */
.ksi{display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em; flex:none}
/* phrase-clé : filet doré à gauche, sans boîte jaune ni flèche */
main .punch{font-family:var(--body); font-weight:600; font-size:clamp(1.08rem,2.2vw,1.22rem); line-height:1.45; color:var(--text); margin:1.4rem 0 0; padding:1rem 1.25rem; background:#101827; border:0; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; max-width:none}
main .punch::before{content:none}
main .punch em, main .punch strong, main .punch b{color:var(--gold); font-style:normal}
/* encadrés d'explication : fond sombre, texte atténué, mot-clé en blanc */
main .note{background:#101827; border:0; border-radius:10px; color:#B4BFCE; padding:.9rem 1.1rem}
main .note strong, main .note b{color:var(--text)}
/* sous-titres dans les cartes */
main .card h3{font-family:var(--head); font-weight:700; letter-spacing:.01em}
/* volets repliables : même style partout */
main details.help > summary, main details.manual > summary{font-family:var(--body)}
/* accroche de l'accueil en capitales, comme les autres pages */
.page-hero .kicker, .home-hero .kicker{text-transform:uppercase}

/* volets repliables de fin de page (À savoir, Limites) : titre de section, flèche dorée */
details.fold > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary h2{margin:0}
details.fold > summary::after{content:"▾"; color:var(--gold); font-size:1.4rem; line-height:1; transition:transform .2s}
details.fold[open] > summary::after{transform:rotate(180deg)}
details.fold[open] > summary{margin-bottom:1rem}
details.fold > summary h2, details.fold > summary h2 span{color:var(--text)}
.sec .k[hidden]{display:none}
details.fold > summary h2.sec{font-size:clamp(1.4rem,3.2vw,2rem)}
.band-head h2{min-width:0; overflow-wrap:break-word}
@media (max-width:24rem){.band-head h2{font-size:1.85rem} .band-head .tt{gap:.75rem}}

.rdot svg, .rdot-inv svg{display:block; width:100%; height:100%}
.rdot{-webkit-text-size-adjust:none; text-size-adjust:none}

/* listes déroulantes lisibles : menu natif en thème sombre */
html{color-scheme:dark}
select option, select optgroup{background:#151E2C; color:#E7ECF4}
select option:disabled{color:#6E7C93}

/* ===== Pages de calcul (Stats, Héros, Simulateur) : éléments communs — 30/10/2026 ===== */
/* cadre de dépôt des captures : compact, une ligne */
main label.drop{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i b" "i s";column-gap:.85rem;row-gap:.1rem;align-items:center;text-align:left;margin:.8rem 0;padding:.8rem 1rem;border:2px dashed rgba(227,178,79,.75);border-radius:12px;background:linear-gradient(rgba(227,178,79,.06),rgba(227,178,79,.06)),#101827;cursor:pointer}
main label.drop:hover,main label.drop.on{border-color:var(--gold)}
main label.drop .ico{grid-area:i;font-size:1.6rem;line-height:1;color:var(--gold)}
main label.drop b{grid-area:b;font:700 1.12rem var(--head);color:var(--text)}
main label.drop small{grid-area:s;color:var(--muted);font-size:.85rem;line-height:1.35}
/* cadre de lecture : vignettes + texte, même hauteur sur toutes les pages */
main .ocr{display:flex;gap:.85rem;align-items:flex-start;margin:.8rem 0;padding:.75rem .85rem;min-height:4.8rem;border:1px solid var(--line);border-radius:12px;background:#101827;box-sizing:border-box}
main .ocr.ocr-ok{border-color:rgba(76,195,138,.55)}
main .ocr.ocr-err{border-color:rgba(239,90,87,.6)}
main .ocr-th{display:flex;gap:.4rem;flex:none}
main .ocr-img{position:relative;display:block;width:3.1rem;height:4.5rem;padding:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#0B0F17;cursor:zoom-in}
main .ocr-img:hover{border-color:var(--gold)}
main .ocr-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}
main .ocr-zoom{position:absolute;right:3px;bottom:3px;width:1.15rem;height:1.15rem;border-radius:50%;background:rgba(11,15,23,.82);color:#fff;display:grid;place-items:center}
main .ocr-zoom svg{width:.8rem;height:.8rem}
main .ocr-b{flex:1 1 auto;min-width:0;align-self:center}
main .ocr-b>b,main .ocr-b .ocr-t{display:block;font-weight:700;line-height:1.35}
main .ocr .bar{height:.45rem;margin-top:.55rem;background:var(--line);border-radius:999px;overflow:hidden}
main .ocr .bar i{display:block;height:100%;width:2%;background:var(--gold) repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);background-size:17px 100%;transition:width .12s linear;animation:ksbar 1s linear infinite}
@keyframes ksbar{to{background-position:17px 0}}
main .ocr-run{display:flex;gap:.7rem;align-items:center}
main .ocr-rb{flex:1 1 auto;min-width:0}
main .ocr-run .fk{flex:none;width:2.4rem;height:2.4rem;color:var(--gold)}
main .ocr-run .fk-liq{fill:var(--gold);opacity:.85;transition:y .12s linear}
main .ocr-run .fk-b{fill:#1A1406;opacity:0;animation:ksbub 1.8s ease-in infinite}
main .ocr-run .fk-b2{animation-delay:.6s} main .ocr-run .fk-b3{animation-delay:1.2s}
@keyframes ksbub{0%{opacity:0;transform:translateY(0)}20%{opacity:.55}100%{opacity:0;transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){main .ocr .bar i,main .ocr-run .fk-b{animation:none}}
main .ocr small{display:block;color:var(--muted);margin:.2rem 0 .3rem;font-size:.86rem}
main .ocr .warnline{margin:.3rem 0;font-weight:700;color:var(--gold);font-size:.92rem}
main .ocr .osum{margin:.3rem 0;font-weight:600;font-size:.9rem}
main .ocr p{max-width:none}
main .ocr-hint{margin:.35rem 0 0;font-size:.8rem;color:var(--dim)}
@media (max-width:40rem){
  main .ocr{flex-direction:column;gap:.6rem}
  main .ocr-b{align-self:stretch}
  main .ocr-img{width:2.8rem;height:4rem}
}
/* visionneuse des captures */
.kview{position:fixed;inset:0;z-index:420;display:none;background:#05080E}
.kview.on{display:block;animation:ksFade .2s ease both}
.kv-sc{position:absolute;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:3.6rem 1rem 3rem;box-sizing:border-box;-webkit-overflow-scrolling:touch}
.kv-sc img{display:block;max-width:100%;max-height:100%;border-radius:8px;cursor:zoom-in;margin:auto}
.kview.zoom .kv-sc{display:block;padding:3.6rem 0 3rem}
.kview.zoom .kv-sc img{max-width:none;max-height:none;width:250%;cursor:zoom-out;border-radius:0}
@media (min-width:56rem){.kview.zoom .kv-sc img{width:160%}}
.kv-x,.kv-n{position:absolute;z-index:2;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(21,30,44,.9);color:#fff;cursor:pointer}
.kv-x svg,.kv-n svg{width:1.25rem;height:1.25rem}
.kv-x{top:.7rem;right:.7rem}
.kv-n{bottom:.6rem}.kv-p{left:.8rem}.kv-nx{right:.8rem}
.kv-n[hidden]{display:none}
.kv-x:hover,.kv-n:hover{border-color:var(--gold);color:var(--gold)}
.kv-cap{position:absolute;left:4rem;right:4rem;bottom:1.25rem;margin:0;text-align:center;color:#B4BFCE;font-size:.85rem;pointer-events:none}
html.kv-lock,html.kv-lock body{overflow:hidden}
/* grille des 12 stats : stats en lignes, types en colonnes */
main .smx{display:grid;grid-template-columns:auto repeat(3,minmax(0,7rem));gap:.3rem .45rem;align-items:center;justify-content:start;margin:.5rem 0 .7rem}
main .smx-c{font-size:.72rem;color:var(--muted);white-space:nowrap}
main .smx-th{font-weight:700;font-size:.92rem;text-align:right;padding-right:.35rem;white-space:nowrap}
main .smx-rh{font-weight:600;font-size:.92rem;white-space:nowrap;padding-right:.5rem}
main .smx .mx-s{display:none}
main .smx-rh.s-atk{color:#EF8A5A} main .smx-rh.s-def{color:#5FA8E8} main .smx-rh.s-let{color:#E3B24F} main .smx-rh.s-hp{color:#4CC38A}
main .smx-in{display:block;min-width:0}
main .smx-in input{display:block;width:100%;box-sizing:border-box;margin:0;font:600 1rem var(--body);color:var(--text);background:#0E1520;border:1px solid var(--line-2);border-radius:6px;padding:.4rem .45rem;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
main .smx-in input::-webkit-outer-spin-button,main .smx-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
main .smx-in input:focus{outline:2px solid #6E9BEB;outline-offset:0;border-color:transparent}
main .smx-in input.chk{border-color:var(--gold);background:var(--gold-soft)}
main .smx-in input.bad{border-color:var(--red);background:var(--red-soft)}
@media (max-width:30rem){
  main .smx{grid-template-columns:auto repeat(3,minmax(0,1fr));gap:.28rem .3rem}
  main .smx .mx-l{display:none} main .smx .mx-s{display:inline}
  main .smx-in input{font-size:1rem;padding:.38rem .3rem}   /* 16 px : pas de zoom automatique sur iPhone */
  main .smx-rh{padding-right:.25rem}
}
/* bouton qui lance un calcul (Analyser, Lancer 1 000 combats, Composition idéale) : même apparence partout */
main button.go.run{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.9rem;margin:0;padding:.6rem 1.5rem;font:700 1.02rem var(--body);color:#1A1406;background:var(--gold);border:1px solid var(--gold);border-radius:999px;cursor:pointer;box-shadow:0 4px 14px rgba(227,178,79,.18)}
main button.go.run:hover{filter:brightness(1.06)}
main button.go.run:disabled{opacity:.6;cursor:default}
@media (max-width:40rem){main button.go.run{width:100%}}
/* boutons secondaires des mêmes zones */
main .cbtns{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.8rem}
main .cbtns button:not(.go){font:600 .88rem var(--body);color:var(--text);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:.45rem .9rem;cursor:pointer}
/* « Mes captures viennent d'un rapport de » : mêmes boutons partout */
main .srcopts{display:flex;flex-wrap:wrap;gap:.4rem}
main .srcbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;max-width:30rem}
main .srcbtns{gap:.3rem}
main .srcbox .srcq strong,main .srcbox>.lbl{font-size:.95rem;font-weight:700}
main .srcopts button,main .srcbtns button{font:600 .9rem var(--body);color:var(--text);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:.45rem .9rem;cursor:pointer;line-height:1.25;width:auto}
main .srcopts button[aria-checked="true"],main .srcbtns button[aria-checked="true"]{background:var(--gold);color:#1A1406;border-color:var(--gold);font-weight:700}
main .srcopts button[aria-checked="true"]::before{content:none}
main .srcbox{margin:.7rem 0;padding:0;border:0;background:none;display:grid;gap:.45rem}
main .srcbox p{margin:0}
main .srcbox.need{outline:2px solid var(--red);outline-offset:5px;border-radius:6px}
main .srcbox.chk{outline:2px solid var(--gold);outline-offset:5px;border-radius:6px}
main .srcbox .srcdet{font-size:.88rem;color:var(--muted)}
main .cbtns:has(.go.run){justify-content:center}
main .srcbox>.lbl{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:700;color:var(--text)}
/* champs numériques des cadres « marche » : même aspect que la grille des stats */
main .cin input{box-sizing:border-box;font:600 1rem var(--body);color:var(--text);background:#0E1520;border:1px solid var(--line-2);border-radius:6px;padding:.4rem .45rem;text-align:right;font-variant-numeric:tabular-nums}
main .cin input:focus{outline:2px solid #6E9BEB;outline-offset:0;border-color:transparent}
main .cin input.chk{border-color:var(--gold);background:var(--gold-soft)}
main .cin input.bad{border-color:var(--red);background:var(--red-soft)}
@media (max-width:24rem){main .smx{gap:.25rem .22rem} main .smx-in input{font-size:.86rem;padding:.36rem .18rem} main .smx-rh,main .smx-th{font-size:.84rem}}

/* champ ou liste en cours de saisie : contour bleu, jamais doré (le doré veut dire « valeur lue à vérifier ») ;
   une liste refermée ne garde pas de contour (Android laisse le focus sur la liste après le choix) */
main input:focus,main textarea:focus{outline:2px solid #6E9BEB;outline-offset:0}
main select:focus{outline:none}
main select:focus-visible{outline:2px solid #6E9BEB;outline-offset:0}
@media (pointer:coarse){main select:focus-visible{outline:none}}

/* Mode application (installée) : rien sous la barre d'état ni l'encoche, rien sous la barre de gestes */
.kv-x{top:calc(.7rem + env(safe-area-inset-top,0px))}
.kv-n{bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}
.kv-cap{bottom:calc(1.25rem + env(safe-area-inset-bottom,0px))}
.kv-sc{padding-top:calc(3.6rem + env(safe-area-inset-top,0px));padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px))}

/* Ratio idéal dans les trois rôles (pages Héros et Stats, 31/10/2026) */
main .r3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; width:100%}
main .r3i{display:flex; flex-direction:column; align-items:center; gap:.05rem; min-width:0; padding:.35rem .25rem; border:1px solid var(--line-2); border-radius:10px; background:var(--panel-2); color:var(--text); font:inherit; cursor:pointer}
main .r3i small{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; font-weight:600; color:var(--muted)}
main .r3i b{font-family:var(--head); font-size:1.2rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
main .r3i.on{border-color:var(--gold); background:var(--gold-soft)}
main .r3i.on small,main .r3i.on b{color:var(--gold)}
main .r3i:not(.on):hover{border-color:var(--gold)}

/* Encadré du rôle / de l'objectif (01/11) : même aspect sur Stats, Héros et Simulateur */
main .rpanel{margin:1.2rem 0;padding:.9rem 1rem 1rem;border:1px solid rgba(227,178,79,.45);border-radius:var(--r);background:var(--panel-2);display:block;max-width:none}
main .rpanel .rp-t{display:block;font:700 .78rem var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin:0 0 .55rem}
main .rpanel .rp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px}
main .rpanel .rp-seg button{font:600 .93rem var(--body);color:var(--muted);background:none;border:0;border-radius:10px;padding:.55rem .35rem;cursor:pointer;line-height:1.2;text-align:center;white-space:normal;box-shadow:none}
main .rpanel .rp-seg button[aria-pressed="true"],main .rpanel .rp-seg button[aria-checked="true"]{background:var(--gold);color:#1A1406}
main .rpanel .rp-note{margin:.6rem 0 0;font-size:.88rem;color:var(--muted);max-width:none}

/* sélecteur d'origine sur une ligne (01/11) */
main .srcbox .srcbtns button{text-align:center;white-space:nowrap;font-size:.84rem;padding:.45rem .2rem;min-width:0;overflow:hidden}
main .srcbox .srcbtns button::before{margin-right:.3em!important;width:1em!important;height:1em!important}
@media (max-width:23rem){main .srcbox .srcbtns button::before{display:none!important}}
main .srcbox>.lbl,main .srcbox .srcq{margin:0 0 .1rem}
main .rpanel .rp-seg button{min-width:0;overflow-wrap:anywhere}
@media (max-width:23rem){main .rpanel{padding:.8rem .7rem .9rem}main .rpanel .rp-seg button{font-size:.84rem;padding:.5rem .15rem}}

/* Téléphone : même densité sur toutes les pages, sur le modèle de la page Ours (03/11/2026) — condensé mais lisible */
@media (max-width:40rem){
  body{font-size:.95rem; line-height:1.5}
  .page-hero{padding:1.1rem 0 .8rem}
  .page-hero .kicker{margin-bottom:.4rem; font-size:.85rem}
  .page-hero h1{font-size:2.05rem; margin-bottom:.35rem}
  .page-hero p.lead{font-size:.95rem; line-height:1.45; margin-top:.3rem}
  .stack{gap:.75rem}
  .card{padding:.9rem .85rem}
  h2.sec{font-size:1.3rem; gap:.55rem}
  h2.sec .k{width:1.75rem; height:1.75rem; font-size:1rem}
  h3{font-size:1.1rem; margin:1.1rem 0 .3rem}
  p{margin:.45rem 0}
  ul{margin:.45rem 0} li{margin:.25rem 0}
  main .note{padding:.6rem .75rem; font-size:.88rem; line-height:1.4}
  main details.help>summary{padding:.5rem .8rem; font-size:.92rem}
  main label.drop{margin:.3rem 0; padding:.5rem .7rem; column-gap:.6rem}
  main label.drop .ico{font-size:1.25rem}
  main label.drop b{font-size:.98rem}
  main label.drop small{font-size:.76rem}
  main .ocr{padding:.55rem .6rem; min-height:0; gap:.6rem; margin:.4rem 0 .7rem}
  section.band{padding:1.3rem 0 1.5rem}
  .band-head{margin-bottom:1rem}
  .band-head h2{font-size:1.9rem}
  .band-head p{font-size:.95rem}
  .site-foot{padding:1.2rem 1rem 2rem}
}

/* Ordinateur et tablette : même densité sur toutes les pages, sur le modèle de la page Ours (03/11/2026) */
@media (min-width:40.01rem){
  body{font-size:1rem; line-height:1.55}
  .page-hero{padding:2rem 0 1.25rem}
  .page-hero .kicker{margin-bottom:.6rem; font-size:.95rem}
  .page-hero h1{font-size:clamp(2.4rem,4.6vw,3.2rem); margin-bottom:.5rem}
  .page-hero p.lead{font-size:1.05rem; line-height:1.5; margin-top:.5rem}
  .stack{gap:1rem}
  main .card{padding:1.5rem 1.6rem}
  main h2.sec{font-size:clamp(1.45rem,2.6vw,1.75rem); gap:.7rem}
  main h2.sec .k{width:2.1rem; height:2.1rem; font-size:1.15rem}
  main .card > h2.sec{margin-bottom:.75rem}
  main .card h3{font-size:1.2rem}
  main .note{font-size:.95rem; line-height:1.5; padding:.75rem 1rem}
  main details.help>summary{padding:.6rem 1rem}
  section.band{padding:2rem 0 2.4rem}
  .band-head{margin-bottom:1.1rem}
  .band-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
  .band-head p{font-size:1rem}
  .band-head .ic{width:3.2rem; height:3.2rem; border-radius:.8rem}
  .band-head .ic svg{width:1.8rem; height:1.8rem}
}

/* pages de calcul (scripts lourds) : pas d'animation d'entrée des blocs, elle saccadait pendant le chargement sur téléphone (03/11) */
body:is([data-page="simulateur"],[data-page="stats"],[data-page="heros"],[data-page="ours"]) :is(main > .card, main > section, main > details, .stack > .card){animation:none}

/* ===== 06/11 : harmonisation des pages de calcul (Stats, Héros, Équipement, Simulateur, Ours) ===== */
/* icônes communes : duel, ralliement, garnison (type de rapport et objectif) */
[data-src="solo"]::before,.rp-seg [data-role="solo"]::before,.rp-seg [data-obj="duel"]::before{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.4em;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14.5%2017.5%203%206V3h3l11.5%2011.5M13%2019l6-6M16%2016l4%204M19%2021l2-2M9.5%2014.5%203%2021M5%2014l5%205M14.5%206.5%2018%203h3v3l-3.5%203.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14.5%2017.5%203%206V3h3l11.5%2011.5M13%2019l6-6M16%2016l4%204M19%2021l2-2M9.5%2014.5%203%2021M5%2014l5%205M14.5%206.5%2018%203h3v3l-3.5%203.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;background:currentColor}
[data-src="rally"]::before,.rp-seg [data-role="rally"]::before,.rp-seg [data-obj="lead"]::before{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.4em;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2021V3M5%204h12l-2.5%204.5L17%2013H5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2021V3M5%204h12l-2.5%204.5L17%2013H5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;background:currentColor}
[data-src="def"]::before,.rp-seg [data-role="gar"]::before,.rp-seg [data-obj="gar"]::before{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.4em;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203%205%206v5c0%204.6%203%208.3%207%2010%204-1.7%207-5.4%207-10V6Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203%205%206v5c0%204.6%203%208.3%207%2010%204-1.7%207-5.4%207-10V6Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;background:currentColor}
/* type de rapport : une ligne compacte après l'import (KSUI.srcView), les 3 boutons seulement si besoin */
main .srcbox[hidden]{display:none}
main .srcbox.mini .srcq,main .srcbox.mini .srcbtns,main .srcbox.mini .warnbox{display:none}
main .srcbox.mini:not(.chk) .srcdet{display:none}
main .srcbox:not(.mini) .srcline{display:none}
main .srcbox .srcline{font-size:.92rem;color:var(--muted)}
main .srcbox .srcline b{color:var(--text);font-weight:700}
main .srcbox .srcchg{font:600 .88rem var(--body);color:var(--gold);background:none;border:0;padding:.1rem .25rem;margin-left:.15rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* intertitre « Comprendre » : le guide vient après l'outil */
main .learn-hd{display:flex;align-items:center;gap:.8rem;margin:2.4rem 0 1rem;font:700 1.05rem "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);max-width:none}
main .learn-hd::after{content:"";flex:1;height:1px;background:var(--line)}
@media (max-width:40rem){main .learn-hd{margin:1.8rem 0 .8rem}}
/* sous-titre d'une étape */
main .card>p.sub{margin:.2rem 0 .3rem;color:var(--muted);font-size:.95rem;max-width:none}
/* boutons secondaires (exemple, tout effacer) : sous le bouton principal, centrés */
main .cbtns.sec2{justify-content:center;margin-top:.6rem;gap:.4rem}
main .cbtns.sec2 button{font-size:.84rem;padding:.4rem .8rem}
/* encarts repliables : flèche toujours à droite */
main details.help>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .6rem}
main details.help>summary::after{margin-left:auto;padding-left:.4rem}
/* « Comment c'est calculé » : en fin d'outil, replié */
main details.how{margin-top:1.1rem}
main details.how .hb p{max-width:none}
/* bouton-lien doré dans un résultat */
main a.go.golink{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font:700 .95rem var(--body);background:var(--gold);color:#1A1406;border:1px solid var(--gold);border-radius:999px;padding:.5rem 1rem;text-decoration:none}
main a.go.golink:hover{filter:brightness(1.06)}
/* résumé dans le titre d'un encart replié (« Tes troupes  T10 · Or 2 ») */
main details.help>summary .ssum{font:600 .84rem var(--body);color:var(--text);font-variant-numeric:tabular-nums}
main details.help>summary .ssum.chkw{color:var(--gold);text-decoration:underline dotted}
main details.help[open]>summary .ssum{display:none}
/* données reprises d'une autre page */
main .handnote{margin:.4rem 0 .2rem;padding:.55rem .8rem;border-left:3px solid var(--gold);background:var(--gold-soft,rgba(227,178,79,.12));border-radius:6px;font-size:.92rem;max-width:none}
/* « Et ensuite ? » en fin de page : une phrase, un ou deux boutons */
.simcta .nx-t{flex:1 1 22rem;display:grid;gap:.2rem}
.simcta .nx-t small{font:700 .85rem "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.simcta .nx-b{display:flex;flex-wrap:wrap;gap:.5rem}
.btn-sim.sec{background:none;color:var(--gold);border:1px solid rgba(227,178,79,.7)}
@media (max-width:40rem){.simcta .nx-b{width:100%;flex-direction:column}}
/* objectif : même taille de boutons sur toutes les pages (téléphone) */
@media (max-width:40rem){main .rpanel .rp-seg button{font-size:.84rem;padding:.45rem .3rem}}
/* Simulateur : flèche des encarts des armées à droite, comme partout */
main .army details.tdet>summary,main .army details.hdet>summary,main .army details.ast>summary{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:.1rem .6rem}
main .army details.tdet>summary>span:first-child::after,main .army details.hdet>summary>span:first-child::after{content:none!important}
main .army details.tdet>summary::after,main .army details.hdet>summary::after{content:"▾";opacity:.7;margin-left:auto;padding-left:.4rem;color:var(--gold)}
main .army details.tdet[open]>summary::after,main .army details.hdet[open]>summary::after{content:"▴"}
/* objectif court (Duel / Ralliement / Garnison) : icône et mot sur une ligne ; icônes masquées si l'écran est trop étroit */
main .rpanel .rp-seg button{white-space:nowrap}
@media (max-width:40rem){main .rpanel .rp-seg button{padding:.45rem .15rem}main .rpanel .rp-seg button::before{margin-right:.3em!important}}
@media (max-width:22.5rem){main .rpanel .rp-seg button::before{display:none!important}}
/* « Le Lab peut se tromper » + « Conseils 100 % Expédition » (06/11) : même encadré sur les pages de calcul, avant « Comment c'est calculé » */
main .labwarn{margin:1.1rem 0 0;padding:.7rem .85rem;display:grid;gap:.45rem;border:1px solid rgba(227,178,79,.35);border-radius:10px;background:rgba(227,178,79,.06)}
main .labwarn .lw-l{display:flex;gap:.55rem;align-items:flex-start;margin:0;font-size:.88rem;line-height:1.45;color:var(--muted);max-width:none}
main .labwarn .lw-l b{color:var(--text)}
main .labwarn svg{flex:none;width:18px;height:18px;margin-top:.1rem;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main .labwarn+details.how{margin-top:.6rem}

/* Mon profil (06/11) : icône de l'en-tête (silhouette sans profil, pastille dorée avec l'initiale) et entrée du tiroir */
.hprof{display:inline-grid; place-items:center; flex-shrink:0; width:2.6rem; height:2.6rem; margin-left:auto; box-sizing:border-box; border:1px solid var(--line); border-radius:50%; background:var(--panel); color:var(--muted); text-decoration:none}
.hprof + .hshare{margin-left:0}
.hprof:hover{border-color:var(--gold); color:var(--gold)}
.hp-av{display:grid; place-items:center; width:100%; height:100%; border-radius:50%}
.hp-av svg{width:1.15rem; height:1.15rem}
.hp-av b{display:none; font:800 1.15rem/1 var(--head)}
.hprof.on{background:var(--gold); border-color:var(--gold); color:#1A1406; box-shadow:0 0 0 2px rgba(227,178,79,.25)}
.hprof.lt .hp-av svg,.dprof.lt .hp-av svg{display:none}
.hprof.lt .hp-av b,.dprof.lt .hp-av b{display:block}
.hprof[aria-current="page"]{outline:2px solid var(--gold); outline-offset:2px}
@media (min-width:84.01rem){.hprof{order:5; margin-left:0}}
@media (max-width:40rem){.hprof{width:2.45rem; height:2.45rem}}
@media (max-width:26.25rem){.site-head .in{gap:.32rem} .hprof,.hshare,.burger{width:2.15rem; height:2.15rem} .logo b{font-size:clamp(1.06rem,5.4vw,1.31rem)} .logo{gap:.4rem; min-width:0}}
.drawer .dprof{gap:.65rem}
.dprof .hp-av{flex:none; width:2rem; height:2rem; border:1px solid var(--line-2); color:var(--muted)}
.dprof .hp-av svg{width:1rem; height:1rem}
.dprof .hp-av b{font-size:1.05rem}
.dprof.on .hp-av{background:var(--gold); border-color:var(--gold); color:#1A1406}
/* accueil : « Commence ici » (sans profil) et « Bon retour » (avec profil), 06/11 */
#pfHome{margin:1.6rem 0}
#pfHome:empty{display:none}
.pfstart{display:flex; gap:.9rem; align-items:flex-start; border:1px solid rgba(227,178,79,.5); background:linear-gradient(135deg,rgba(227,178,79,.12),rgba(227,178,79,.03)); border-radius:14px; padding:1rem 1.1rem}
.pfstart .ic{flex:none; width:2.75rem; height:2.75rem; border-radius:12px; background:var(--gold); display:grid; place-items:center}
.pfstart .ic svg,.pfback .av svg{width:1.5rem; height:1.5rem; fill:none; stroke:#1A1406; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pfstart small{font:700 .8rem var(--head); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.pfstart h3{margin:.1rem 0 .3rem; font:800 1.35rem var(--head); text-transform:uppercase; color:var(--text)}
.pfstart p{margin:0 0 .75rem; color:var(--muted); font-size:.95rem; max-width:none}
#pfHome a.go{display:inline-flex; align-items:center; font:700 .92rem var(--body); text-decoration:none; border-radius:999px; padding:.55rem 1rem}
.pfstart a.go{background:var(--gold); color:#1A1406}
.pfback{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:.6rem .8rem; font-size:.92rem; color:var(--muted)}
.pfback .av{flex:none; width:2.15rem; height:2.15rem; border-radius:50%; background:var(--gold); color:#1A1406; display:grid; place-items:center; font:800 1rem/1 var(--head)}
.pfback .tx{flex:1 1 12rem}
.pfback b{color:var(--text)}
.pfback a.go{color:var(--gold); border:1px solid rgba(227,178,79,.7); margin-left:auto}
@media (max-width:21.25rem){.site-head .hshare{display:none}}   /* très petit téléphone : le partage laisse la place à l’icône du profil */

/* pages de calcul : profil du joueur chargé (06/11) — carte en tête de l'étape 1, import replié, questions, enregistrement */
main .haspf > p.sub,main .haspf:not(.pfimp) > .drop,main .haspf:not(.pfimp) > #ocrOut,main .haspf:not(.pfimp) > details.help:not([id]),main .haspf:not(.pfimp) > #ocrMsg{display:none}
main .pfc{border:1px solid rgba(227,178,79,.45);background:linear-gradient(180deg,rgba(227,178,79,.08),rgba(227,178,79,.02));border-radius:12px;padding:.8rem .9rem;display:grid;gap:.55rem}
main .pfc-top{display:flex;align-items:center;gap:.65rem}
main .pfc-av{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--gold);color:#1A1406;display:grid;place-items:center;font:800 1.1rem/1 var(--head)}
main .pfc-av svg{width:1.2rem;height:1.2rem}
main a.pfc-n{min-width:0;font:700 1.02rem var(--body);color:var(--text);line-height:1.25;text-decoration:none;overflow-wrap:anywhere}
main .pfc-n small{display:block;font:500 .84rem var(--body);color:var(--muted)}
main .pfc-ok{display:flex;flex-wrap:wrap;gap:.35rem}
main .pfc-ok span{font:600 .78rem var(--body);color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem}
main .pfc-ok span::before{content:"✓ ";color:#5BC08A}
main .pfc-ok span.w{border-color:rgba(227,178,79,.5)}main .pfc-ok span.w::before{content:"! ";color:var(--gold)}
main .pfc-b{display:flex;gap:.5rem;flex-wrap:wrap}
main .pfc-b button{font:700 .88rem var(--body);border-radius:999px;padding:.5rem .95rem;cursor:pointer;background:none;color:var(--gold);border:1px solid rgba(227,178,79,.7)}
main .pfc-b button.y{background:var(--gold);color:#1A1406;border-color:var(--gold)}
main .pfc-b button.cx{color:var(--muted);border-color:var(--line)}
main .pfc-note{margin:0;font-size:.86rem;color:var(--muted);max-width:none}
main .pfask{border:1px solid rgba(227,178,79,.7);background:rgba(227,178,79,.10);border-radius:12px;padding:.8rem .9rem;display:grid;gap:.6rem}
main .pfask p{margin:0;font-size:.93rem;color:var(--text);max-width:none}
main #pfAsk:empty,main #pfDiff:empty{display:none}
main .pfnote{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;font-size:.86rem;color:var(--muted);margin:.1rem 0 .6rem;padding:.45rem .7rem;border-radius:8px;background:rgba(91,192,138,.08);border:1px solid rgba(91,192,138,.3);max-width:none}
main .pfnote b{color:var(--text)} main .pfnote a{color:var(--gold);font-weight:600}
main .pfdiff{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;border:1px dashed rgba(227,178,79,.6);border-radius:10px;padding:.55rem .75rem;font-size:.88rem;color:var(--muted);margin-top:.7rem}
main .pfdiff button{font:700 .86rem var(--body);background:none;color:var(--gold);border:1px solid rgba(227,178,79,.7);border-radius:999px;padding:.4rem .85rem;cursor:pointer}
/* Simulateur (06/11) : « Mettre mon profil » dans l'en-tête de chaque camp */
main .pfput{font:600 .8rem var(--body);color:var(--gold);background:none;border:1px solid rgba(227,178,79,.6);border-radius:999px;padding:.28rem .65rem;cursor:pointer;white-space:nowrap}
main .pfput:hover{background:rgba(227,178,79,.1)}
/* 06/11 (cohérence) : flèche des encarts toujours sur la ligne du titre, le résumé passe à la ligne à côté */
main details.help>summary{flex-wrap:nowrap}
main details.help>summary>*{min-width:0}
main details.help>summary::after{flex:none}
/* étape 1 avec le profil : même rythme vertical sur toutes les pages de calcul */
main .card.haspf{display:flex;flex-direction:column;gap:.75rem}
main .card.haspf>*{margin-top:0!important;margin-bottom:0!important}
main .card.haspf .cduo{gap:.75rem 1.2rem}
main .card.haspf .cduo>*{margin-top:0!important;margin-bottom:0!important}
main details.help>summary>:first-child:not(:only-child){flex:none}
main .card.haspf .cmarch>details{margin-top:0;margin-bottom:0}

/* ---------- carte « combat vérifié » et arène de pions (08/11) : accueil, Combats partagés (à la une), Simulateur (arène du verdict) ---------- */
.pv{display:flex; flex-direction:column; gap:.6rem; padding:.8rem .8rem .85rem; background:var(--panel); border:1px solid var(--line); border-radius:14px}
.pv-top{display:flex; justify-content:space-between; align-items:baseline; gap:.3rem .8rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted)}
.pv-top b{font:700 .72rem/1.2 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--gold)}
.pv-n,.pr-v{font:700 1.3rem/1.15 var(--head); overflow-wrap:anywhere}
.pv-n .A,.pr-v .A,.pv-c .A{color:#8DB6F7} .pv-n .D,.pr-v .D,.pv-c .D{color:#F3A09E}
.pv-n i,.pr-v i{font-style:normal; font-weight:500; font-size:.8em; color:var(--muted); margin:0 .3em}
.pv-n .kd,.pr-v .kd{font:600 .7em var(--body); color:var(--muted); letter-spacing:.02em; white-space:nowrap}
.pv-ar{display:block; width:100%; height:auto}
.pv-ar text{font:700 7.5px var(--body); letter-spacing:.04em; fill:var(--muted)}
html[lang^="zh"] .pv-ar text, html[lang="ko"] .pv-ar text{letter-spacing:0}
.pv-ar .col{opacity:0; transition:opacity .5s ease}
.pv.go .pv-ar .col{opacity:1}
.pv-c{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr); gap:.4rem}
.pv-c>div{display:flex; flex-direction:column; min-width:0; padding:.45rem .55rem; border-radius:8px; background:var(--panel-2)}
.pv-c small{font-size:.68rem; line-height:1.3; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.pv-c b{font:700 1.08rem/1.25 var(--head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-c .ok{background:rgba(124,217,146,.12); box-shadow:inset 0 0 0 1px rgba(124,217,146,.45)} .pv-c .ok b{color:#7CD992}
.pv-c .ko{background:rgba(243,160,158,.1); box-shadow:inset 0 0 0 1px rgba(243,160,158,.4)} .pv-c .ko b{color:#F3A09E}
.pv-bar{display:flex; height:.5rem; border-radius:999px; overflow:hidden; background:var(--panel-2)}
.pv-bar i{display:block; height:100%; width:0; transition:width .9s cubic-bezier(.2,.7,.2,1) .25s}
.pv-bar .b{background:var(--blue)} .pv-bar .r{margin-left:auto; background:var(--red)}
.pv.go .pv-bar .b{width:var(--a)} .pv.go .pv-bar .r{width:calc(100% - var(--a))}
.pv-f{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.2rem 1rem; font-size:.82rem; color:var(--muted)}
.pv-go,.nh-all{display:inline-flex; align-items:center; min-height:2.75rem; color:var(--gold); font-weight:700; font-size:.95rem; text-decoration:none}
.pv-go:hover,.nh-all:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.pv-ar .col,.pv-bar i{transition:none}}
.pv-rd{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-top:-.25rem; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums}
.pv-rd b{margin-left:.15rem; font:800 1.05rem/1 var(--head); color:var(--text)}
.pv-rd small{font-size:.78rem}
.pv-lv b{margin:0; font:700 .98rem/1 var(--head)} .pv-lv .A{color:#8DB6F7} .pv-lv .D{color:#F3A09E}
.pv-sub{margin-top:-.5rem; font-size:.74rem; line-height:1.3; color:var(--muted)}
.pv-hv{display:flex; justify-content:space-between; gap:.6rem; margin-top:-.25rem}
.pv-hv span{display:flex; gap:.3rem}
.pv-hv img{width:2rem; height:2rem; border-radius:7px; object-fit:cover; background:var(--panel-2); border:1px solid var(--line-2)}
.pv-hv .A img{border-color:rgba(79,143,240,.55)} .pv-hv .D img{border-color:rgba(239,90,87,.55)}