/* KingsBattle · site public. Jetons repris du système de design du jeu (src/ds.css) : bois, laiton, parchemin, sceaux de cire. */
@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url(/fonts/cinzel-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:900;font-display:swap;src:url(/fonts/cinzel-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Signika";font-weight:400;font-display:swap;src:url(/fonts/signika-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Signika";font-weight:600;font-display:swap;src:url(/fonts/signika-latin-600-normal.woff2) format("woff2")}
:root{
  --kb-bois-0:#0b0907;--kb-bois-1:#1a120b;--kb-bois-2:#2a1e14;--kb-bois-3:#3a2a1c;
  --kb-parchemin:#eadbb8;--kb-parchemin-2:#c9af7c;--kb-encre:#3a2412;
  --kb-or:#e9b949;--kb-or-clair:#ffe9a8;--kb-or-sombre:#8a5a1c;--kb-laiton:#c9a24a;
  --kb-sceau:#a3122f;--kb-sceau-clair:#d8324e;--kb-sceau-sombre:#4a0414;
  --kb-texte:#f0e2c4;--kb-texte-doux:#b9a784;--kb-bleu:#4f86c6;--kb-rouge:#c0392b;
  --kb-f-titre:"Cinzel",Georgia,serif;--kb-f-texte:"Signika","Trebuchet MS",system-ui,sans-serif;
  --kb-r-petit:6px;--kb-r-moyen:10px;--kb-r-grand:16px;--kb-r-sceau:999px;
  --kb-esp-1:4px;--kb-esp-2:8px;--kb-esp-3:16px;--kb-esp-4:24px;--kb-esp-5:40px;--kb-esp-6:64px;
  --kb-liseré:0 0 0 1px #000,0 0 0 2px var(--kb-or-sombre);--kb-ombre:0 8px 18px rgba(0,0,0,.6);
  --kb-relief:inset 0 1px 0 rgba(255,220,150,.18),inset 0 0 0 1px #000;
  --seal:radial-gradient(circle at 35% 30%,var(--kb-sceau-clair) 0,var(--kb-sceau) 38%,#6e0820 75%,var(--kb-sceau-sombre) 100%);
  --plate:linear-gradient(180deg,var(--kb-bois-3),#22170f);
  --ease:cubic-bezier(.2,.7,.2,1);--t-court:140ms;--t-moyen:320ms;--t-long:560ms;
  --largeur:1180px;--gouttiere:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--kb-bois-0);color:var(--kb-texte);font:400 18px/1.6 var(--kb-f-texte);
  background-image:radial-gradient(ellipse 120% 60% at 50% 0,#21160d 0,transparent 60%),radial-gradient(ellipse 80% 50% at 50% 100%,#160f09 0,transparent 70%);background-attachment:fixed}
img{max-width:100%;height:auto;display:block}
a{color:var(--kb-or)}a:hover{color:var(--kb-or-clair)}
:focus-visible{outline:3px solid var(--kb-or-clair);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--kb-f-titre);font-weight:900;line-height:1.15;margin:0 0 .5em;color:var(--kb-or);letter-spacing:.01em}
h1{font-size:clamp(30px,4.2vw,52px)}h2{font-size:clamp(26px,3.4vw,40px)}h3{font-size:clamp(19px,2vw,23px);font-weight:700}h4{font-size:18px;font-weight:700}
h2 small{font-size:.55em;color:var(--kb-texte-doux);font-weight:700}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--kb-parchemin);color:var(--kb-encre);padding:8px 14px;border-radius:var(--kb-r-petit)}
.skip:focus{left:8px}
.kicker{font:600 13px/1.4 var(--kb-f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--kb-laiton);margin:0 0 .7em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.small{font-size:15px;color:var(--kb-texte-doux)}.center{text-align:center;justify-content:center}
.cols3+.center,.cols2+.center{margin-top:var(--kb-esp-5)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--kb-esp-3)}

/* ---------- boutons : sceau de cire (principal), plaque de bois, lien laiton ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:0;border-radius:var(--kb-r-sceau);
  font:900 16px/1 var(--kb-f-titre);letter-spacing:.04em;text-decoration:none;cursor:pointer;
  transition:transform var(--t-court) var(--ease),box-shadow var(--t-moyen) var(--ease),filter var(--t-moyen) var(--ease)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn-play{background:var(--seal);color:var(--kb-or-clair);box-shadow:0 0 0 2px var(--kb-or-sombre),0 0 0 3px #000,0 6px 16px rgba(163,18,47,.45),inset 0 1px 0 rgba(255,200,200,.35);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.btn-play:hover{color:#fff;filter:brightness(1.08);box-shadow:0 0 0 2px var(--kb-or),0 0 0 3px #000,0 8px 24px rgba(216,50,78,.55),inset 0 1px 0 rgba(255,200,200,.4)}
.btn-lg{min-height:58px;padding:16px 34px;font-size:19px}.btn-sm{min-height:40px;padding:8px 18px;font-size:14px}
.btn-plate{background:var(--plate);color:var(--kb-or);box-shadow:var(--kb-relief),var(--kb-liseré)}
.btn-plate:hover{box-shadow:var(--kb-relief),0 0 0 1px #000,0 0 0 2px var(--kb-or),0 0 14px rgba(233,185,73,.35)}
.btn-ghost{background:transparent;color:var(--kb-or);box-shadow:inset 0 0 0 1.5px var(--kb-or-sombre)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--kb-or);background:rgba(233,185,73,.06)}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--kb-esp-4);padding:10px var(--gouttiere);
  background:rgba(11,9,7,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(138,90,28,.5)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--kb-or);font:900 21px/1 var(--kb-f-titre);letter-spacing:.03em;margin-right:auto}
.brand img{width:30px;height:auto}
.top .nav{display:none;gap:var(--kb-esp-4)}
.top .nav a,.menu nav a{color:var(--kb-texte);text-decoration:none;font:600 16px/1 var(--kb-f-texte);padding:10px 0;position:relative}
.top .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--kb-or);transform:scaleX(0);transition:transform var(--t-moyen) var(--ease)}
.top .nav a:hover::after,.top .nav a[aria-current]::after{transform:scaleX(1)}
.top .nav a[aria-current]{color:var(--kb-or)}
.menu{position:relative}
.menu summary{list-style:none;display:grid;gap:5px;place-content:center;width:44px;height:44px;cursor:pointer;border-radius:var(--kb-r-moyen);box-shadow:inset 0 0 0 1.5px var(--kb-or-sombre)}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:20px;height:2px;background:var(--kb-or);border-radius:2px;transition:transform var(--t-moyen) var(--ease),opacity var(--t-moyen)}
.menu[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu[open] summary span:nth-child(2){opacity:0}.menu[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu nav{position:absolute;right:0;top:54px;display:grid;min-width:220px;padding:10px 18px;border-radius:var(--kb-r-moyen);background:var(--kb-bois-1);box-shadow:var(--kb-liseré),var(--kb-ombre)}
.menu nav a{padding:12px 0;border-bottom:1px solid rgba(138,90,28,.35)}.menu nav a:last-child{border:0}
@media (min-width:980px){.top .nav{display:flex}.menu{display:none}}
@media (max-width:420px){.brand span{font-size:18px}.top{gap:10px}}

/* ---------- sections ---------- */
main{display:block}
.sec,.page-head{width:min(var(--largeur),100% - 2*var(--gouttiere));margin:0 auto;padding:clamp(48px,8vw,104px) 0}
.sec-dark{width:auto;max-width:none;padding-left:max(var(--gouttiere),calc((100% - var(--largeur))/2));padding-right:max(var(--gouttiere),calc((100% - var(--largeur))/2));
  background:linear-gradient(180deg,rgba(42,30,20,.55),rgba(26,18,11,.55));box-shadow:inset 0 1px 0 rgba(138,90,28,.4),inset 0 -1px 0 rgba(138,90,28,.4)}
.sec-parch{width:auto;max-width:none;color:var(--kb-encre);padding-left:var(--gouttiere);padding-right:var(--gouttiere);
  background:radial-gradient(ellipse at 50% 40%,#f1e4c4 0,#e2cfa2 70%,var(--kb-parchemin-2) 100%)}
.sec-parch>*{max-width:var(--largeur);margin-left:auto;margin-right:auto}
.sec-parch h2,.sec-parch h3{color:#5a2a10}.sec-parch a{color:#8e0b2c}.sec-parch .small{color:#6a5032}
.sec-head{max-width:760px;margin:0 0 var(--kb-esp-5)}
.sec-head p:last-child{color:var(--kb-texte-doux)}
.narrow{max-width:760px;margin:0 auto}
.page-head{padding-bottom:var(--kb-esp-4)}.page-head p{max-width:720px;color:var(--kb-texte-doux);font-size:19px}
.crumb{width:min(var(--largeur),100% - 2*var(--gouttiere));margin:var(--kb-esp-4) auto 0;font-size:15px;color:var(--kb-texte-doux)}
.crumb a{color:var(--kb-texte-doux)}
.cols2,.cols3,.cols4{display:grid;gap:var(--kb-esp-4)}
@media (min-width:760px){.cols2{grid-template-columns:repeat(2,1fr)}.cols3{grid-template-columns:repeat(3,1fr)}.cols4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cols4{grid-template-columns:repeat(4,1fr)}}
ul.plain,ol.plain{list-style:none;padding:0;margin:0}
.tile{background:linear-gradient(180deg,rgba(58,42,28,.55),rgba(26,18,11,.7));border-radius:var(--kb-r-grand);padding:var(--kb-esp-4);box-shadow:var(--kb-relief),var(--kb-liseré)}
.tile p:last-child,.tile ol:last-child{margin-bottom:0}
.tile figure{margin:0 0 var(--kb-esp-3)}.tile figcaption{font-size:15px;color:var(--kb-texte-doux);margin-top:10px}
.tile figure img,.tile>img{border-radius:var(--kb-r-moyen)}
.tile ol{padding-left:1.2em;margin:0}.tile li{margin:.3em 0}
.plain .tile a{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 18px/1.2 var(--kb-f-titre);color:var(--kb-or);margin-bottom:10px}
.plain .tile p{color:var(--kb-texte-doux);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 var(--kb-esp-3)}
.chips li{font:600 14px/1 var(--kb-f-texte);padding:8px 12px;border-radius:var(--kb-r-sceau);color:var(--kb-or-clair);background:color-mix(in srgb,var(--fc,var(--kb-or-sombre)) 38%,#140d07);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc,var(--kb-or)) 70%,var(--kb-or-sombre))}
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:30px;margin:.55em 0}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--kb-or-clair),var(--kb-or) 50%,var(--kb-or-sombre));box-shadow:0 0 0 1px #000}

/* ---------- premier écran ---------- */
.hero{width:min(1280px,100% - 2*var(--gouttiere));margin:0 auto;padding:clamp(28px,5vw,72px) 0 clamp(40px,6vw,88px);display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:980px){.hero{grid-template-columns:minmax(380px,.9fr) 1.25fr}}
.hero h1{margin-bottom:.4em}
.promise{font-size:clamp(20px,2.2vw,24px);line-height:1.45;color:var(--kb-texte);margin-bottom:.6em}
.promise strong{color:var(--kb-or-clair)}
.sub{color:var(--kb-texte-doux);max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:var(--kb-esp-4) 0 var(--kb-esp-3)}
.note{font-size:15px;color:var(--kb-texte-doux)}
.hero-board{position:relative;margin:0;padding:0 0 26px}
.frame{border-radius:var(--kb-r-grand);padding:8px;background:linear-gradient(160deg,#5a3e1e,#2a1a0c 40%,#4a3218);box-shadow:0 0 0 1px #000,0 0 0 3px var(--kb-or-sombre),0 22px 50px rgba(0,0,0,.7)}
.frame img{border-radius:var(--kb-r-moyen)}
.hero-fig{position:absolute;bottom:-6px;width:clamp(110px,15vw,210px);filter:drop-shadow(0 10px 14px rgba(0,0,0,.7));pointer-events:none}
.hero-fig.l{left:-3%}.hero-fig.r{right:-3%;transform:scaleX(-1)}
.hero-board figcaption{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font-size:13px;color:var(--kb-texte-doux)}
@media (max-width:620px){.hero-fig{width:96px;bottom:6px}.hero-board figcaption{display:none}}

/* ---------- trois gestes ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--kb-esp-4);counter-reset:s}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step figure{margin:0 0 var(--kb-esp-3);border-radius:var(--kb-r-grand);overflow:hidden;box-shadow:var(--kb-liseré),var(--kb-ombre);aspect-ratio:3/2;background:var(--kb-bois-1)}
.step figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-long) var(--ease)}
.step:hover figure img{transform:scale(1.04)}
.step h3{display:flex;align-items:center;gap:12px}
.step h3 span{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--seal);color:var(--kb-or-clair);font-size:18px;box-shadow:0 0 0 2px var(--kb-or-sombre)}
.step p{color:var(--kb-texte-doux)}
.goal{display:flex;align-items:center;gap:16px;margin:var(--kb-esp-5) 0 0;padding:var(--kb-esp-3) var(--kb-esp-4);border-radius:var(--kb-r-grand);
  background:linear-gradient(90deg,rgba(163,18,47,.25),transparent);box-shadow:inset 3px 0 0 var(--kb-sceau-clair)}
.goal img{width:32px;flex:none}

/* ---------- armées (accueil) ---------- */
.fac-tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--kb-or-sombre) transparent}
.fac-tabs button{flex:none;display:grid;justify-items:center;gap:6px;min-width:96px;padding:12px 10px;border:0;border-radius:var(--kb-r-moyen);cursor:pointer;
  background:var(--plate);color:var(--kb-texte-doux);font:700 14px/1.1 var(--kb-f-titre);box-shadow:var(--kb-relief),var(--kb-liseré);
  transition:transform var(--t-court) var(--ease),box-shadow var(--t-moyen) var(--ease),color var(--t-moyen)}
.fac-tabs button img{width:52px;height:52px;transition:transform var(--t-moyen) var(--ease)}
.fac-tabs button:hover img{transform:translateY(-2px) scale(1.05)}
.fac-tabs button[aria-selected=true]{color:var(--kb-or-clair);box-shadow:var(--kb-relief),0 0 0 1px #000,0 0 0 2px var(--fc),0 0 18px color-mix(in srgb,var(--fc) 50%,transparent)}
.fac-panel{display:grid;gap:var(--kb-esp-4);align-items:center;padding:var(--kb-esp-4);border-radius:var(--kb-r-grand);margin-top:var(--kb-esp-3);
  background:radial-gradient(ellipse 60% 80% at 25% 60%,color-mix(in srgb,var(--fc) 30%,transparent),transparent 70%),linear-gradient(180deg,rgba(42,30,20,.7),rgba(20,13,8,.8));
  box-shadow:var(--kb-relief),var(--kb-liseré)}
@media (min-width:860px){.fac-panel{grid-template-columns:minmax(260px,.8fr) 1.2fr;padding:var(--kb-esp-5)}}
.fac-panel h3{font-size:clamp(24px,3vw,34px);font-weight:900}
.fac-panel .kicker img{width:36px;height:36px}
.fac-fig{position:relative;display:grid;place-items:center}
.fac-fig::after,.fac-hero-fig::after{content:"";position:absolute;bottom:6%;width:70%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.fig.big{width:min(420px,100%);filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.lead-in{color:var(--kb-texte-doux)}
.js .fac-panel.in .fig{animation:figIn var(--t-long) var(--ease) both}.js .fac-panel.in .fac-txt{animation:txtIn var(--t-long) var(--ease) both}
@keyframes figIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes txtIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.crests{margin-top:var(--kb-esp-5);text-align:center}
.crests p{color:var(--kb-texte-doux)}
.crests ul{list-style:none;padding:0;margin:0 0 var(--kb-esp-4);display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.crests li a{display:block;padding:4px;border-radius:50%;transition:transform var(--t-court) var(--ease)}
.crests li a:hover{transform:translateY(-3px) scale(1.08)}

/* ---------- modes ---------- */
.where{display:grid;gap:var(--kb-esp-5);align-items:center;margin-top:var(--kb-esp-5)}
@media (min-width:760px){.where{grid-template-columns:220px 1fr}}
.phone{margin:0 auto;width:220px;padding:10px;border-radius:30px;background:#0d0b09;box-shadow:0 0 0 2px #3a2a1c,0 0 0 4px #000,0 20px 40px rgba(0,0,0,.7)}
.phone img{border-radius:22px}

/* ---------- collection : cartes à retourner ---------- */
.split{display:grid;gap:var(--kb-esp-5);align-items:center}
@media (min-width:920px){.split{grid-template-columns:1fr 1.05fr}}
.cards{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:14px;justify-content:center}
@media (min-width:560px){.cards{grid-template-columns:repeat(4,minmax(0,170px))}}
@media (min-width:920px){.cards{grid-template-columns:repeat(2,minmax(0,200px))}}
.flip{position:relative;display:block;width:100%;aspect-ratio:478/670;border:0;padding:0;background:none;cursor:pointer;perspective:900px;border-radius:14px}
.flip>span{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--t-long) var(--ease);overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.6)}
.flip .face img{width:100%;height:100%;object-fit:cover}
.flip .face{transform:rotateY(180deg)}
.flip[aria-pressed=true] .back{transform:rotateY(-180deg)}.flip[aria-pressed=true] .face{transform:rotateY(0)}
.flip .back{display:grid;place-items:center;background:
  radial-gradient(circle at 50% 50%,rgba(255,233,168,.12) 0,transparent 36%),
  repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 2px,transparent 2px 9px),
  radial-gradient(ellipse at 40% 30%,#8a1a2e,#4a0414 75%);
  box-shadow:inset 0 0 0 6px #2a0610,inset 0 0 0 8px var(--kb-laiton),inset 0 0 0 10px #2a0610,0 10px 22px rgba(0,0,0,.6)}
.flip .back i{width:46%;aspect-ratio:1;transform:rotate(45deg);border:2px solid var(--kb-laiton);background:radial-gradient(circle,rgba(233,185,73,.35),transparent 70%);box-shadow:0 0 0 6px rgba(201,162,74,.25)}
.flip:hover .back{filter:brightness(1.12)}
.deck .small{margin-top:12px}

/* ---------- prix ---------- */
.offer{background:rgba(255,255,255,.35);border-radius:var(--kb-r-grand);padding:var(--kb-esp-4);box-shadow:inset 0 0 0 1.5px rgba(90,42,16,.35)}
.offer .big{font:900 40px/1 var(--kb-f-titre);color:#8e0b2c;margin:.2em 0 .5em}
.offer .big small{font:600 15px var(--kb-f-texte);color:#6a5032;margin-left:6px}
.badge{display:inline-block;vertical-align:middle;font:600 12px/1 var(--kb-f-texte);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:var(--kb-r-sceau);background:#5a2a10;color:var(--kb-parchemin);margin-left:6px}
.sec-parch .checks li::before{background:radial-gradient(circle at 35% 30%,#d8324e,#8e0b2c 60%,#4a0414)}

/* ---------- nouveautés, FAQ ---------- */
.news time{font:600 14px var(--kb-f-texte);color:var(--kb-laiton)}
.news-list .news{padding:var(--kb-esp-4) 0;border-bottom:1px solid rgba(138,90,28,.4)}
.news-list h2{font-size:clamp(22px,2.6vw,28px);margin-top:.3em}
.qa{border-bottom:1px solid rgba(90,42,16,.3)}
.qa summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;font:700 19px/1.35 var(--kb-f-titre);color:#5a2a10}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2.5px solid #8e0b2c;border-bottom:2.5px solid #8e0b2c;transform:translateY(-70%) rotate(45deg);transition:transform var(--t-moyen) var(--ease)}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa div{padding:0 0 18px}
.sec:not(.sec-parch) .qa summary{color:var(--kb-or)}

/* ---------- dernier appel ---------- */
.final{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,10vw,120px) var(--gouttiere);
  background:radial-gradient(ellipse 60% 70% at 50% 60%,rgba(163,18,47,.28),transparent 70%),linear-gradient(180deg,transparent,rgba(42,30,20,.6))}
.final>div{position:relative;z-index:1;max-width:680px;margin:0 auto}
.final p{color:var(--kb-texte-doux);margin-bottom:var(--kb-esp-4)}
.final-fig{position:absolute;bottom:0;width:clamp(120px,18vw,260px);opacity:.92;filter:drop-shadow(0 10px 16px rgba(0,0,0,.7))}
.final-fig.l{left:max(2%,calc(50% - 620px))}.final-fig.r{right:max(2%,calc(50% - 620px));transform:scaleX(-1)}
@media (max-width:700px){.final-fig{opacity:.28}}
.small-final{padding:clamp(48px,7vw,80px) var(--gouttiere)}

/* ---------- liste des armées ---------- */
.fgrid{list-style:none;padding:0;margin:0;display:grid;gap:var(--kb-esp-3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.fcard a{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;height:100%;padding:12px 16px 12px 8px;border-radius:var(--kb-r-grand);text-decoration:none;
  background:radial-gradient(ellipse 50% 90% at 15% 60%,color-mix(in srgb,var(--fc) 32%,transparent),transparent 80%),linear-gradient(180deg,rgba(58,42,28,.55),rgba(26,18,11,.7));
  box-shadow:var(--kb-relief),var(--kb-liseré);transition:transform var(--t-court) var(--ease),box-shadow var(--t-moyen) var(--ease)}
.fcard a:hover{transform:translateY(-3px);box-shadow:var(--kb-relief),0 0 0 1px #000,0 0 0 2px var(--fc),0 10px 24px rgba(0,0,0,.6)}
.fcard-fig img{width:96px;height:96px;object-fit:contain}
.fcard-txt{display:grid;gap:4px}
.fcard-txt img{width:30px;height:30px}
.fcard-txt b{font:700 17px/1.2 var(--kb-f-titre);color:var(--kb-or)}
.fcard-txt small{color:var(--kb-texte-doux);font-size:14px;line-height:1.3}

/* ---------- fiche d'armée ---------- */
.fac-hero{width:min(var(--largeur),100% - 2*var(--gouttiere));margin:0 auto;padding:var(--kb-esp-4) 0 var(--kb-esp-5);display:grid;gap:var(--kb-esp-4);align-items:center}
@media (min-width:860px){.fac-hero{grid-template-columns:minmax(260px,.75fr) 1.25fr}}
.fac-hero-fig{position:relative;display:grid;place-items:center;border-radius:var(--kb-r-grand);background:radial-gradient(ellipse 60% 60% at 50% 55%,color-mix(in srgb,var(--fc) 35%,transparent),transparent 70%)}
.fac-hero .kicker img{width:40px;height:40px}
.fac-keys .tile h2{font-size:22px}
.sig{display:flex;gap:12px;align-items:center}.sig img{width:56px;height:56px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--kb-or-sombre)}
.usec{margin-top:var(--kb-esp-5)}.usec>h3{border-bottom:1px solid rgba(138,90,28,.5);padding-bottom:8px}
.units{list-style:none;padding:0;margin:0;display:grid;gap:var(--kb-esp-3)}
@media (min-width:860px){.units{grid-template-columns:repeat(2,1fr)}}
.unit{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px;border-radius:var(--kb-r-grand);background:linear-gradient(180deg,rgba(58,42,28,.45),rgba(26,18,11,.6));box-shadow:var(--kb-relief),var(--kb-liseré)}
.unit-fig img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.unit h4{margin:0 0 4px;color:var(--kb-or-clair)}
.unit .meta{font-size:14px;color:var(--kb-laiton);margin:0 0 8px}
.stats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.stats span{display:inline-flex;align-items:baseline;gap:4px;padding:4px 8px;border-radius:var(--kb-r-petit);background:rgba(0,0,0,.35);font:600 12px var(--kb-f-texte);color:var(--kb-texte-doux);letter-spacing:.05em}
.stats b{font:900 16px var(--kb-f-titre);color:var(--kb-or-clair)}
.unit p{font-size:15px;line-height:1.5;margin:0 0 6px}.unit .role{color:var(--kb-texte)}.unit .kw{color:var(--kb-laiton)}
.crestrow{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.crestrow a{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--kb-r-sceau);text-decoration:none;color:var(--kb-texte);background:var(--plate);box-shadow:var(--kb-relief),var(--kb-liseré);font-size:15px}
.crestrow a:hover{color:var(--kb-or)}
.tips{list-style:none;padding:0;margin:0 0 var(--kb-esp-5);display:grid;gap:var(--kb-esp-3)}
@media (min-width:760px){.tips{grid-template-columns:repeat(2,1fr)}}

/* ---------- pied de page ---------- */
.foot{padding:var(--kb-esp-5) var(--gouttiere) calc(var(--kb-esp-5) + 64px);background:#080605;box-shadow:inset 0 1px 0 rgba(138,90,28,.45)}
.foot-in{width:min(var(--largeur),100%);margin:0 auto;display:grid;gap:var(--kb-esp-4)}
@media (min-width:760px){.foot-in{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot-brand{display:flex;gap:12px;align-items:center}.foot-brand img{width:40px}
.foot-brand b{display:block;font:900 20px var(--kb-f-titre);color:var(--kb-or)}.foot-brand span{color:var(--kb-texte-doux);font-size:15px}
.foot nav{display:grid;gap:6px;align-content:start}
.foot h2{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--kb-laiton);margin:0 0 4px}
.foot nav a{color:var(--kb-texte-doux);text-decoration:none;font-size:16px;padding:4px 0}.foot nav a:hover{color:var(--kb-or)}
.credits{width:min(var(--largeur),100%);margin:var(--kb-esp-4) auto 0;font-size:13px;color:#8a7a60}
@media (min-width:760px){.foot{padding-bottom:var(--kb-esp-5)}}

/* ---------- barre « Jouer » collante sur téléphone ---------- */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;justify-content:center;
  transition:transform var(--t-moyen) var(--ease),opacity var(--t-moyen) var(--ease)}
.dock .btn{width:min(420px,100%);min-height:54px}
.dock.off{transform:translateY(140%);opacity:0;pointer-events:none}
@media (min-width:860px){.dock{display:none!important}}

/* ---------- apparitions ---------- */
.js .rv.pre{opacity:0;transform:translateY(14px);transition:opacity var(--t-long) var(--ease),transform var(--t-long) var(--ease)}
.js .rv.pre.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv.pre{opacity:1;transform:none}
}