:root{--bg:#e8d9bc;--card:#f7eedb;--ink:#2e1f15;--mut:#6e5640;--acc:#d98e2b;--accink:#2e1f15;--ok:#3f6c2b;--bad:#b23b26;--line:#c2a982;--bois:#7a4e2d;--boisClair:#a8774c;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1e1611;--card:#2d221a;--ink:#f1e4cc;--mut:#b49c80;--acc:#e8a33d;--accink:#2a1c12;--ok:#8cc46c;--bad:#ff8f73;--line:#4d3b2c;--bois:#5a3a22;--boisClair:#7a5434;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1e1611;--card:#2d221a;--ink:#f1e4cc;--mut:#b49c80;--acc:#e8a33d;--accink:#2a1c12;--ok:#8cc46c;--bad:#ff8f73;--line:#4d3b2c;--bois:#5a3a22;--boisClair:#7a5434;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Nunito",system-ui,sans-serif;line-height:1.3;overflow:hidden;-webkit-tap-highlight-color:transparent}
#app{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2{font-family:"Bangers","Impact",sans-serif;font-weight:400;letter-spacing:.04em;margin:0}
h1{font-size:30px}h2{font-size:22px;margin-bottom:6px}
button{font:inherit;color:inherit;cursor:pointer}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{border:2px solid var(--ink);border-radius:16px;padding:0 8px;font-weight:800;font-size:14px;background:var(--card)}
.stage{flex:1;min-height:0;overflow:auto}
.sub{color:var(--mut);font-size:13px;margin:4px 0}
.btn{background:var(--acc);color:var(--accink);border:2px solid var(--ink);border-radius:12px;padding:12px;font-weight:800;font-size:16px;flex:1}
.btn.alt{background:var(--card);color:var(--ink)}
.btn:disabled{opacity:.4}
.btn:focus-visible,.tile:focus-visible,.mc:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mc{border:2px solid var(--line);background:var(--card);border-radius:12px;padding:8px;position:relative}
.mc.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.mc.dead{opacity:.4}
.mc .em{font-size:30px;margin-right:6px}
.mc small{display:block;color:var(--mut);margin-bottom:4px}
.b{display:flex;align-items:center;gap:4px;font-size:12px}
.bar{flex:1;height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.bar i.mid{background:var(--acc)}.bar i.lo{background:var(--bad)}
.heal{margin-top:6px;width:100%;border:2px solid var(--ink);border-radius:8px;background:var(--acc);color:var(--accink);font-weight:800;padding:3px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px}
.tile{position:relative;border:2px solid var(--ink);background:var(--card);border-radius:12px;padding:6px 0;font-size:28px;line-height:1.1}
.tile small{display:block;font-size:11px;font-weight:700;color:var(--mut)}
.tile.off{opacity:.35}
.tile .n{position:absolute;top:-7px;right:-5px;background:var(--acc);color:var(--accink);border:2px solid var(--ink);border-radius:10px;font-size:12px;font-weight:800;padding:0 6px}
.bag{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:4px 0}
.cell{height:38px;border:2px dashed var(--line);border-radius:9px;display:grid;place-items:center;font-size:20px;background:none;padding:0}
.cell.f{border:2px solid var(--ink);background:var(--card)}.cell.s{opacity:.35}
.pill{background:var(--acc);color:var(--accink);border:2px solid var(--ink);border-radius:16px;padding:0 10px;font-weight:800}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:5}
.sheet{background:var(--card);border:2px solid var(--ink);width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));max-height:88%;overflow:auto}
.loc{display:block;width:100%;text-align:left;background:var(--bg);border:2px solid var(--ink);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.loc small{display:block;color:var(--mut)}
.sheet ul{margin:6px 0 10px;padding-left:20px}
.pk{display:grid;gap:8px;flex:1;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"sub" "bag" "tiles" "info" "go"}
.tabs{display:flex;gap:6px}
.tab{flex:1;border:2px solid var(--ink);background:var(--card);border-radius:12px;padding:6px 2px;font-weight:800;font-size:13px;line-height:1.15}
.tab.on{background:var(--acc);color:var(--accink)}
.tab small{display:block;font-weight:700;opacity:.8}
.tab:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.eqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin:6px 0 8px}
.eq{display:flex;gap:8px;align-items:center;border:2px solid var(--line);border-radius:10px;padding:6px;background:var(--bg)}
.eq .em{font-size:24px}
.eq small{display:block;color:var(--mut);font-size:12px;line-height:1.2}
.timer{height:12px;border-radius:7px;border:2px solid var(--ink);background:var(--card);overflow:hidden}
.timer i{display:block;height:100%;background:var(--ok);transition:width .25s linear}
.timer i.lo{background:var(--bad)}
@media (orientation:landscape) and (min-width:560px){#app{max-width:960px}.grid2{grid-template-columns:repeat(4,1fr)}.pk{grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"sub tiles" "bag tiles" "info tiles" "go tiles"}.tiles{grid-template-columns:repeat(4,1fr)}}
@media (max-height:640px){h1{font-size:24px}h2{font-size:19px}.cell{height:30px;font-size:16px}.tile{font-size:22px;padding:3px 0}.btn{padding:9px;font-size:15px}.mc{padding:6px}.mc .em{font-size:24px}.tab{padding:3px 2px;font-size:12px}}
.sheet li.b2{color:var(--bad)}.sheet li.g2{color:var(--ok)}
/* Étape 1 : stock, butin, équipement */
.acts{gap:6px}.acts .btn{padding:10px 4px;font-size:14px;min-width:0}
.loc:disabled{opacity:.45}
.loot{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.loot span{border:2px solid var(--ink);border-radius:10px;padding:2px 8px;font-size:20px;font-weight:800;background:var(--bg)}
.eqt{flex:1;min-width:0}
.slots{display:flex;gap:4px;margin-top:5px}
.slot{flex:1;min-width:0;height:34px;border:2px dashed var(--line);border-radius:8px;background:none;font-size:18px;padding:0;display:grid;place-items:center}
.slot.f{border:2px solid var(--ink);background:var(--bg)}
.slot .vide{opacity:.3;filter:grayscale(1)}
.slot.heal2{flex:0 0 34px;border:2px solid var(--ink);background:var(--acc);color:var(--accink);font-weight:800;font-size:20px}
.slot:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
.loc.pick{padding:4px}.loc.pick .eq{border:0;padding:2px}
h1{white-space:nowrap}
@media (max-height:640px){.slot{height:28px;font-size:15px}.slot.heal2{flex-basis:28px}}
/* Étape 2b : atelier */
.onglets{margin:0 0 8px}.onglets .tab{font-size:18px;padding:4px 2px}
.onglets .tab small{font-size:11px}
.loc.craft{display:flex;gap:8px;align-items:center;padding:6px 8px}
.loc.craft .em{font-size:26px}
.loc .ok{color:var(--ok);font-weight:800}.loc .ko{color:var(--bad);font-weight:800}
.msg{font-weight:800;margin:0 0 8px}.g2{color:var(--ok)}
.score{font-size:20px;margin:4px 0}
.score{font-size:20px;margin:4px 0}
/* Étape 3 : combat */
.zs{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;margin:4px 0 8px}
.z{border:2px solid var(--ink);border-radius:12px;background:var(--bg);padding:6px;text-align:left}
.z .em{font-size:26px;display:block;line-height:1}
.z small{display:block;color:var(--mut);font-size:11px}
.z.vise{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad)}
.z.mort{opacity:.35}
.cm{border:2px solid var(--line);border-radius:12px;padding:6px;margin-bottom:6px}
.cmt{display:flex;gap:8px;align-items:center}.cmt .em{font-size:26px}
.cmb{display:flex;gap:6px;margin-top:6px}
.mini{flex:1;border:2px solid var(--ink);border-radius:9px;background:var(--card);padding:6px 2px;font-weight:800;font-size:14px}
.mini.on{background:var(--acc);color:var(--accink)}
.cm small{display:block;color:var(--mut);font-size:12px}
.z{padding:4px 6px}.z .em{font-size:20px;display:inline;margin-right:4px}
.cm{display:flex;gap:6px;align-items:center;padding:4px 6px}
.cmt{flex:1;min-width:0}.cmt .em{font-size:22px}
.cmb{flex-direction:column;gap:4px;margin:0;flex:0 0 96px}
.mini{padding:4px 2px;font-size:13px}
/* Étape 4 : voiture */
.loc.toggle.on{background:var(--acc);color:var(--accink)}.loc.toggle.on small{color:var(--accink)}
.garage{border:2px solid var(--line);border-radius:12px;padding:8px;margin:4px 0 8px;background:var(--bg)}
.auto{font-size:56px;text-align:center;line-height:1.1}
.pslots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pslot{border:2px dashed var(--ink);border-radius:10px;background:var(--card);padding:4px 2px;text-align:center}
.pslot .em{font-size:24px;display:block}.pslot small{display:block;font-size:11px;line-height:1.15}
.pslot.fait{border-style:solid;border-color:var(--ok)}
.pslot.attend,.pslot.survol{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc)}
.parts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.part{border:2px solid var(--ink);border-radius:12px;background:var(--bg);padding:6px 10px;font-size:26px;touch-action:none;cursor:grab;user-select:none}
.part small{display:block;font-size:11px}.part.on{background:var(--acc);color:var(--accink)}
.part.fantome{position:fixed;z-index:20;pointer-events:none;opacity:.85;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.onglets .tab{font-size:16px}.onglets .tab small{font-size:10px}
/* Étape 4b : crochetage */
.goupilles{display:flex;gap:10px;justify-content:center;font-size:26px;margin:4px 0}
.serrure{position:relative;height:34px;border:2px solid var(--ink);border-radius:10px;background:var(--bg);margin:8px 0;overflow:hidden}
.serrure .zone{position:absolute;top:0;bottom:0;background:var(--ok);opacity:.55}
.serrure .curseur{position:absolute;top:-2px;bottom:-2px;width:6px;margin-left:-3px;background:var(--bad);border-radius:3px}
/* Étape 5a : partie du jour */
.mode{border:2px solid var(--ink);border-radius:16px;background:var(--card);font-weight:800;font-size:13px;padding:2px 8px;white-space:nowrap}
.tab:disabled{opacity:.35}
/* Étape 5b : chapitres */
.chap{font-size:13px;font-weight:800;margin:6px 0 0;padding:4px 8px;border:2px solid var(--acc);border-radius:10px;background:var(--card)}
/* Étape 5c : marché */
.loc.troc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;text-align:center}
.loc.troc small{grid-column:1/-1;text-align:left}
.troc .tr{font-size:22px;font-weight:800}.troc .fl{font-size:20px}
/* Sauvegarde : écran d'accueil */
.accueil{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.accueil h1{font-size:48px}
/* Astuces */
#astuce{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:calc(100% - 20px);max-width:460px;z-index:30;background:var(--card);border:2px solid var(--acc);border-radius:14px;padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
#astuce p{margin:0 0 6px;font-weight:700;font-size:14px}
.lien{background:none;border:0;color:var(--mut);text-decoration:underline;font-size:12px;padding:4px 0}
/* Ergonomie de l'atelier : recettes lisibles */
.loc.recette{display:flex;flex-direction:column;gap:6px;padding:8px 10px}
.loc.recette:disabled{opacity:1;border-style:dashed}
.loc.recette:disabled .rt{opacity:.6}
.rt{display:flex;gap:8px;align-items:center}.rt .em{font-size:28px;line-height:1}
.ings{display:flex;flex-wrap:wrap;gap:4px}
.ing{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);border-radius:10px;padding:2px 8px;font-size:13px;font-weight:700;background:var(--card)}
.ing em{font-style:normal;font-weight:800;font-size:12px}
.ing.ok{border-color:var(--ok)}.ing.ok em{color:var(--ok)}
.ing.ko{border-color:var(--bad)}.ing.ko em{color:var(--bad)}
.etat{margin:0;font-size:13px;font-weight:800}.etat.ok{color:var(--ok)}.etat.ko{color:var(--bad)}
#astuce .indic{color:var(--mut);font-size:11px;flex:1;text-align:right}
/* Icônes dessinées (SVG) : même taille qu'un emoji */
.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.22em}
/* Mode sombre : liseré clair autour des icônes (effet autocollant) pour que le contour foncé reste visible */
:root{--halo:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--halo:#d5dfdb}}
:root[data-theme="dark"]{--halo:#d5dfdb}
.ico{filter:drop-shadow(0 0 .7px var(--halo)) drop-shadow(0 0 .7px var(--halo))}
/* Case vide alors qu'un objet est disponible au stock : orange + petit « + » */
.slot{position:relative}
.slot.dispo{border:2px solid var(--acc);background:var(--card)}
.slot.dispo .vide{opacity:.55;filter:none}
.slot.dispo::after{content:"+";position:absolute;top:-7px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--acc);color:var(--accink);border:2px solid var(--ink);font-size:13px;font-weight:800;line-height:12px;text-align:center}
@media (prefers-reduced-motion:no-preference){.slot.dispo::after{animation:pouls 1.6s ease-in-out infinite}}
@keyframes pouls{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.ico-mort{filter:grayscale(1)}
.chipchien{cursor:pointer;color:var(--ink)}
.chipson{cursor:pointer;color:var(--ink);padding:0 6px}
.bilan{border:2px solid var(--line);border-radius:12px;padding:8px 10px;margin:0 0 10px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.bilan .bl{display:flex;gap:8px;align-items:center}.bilan .bl .em{font-size:26px}
.bilan small{display:block;color:var(--mut);font-size:12px;line-height:1.25}
/* ---------- Fond peint du refuge (écran principal et accueil) ---------- */
body.fond{background:#3b2a1e url("images/refuge-fond.webp") center top/cover no-repeat}
body.fond::before{content:"";position:fixed;inset:0;background:linear-gradient(to bottom,rgba(20,14,10,.10),rgba(20,14,10,.45) 45%,rgba(20,14,10,.65));pointer-events:none;z-index:0}
body.fond #app{position:relative;z-index:1}
body.fond h1{color:#fff6e6;text-shadow:0 2px 0 #1d282c,0 0 6px rgba(0,0,0,.6)}
body.fond .mc{background:color-mix(in srgb,var(--card) 92%,transparent);border-color:rgba(29,40,44,.55)}
body.fond .mc.dead{opacity:.6}
body.fond .aide{background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);border-radius:10px;padding:4px 8px}
body.fond .accueil h1{font-size:56px}
body.fond .accueil .sub{color:#fff6e6;text-shadow:0 1px 2px #000}
/* Portraits peints sur les cartes */
.portrait{position:relative;display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.25em}
.portrait img{width:100%;height:100%;border-radius:22%;border:2px solid var(--ink);object-fit:cover;display:block;background:#bdbdbd}
.portrait.mort img{filter:grayscale(1) brightness(.85)}
.portrait .badges{position:absolute;right:-.3em;bottom:-.25em;display:flex;gap:1px;font-size:.45em}
.portrait .badges .ico,.portrait .badges .zz{background:var(--card);border-radius:50%;box-shadow:0 0 0 1.5px var(--ink)}
.portrait .zz{display:inline-grid;place-items:center;width:1.15em;height:1.15em;font-weight:800;font-size:1em;color:#7a5c9e}
.mc .em{font-size:38px}
@media (max-height:640px){.mc .em{font-size:28px}body.fond .aide{padding:2px 6px}}
@media (max-height:420px){.mc .em{font-size:24px}.aide{display:none}}
/* ---------- Écran principal « scène » : la pièce en haut, la famille en bas sur le plancher ---------- */
.stage.scene{display:flex;flex-direction:column;gap:6px;overflow:hidden}
.scene .chap{order:0;margin:0}
.scene .aide{order:2;margin:auto 0 0}          /* « auto » pousse l'aide, la pub et les cartes vers le bas */
.scene > .row{order:3}
.scene .grid2{order:4}
.scene .aide:only-child{margin-top:auto}
body.fond .scene .mc{padding:5px 6px}
body.fond .scene .mc small{margin-bottom:2px}
body.fond .scene .b .bar{height:6px}
body.fond .scene .slots{margin-top:3px}
body.fond .scene .slot{height:28px}
body.fond{background-position:center 0}
/* Scène : plus de place pour la pièce */
body.fond .scene .aide{display:none}
body.fond .scene > .row{margin-top:auto}
body.fond .scene > .row .btn{padding:6px 8px;font-size:13px}
/* Cartes plus compactes dans la scène */
body.fond .scene .mc > div:first-of-type{display:flex;align-items:center;gap:4px}
body.fond .scene .mc > small{display:block;font-size:11px;margin:0 0 2px}
body.fond .scene .b{font-size:10px;line-height:1;gap:3px;margin:1px 0}
body.fond .scene .b span{width:13px;text-align:center}
/* Guide du survivant */
.gsec{border:2px solid var(--line);border-radius:12px;padding:6px 10px;margin:0 0 8px;background:var(--bg)}
.gsec p{margin:4px 0 0;font-size:14px}
.gcat{display:block;margin:8px 0 4px}
.gobjets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gobj{border:2px solid var(--ink);border-radius:10px;background:var(--bg);padding:4px 2px;font-size:26px;line-height:1.1}
.gobj small{display:block;font-size:10px;line-height:1.15;font-weight:700}
.gmini{display:flex;flex-wrap:wrap;gap:4px;font-size:20px;margin-top:4px}
/* Pièce cliquable (piece.js) */
#piece{position:fixed;left:0;right:0;z-index:2;overflow:hidden;pointer-events:none}
#piece .zone{position:absolute;pointer-events:auto;background:transparent;border:2px dashed transparent;border-radius:12px;padding:0;cursor:pointer}
#piece .zone:hover,#piece .zone:focus-visible{border-color:rgba(255,246,230,.85);background:rgba(255,246,230,.12);outline:none}
#piece .etiq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:12px;font-weight:800;background:rgba(29,40,44,.75);color:#fff6e6;border:1.5px solid rgba(255,246,230,.6);border-radius:12px;padding:2px 8px;pointer-events:none}
#piece .zone:active .etiq{background:var(--acc);color:var(--accink)}
.loc.choisi{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
/* Fond de la scène : couleur du plancher autour de l'image recadrée */
body.fond{background-color:#4a3221}
#piece.compact .etiq{font-size:10px;padding:2px 4px}
/* ---------- Téléphone : barre de famille compacte ---------- */
.mc{position:relative}
.mc .pastille{display:none}
.btn.attente{opacity:.75}
.jauge{display:flex;align-items:center;gap:8px;margin:2px 0}.jauge .b{flex:1}.jauge small{min-width:104px;white-space:nowrap;color:var(--mut);font-size:12px}
.slots.grands{margin:4px 0 10px}.slots.grands .slot{height:auto;padding:6px 2px;flex-direction:column;display:flex;align-items:center;font-size:26px}
.slots.grands .slot small{font-size:10px;line-height:1.1;margin-top:2px}
@media (max-width:559px){
  body.fond .scene .grid2{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  body.fond .scene .mc{padding:5px 3px 4px;text-align:center}
  body.fond .scene .mc > div:first-of-type{flex-direction:column;gap:1px}
  body.fond .scene .mc > div:first-of-type b{font-size:12px;line-height:1.1}
  body.fond .scene .mc .em{font-size:40px}
  body.fond .scene .mc > small{font-size:9.5px;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.fond .scene .mc .slots{display:none}
  body.fond .scene .b{gap:2px;margin:2px 0}
  body.fond .scene .b span{display:none}
  body.fond .scene .b .bar{height:5px}
  body.fond .scene .mc .pastille{display:grid;place-items:center;position:absolute;top:-6px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--accink);border:2px solid var(--ink);font-weight:800;font-size:13px;line-height:1}
  body.fond .scene > .row{justify-content:flex-end}
  body.fond .scene > .row .btn{flex:0 0 auto !important;border-radius:16px;padding:4px 10px;font-size:12px}
  body.fond .scene > .row .long{display:none}
}
@media (max-width:559px) and (max-height:640px){ body.fond .scene .mc .em{font-size:34px} }
/* ---------- Retouches : jauges lisibles et boutons du bas égaux ---------- */
@media (max-width:559px){
  body.fond .scene .b span{display:inline-block;width:12px;font-size:9px;line-height:1;text-align:center;flex:0 0 12px}
  body.fond .scene .b{gap:3px}
}
.acts .btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
@media (max-width:559px){
  .acts .btn{flex-direction:column;gap:2px;padding:6px 2px;font-size:13px;line-height:1.1}
  .acts .btn .ico{font-size:18px}
}

/* ---------- Style « refuge » : fenêtres en bois et papier, boutons couleur lanterne ---------- */
.sheet{border:3px solid var(--bois);border-bottom:0;box-shadow:0 -6px 24px rgba(20,10,4,.45),inset 0 0 0 2px var(--boisClair);
  background:var(--card) linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,0) 40%)}
.sheet::before{content:"";display:block;width:52px;height:5px;border-radius:3px;background:var(--line);margin:-4px auto 10px}
.sheet h2{color:var(--bois)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet h2{color:var(--acc)}}
:root[data-theme="dark"] .sheet h2{color:var(--acc)}
.btn{box-shadow:0 3px 0 var(--bois);background:linear-gradient(180deg,#f0ad4e,var(--acc))}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bois)}
.btn.alt{background:var(--card);box-shadow:0 3px 0 var(--line)}
.btn:disabled{box-shadow:none}
.loc{background:var(--bg);border-color:var(--bois);box-shadow:0 2px 0 var(--line)}
.loc:active{transform:translateY(1px)}
.tab{border-color:var(--bois)}
.tab.on{background:linear-gradient(180deg,#f0ad4e,var(--acc))}
.chip{border-color:var(--bois);background:var(--card)}
.mc{border-color:var(--bois)}
body.fond .mc{border-color:var(--bois);box-shadow:0 3px 0 rgba(20,10,4,.35)}
.gsec,.bilan,.cm,.eq{border-color:var(--line)}
.chap{border-color:var(--acc);background:var(--card)}
#astuce{border-color:var(--acc);background:var(--card)}
.bar{background:color-mix(in srgb,var(--line) 70%,transparent)}
.jauge small{flex:0 0 auto}
/* Pièce cliquable discrète : étiquettes cachées, montrées 3 s au début de chaque journée (et au survol sur PC) */
#piece .etiq{opacity:0;transition:opacity .5s}
#piece.montrer .etiq,#piece .zone:hover .etiq,#piece .zone:focus-visible .etiq{opacity:1}
#piece .zone.invite .etiq{background:var(--acc);color:var(--accink);border-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){#piece .zone.invite .etiq{animation:lueur 1.4s ease-in-out infinite}}
@keyframes lueur{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.8)}50%{box-shadow:0 0 0 7px rgba(232,163,61,0)}}
/* « Qui part ? » : membre à gauche, équipement à droite */
.qprow{display:flex;align-items:center;gap:6px;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:4px 6px;margin-bottom:6px;box-shadow:0 2px 0 var(--line)}
.qprow.choisi{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.qpqui{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:2px;text-align:left}
.qpqui:disabled{opacity:.5}.qpqui .em{font-size:32px}.qpqui small{display:block;color:var(--mut);font-size:12px}
.qpeq{display:flex;gap:4px;flex:0 0 auto}.qpeq .slot{width:36px;height:36px;flex:0 0 36px;font-size:19px}
/* Boutons côte à côte dans les fenêtres : même largeur, une seule ligne */
.sheet .row .btn{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px;padding-right:8px}
@media (max-width:400px){.sheet .row .btn{font-size:15px}}
/* Titre du jour + chapitre en dessous */
.titre{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:0 1 auto}
.chapcourt{border:0;background:none;padding:0;margin-top:-2px;font-size:11px;font-weight:800;color:var(--ink);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;text-decoration:underline dotted;cursor:pointer}
body.fond .chapcourt{color:#fff6e6;text-shadow:0 1px 2px #000}
.gsec p.encours{font-weight:800;color:var(--ink)}.gsec p.fait{color:var(--mut);text-decoration:line-through}
/* En-tête : le titre du jour et le chapitre ne rétrécissent pas sous les pastilles */
#app > .row:first-child{align-items:flex-start}
.titre{flex:0 0 auto}
.titre h1{line-height:1}
.chapcourt{max-width:100%;display:block;margin-top:2px}
#app > .row:first-child .chips{flex:1 1 0;min-width:0;justify-content:flex-start}
/* Téléphone : pastilles de l'en-tête rangées en lignes de 3 */
@media (max-width:559px){
  #app > .row:first-child .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;justify-content:stretch}
  #app > .row:first-child .chips .chip{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
}
/* Fondu du bas de l'image de la pièce vers la couleur du plancher (placé par piece.js) */
#fondu{position:fixed;left:0;right:0;height:90px;pointer-events:none;z-index:-1;background:linear-gradient(to bottom,rgba(74,50,33,0),#4a3221 85%)}
/* Histoire des chapitres, offre de pub */
.histoire p{margin:6px 0;line-height:1.45}
.histoire p.fait{color:var(--mut);text-decoration:none;font-size:13px}
p.histoire{line-height:1.45}
.loc.offrepub{border-style:dashed}
/* Bouton de mission : prêt à livrer */
.btn.pret{box-shadow:0 0 0 3px var(--acc)}
/* Classement en ligne */
.champ{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:2px solid var(--bois, var(--line));border-radius:12px;background:var(--card, #fff);color:var(--ink);margin:4px 0 8px}
ol.classement{list-style:none;padding:0;margin:8px 0}
ol.classement li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line)}
ol.classement li.moi{background:color-mix(in srgb, var(--acc) 25%, transparent);border-radius:8px;font-weight:800}
ol.classement .rang{width:2em;text-align:center}
ol.classement b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.classement .pts{color:var(--mut);font-size:13px;white-space:nowrap}
/* ---------- Morts mises en avant ---------- */
.deuil{display:flex;align-items:center;gap:10px;margin:6px 0 10px;padding:8px 10px;border:2px solid var(--bad);border-radius:12px;background:color-mix(in srgb, var(--bad) 14%, var(--card))}
.deuil .em{font-size:44px;line-height:1;flex:0 0 auto}
.deuil b{display:block;color:var(--bad);font-size:16px}
.deuil small{color:var(--mut)}
/* ---------- Écran de game over ---------- */
#gameover{position:fixed;inset:0;z-index:4;display:none;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;
  background:linear-gradient(rgba(18,10,7,.55), rgba(18,10,7,.78) 45%, rgba(18,10,7,.93)), url(images/gameover.webp) 62% 0 / cover no-repeat, #120a07;color:#f1e4cc;overflow:auto;animation:goApparait .8s ease-out}
@keyframes goApparait{from{opacity:0}to{opacity:1}}
.go-boite{width:100%;max-width:440px;text-align:center;margin:auto}
.go-titre{font-size:clamp(44px, 14vw, 72px);color:#e2483a;text-shadow:0 3px 0 #000, 0 0 24px rgba(226,72,58,.5);margin:0;letter-spacing:.06em}
.go-sous{margin:2px 0 10px;color:#cdb79a}
.go-morts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 12px}
.go-mort{width:92px;display:flex;flex-direction:column;align-items:center}
.go-mort .em{font-size:56px;line-height:1}
.go-mort b{margin-top:4px}
.go-mort small{color:#cdb79a;font-size:11px;line-height:1.25}
.go-jours{font-size:18px;margin:4px 0}
.go-score{font-family:"Bangers","Impact",sans-serif;font-size:48px;color:#f0b429;margin:0;text-shadow:0 2px 0 #000}
#gameover .btn.alt{background:#2d221a;color:#f1e4cc}
#gameover .sub{color:#cdb79a}
/* Game over en paysage (téléphone couché) : deux colonnes pour éviter de faire défiler */
@media (max-height:500px) and (orientation:landscape){
  .go-boite{max-width:760px;display:flex;align-items:center;gap:20px}
  .go-gauche,.go-droite{flex:1 1 0;min-width:0}
  .go-titre{font-size:44px}
  .go-mort{width:76px}.go-mort .em{font-size:40px}
  .go-score{font-size:36px}
  .go-jours{font-size:16px}
}
/* Portrait brisé (membre mort) */
.portrait.mort{transform:rotate(-6deg)}
.portrait .fissure{position:absolute;inset:0;width:100%;height:100%;border-radius:22%;pointer-events:none}
.portrait.mort img{filter:grayscale(1) brightness(.7) contrast(1.1)}
/* ---------- Succès ---------- */
#bandeauSucces{position:fixed;left:16px;right:16px;margin-inline:auto;width:fit-content;top:calc(10px + env(safe-area-inset-top,0px));transform:translateY(-140%);z-index:7;display:flex;align-items:center;gap:10px;
  padding:8px 16px 8px 10px;max-width:min(520px,calc(100% - 32px));box-sizing:border-box;background:var(--card);color:var(--ink);border:3px solid var(--acc);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .35s ease;pointer-events:none}
#bandeauSucces.on{transform:translateY(0)}
#bandeauSucces .em{font-size:30px;line-height:1}
#bandeauSucces small{display:block;color:var(--mut);font-size:11px;font-weight:800}
#bandeauSucces b{display:block;font-size:15px}
.succes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:6px 0 10px}
.succes .sc{display:flex;align-items:center;gap:8px;padding:6px 8px;border:2px solid var(--line);border-radius:12px;opacity:.6}
.succes .sc.ok{opacity:1;border-color:var(--acc);background:color-mix(in srgb, var(--acc) 12%, var(--card))}
.succes .sc .em{font-size:24px;line-height:1;flex:0 0 auto}
.succes .sc b{display:block;font-size:13px}
.succes .sc small{display:block;font-size:11px;color:var(--mut);line-height:1.2}
/* Menu en grille compacte */
.menugrille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0 10px}
.menugrille .mt{font:inherit;color:var(--ink);text-align:left;padding:8px 10px;border:2px solid var(--bois, var(--ink));border-radius:12px;background:var(--card);cursor:pointer;min-width:0}
.menugrille .mt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menugrille .mt small{display:block;font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (orientation:landscape) and (max-height:500px){ .menugrille{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- Carte choisie pour partir : bien visible sur la pièce peinte ---------- */
body.fond .mc.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 6px rgba(232,163,61,.6);background:color-mix(in srgb,var(--acc) 14%,var(--card))}
.mc .coche{position:absolute;top:-6px;left:-5px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--accink);border:2px solid var(--ink);font-weight:800;font-size:10px;line-height:1;z-index:1}
/* Équipement porté, en petit sous les jauges (téléphone : les cases ne s'affichent pas) */
.mc .porte{display:none}
@media (max-width:559px){
  body.fond .scene .mc .porte{display:flex;justify-content:center;gap:2px;margin-top:3px}
  body.fond .scene .mc .porte span{width:19px;height:19px;border-radius:6px;border:1.5px dashed color-mix(in srgb,var(--ink) 35%,transparent);display:grid;place-items:center;font-size:13px;line-height:1}
  body.fond .scene .mc .porte span.f{border:1.5px solid var(--bois);background:var(--bg)}
}
/* Pastilles du haut cliquables */
button.chip{font:inherit;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer;padding:0 8px}
/* Écrans d'histoire et de la famille, sur la pièce peinte */
.panneau{background:color-mix(in srgb,var(--card) 94%,transparent);border:3px solid var(--bois);border-radius:16px;padding:12px 14px;box-shadow:0 4px 0 rgba(20,10,4,.35);max-width:560px;width:100%;margin:auto;box-sizing:border-box}
body.fond .panneau h1{color:var(--ink);text-shadow:none}
.panneau p{margin:6px 0}
.intro .titrejeu{font-size:44px;text-align:center;margin:0;line-height:1}
.intro > .sub{text-align:center;margin:0 0 6px}
.intro .btn{margin-top:6px}
.famille .row{align-items:center;gap:10px}
.famille h1{margin:0;flex:0 0 auto}
.famille .pseudo{flex:1;min-width:0;display:flex;flex-direction:column}
.famille .pseudo span{font-size:11px;font-weight:800;color:var(--mut)}
.famille .champ{margin:0;padding:6px 8px}
.fam{display:grid;grid-template-columns:1fr;gap:6px;margin:8px 0}
.fm{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:12px;padding:5px 7px;background:var(--bg)}
.fm .em{font-size:40px;line-height:1;flex:0 0 auto}
.fmc{flex:1;min-width:0}
.fml{display:flex;gap:6px}
.fml input{flex:1 1 0;min-width:0}
.fml select{flex:1.2 1 0;min-width:0}
.fmc small{display:block;font-size:11px;line-height:1.25;margin-top:3px}
.plus{color:var(--ok);display:block}
.moins{color:var(--bad);display:block}
.rt .sub .plus,.rt .sub .moins{display:inline}
.modes .tab small{font-weight:600}
.famille .msg:empty{display:none}
@media (min-width:700px) and (max-height:500px){
  .panneau{max-width:none;padding:8px 12px}
  .fam{grid-template-columns:1fr 1fr;margin:6px 0}
  .fm .em{font-size:32px}
  .intro p{margin:4px 0;font-size:14px}
  .intro .titrejeu{font-size:34px}
}
@media (max-height:640px){
  .fm .em{font-size:32px}
  .fm{padding:4px 6px}
  .intro p{font-size:14px}
}

/* ---------- Écran « Ta famille » façon jeu mobile (2026-11-09) ---------- */
.famtete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.famtete h1{margin:0}
.pseudobtn{display:flex;flex-direction:column;align-items:flex-end;min-width:0;max-width:60%;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);font:inherit}
.pseudobtn small{font-size:11px;font-weight:800;color:var(--mut)}
.pseudobtn b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;background:var(--bg);border:2px solid var(--bois);border-radius:999px;padding:3px 10px;box-shadow:0 2px 0 var(--line)}
.pseudobtn.vide b{background:linear-gradient(180deg,#f0ad4e,var(--acc));color:var(--accink)}
.crayon{font-size:.75em;opacity:.8}
.fm{border:2px solid var(--bois);box-shadow:0 2px 0 var(--line);gap:10px}
.fm .em{font-size:48px}
.fmnom{display:block;border:0;background:none;padding:0;font:inherit;font-family:"Bangers","Impact",sans-serif;font-size:22px;letter-spacing:.03em;color:var(--ink);cursor:pointer;line-height:1.1;text-align:left;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fmtrait{display:flex;align-items:center;gap:6px;margin-top:3px}
.fleche{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:2px solid var(--bois);background:linear-gradient(180deg,#f0ad4e,var(--acc));color:var(--accink);font-size:12px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 0 var(--bois)}
.fleche:active{transform:translateY(1px);box-shadow:none}
.tnom{flex:1;min-width:0;text-align:center;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:2px 6px}
.champ.grand{font-size:20px;font-weight:800;text-align:center}
@media (max-height:640px){ .fm .em{font-size:38px} .fmnom{font-size:19px} .fleche{width:24px;height:24px;flex-basis:24px} }
@media (min-width:700px) and (max-height:500px){ .fm .em{font-size:34px} .fmnom{font-size:18px} .fmc small{font-size:10.5px} }
/* Cartes de la famille : place pour le contour lumineux et la coche (sinon coupés par la scène) */
.scene .grid2{padding:9px 4px 6px}
.famille > .btn{margin-top:10px}
@media (min-width:700px) and (max-height:500px){ .famille > .btn{margin-top:6px} }
.btn.partir{white-space:nowrap}
/* ---------- Écran du sac (2026-11-09) : noms, familles de couleur, besoins, urgence ---------- */
.tile{padding:5px 2px 4px;--fam:var(--line);border-color:var(--ink);box-shadow:inset 0 -4px 0 var(--fam)}
.tile small{color:var(--ink);font-size:10.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tile .pl{position:absolute;top:2px;left:4px;font-size:9px;font-weight:800;color:var(--mut);line-height:1}
.f-eau{--fam:#3d8fd1}.f-nour{--fam:#5c9a3a}.f-soin{--fam:#d0443a}.f-arme{--fam:#6f6f78}.f-lumiere{--fam:#e3b62c}.f-outil{--fam:#9a6a3f}.f-moral{--fam:#d77aa8}
.besoins{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.besoins span{display:flex;flex-direction:column;align-items:center;border:2px solid var(--line);border-radius:10px;background:var(--card);font-size:13px;line-height:1.1;padding:2px 0;opacity:.75}
.besoins span.ok{border-color:var(--ok);opacity:1}
.besoins small{font-size:9.5px;font-weight:800;color:var(--mut)}
body.urgence .timer{animation:urgence .5s ease-in-out infinite alternate;border-color:var(--bad)}
body.urgence #tsec{background:var(--bad);color:#fff;border-color:var(--bad);transform:scale(1.15)}
@keyframes urgence{from{box-shadow:0 0 0 0 rgba(178,59,38,.0)}to{box-shadow:0 0 10px 3px rgba(178,59,38,.8)}}
@media (prefers-reduced-motion:reduce){body.urgence .timer{animation:none}}
/* ---------- Avant la fuite : l'entrée de la maison (image Leonardo.ai de Fabien, 2026-11-09) ---------- */
body.fond.maison{background:#7a4f2c url("images/entree-fond.webp") center top/cover no-repeat}
body.fond.maison::before{background:linear-gradient(to bottom,rgba(20,14,10,.45),rgba(20,14,10,.05) 22%,rgba(20,14,10,.15) 60%,rgba(20,14,10,.4))}
/* Écran du sac : la porte se voit en haut, le sac et les objets dans un panneau en bas */
body.maison .pk{flex:0 1 auto;margin-top:auto;min-height:0;background:color-mix(in srgb,var(--card) 92%,transparent);border:3px solid var(--bois);border-radius:16px;padding:8px;box-shadow:0 4px 0 rgba(20,10,4,.35)}
body.maison .mode,body.maison #tsec{background:var(--card)}
body.maison .mode{border-radius:16px;padding:1px 8px;font-weight:800;font-size:13px;border:2px solid var(--bois)}
/* Téléphone debout : l'image est un peu agrandie et remontée pour que la porte et la fenêtre aux zombies se voient au-dessus du panneau */
@media (orientation:portrait) and (max-aspect-ratio:9/16){ body.fond.maison{background-size:auto 110%;background-position:80% 100%} }
@media (orientation:landscape){ body.fond.maison{background-position:center 40%} }
@media (orientation:landscape) and (max-height:500px){ body.maison .pk{padding:3px 6px;border-width:2px;gap:4px;box-shadow:none} }
/* Sac à dos dessiné (Leonardo.ai) à gauche des cases */
.sacbloc{display:flex;align-items:center;gap:8px;min-width:0}
.sacimg{height:84px;width:auto;flex:0 0 auto;filter:drop-shadow(0 2px 2px rgba(20,10,4,.35));transform-origin:50% 100%}
.sacdroite{flex:1;min-width:0}
.sacimg.saute{animation:sacSaute .35s ease-out}
@keyframes sacSaute{0%{transform:scale(1)}40%{transform:scale(1.12,0.9)}70%{transform:scale(0.95,1.06)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sacimg.saute{animation:none}}
@media (max-height:640px){.sacimg{height:68px}}
@media (orientation:landscape) and (max-height:500px){.sacimg{height:64px}}
.evportrait{float:left;font-size:52px;line-height:1;margin:2px 10px 4px 0}
/* Logo (Gemini, 2026-11-09) : écran d'histoire et accueil */
.tetejeu{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:4px}
.tetejeu .logo{width:84px;height:84px;flex:0 0 auto;filter:drop-shadow(0 3px 3px rgba(20,10,4,.4))}
.tetejeu .titrejeu{text-align:left}.tetejeu .sub{text-align:left;margin:0}
.intro > .sub{display:none}
.accueil .logo.grand{width:min(46vw,190px);height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));margin-bottom:6px}
@media (max-height:640px){.tetejeu .logo{width:68px;height:68px}}
@media (orientation:landscape) and (max-height:500px){.tetejeu .logo{width:56px;height:56px}.accueil .logo.grand{width:110px}}
body.fond .accueil{justify-content:flex-start;padding-top:3vh}
/* Portraits peints des zombies (combat) et de Marco */
.z .em{font-size:44px;margin-bottom:2px}
.z.mort .portrait img{filter:grayscale(1) brightness(.8)}
@media (max-height:640px){.z .em{font-size:34px}}
@media (orientation:landscape) and (max-height:500px){.z .em{font-size:28px}}
/* Éléments posés sur la pièce (Rex, planches) : sous les cartes et les zones cliquables */
#decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#decor img{position:absolute;filter:brightness(.92) drop-shadow(0 3px 3px rgba(20,10,4,.35))}
/* Onglet Voiture : le dessin et ses emplacements de pièces */
.voitimg{position:relative;max-width:440px;margin:0 auto}
.voitimg img{width:100%;height:auto;display:block}
.voitimg .pslot{position:absolute;width:13%;min-width:40px;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;padding:0;display:grid;place-items:center;border-width:2.5px;background:color-mix(in srgb,var(--card) 82%,transparent)}
.voitimg .pslot .em{font-size:20px;line-height:1}
.voitimg .pslot.fait{background:var(--card)}
.pleg{margin:4px 0 0;text-align:center;font-size:12px;font-weight:700;color:var(--mut)}
.pleg .ico{font-size:14px}
/* Bandeau illustré en haut d'une fenêtre (bilan de la nuit) */
.banniere{margin:-4px 0 8px;border-radius:12px;overflow:hidden;border:2px solid var(--bois);height:clamp(80px,20vh,170px)}
.banniere img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
@media (orientation:landscape) and (max-height:500px){.banniere{height:70px}}
/* Vignette d'un lieu dans la liste « Où envoyer l'équipe ? » */
.vign{width:46px;height:26px;object-fit:cover;border-radius:6px;border:1.5px solid var(--bois);vertical-align:-7px;margin-right:2px}
/* ---------- Pièces de la maison qu'on fait défiler ---------- */
body.fond{touch-action:pan-y}
#piece .navpieces{position:absolute;top:4px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;pointer-events:auto;background:rgba(29,20,14,.55);border:1.5px solid rgba(255,246,230,.35);border-radius:999px;padding:2px 6px;z-index:2}
#piece .navfl{border:0;background:none;color:#fff6e6;font-size:13px;width:30px;height:28px;padding:0;cursor:pointer}
#piece .navpt{border:0;background:none;width:18px;height:28px;padding:0;display:grid;place-items:center;cursor:pointer}
#piece .navpt span{width:8px;height:8px;border-radius:50%;background:rgba(255,246,230,.45)}
#piece .navpt.on span{background:var(--acc);box-shadow:0 0 0 2px rgba(232,163,61,.35)}
#piece .navnom{color:#fff6e6;font-size:11px;font-weight:800;margin:0 4px 0 2px;white-space:nowrap}
#piece.compact .navpieces{left:6px;transform:none}
/* Mini-jeu de pêche : l'eau, le fil et le bouchon (dessinés en CSS) */
.etangjeu{position:relative;height:120px;border-radius:14px;border:2px solid var(--bois);overflow:hidden;margin:4px 0 6px;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.18),transparent 40%),linear-gradient(180deg,#6f9aa3,#2f5a63)}
.etangjeu .fil{position:absolute;left:50%;top:0;width:1.5px;height:48%;background:rgba(255,255,255,.75)}
.bouchon{position:absolute;left:50%;top:44%;width:22px;height:30px;margin-left:-11px;border-radius:50% 50% 45% 45%;border:2px solid #2e1f15;
  background:linear-gradient(180deg,#e2483a 0 50%,#fff6e6 50% 100%);animation:flotte 1.6s ease-in-out infinite;transition:transform .12s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.bouchon.touche{animation:none;transform:translateY(18px) scale(.85);box-shadow:0 0 0 8px rgba(255,255,255,.35),0 0 0 18px rgba(255,255,255,.15)}
.bouchon.prise{animation:none;transform:translateY(-34px) rotate(-12deg)}
.bouchon.rate{animation:none;opacity:.55}
@media (prefers-reduced-motion:reduce){.bouchon{animation:none}}
@media (orientation:landscape) and (max-height:500px){.etangjeu{height:80px}}
/* Barre des pièces discrète : visible 3 s au changement de pièce, au toucher, ou au survol (PC) */
#piece .navpieces{opacity:0;transition:opacity .4s}
#piece.navvue .navpieces,#piece .navpieces:hover,#piece .navpieces:focus-within{opacity:1}
/* Bouton du bas lié à la pièce affichée */
.acts .btn.ici{outline:1.5px solid var(--acc);outline-offset:1px}
#piece .navpieces{pointer-events:none}
#piece.navvue .navpieces{pointer-events:auto}
/* ---------- Stock en cases (façon jeu mobile) ---------- */
.invtabs{display:flex;gap:4px;overflow-x:auto;margin:2px 0 8px;padding-bottom:2px;scrollbar-width:none}
.invtabs::-webkit-scrollbar{display:none}
.invtab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:52px;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:3px 6px;font-size:17px;line-height:1.1;cursor:pointer;color:var(--ink)}
.invtab small{font-size:10px;font-weight:800}
.invtab.on{background:linear-gradient(180deg,#f0ad4e,var(--acc));color:var(--accink)}
.invtab:disabled{opacity:.4}
.inv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.islot{position:relative;aspect-ratio:1/1;border:2px solid var(--bois);border-radius:12px;background:radial-gradient(circle at 50% 40%,var(--card),var(--bg));display:grid;place-items:center;font-size:28px;padding:0;cursor:pointer;--fam:transparent;box-shadow:inset 0 -4px 0 var(--fam),0 2px 0 var(--line)}
.islot.vide{border-style:dashed;border-color:var(--line);background:transparent;box-shadow:none;cursor:default}
.islot.sel{border-color:var(--acc);box-shadow:inset 0 -4px 0 var(--fam),0 0 0 3px var(--acc)}
.islot .nb{position:absolute;right:3px;bottom:5px;font-size:11px;font-weight:800;background:var(--ink);color:var(--card);border-radius:8px;padding:0 4px;line-height:1.4}
.islot .usure{position:absolute;left:6px;right:6px;top:4px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}
.islot .usure i{display:block;height:100%;background:var(--ok)}.islot .usure i.mid{background:var(--acc)}.islot .usure i.lo{background:var(--bad)}
.invfiche{display:flex;gap:10px;align-items:center;border:2px solid var(--acc);border-radius:12px;padding:8px;margin:10px 0 6px;background:var(--bg)}
.invfiche .em{font-size:44px;line-height:1}
.invfiche small{display:block;color:var(--mut)}
.invequip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
.invequip .loc{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 4px;margin:0}
.invequip .loc .em{font-size:30px;line-height:1}
@media (min-width:560px){.inv{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}}
.invequip{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.invequip .loc{padding:4px 2px}
.invequip .loc .em{font-size:26px}
.invequip .loc b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.invequip .loc small{font-size:9.5px;line-height:1.15}
/* Cases du stock dessinées (Gemini) : cadre en bois clouté ; dorée quand elle est choisie */
.islot{border:0;border-radius:14%;background:url("images/case.webp") center/100% 100% no-repeat;box-shadow:0 2px 3px rgba(20,10,4,.3)}
.islot.sel{border:0;background-image:url("images/case-sel.webp");box-shadow:0 0 10px 2px rgba(240,190,80,.55)}
.islot.vide{border:0;background:url("images/case.webp") center/100% 100% no-repeat;opacity:.45;box-shadow:none}
.islot::after{content:"";position:absolute;left:32%;right:32%;bottom:10%;height:3px;border-radius:2px;background:var(--fam)}
.islot.vide::after{display:none}
.islot .nb{right:11%;bottom:13%}
.islot .usure{left:17%;right:17%;top:13%}
.islot .ico,.islot > svg{width:58%;height:58%}
/* ---------- Étagères en bois sous les cases (stock, refuge) ---------- */
.etageres{border:3px solid var(--bois);border-radius:12px;padding:6px 8px 2px;margin:2px 0 8px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 44px),linear-gradient(180deg,#4a3221,#3a2718)}
.rangee{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:4px 2px 12px}
.rangee::after{content:"";position:absolute;left:-8px;right:-8px;bottom:2px;height:9px;border-radius:2px;
  background:linear-gradient(180deg,#a8774c,#7a4e2d 60%,#5a3a22);box-shadow:0 3px 3px rgba(0,0,0,.45)}
.etageres .islot{z-index:1}
.etageres .islot.vide{opacity:.35}
.islot.terne{filter:saturate(.35) brightness(.85)}
.islot .pret{position:absolute;left:10%;bottom:11%;width:15px;height:15px;border-radius:50%;background:var(--ok);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:2px 0 6px;font-weight:800;font-size:14px}
.resume span{display:inline-flex;align-items:center;gap:3px}
.resume .lien{margin-left:auto;font-size:12px}
/* ---------- Choix du lieu : cartes illustrées ---------- */
.lieux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 8px}
.carte-lieu{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;border:2px solid var(--bois);border-radius:12px;background:var(--bg);overflow:hidden;cursor:pointer;box-shadow:0 2px 0 var(--line);color:var(--ink);font:inherit}
.carte-lieu:active{transform:translateY(1px)}
.carte-lieu.off{opacity:.55;filter:grayscale(.7)}
.carte-lieu.mission{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.cl-img{position:relative;display:block;aspect-ratio:16/8;background:var(--line);overflow:hidden}
.cl-img img{width:100%;height:100%;object-fit:cover;display:block}
.cl-ico{display:grid;place-items:center;height:100%;font-size:34px}
.cl-reste{position:absolute;right:4px;top:4px;background:rgba(29,20,14,.78);color:#fff6e6;font-size:11px;font-weight:800;border-radius:8px;padding:1px 6px}
.cl-mission{position:absolute;left:4px;top:4px;font-size:16px}
.cl-pourquoi{position:absolute;left:0;right:0;bottom:0;background:rgba(178,59,38,.85);color:#fff;font-size:10.5px;font-weight:800;text-align:center;padding:1px 2px}
.cl-nom{display:block;font-weight:800;font-size:13px;line-height:1.15;padding:4px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-infos{display:flex;justify-content:space-between;gap:4px;padding:1px 6px 0;font-size:11px;font-weight:700;color:var(--mut)}
.cl-infos .dg.ok{color:var(--ok)}.cl-infos .dg.moy{color:var(--acc)}.cl-infos .dg.ko{color:var(--bad)}
.cl-conds{display:flex;gap:3px;padding:2px 6px 5px;font-size:13px}
.cl-conds span{border-radius:6px;padding:0 3px;line-height:1.3}
.cl-conds .ok{background:color-mix(in srgb,var(--ok) 22%,transparent)}.cl-conds .moy{background:color-mix(in srgb,var(--acc) 25%,transparent)}.cl-conds .ko{background:color-mix(in srgb,var(--bad) 22%,transparent)}
.carte-lieu > :last-child{padding-bottom:5px}
@media (min-width:560px){.lieux{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---------- Fiche du membre et « Qui part ? » : cases d'équipement en cadre de bois ---------- */
.qpeq .slot,.slots.grands .slot{border:0;border-radius:14%;background:url("images/case.webp") center/100% 100% no-repeat;box-shadow:0 2px 3px rgba(20,10,4,.3)}
.qpeq .slot.dispo,.slots.grands .slot.dispo{border:0;background-image:url("images/case-sel.webp");box-shadow:0 0 8px 1px rgba(240,190,80,.5)}
.qpeq .slot .vide,.slots.grands .slot .vide{opacity:.35}
.qpeq .slot{width:40px;height:40px;flex:0 0 40px;font-size:20px}
.qpeq .slot .ico,.slots.grands .slot .ico{width:56%;height:56%}
.slots.grands{display:grid;grid-template-columns:repeat(3,minmax(0,86px));justify-content:center;gap:12px;margin:4px 0 10px}
.slots.grands .slot{aspect-ratio:1/1;height:auto;padding:0 0 10%;justify-content:center;font-size:30px;position:relative}
.slots.grands .slot small{position:absolute;left:0;right:0;bottom:-15px;font-size:10px;font-weight:800;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots.grands{margin-bottom:22px}
.jauge .bar{height:10px}
/* ---------- Combat : qui vient d'être touché ---------- */
.z.coup{animation:secousse .45s ease-out}
.z.coup .em{animation:flashBlanc .45s ease-out}
.cm.blesse{animation:flashRouge .6s ease-out}
@keyframes secousse{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-2deg)}40%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes flashBlanc{0%{filter:brightness(2.2)}100%{filter:none}}
@keyframes flashRouge{0%{background:color-mix(in srgb,var(--bad) 45%,var(--card))}100%{background:var(--card)}}
@media (prefers-reduced-motion:reduce){.z.coup,.z.coup .em,.cm.blesse{animation:none}}
@media (min-height:700px){.z .em{font-size:54px}}
/* ---------- Médaillon du personnage qui parle ---------- */
#locuteur{position:fixed;z-index:6;display:flex;align-items:flex-end;gap:6px;pointer-events:none}
#locuteur .loc-portrait{display:block;width:64px;height:64px;border-radius:14px;overflow:hidden;border:3px solid var(--bois);background:var(--card);box-shadow:0 3px 6px rgba(20,10,4,.45)}
#locuteur .loc-portrait img{width:100%;height:100%;object-fit:cover;display:block}
#locuteur .loc-portrait .portrait{width:100%;height:100%;display:block;font-size:inherit}
#locuteur .loc-portrait .portrait img{border:0;border-radius:0}
#locuteur .loc-portrait .loc-rex{object-fit:contain;background:var(--bg)}
#locuteur .loc-nom{margin-bottom:22px;background:var(--bois);color:#fff6e6;font-weight:800;font-size:13px;border-radius:10px;padding:2px 10px;box-shadow:0 2px 0 rgba(20,10,4,.35);white-space:nowrap}
.sheet.parle{padding-top:26px}
/* ---------- Ce qu'il faut : petites cases en bois avec compteur ---------- */
.ings2{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.ing2{display:flex;flex-direction:column;align-items:center;width:58px}
.ing2-case{display:grid;place-items:center;width:46px;height:46px;background:url("images/case.webp") center/100% 100% no-repeat;border-radius:14%;font-size:22px;box-shadow:0 2px 3px rgba(20,10,4,.3)}
.ing2-case .ico{width:58%;height:58%}
.ing2 b{margin-top:2px;font-size:13px;line-height:1;padding:1px 6px;border-radius:8px}
.ing2.ok b{background:var(--ok);color:#fff}
.ing2.ko b{background:var(--bad);color:#fff}
.ing2 small{font-size:10px;font-weight:700;color:var(--mut);text-align:center;line-height:1.1;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ing2.outil .ing2-case{background-image:url("images/case-sel.webp")}
/* Bouton de travail d'atelier : le verbe, puis qui travaille et ce que ça coûte */
.btn.travail{width:100%;margin-bottom:8px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}
.btn.travail .qui{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;opacity:.85}
.btn.travail .mini{font-size:20px;line-height:1}
.btn.travail:disabled span{font-size:14px}
/* ---------- Récits (nuit, fouille, combat) en petites cartes colorées ---------- */
.sheet ul.fil{list-style:none;padding:0;margin:6px 0 10px}
.sheet ul.fil li{background:var(--bg);border-left:4px solid var(--line);border-radius:8px;padding:5px 8px;margin:4px 0;font-size:14px;line-height:1.3;color:var(--ink)}
.sheet ul.fil li.g2{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--bg))}
.sheet ul.fil li.b2{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--bg))}
.sheet ul.fil li .ico{width:1.1em;height:1.1em;vertical-align:-.2em}
/* Combat : le journal dans une petite boîte qui défile */
.journal{max-height:150px;overflow-y:auto;border:2px solid var(--line);border-radius:10px;padding:2px 6px;margin:6px 0 8px;background:var(--card)}
.journal ul.fil{margin:2px 0}
.journal ul.fil li{font-size:13px;padding:3px 7px;margin:3px 0}
@media (max-height:640px){.journal{max-height:110px}}
/* Résultat d'une fouille : le butin sur une étagère */
.titre-butin{font-weight:800;margin:6px 0 2px}
.islot.fixe{pointer-events:none}
.butin-noms{margin:-2px 0 8px}
.laisses{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0 2px}
.laisses .sub{width:100%;margin:0}
.mini-case{position:relative;display:grid;place-items:center;width:34px;height:34px;background:url("images/case.webp") center/100% 100% no-repeat;font-size:17px;opacity:.6;filter:grayscale(.5)}
.mini-case .ico{width:58%;height:58%}
.mini-case b{position:absolute;right:2px;bottom:1px;font-size:9px;background:var(--ink);color:var(--card);border-radius:6px;padding:0 3px}
/* ---------- Journal façon jeu : médaillon d'icône + texte ---------- */
.sheet .fil{margin:6px 0 10px;display:flex;flex-direction:column;gap:5px}
.lj{display:flex;align-items:center;gap:8px}
.lj-ico{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;line-height:1;background:radial-gradient(circle at 50% 35%,var(--card),var(--bg));border:2.5px solid var(--bois);box-shadow:0 2px 0 rgba(20,10,4,.25)}
.lj-ico .ico{width:20px;height:20px}
.lj-ico .portrait{font-size:22px}
.lj.g2 .lj-ico{border-color:var(--ok)}
.lj.b2 .lj-ico{border-color:var(--bad);background:radial-gradient(circle at 50% 35%,var(--card),color-mix(in srgb,var(--bad) 18%,var(--bg)))}
.lj-txt{flex:1;min-width:0;font-size:14px;line-height:1.3;font-weight:600;color:var(--ink)}
.lj.b2 .lj-txt{color:color-mix(in srgb,var(--bad) 70%,var(--ink))}
.journal .lj-ico{flex-basis:24px;width:24px;height:24px;font-size:13px;border-width:2px}
.journal .lj-txt{font-size:13px}
.journal .fil{gap:4px;margin:4px 0}
/* Équipement presque cassé : liseré rouge et petit « ! » */
.slot.use{box-shadow:0 0 0 2px var(--bad) !important}
.slot.use::before{content:"!";position:absolute;left:-5px;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--bad);color:#fff;font-size:10px;font-weight:800;line-height:14px;text-align:center;z-index:1}
body.fond .scene .mc .porte span.use{border-color:var(--bad);box-shadow:0 0 0 1.5px var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--bg))}
/* ---------- Fenêtres des pastilles du haut ---------- */
.infotete{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.it-ico{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:radial-gradient(circle at 50% 35%,var(--card),var(--bg));border:3px solid var(--bois);box-shadow:0 3px 0 rgba(20,10,4,.3)}
.it-ico .ico{width:36px;height:36px}
.it-txt small{display:block;font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.it-txt b{display:block;font-family:"Bangers","Impact",sans-serif;font-size:34px;line-height:1;letter-spacing:.03em;color:var(--ink)}
.infotete.ok .it-ico{border-color:var(--ok)}.infotete.ko .it-ico{border-color:var(--bad)}.infotete.ko .it-txt b{color:var(--bad)}
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.tuile{border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 4px;text-align:center;box-shadow:0 2px 0 var(--line)}
.tuile b{display:block;font-size:18px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tuile small{display:block;font-size:10.5px;font-weight:700;color:var(--mut);line-height:1.15}
.tuile.ok b{color:var(--ok)}.tuile.moy b{color:var(--acc)}.tuile.ko b{color:var(--bad)}
.jmoral{position:relative;display:flex;height:14px;border-radius:8px;overflow:visible;border:2px solid var(--bois);margin:2px 0 3px}
.jmoral span{display:block;height:100%}
.jmoral .z-bas{background:color-mix(in srgb,var(--bad) 60%,var(--bg));border-radius:6px 0 0 6px}.jmoral .z-mid{background:color-mix(in srgb,var(--line) 70%,var(--bg))}.jmoral .z-haut{background:color-mix(in srgb,var(--ok) 60%,var(--bg));border-radius:0 6px 6px 0}
.jmoral i{position:absolute;top:-6px;width:6px;height:22px;margin-left:-3px;border-radius:3px;background:var(--ink);box-shadow:0 0 0 2px var(--card)}
.jmoral-leg{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--mut);margin-bottom:8px}
/* ---------- Combat : scène illustrée, bulles d'intention, actions ---------- */
.ctitre small{font-size:13px;color:var(--mut);font-weight:700}
.combat{display:flex;flex-direction:column;gap:6px}
.cgauche,.cdroite{display:flex;flex-direction:column;gap:6px;min-width:0}
.arene{position:relative;border:3px solid var(--bois);border-radius:14px;background-size:cover;background-position:center 60%;aspect-ratio:16/8.4;min-height:150px;overflow:hidden;box-shadow:inset 0 -40px 40px -10px rgba(10,6,3,.55)}
.zrang{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;align-items:flex-end;gap:4px;padding:0 4px}
.zc{position:relative;flex:0 1 84px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:24px 0 0;cursor:pointer;color:#fff6e6;font:inherit}
.zc .zp{display:block;width:100%;max-width:76px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:3px solid #2a1d14;box-shadow:0 4px 8px rgba(0,0,0,.5);background:#3a2e26}
.zc .zp .portrait,.zc .zp img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.zc .zn{font-size:11px;font-weight:800;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.zc .zpv{display:block;width:90%;height:6px;border-radius:4px;background:rgba(0,0,0,.6);overflow:hidden;border:1px solid #000}
.zc .zpv i{display:block;height:100%;background:#d6452b}
.zc.vise .zp{border-color:#ffcf4a;box-shadow:0 0 0 3px #ffcf4a,0 0 14px #ffcf4a}
.zc.mort{opacity:.45}.zc.mort .zp img{filter:grayscale(1) brightness(.6)}
.zc.mort .zp::after{content:"✖";position:absolute}
.zint{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff6e6;color:#2a1d14;font-size:10.5px;font-weight:800;border-radius:9px;padding:1px 6px;border:2px solid #2a1d14;line-height:1.25;z-index:1}
.zint small{font-size:9.5px;color:#b23b26;margin-left:3px}
.zint::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-4px;border:4px solid transparent;border-top-color:#2a1d14}
.zint.hurle{background:#ffcf4a;animation:pulseBulle 1s ease-in-out infinite}
@keyframes pulseBulle{50%{transform:translateX(-50%) scale(1.08)}}
.zrang.n4 .zc,.zrang.n5 .zc,.zrang.n6 .zc{flex-basis:64px}
.zrang.n5 .zint small,.zrang.n6 .zint small{display:none}
.zinfo{margin:0;font-size:11.5px;color:var(--mut);line-height:1.3}
.zinfo b{color:var(--ink)}
.flot{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-family:"Bangers","Impact",sans-serif;font-size:26px;color:#ff4a2a;text-shadow:0 2px 0 #000,0 0 6px #000;pointer-events:none;animation:flot 1s ease-out forwards;z-index:2}
@keyframes flot{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.2)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}
.cmc{position:relative;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:5px 6px}
.cmh{display:flex;gap:8px;align-items:center}
.cmp{flex:0 0 40px;width:40px;height:40px;font-size:30px;line-height:40px;text-align:center}
.cmp .portrait{width:40px;height:40px}
.cmi{flex:1;min-width:0}.cmi b{font-size:14px}
.cmi small{display:block;color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmc .flot{left:30px;top:2px}
.cmc.blesse{animation:flashRouge .6s ease-out}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:4px;margin-top:5px}
.act{display:flex;flex-direction:column;align-items:center;gap:0;border:2px solid var(--line);border-radius:10px;background:var(--card);padding:3px 1px;cursor:pointer;color:var(--ink);font:inherit;min-height:40px}
.act span{font-size:17px;line-height:1.1}
.act small{font-size:9.5px;font-weight:800;white-space:nowrap;color:var(--mut)}
.act.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 25%,var(--card));box-shadow:0 0 0 1px var(--acc)}
.act.on small{color:var(--ink)}
.combat .journal{margin:0;max-height:96px}
.sheet.secoue{animation:secoueFeuille .45s ease-out}
@keyframes secoueFeuille{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.flot,.zint.hurle{animation:none}.flot{opacity:0}}
@media (max-height:700px){.arene{min-height:130px}.combat .journal{max-height:72px}}
@media (orientation:landscape) and (max-height:500px){
  .combat{flex-direction:row;align-items:flex-start}
  .cgauche{flex:1.15}.cdroite{flex:1}
  .arene{aspect-ratio:auto;height:150px;min-height:0}
  .combat .journal{max-height:62px}
  .zinfo{display:none}
}
@media (min-width:900px){.combat:not(.fini){flex-direction:row;align-items:flex-start}.combat .cgauche{flex:1.3}.combat .cdroite{flex:1}}
.combat .row{gap:6px}
.combat .row .btn{padding-left:8px;padding-right:8px;min-width:0;white-space:nowrap}
.combat .row .btn:first-child{flex:1 1 auto}
.sheet.large{max-width:min(780px,100%)}
/* ---------- Fin de combat : tampon, zombies à terre, bilan ---------- */
.zc.mort{opacity:1}
.zc.mort .zp{transform:rotate(-78deg) translate(-18%,10%);filter:grayscale(.85) brightness(.55) sepia(.4) hue-rotate(-30deg);border-color:#5a1a10;box-shadow:none;transition:transform .5s ease-in}
.zc.mort .zp::after{content:none}
.zc.mort::before{content:"";position:absolute;left:8%;right:8%;bottom:12px;height:16px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(120,10,6,.85),rgba(120,10,6,0) 70%)}
.zc.mort .zn,.zc.mort .zpv{opacity:.55}
.tampon{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-8deg);font-family:"Bangers","Impact",sans-serif;font-size:44px;letter-spacing:.06em;white-space:nowrap;padding:0 14px;border:4px solid currentColor;border-radius:10px;background:rgba(20,12,6,.55);text-shadow:0 3px 0 #000;animation:tampon .5s cubic-bezier(.2,1.6,.4,1) both;z-index:3}
.tampon.victoire{color:#ffcf4a}.tampon.fuite{color:#f0a24a}.tampon.defaite{color:#e0533a}
@keyframes tampon{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.combat.fini .tuiles{margin:0}
.bilan-m{display:flex;gap:8px;align-items:center;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:4px 6px}
.bilan-m.mort{opacity:.7;filter:grayscale(.8)}
.combat.fini{flex-direction:column}
@media (orientation:landscape) and (max-height:500px){.combat.fini{flex-direction:row}.tampon{font-size:34px}}
@media (min-width:900px){.combat.fini{flex-direction:row;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.tampon{animation:none}.zc.mort .zp{transition:none}}
/* ---------- Accueil : « En ce moment » (chiffres du monde) ---------- */
.monde{width:100%;max-width:420px;margin:10px auto 0;background:rgba(29,20,14,.82);color:#fff6e6;border:3px solid var(--bois);border-radius:16px;padding:8px 10px 6px;box-shadow:0 6px 14px rgba(0,0,0,.45);text-align:left}
.m-tete{display:flex;align-items:center;gap:7px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.m-tete small{margin-left:auto;text-transform:none;letter-spacing:0;color:#d9c7a8;font-size:11.5px}
.pouls{width:10px;height:10px;border-radius:50%;background:#e0533a;box-shadow:0 0 0 0 rgba(224,83,58,.7);animation:pouls 1.6s ease-out infinite}
.monde.horsligne .pouls{background:#9a8a74;animation:none}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(224,83,58,.7)}70%{box-shadow:0 0 0 9px rgba(224,83,58,0)}100%{box-shadow:0 0 0 0 rgba(224,83,58,0)}}
.m-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 4px}
.m-c{text-align:center;border-radius:10px;background:rgba(255,246,230,.07);padding:4px 2px}
.m-c b{display:block;font-family:"Bangers","Impact",sans-serif;font-size:28px;line-height:1.05;letter-spacing:.03em}
.m-c small{display:block;font-size:10.5px;font-weight:700;color:#d9c7a8;line-height:1.15}
.m-c.vie b{color:#8fd16a}.m-c.mort b{color:#ff7a5c}.m-c.zomb b{color:#ffcf4a}
.m-fil{margin:0;min-height:2.6em;font-size:12px;line-height:1.3;color:#f3e6cf;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.m-fil.on{opacity:1;transform:none}
.m-fil b{color:#ffcf4a}
.monde.compact{margin:6px 0 2px;padding:6px 8px 4px}
.monde.compact .m-c b{font-size:22px}
.monde.compact .m-fil{min-height:2.6em;font-size:11.5px}
@media (max-height:640px){.monde.compact .m-fil{display:none}.monde.compact .m-c small{font-size:9.5px}}
@media (orientation:landscape) and (max-height:500px){.monde{margin-top:4px;padding:5px 8px 3px}.m-c b{font-size:20px}.m-fil{min-height:1.3em}}
@media (prefers-reduced-motion:reduce){.pouls{animation:none}.m-fil{transition:none}}
.sheet .monde{margin:4px 0 10px;max-width:none}
@media (orientation:landscape) and (max-height:500px){.sheet .monde .m-fil{display:none}.sheet .monde{margin:2px 0 6px}}
@media (max-height:700px) and (orientation:portrait){.accueil .logo.grand{width:min(34vw,120px)}body.fond .accueil h1{font-size:44px}}
@media (orientation:landscape) and (max-height:500px){.sheet .monde .m-tete{display:none}.sheet .monde{padding:3px 6px}.sheet .monde .m-grille{margin:0}.sheet .monde .m-c{padding:2px}.sheet .monde .m-c b{font-size:18px}}
/* ---------- Mes stats ---------- */
.tuiles.stats{margin:6px 0 8px}
.tuile.st{padding:5px 3px 6px}
.tuile.st .st-ico{display:block;font-size:20px;line-height:1.1;height:24px}
.tuile.st .st-ico .portrait{width:24px;height:24px;display:inline-block;vertical-align:middle}
.tuile.st b{font-family:"Bangers","Impact",sans-serif;font-size:26px;letter-spacing:.03em;line-height:1.05}
.tuile.st small{font-size:10.5px}
.st-morts{margin:0 0 8px}
@media (max-height:640px){.tuile.st b{font-size:22px}.tuile.st .st-ico{font-size:16px;height:18px}.tuile.st .st-ico .portrait{width:18px;height:18px}}
@media (orientation:landscape) and (max-height:500px){.tuiles.stats{grid-template-columns:repeat(5,minmax(0,1fr))}.tuile.st b{font-size:20px}.tuile.st .st-ico{display:none}}
/* ---------- Étiquettes des scènes : discrètes, sans cadre (retour de Fabien : trop voyantes) ---------- */
#piece .etiq{background:radial-gradient(ellipse at center,rgba(18,10,4,.5) 0%,rgba(18,10,4,.25) 45%,rgba(18,10,4,0) 72%);border:0;border-radius:0;padding:6px 16px;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:rgba(255,243,222,.92);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7);transition:opacity .9s ease}
#piece .etiq .ico,#piece .etiq svg,#piece .etiq img{opacity:.85;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
#piece .zone:hover,#piece .zone:focus-visible{border-color:transparent;background:radial-gradient(ellipse at center,rgba(255,214,138,.16),rgba(255,214,138,0) 70%)}
#piece .zone:active .etiq{background:radial-gradient(ellipse at center,rgba(18,10,4,.55),rgba(18,10,4,0) 72%);color:#ffd68a}
#piece .zone.invite .etiq{background:radial-gradient(ellipse at center,rgba(18,10,4,.5),rgba(18,10,4,0) 72%);color:#ffd68a;border:0;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(255,190,90,.75)}
@media (prefers-reduced-motion:no-preference){#piece .zone.invite .etiq{animation:lueurDouce 2.4s ease-in-out infinite}}
@keyframes lueurDouce{0%,100%{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(255,190,90,.35)}50%{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 16px rgba(255,190,90,.95)}}
#piece.compact .etiq{padding:6px 10px}
/* ---------- Le choix impossible ---------- */
.loc.sombre{background:#2a1a14;color:#f3e6cf;border-color:#5a1a10}
.loc.sombre small{color:#d9c7a8}
.sacrifice h2{color:var(--bad)}
.sacr-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin:8px 0 10px}
.sacr-m{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 2px;cursor:pointer;color:var(--ink);font:inherit}
.sacr-m:hover,.sacr-m:focus-visible{border-color:var(--bad)}
.sacr-m .cmp{width:44px;height:44px;font-size:32px;line-height:44px}
.sacr-m .cmp .portrait{width:44px;height:44px}
.sacr-m small{font-size:10.5px;color:var(--mut)}
.jauge.folie{flex-wrap:wrap}.jauge.folie small{color:var(--bad);white-space:normal;flex:1 1 100%;min-width:0}
/* ---------- Rencontres en chemin ---------- */
.rencontre .r-lieu{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:800}
.rencontre h2{margin-top:2px}
.r-texte{font-style:italic;border-left:4px solid var(--bois);padding:4px 0 4px 10px;margin:6px 0 10px;background:color-mix(in srgb,var(--bois) 10%,transparent);border-radius:0 8px 8px 0}
.r-res{margin:4px 0 6px;font-weight:600}
.r-res.ok{color:var(--ok)}.r-res.ko{color:var(--bad)}
.r-choix small{color:var(--mut)}
/* ---------- Parrainage ---------- */
.moncode{text-align:center;border:3px dashed var(--bois);border-radius:14px;padding:6px;margin:8px 0;background:var(--bg)}
.moncode small{display:block;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--mut)}
.moncode b{font-family:"Bangers","Impact",sans-serif;font-size:40px;letter-spacing:.12em}
.lien-code{display:block;width:100%;background:none;border:0;color:var(--acc);font:inherit;font-weight:700;font-size:13px;text-decoration:underline;margin:6px 0 0;cursor:pointer}
.caisses{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 4px;min-height:150px;background:linear-gradient(#8aa6b8,#d9c7a8 70%,#8a6a48 70%);border:3px solid var(--bois);border-radius:14px;overflow:hidden}
.caisse{position:relative;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 10px;font:inherit;animation:tombe 1.6s ease-out both}
.caisse.c1{animation-delay:.25s}.caisse.c2{animation-delay:.5s}
.caisse .para{font-size:34px;line-height:1;animation:balance 1.8s ease-in-out infinite}
.caisse .boite{font-size:44px;line-height:1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
.caisse:hover .boite,.caisse:focus-visible .boite{transform:scale(1.12)}
.caisse.perdue{opacity:.25;transition:opacity .4s}
.caisse.ouverte .boite{animation:ouvre .6s ease-out forwards}
@keyframes tombe{0%{transform:translateY(-140px)}100%{transform:translateY(0)}}
@keyframes balance{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes ouvre{0%{transform:scale(1)}50%{transform:scale(1.4) rotate(-8deg)}100%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.caisse,.caisse .para,.caisse.ouverte .boite{animation:none}}
@media (orientation:landscape) and (max-height:500px){ .menugrille{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:4px 0 6px} .menugrille .mt{padding:5px 7px} .menugrille .mt b{font-size:13px} }
/* ---------- Vitrine des fonctionnalités (accueil et histoire) ---------- */
.vitrine{position:relative;width:100%;max-width:440px;margin:8px auto 4px;background:rgba(29,20,14,.86);border:3px solid var(--bois);border-radius:16px;padding:8px 8px 4px;box-shadow:0 6px 14px rgba(0,0,0,.4);color:#fff6e6;text-align:left}
.vt{display:none;gap:10px;align-items:center;min-height:74px;animation:vtEntre .5s ease-out}
.vt.on{display:flex}
.vt-img{flex:0 0 92px;width:92px;height:70px;border-radius:10px;overflow:hidden;border:2px solid #5a3a22;background:#3a2a1e}
.vt-img img{width:100%;height:100%;object-fit:cover;display:block}
.vt-txt b{display:block;font-size:14.5px;line-height:1.2;color:#ffcf4a}
.vt-txt small{display:block;font-size:12px;line-height:1.3;color:#f3e6cf;margin-top:2px}
.vt-points{display:flex;justify-content:center;gap:5px;margin-top:5px}
.vt-pt{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(255,246,230,.3);cursor:pointer}
.vt-pt.on{background:#ffcf4a;width:18px;border-radius:5px}
@keyframes vtEntre{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.intro .vitrine{margin:6px 0 2px;max-width:none}
@media (max-height:700px){.vt{min-height:60px}.vt-img{flex-basis:76px;width:76px;height:58px}.vt-txt small{font-size:11.5px}}
@media (max-height:640px){.intro .vt-txt small{display:none}.intro .vt{min-height:46px}.intro .vt-img{height:44px;flex-basis:64px;width:64px}}
@media (orientation:landscape) and (max-height:500px){.accueil .vitrine{display:none}.intro .vt-txt small{display:none}.intro .vt{min-height:40px}.intro .vt-img{height:38px;flex-basis:56px;width:56px}}
@media (prefers-reduced-motion:reduce){.vt{animation:none}}
/* Accueil avec vitrine : contenu calé en haut pour rester au-dessus de la fenêtre « Partie en cours » */
.accueil:has(.vitrine){justify-content:flex-start;padding-top:12px}
.accueil:has(.vitrine) .logo.grand{width:min(30vw,130px)}
@media (max-height:820px){.accueil:has(.vitrine) .logo.grand{display:none}}
/* Vitrine : flèches et glisser au doigt */
.vitrine{touch-action:pan-y;user-select:none;-webkit-user-select:none;padding-left:26px;padding-right:26px}
.vt-fl{position:absolute;top:calc(50% - 22px);width:24px;height:36px;padding:0;border:0;border-radius:8px;background:rgba(255,246,230,.12);color:#ffcf4a;font-size:24px;line-height:32px;font-weight:800;cursor:pointer}
.vt-fl:hover,.vt-fl:focus-visible{background:rgba(255,246,230,.25)}
.vt-fl.g{left:3px}.vt-fl.d{right:3px}
/* Accueil : le voile de la fenêtre « Partie en cours » laisse passer les doigts vers la vitrine */
body.accueil-ouvert #modal{pointer-events:none}
body.accueil-ouvert #modal .sheet{pointer-events:auto}
/* ---------- Clans ---------- */
.blason{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#5a3a22,#2a1a10);border:2px solid var(--bois);font-size:24px}
.clan-tete{display:flex;gap:10px;align-items:center;margin:4px 0 8px}
.clan-tete b{display:block;font-size:18px}.clan-tete small{color:var(--mut)}
.clan-membres,.clan-liste{display:flex;flex-direction:column;gap:5px;margin:0 0 8px}
.clan-m,.clan-l{display:flex;gap:8px;align-items:center;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:5px 8px}
.clan-m{flex-wrap:wrap}.clan-m .cm-nom{font-weight:700;flex:1}.clan-m small{color:var(--mut);font-size:11.5px}
.clan-m.moi{border-color:var(--acc)}
.clan-l .cl-info{flex:1;min-width:0}.clan-l .cl-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clan-l small{color:var(--mut);font-size:11.5px}
.blasons{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.blasons .bl{font-size:22px;padding:4px 0;border:2px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}
.blasons .bl.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
button.confirme{background:var(--bad);color:#fff;border-color:var(--bad)}
/* Blasons peints */
.blason{background:none;border:0;border-radius:0;flex-basis:44px}
.blason img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.blasons .bl{padding:3px;line-height:0}
.blasons .bl img{width:100%;max-width:44px;aspect-ratio:1;object-fit:contain}
.clan-tete .blason{flex-basis:56px;width:56px;height:56px}
/* ---------- Bastion ---------- */
.bast-def{border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 8px;margin-bottom:8px}
.bast-def .invfiche{margin:0 0 4px}
/* ---------- Guerres de clans ---------- */
.gu-tete{display:flex;align-items:center;justify-content:space-between;gap:6px;border:3px solid var(--bois);border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 18%,var(--bg)),var(--bg) 45%,var(--bg) 55%,color-mix(in srgb,var(--bad) 18%,var(--bg)));padding:6px 8px;margin:4px 0 6px}
.gu-camp{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;text-align:center}
.gu-camp b{font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gu-et{font-family:"Bangers","Impact",sans-serif;font-size:24px;color:var(--acc)}
.gu-vs{font-family:"Bangers","Impact",sans-serif;font-size:26px;color:var(--bad)}
.carte-guerre{margin-bottom:8px}
.gu-etoiles{font-size:40px;text-align:center;color:#e8a92a;letter-spacing:.1em;margin:0 0 6px}
/* ---------- Cadres d'avatar (pseudo encadré) ---------- */
.pcadre{display:inline-block;padding:0 7px;border-radius:9px;border:2px solid #8a5a34;background:color-mix(in srgb,#8a5a34 12%,transparent);line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.pcadre.cadre-bronze{border-color:#b8733b;background:linear-gradient(90deg,rgba(184,115,59,.18),rgba(232,170,110,.25))}
.pcadre.cadre-argent{border-color:#9fb0bb;background:linear-gradient(90deg,rgba(159,176,187,.2),rgba(230,238,242,.35));box-shadow:0 0 0 1px rgba(255,255,255,.4) inset}
.pcadre.cadre-or{border-color:#e0a929;background:linear-gradient(90deg,rgba(224,169,41,.22),rgba(255,224,130,.35));box-shadow:0 0 6px rgba(224,169,41,.55)}
.pcadre.cadre-legende{border-color:#c23bd6;background:linear-gradient(90deg,rgba(194,59,214,.22),rgba(255,170,60,.3));box-shadow:0 0 8px rgba(194,59,214,.6);animation:legende 3s ease-in-out infinite}
@keyframes legende{50%{box-shadow:0 0 12px rgba(255,170,60,.8)}}
.cadres{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;margin:6px 0 8px}
.cadre-choix{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);border-radius:12px;background:var(--bg);padding:6px 3px;cursor:pointer;color:var(--ink);font:inherit}
.cadre-choix.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.cadre-choix:disabled{opacity:.5;cursor:default}
.cadre-choix small{font-size:10px;color:var(--mut);text-align:center}
.cadre-ex{display:block;width:46px;height:46px;border-radius:12px;overflow:hidden;font-size:34px;line-height:46px;text-align:center;border:3px solid #8a5a34}
.cadre-ex .portrait{width:100%;height:100%;display:block}
.cadre-ex.cadre-bronze{border-color:#b8733b}.cadre-ex.cadre-argent{border-color:#c9d4da;box-shadow:0 0 4px #fff}.cadre-ex.cadre-or{border-color:#e0a929;box-shadow:0 0 8px rgba(224,169,41,.7)}.cadre-ex.cadre-legende{border-color:#c23bd6;box-shadow:0 0 10px rgba(194,59,214,.8)}
.classement.clans li{display:flex;align-items:center;gap:6px}
.classement.clans .blason{flex-basis:30px;width:30px;height:30px}
@media (prefers-reduced-motion:reduce){.pcadre.cadre-legende{animation:none}}
/* =====================================================================
   GRAND ÉCRAN (PC, body.pc : 1100 px de large et 620 de haut au moins, pendant une partie)
   Famille à gauche, pièce au centre, panneau à droite (tableau de bord ou fenêtre ouverte)
   ===================================================================== */
body.pc #app{max-width:none;width:calc(min(100vw, 1500px) - 464px);margin:0 0 0 calc((100vw - min(100vw, 1500px)) / 2);padding:12px 18px 12px 12px;box-sizing:border-box}
body.pc .scene .grid2{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body.pc .scene > .row.acts .btn{font-size:16px;padding:11px 14px}
/* Panneau de droite : tableau de bord */
#tableauPC{position:fixed;top:12px;right:12px;bottom:12px;width:440px;z-index:3;overflow:auto;background:var(--card);border:3px solid var(--bois);border-radius:16px;padding:12px 14px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
#tableauPC h2{margin:0 0 6px}
#tableauPC .tb-bloc{border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 10px;margin-bottom:8px}
#tableauPC .tb-bloc b{display:block}#tableauPC .tb-bloc small{color:var(--mut)}
#tableauPC .tb-aide{margin-top:10px}
/* Les fenêtres s'ouvrent dans le panneau de droite (sans voile sur la pièce) */
body.pc #modal{inset:12px 12px 12px auto;width:440px;background:none;align-items:stretch;justify-content:stretch;padding:0}
body.pc #modal .sheet{max-width:none;width:100%;height:100%;max-height:none;border-radius:16px;border:3px solid var(--bois);box-shadow:0 8px 20px rgba(0,0,0,.45)}
/* Le combat garde sa grande fenêtre au milieu de l'écran */
/* Sur PC, le combat se joue DANS la scène (2026-11-10, retour de Fabien) : la fenêtre recouvre exactement la boîte de la pièce */
body.pc.scene-petite #modal:has(.sheet.large){inset:0;width:auto;height:auto;left:0;top:0;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:20px}
body.pc.scene-petite #modal .sheet.large{height:auto;max-height:100%;max-width:min(1000px,96vw);border-radius:18px}
body.pc:not(.scene-petite) #modal:has(.sheet.large){inset:auto;left:var(--scene-x,20px);top:var(--scene-y,60px);width:var(--scene-w,1000px);height:var(--scene-h,680px);right:auto;bottom:auto;background:none;align-items:stretch;justify-content:stretch;padding:0}
body.pc:not(.scene-petite) #modal .sheet.large{width:100%;height:100%;max-height:none;max-width:none;border-radius:12px;box-sizing:border-box;border:3px solid var(--bois);box-shadow:inset 0 0 30px rgba(0,0,0,.35)}
#tableauPC{overflow-x:hidden}
#tableauPC .lj,#tableauPC .lj-txt{min-width:0;white-space:normal;overflow-wrap:anywhere}
/* Grand écran « boxed » (2026-11-10) : la scène est une boîte encadrée, le jeu reste dans un cadre de 1500 px centré */
body.pc{background:#0f1520}
/* Fond illustré autour du cadre du jeu sur PC (Gemini, 2026-11-10) : assombri et un peu flouté pour rester discret */
body.pc::before{content:"";position:fixed;inset:-12px;z-index:-1;pointer-events:none;background:url(images/fond-pc.webp) center 40% / cover no-repeat;filter:blur(2px) brightness(.62) saturate(.9)}
body.pc::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%, rgba(10,8,6,.55) 0%, rgba(10,8,6,.15) 60%, rgba(10,8,6,.35) 100%)}
#fondScene{position:fixed;z-index:0;border-radius:14px;background-repeat:no-repeat;box-shadow:0 0 0 3px var(--bois),0 10px 26px rgba(0,0,0,.55);pointer-events:none}
body.pc #fondScene::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 40px rgba(0,0,0,.45)}
body.pc #tableauPC{right:calc((100vw - min(100vw, 1500px)) / 2 + 12px)}
body.pc #modal:not(:has(.sheet.large)){right:calc((100vw - min(100vw, 1500px)) / 2 + 12px)}
/* PC : grandes flèches sur les côtés de la scène, barre des pièces toujours visible */
#piece .flpc{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:84px;padding:0;border:2px solid rgba(255,246,230,.45);border-radius:14px;background:rgba(29,20,14,.55);color:#ffcf4a;font-size:42px;line-height:76px;font-weight:800;cursor:pointer;pointer-events:auto;z-index:3;transition:background .2s,transform .2s}
#piece .flpc:hover,#piece .flpc:focus-visible{background:rgba(29,20,14,.85);transform:translateY(-50%) scale(1.06);outline:none}
#piece .flpc.g{left:10px}#piece .flpc.d{right:10px}
body.pc #piece .navpieces{opacity:1;pointer-events:auto}
/* Ligues de guerre */
.ligue{display:inline-block;font-size:11px;font-weight:800;border-radius:9px;padding:0 6px;border:1.5px solid currentColor;white-space:nowrap;line-height:1.5}
.ligue.l0{color:#8a6a55}.ligue.l1{color:#b8733b}.ligue.l2{color:#7f939f}.ligue.l3{color:#c9921b}.ligue.l4{color:#a63bc0}
.clan-tete .ligue{margin-top:3px}
.gu-camp .ligue{margin:1px 0}

/* Camion du clan (onglet du bastion) */
.camion-img{ display:block; width:100%; max-height:22vh; object-fit:contain; margin:4px auto 2px; }

/* Insigne de ligue (pastilles des clans) */
.ligue-ins{ height:1.7em; width:auto; vertical-align:middle; margin:-.35em .2em -.3em -.1em; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* Nom d'un membre du clan : touchable, ouvre son profil */
button.cm-nom{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:inline-flex;align-items:center;gap:3px;max-width:100%}
button.cm-nom .cm-voir{color:var(--mut);font-weight:800}

/* Description et fiche d'un clan */
.clan-desc{margin:6px 0 8px;font-style:italic;color:var(--ink);overflow-wrap:anywhere}
.clan-desc i{color:var(--mut)}
.clan-desc .mini{font-style:normal;margin-left:4px}
button.cl-ouvrir{display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.cl-ouvrir .cm-voir{color:var(--mut);font-weight:800}
textarea.desc-clan{width:100%;box-sizing:border-box;font:inherit;padding:8px;border:2px solid var(--bois);border-radius:10px;background:var(--bg);color:var(--ink);resize:vertical}

/* En-tête sur PC (2026-11-10, retour de Fabien : petit et serré à gauche) : les pastilles s'étalent sur toute la largeur de la scène, en grand, avec leur nom */
.chip-lbl{display:none}
body.pc #app > .row:first-child{align-items:center;gap:18px;margin-bottom:6px}
body.pc #app .titre h1{font-size:34px;line-height:1}
body.pc #app .chapcourt{font-size:13px;max-width:220px}
body.pc #app .chips{flex:1;display:grid;grid-auto-flow:column;grid-template-columns:repeat(5, minmax(0, 1fr));grid-auto-columns:auto;gap:10px}
body.pc #app .chip{font-size:20px;padding:5px 14px;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;cursor:pointer;transition:transform .12s}
body.pc #app .chip:hover{transform:translateY(-1px);border-color:var(--acc)}
body.pc #app .chip .ico{width:1.35em;height:1.35em}
body.pc #app .chip-lbl{display:inline;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:1500px){ body.pc #app .chip{font-size:18px;padding:5px 9px;gap:5px} body.pc #app .chips{gap:7px} body.pc #app .chip-lbl{font-size:11px;letter-spacing:0} }

ol.classement .rang .ico{width:1.55em;height:1.55em;vertical-align:-.4em}

/* En-tête PC : logo à gauche, score à droite (2026-11-10) */
.hd-logo,.hd-score{display:none}
body.pc #app .hd-logo{display:block;width:58px;height:58px;flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
body.pc #app .hd-score{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex:0 0 auto;padding:4px 14px;border:2px solid var(--bois);border-radius:14px;background:var(--card);min-height:42px;box-sizing:border-box}
body.pc #app .hd-score b{font-family:"Bangers","Impact",sans-serif;font-size:24px;line-height:1;color:#c9921b;letter-spacing:.03em}
body.pc #app .hd-score small{font-size:11px;color:var(--mut);font-weight:700;white-space:nowrap}
@media (max-width:1500px){ body.pc #app .hd-logo{width:48px;height:48px} body.pc #app .hd-score{padding:3px 10px} body.pc #app .hd-score b{font-size:20px} }

/* Ligne du classement des clans touchable */
button.cl-ligne{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.cl-ligne b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.cl-ligne .cm-voir{color:var(--mut)}

/* Écran d'histoire sur PC (2026-11-10, retour de Fabien : mise en page mobile) : deux colonnes, récit à gauche, vitrine et chiffres à droite */
@media (min-width:1100px) and (min-height:620px){
  #app:has(> .panneau.intro){max-width:none}
  .panneau.intro{max-width:1240px;width:min(92vw,1240px);padding:30px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"tete cote" "recit cote" "bouton cote";column-gap:36px;row-gap:16px;align-items:start;border-width:4px;border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
  .panneau.intro .tetejeu{grid-area:tete;justify-content:flex-start;gap:18px;margin:0}
  .panneau.intro .tetejeu .logo{width:128px;height:128px}
  .panneau.intro .titrejeu{font-size:76px}
  .panneau.intro .tetejeu .sub{font-size:20px;font-weight:700}
  .panneau.intro .intro-recit{grid-area:recit}
  .panneau.intro .intro-recit p{font-size:17.5px;line-height:1.6;margin:0 0 12px}
  .panneau.intro > .btn{grid-area:bouton;align-self:end;font-size:20px;padding:15px 18px;border-radius:14px}
  .panneau.intro .intro-cote{grid-area:cote;display:flex;flex-direction:column;gap:16px;align-self:stretch;justify-content:center}
  .panneau.intro .vitrine{margin:0;padding:14px 46px 10px;border-radius:18px}
  .panneau.intro .vt{flex-direction:column;align-items:stretch;gap:12px;min-height:0}
  .panneau.intro .vt-img{flex:none;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;border-width:3px}
  .panneau.intro .vt-txt b{font-size:24px}
  .panneau.intro .vt-txt small{display:block;font-size:16px;line-height:1.45;margin-top:4px}
  .panneau.intro .vt-fl{font-size:28px}
  .panneau.intro .vt-pt{width:10px;height:10px}.panneau.intro .vt-pt.on{width:24px}
  .panneau.intro .monde{max-width:none;margin:0;padding:12px 16px 10px}
  .panneau.intro .monde .m-c b{font-size:30px}
  .panneau.intro .monde .m-fil{display:block;font-size:13.5px}
}
@media (min-width:1100px) and (min-height:620px) and (max-height:820px){
  .panneau.intro{padding:20px 28px;row-gap:10px}
  .panneau.intro .tetejeu .logo{width:96px;height:96px}.panneau.intro .titrejeu{font-size:60px}
  .panneau.intro .intro-recit p{font-size:16px;line-height:1.5;margin-bottom:8px}
  .panneau.intro .vt-img{aspect-ratio:2/1}
  .panneau.intro .vt-txt b{font-size:20px}.panneau.intro .vt-txt small{font-size:14.5px}
}
@media (max-width:1400px){ body.pc #app .chip-lbl{display:none} body.pc #app .chip{padding:5px 8px} }
@media (max-width:1250px){ body.pc #app .hd-logo{display:none} body.pc #app .hd-score small{display:none} body.pc #app .hd-score{padding:3px 9px} body.pc #app > .row:first-child{gap:10px} }

/* Arrivée des zombies au début d'un combat (2026-11-10, idée de Fabien : effet de surprise) : ils surgissent du fond de la scène
   en titubant, l'un après l'autre ; leur nom, leur barre de vie et leur intention apparaissent une fois arrivés */
.zrang.arrivee .zc{animation:zArrive 1.15s cubic-bezier(.2,.7,.3,1) both}
.zrang.arrivee .zc:nth-child(2){animation-delay:.3s}.zrang.arrivee .zc:nth-child(3){animation-delay:.6s}
.zrang.arrivee .zc:nth-child(4){animation-delay:.85s}.zrang.arrivee .zc:nth-child(5){animation-delay:1.05s}.zrang.arrivee .zc:nth-child(6){animation-delay:1.2s}
.zrang.arrivee .zc .zint,.zrang.arrivee .zc .zn,.zrang.arrivee .zc .zpv{animation:zInfo .45s ease-out both;animation-delay:1.25s}
.zrang.arrivee .zc:nth-child(2) .zint,.zrang.arrivee .zc:nth-child(2) .zn,.zrang.arrivee .zc:nth-child(2) .zpv{animation-delay:1.55s}
.zrang.arrivee .zc:nth-child(3) .zint,.zrang.arrivee .zc:nth-child(3) .zn,.zrang.arrivee .zc:nth-child(3) .zpv{animation-delay:1.85s}
.zrang.arrivee .zc:nth-child(n+4) .zint,.zrang.arrivee .zc:nth-child(n+4) .zn,.zrang.arrivee .zc:nth-child(n+4) .zpv{animation-delay:2.1s}
@keyframes zArrive{
  0%{opacity:0;transform:translateY(-34%) scale(.3);filter:blur(3px) brightness(.35)}
  25%{opacity:.7;transform:translateY(-24%) scale(.48) rotate(-4deg)}
  45%{transform:translateY(-14%) scale(.66) rotate(3deg);filter:blur(1px) brightness(.6)}
  65%{opacity:1;transform:translateY(-5%) scale(.86) rotate(-2deg)}
  85%{transform:translateY(2%) scale(1.05) rotate(1deg);filter:none}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes zInfo{from{opacity:0}to{opacity:1}} /* opacité seulement : la bulle est centrée par un translateX qu'il ne faut pas écraser */
@media (prefers-reduced-motion:reduce){.zrang.arrivee .zc,.zrang.arrivee .zc *{animation:none}}

/* Bloc du score, même allure que les pastilles (2026-11-10, retour de Fabien) */
body.pc #app .hd-score{flex-direction:row;align-items:center;gap:7px;border-radius:22px;padding:4px 14px;min-height:42px}
body.pc #app .hd-score .hs-ico{font-size:20px;line-height:1}
body.pc #app .hd-score b{font-family:inherit;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:0}
body.pc #app .hd-score small{font-size:10px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;text-align:left}
@media (max-width:1500px){ body.pc #app .hd-score b{font-size:18px} }
/* 1920 px : un peu plus serré pour que les noms tiennent à côté du score */
body.pc #app .chips{gap:8px}
body.pc #app .chip{padding:5px 10px;gap:6px}
body.pc #app .chip-lbl{font-size:11px;letter-spacing:.02em}
body.pc #app .hd-score{padding:4px 11px;gap:6px}

/* Combat dans la scène sur PC (2026-11-10, retour de Fabien : tout était tassé en haut) : la fenêtre remplit la boîte de la pièce,
   la scène du combat prend toute la hauteur à gauche, l'équipe et ses actions à droite, les boutons Jouer / Auto / Fuir en bas */
body.pc:not(.scene-petite) #modal .sheet.large{display:flex;flex-direction:column;padding:12px 14px}
body.pc:not(.scene-petite) .sheet.large .ctitre{flex:0 0 auto;margin:0 0 8px}
body.pc:not(.scene-petite) .sheet.large .combat{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:14px;align-items:stretch}
body.pc:not(.scene-petite) .sheet.large .cgauche{min-height:0}
body.pc:not(.scene-petite) .sheet.large .arene{flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:260px}
body.pc:not(.scene-petite) .sheet.large .zinfo{font-size:13px}
body.pc:not(.scene-petite) .sheet.large .combat .journal{flex:0 0 auto;max-height:150px;font-size:13px}
body.pc:not(.scene-petite) .sheet.large .cdroite{min-height:0;overflow-y:auto;gap:10px}
body.pc:not(.scene-petite) .sheet.large .cdroite > .row:last-child{margin-top:auto}
body.pc:not(.scene-petite) .sheet.large .cmc{padding:8px 10px}
body.pc:not(.scene-petite) .sheet.large .cmp,body.pc:not(.scene-petite) .sheet.large .cmp .portrait{flex-basis:52px;width:52px;height:52px}
body.pc:not(.scene-petite) .sheet.large .cmi b{font-size:16px}
body.pc:not(.scene-petite) .sheet.large .cmi small{font-size:12.5px}
body.pc:not(.scene-petite) .sheet.large .act{padding:7px 2px}
body.pc:not(.scene-petite) .sheet.large .act span{font-size:20px}
body.pc:not(.scene-petite) .sheet.large .act small{font-size:11px}
body.pc:not(.scene-petite) .sheet.large .combat .row .btn{padding-top:12px;padding-bottom:12px;font-size:16px}
body.pc:not(.scene-petite) .sheet.large .zrang{bottom:10px;gap:10px}
body.pc:not(.scene-petite) .sheet.large .zc{flex-basis:140px;padding-top:30px}
body.pc:not(.scene-petite) .sheet.large .zc .zp{max-width:130px;border-radius:16px}
body.pc:not(.scene-petite) .sheet.large .zrang.n4 .zc,body.pc:not(.scene-petite) .sheet.large .zrang.n5 .zc,body.pc:not(.scene-petite) .sheet.large .zrang.n6 .zc{flex-basis:104px}
body.pc:not(.scene-petite) .sheet.large .zc .zn{font-size:14px}
body.pc:not(.scene-petite) .sheet.large .zc .zpv{height:8px}
body.pc:not(.scene-petite) .sheet.large .zint{font-size:13px;padding:2px 8px}
body.pc:not(.scene-petite) .sheet.large .zint small{font-size:11.5px}
body.pc:not(.scene-petite) .sheet.large .combat.fini{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}

/* Zombies détourés dans le combat (2026-11-10) : debout sur le sol du décor, sans cadre ; la taille suit la hauteur de la scène
   (unités cqh : l'arène est un conteneur), le Costaud et le Gonflé sont plus grands, le Rampant est au ras du sol */
.arene{container-type:size}
.zc.sprite{flex:0 1 auto;padding-top:22px;gap:1px}
.zc.sprite .zs{display:block;line-height:0;position:relative}
.zc.sprite .zs img{display:block;height:58cqh;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(0,0,0,.55));transform-origin:50% 100%}
.zc.sprite.z-costaud .zs img,.zc.sprite.z-gonfle .zs img{height:64cqh}
.zc.sprite.z-rampant .zs img{height:30cqh}
.zrang.n4 .zc.sprite .zs img,.zrang.n5 .zc.sprite .zs img,.zrang.n6 .zc.sprite .zs img{height:50cqh}
.zrang.n4 .zc.sprite.z-rampant .zs img,.zrang.n5 .zc.sprite.z-rampant .zs img,.zrang.n6 .zc.sprite.z-rampant .zs img{height:26cqh}
.zrang:has(.sprite){gap:0;align-items:flex-end}
.zc.sprite .zn{font-size:11px}
.zc.sprite .zpv{width:70%;max-width:90px}
/* visé : halo doré autour de la silhouette (plus de cadre) */
.zc.sprite.vise .zs img{filter:drop-shadow(0 0 2px #ffcf4a) drop-shadow(0 0 6px #ffcf4a) drop-shadow(0 6px 4px rgba(0,0,0,.55))}
.zc.sprite.vise .zn{color:#ffcf4a}
/* touché : il recule et clignote ; mort : il tombe à la renverse, gris */
.zc.sprite.coup .zs img{animation:zTouche .45s ease-out}
@keyframes zTouche{0%{transform:none}30%{transform:translateX(6px) rotate(4deg);filter:brightness(2.2) drop-shadow(0 6px 4px rgba(0,0,0,.55))}100%{transform:none}}
.zc.sprite.mort{opacity:.75}
.zc.sprite.mort .zs img{transform:rotate(-82deg) translate(-12%, 18%);filter:grayscale(1) brightness(.55);height:34cqh}
.zc.sprite.mort .zp::after{content:none}
body.pc:not(.scene-petite) .sheet.large .zc.sprite{flex-basis:auto;padding-top:30px}
body.pc:not(.scene-petite) .sheet.large .zc.sprite .zn{font-size:14px}
/* Scène basse (téléphone couché) : zombies un peu plus petits pour que leur bulle reste dans la scène */
@container (max-height:190px){
  .zc.sprite .zs img{height:50cqh}
  .zc.sprite.z-costaud .zs img,.zc.sprite.z-gonfle .zs img{height:54cqh}
  .zc.sprite.z-rampant .zs img{height:26cqh}
}

/* Fin de combat : carte « ce qui vous attend » (image du lieu + texte) et bouton à taille normale, en bas */
.fin-suite{display:flex;gap:10px;align-items:stretch;border:2px solid var(--bois);border-radius:12px;background:var(--bg);overflow:hidden;min-height:70px}
.fin-suite .fs-img{flex:0 0 38%;background-size:cover;background-position:center;min-height:70px}
.fin-suite .fs-txt{flex:1;padding:8px 10px 8px 0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.fin-suite .fs-txt b{font-size:15px}
.fin-suite .fs-txt small{font-size:12.5px;color:var(--mut);line-height:1.35}
.fin-suite.defaite .fs-img{filter:grayscale(1) brightness(.6)}
.cdroite > .fin-bouton{flex:0 0 auto;height:auto;margin-top:auto}
body.pc:not(.scene-petite) .sheet.large .fin-suite{flex-direction:column;flex:1 1 auto;min-height:0}
body.pc:not(.scene-petite) .sheet.large .fin-suite .fs-img{flex:1 1 auto;min-height:140px}
body.pc:not(.scene-petite) .sheet.large .fin-suite .fs-txt{padding:10px 14px 12px;flex:0 0 auto}
body.pc:not(.scene-petite) .sheet.large .fin-suite .fs-txt b{font-size:18px}
body.pc:not(.scene-petite) .sheet.large .fin-suite .fs-txt small{font-size:14px}
body.pc:not(.scene-petite) .sheet.large .fin-bouton{padding-top:13px;padding-bottom:13px;font-size:17px}

/* Panneau de droite pendant un combat (PC) */
body.pc:not(.scene-petite) .sheet.large .combat .journal{display:none}
#tableauPC .pz-liste{display:flex;flex-direction:column;gap:6px}
#tableauPC .pz{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 8px}
#tableauPC .pz.mort{opacity:.5}
#tableauPC .pz-ico{flex:0 0 46px;width:46px;height:46px;border-radius:10px;overflow:hidden;font-size:34px;line-height:46px;text-align:center}
#tableauPC .pz-ico img,#tableauPC .pz-ico .portrait{width:46px;height:46px;object-fit:cover;display:block}
#tableauPC .pz.mort .pz-ico img{filter:grayscale(1)}
#tableauPC .pz-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#tableauPC .pz-txt small{color:var(--mut);font-size:11.5px;line-height:1.3}
#tableauPC .pz-txt .pz-fait{color:var(--bad);font-weight:700}
#tableauPC .pz-txt .zpv{display:block;height:6px;border-radius:4px;background:rgba(0,0,0,.25);overflow:hidden}
#tableauPC .pz-txt .zpv i{display:block;height:100%;background:#d6452b}
#tableauPC .pj-tour{border-left:3px solid var(--bois);padding:2px 0 4px 8px;margin:0 0 8px}
#tableauPC .pj-tour.fin{border-left-color:var(--acc)}
#tableauPC .pj-t{display:inline-block;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}

/* Barres de défilement aux couleurs du jeu (fines, bois) au lieu de la barre grise du navigateur */
*{scrollbar-width:thin;scrollbar-color:var(--bois) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bois);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--boisClair, var(--bois));background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Carte du marché de Marco dans le panneau PC */
#tableauPC .tb-marche{border:2px solid var(--acc);border-radius:12px;background:color-mix(in srgb,var(--acc) 10%,var(--bg));padding:8px 10px;margin-bottom:8px}
#tableauPC .tbm-tete{display:flex;gap:10px;align-items:center;margin-bottom:6px}
#tableauPC .tbm-ico{flex:0 0 52px;width:52px;height:52px;border-radius:12px;overflow:hidden;font-size:38px;line-height:52px;text-align:center}
#tableauPC .tbm-ico img,#tableauPC .tbm-ico .portrait{width:52px;height:52px;object-fit:cover;display:block}
#tableauPC .tbm-tete b{display:block}#tableauPC .tbm-tete small{color:var(--mut);font-size:12px}
#tableauPC .tbm-offres{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
#tableauPC .tbm-o{display:grid;grid-template-columns:auto auto auto 1fr;gap:6px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:9px;padding:3px 8px;font-weight:800}
#tableauPC .tbm-o .ico{width:1.3em;height:1.3em}
#tableauPC .tbm-o small{justify-self:end;font-weight:700;font-size:11px;color:var(--mut)}
#tableauPC .tbm-o.ok small{color:var(--ok)}
#tableauPC .tbm-o.fait{opacity:.5}
#tableauPC .tbm-fl{color:var(--mut)}
#tableauPC .tbm-o em{font-style:normal;font-weight:700;font-size:11.5px;color:var(--mut);margin-left:3px}
#tableauPC .tbm-o span{white-space:nowrap}

/* ---------- Écrans « Ta famille » et « Le sac » sur PC (2026-11-10, retour de Fabien : mise en page mobile) ---------- */
@media (min-width:1100px) and (min-height:620px){
  /* Ta famille : grand panneau, les 4 membres côte à côte en grandes cartes */
  #app:has(> .panneau.famille){max-width:none}
  .panneau.famille{max-width:1180px;width:min(92vw,1180px);padding:26px 34px;border-width:4px;border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
  .panneau.famille .famtete h1{font-size:52px}
  .panneau.famille .pseudobtn small{font-size:13px}
  .panneau.famille .pseudobtn b{font-size:19px;padding:6px 16px}
  .panneau.famille .fam{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}
  .panneau.famille .fm{flex-direction:column;align-items:stretch;text-align:center;padding:16px 14px;gap:10px;border-radius:16px}
  .panneau.famille .fm .em{font-size:118px;align-self:center}
  .panneau.famille .fmnom{font-size:30px;margin:0 auto}
  .panneau.famille .fmtrait{margin-top:6px}
  .panneau.famille .tnom{font-size:16px;padding:4px 6px}
  .panneau.famille .fmc small{font-size:13.5px;line-height:1.4;margin-top:8px;text-align:left}
  .panneau.famille .modes{gap:12px}
  .panneau.famille .modes .tab{font-size:17px;padding:10px}
  .panneau.famille .modes .tab small{font-size:13px}
  .panneau.famille .lien-code{font-size:15px;margin:10px 0 4px}
  .panneau.famille > .btn{font-size:20px;padding:15px;border-radius:14px;margin-top:6px}

  /* Le sac : grand panneau, le sac à gauche (grand dessin, grandes cases), les objets de la maison à droite en grandes tuiles */
  #app:has(> .pk){max-width:1240px}
  #app:has(> .pk) > .row h1{font-size:40px}
  #app:has(> .pk) .mode,#app:has(> .pk) #tsec{font-size:16px;padding:3px 12px}
  #app:has(> .pk) .timer{height:16px;margin:6px 0 12px}
  body.maison .pk{grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"sub tiles" "bag tiles" "info tiles" "go tiles";gap:14px 26px;padding:22px 26px;border-width:4px;border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
  .pk .sub{font-size:16px}
  .pk .sacbloc{gap:16px}
  .pk .sacimg{height:170px}
  .pk .sacdroite .row b{font-size:20px}
  .pk .bag{gap:8px}
  .pk .cell{height:58px;font-size:30px;border-radius:12px}
  .pk .tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-content:start}
  .pk .tile{font-size:46px;padding:12px 4px 8px;border-radius:14px}
  .pk .tile small{font-size:13px;margin-top:4px}
  .pk .tile .pl{font-size:11px;top:4px;left:6px}
  .pk .tile .n{font-size:14px;padding:1px 8px}
  .pk .partir{font-size:22px;padding:16px}
  .pk [data-act="adstart"]{font-size:15px}
}
@media (min-width:1100px) and (min-height:620px) and (max-height:780px){
  .panneau.famille{padding:16px 26px}
  .panneau.famille .famtete h1{font-size:40px}
  .panneau.famille .fam{margin:10px 0;gap:12px}
  .panneau.famille .fm{padding:10px 12px;gap:6px}
  .panneau.famille .fm .em{font-size:86px}
  .panneau.famille .fmnom{font-size:25px}
  .panneau.famille .fmc small{font-size:12.5px;margin-top:5px}
  .panneau.famille .modes .tab{padding:7px}
  .panneau.famille > .btn{padding:12px;font-size:18px}
  .pk .sacimg{height:130px}
  .pk .cell{height:48px;font-size:26px}
  .pk .tile{font-size:38px;padding:9px 4px 6px}
}
.sheet.parle.parle-dedans{padding-top:72px}

/* Fin de combat : plus d'image en double, le récit du combat remplit la colonne (PC) */
.fin-suite{min-height:0}
.fin-suite .fs-txt{padding:8px 12px}
body.pc:not(.scene-petite) .sheet.large .fin-suite{flex:0 0 auto;flex-direction:row}
body.pc:not(.scene-petite) .sheet.large .fin-recit{flex:1 1 auto;min-height:0;overflow-y:auto;border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 10px}
.fin-recit .titre-butin{margin-top:2px}
.fin-recit .pj-tour{border-left:3px solid var(--bois);padding:2px 0 4px 8px;margin:0 0 8px}
.fin-recit .pj-tour.fin{border-left-color:var(--acc)}
.fin-recit .pj-t{display:inline-block;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
#tableauPC .pz-txt .zpv.vie i{background:#4f9a3a}

/* Résultat d'une fouille en grand dans la scène (PC) */
body.pc:not(.scene-petite) #modal .sheet.large.resultat{background-size:cover;background-position:center;background-color:#2a1d14;justify-content:flex-end;padding:22px}
.sheet.resultat .res-carte{width:min(640px,100%);margin:0 auto;background:color-mix(in srgb,var(--card) 94%,transparent);border:3px solid var(--bois);border-radius:18px;padding:16px 20px;box-shadow:0 10px 30px rgba(0,0,0,.55);max-height:100%;overflow-y:auto;animation:resMonte .45s ease-out}
.sheet.resultat .res-carte .banniere{display:none}
.sheet.resultat .res-carte h2{font-size:30px;margin:0 0 6px}
.sheet.resultat .res-carte .titre-butin{font-size:17px}
.sheet.resultat .res-carte .etageres{max-width:440px;margin:4px auto}
.sheet.resultat .res-carte .islot{animation:resObjet .4s cubic-bezier(.2,.8,.3,1.4) both}
.sheet.resultat .res-carte .islot:nth-child(2){animation-delay:.12s}.sheet.resultat .res-carte .islot:nth-child(3){animation-delay:.24s}
.sheet.resultat .res-carte .islot:nth-child(4){animation-delay:.36s}.sheet.resultat .res-carte .islot:nth-child(5){animation-delay:.48s}
.sheet.resultat .res-carte .rangee:nth-child(2) .islot{animation-delay:.6s}
.sheet.resultat .res-carte .butin-noms{font-size:14px}
.sheet.resultat .res-carte > .btn{font-size:18px;padding:13px;margin-top:6px}
@keyframes resMonte{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes resObjet{from{opacity:0;transform:scale(.3) translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet.resultat .res-carte,.sheet.resultat .res-carte .islot{animation:none}}

/* « La nuit dernière » dans le panneau PC : dans un cadre, texte plus léger (plus de gros blocs rouges) */
#tableauPC .tb-nuit{border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 8px}
#tableauPC .tb-nuit .lj{margin:2px 0}
#tableauPC .tb-nuit .lj-txt{font-size:12.5px;font-weight:600;line-height:1.35}
#tableauPC .tb-nuit .b2 .lj-txt,#tableauPC .tb-nuit .lj.b2{color:var(--ink)}

/* Sang : flaque sous un zombie abattu, coulures sur le game over */
.zc.sprite .zs canvas.flaque{position:absolute;left:calc(50% - 9cqh);bottom:-6%;width:44cqh;height:12cqh;transform:translateX(-50%);z-index:-1;pointer-events:none}
.zc.sprite .zs{isolation:isolate}
#gameover canvas.coulures{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#gameover .go-boite{position:relative;z-index:1}
.sheet.resultat .res-carte.parle{margin-top:60px;padding-top:30px}
/* Écrans de départ sur PC (histoire, famille, sac, accueil) : fond HD de la version boxed au lieu des images faites pour téléphone, et contenu centré */
@media (min-width:1100px) and (min-height:620px){
  body.fond:not(.pc){background:linear-gradient(rgba(10,8,6,.10),rgba(10,8,6,.40)),url("images/fond-pc.webp") center 40%/cover no-repeat #0f1520}
  #app:has(> .pk){justify-content:center;gap:4px}
  body.maison .pk{margin-top:6px;flex:0 0 auto}
}
.journal-morts{margin:4px 0 6px}
body.pc:not(.scene-petite) .sheet.large .journal-morts{display:none}
/* Ligne d'un membre du clan : toujours la même mise en page (nom en haut, infos dessous, bouton Exclure à droite), quelle que soit la longueur des textes */
.clan-membres .clan-m{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center}
.clan-membres .clan-m .cm-nom{grid-column:1;justify-self:start;max-width:100%;min-width:0}
.clan-membres .clan-m > small{grid-column:1;min-width:0}
.clan-membres .clan-m > .mini{grid-column:2;grid-row:1 / span 2;align-self:center;width:auto;white-space:nowrap}
/* Blasons : l'image reste dans sa case (elle débordait vers le bas et cachait le nom du clan, ex. bandeau de guerre) */
.blason{grid-template-rows:100%;grid-template-columns:100%;place-items:stretch;overflow:hidden}
.blason img{min-height:0;min-width:0}
.gu-camp .blason{flex:0 0 auto;width:58px;height:58px;margin-bottom:3px}
.avis-case{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--mut);margin:6px 0 10px;cursor:pointer}
.avis-case input{margin-top:2px;flex:0 0 auto}

/* Icônes peintes : une image n'a pas de ligne de base comme un dessin, on la garde nette et non sélectionnable */
img.ico-img{object-fit:contain;min-width:0;flex-shrink:1;-webkit-user-drag:none;user-select:none;pointer-events:none}
/* Badges d'état sur un portrait (bandage, soif…) : la règle « .portrait img » (image plein cadre) ne doit pas agrandir l'icône */
.portrait .badges img.ico-img{width:1.15em;height:1.15em;border:0;border-radius:50%;object-fit:contain;background:var(--card);padding:1px;display:inline-block}
/* Icône dans l'étiquette d'une carte de lieu (🐟 poissons, 🌲 arbres) : « .cl-img img » (image du lieu plein cadre) ne doit pas l'agrandir */
.cl-img img.ico-img{width:1.15em;height:1.15em;object-fit:contain;display:inline-block;vertical-align:-.22em}
/* Pièce en mode compact (paysage bas) : les emojis du texte des étiquettes étaient cachés (font-size:0), leurs icônes converties le restent */
#piece.compact .etiq img.emo{display:none}

/* ---------- Raid de l'immeuble (onglet Immeuble du bastion, entre deux étages, replay) ---------- */
.raid-tete{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--bois);margin-bottom:8px;background:#222}
.raid-tete .raid-img{display:block;width:100%;height:clamp(110px,22vh,190px);object-fit:cover}
.raid-titre{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff6e6;display:flex;flex-direction:column}
.raid-titre b{font-size:17px}.raid-titre small{opacity:.85}
.raid-etages{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px}
.raid-e{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 3px;border-radius:999px;background:var(--card);border:1.5px solid var(--bois);font-size:12px;font-weight:700}
.raid-e b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bois);color:#fff6e6;font-size:11px}
.raid-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.raid-l{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center;padding:6px;border-radius:10px;background:var(--card);border:1.5px solid var(--ligne,rgba(0,0,0,.15))}
.raid-l.moi{border-color:var(--accent,#c98a2a)}
.raid-l .portrait,.raid-l > .ico,.raid-l > svg{width:48px;height:48px;font-size:44px}
.raid-l .cl-info small{display:block;line-height:1.3}
.raid-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0}
.raid-c{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;border-radius:12px;background:var(--card);border:2px solid var(--bois);font:inherit;color:inherit;cursor:pointer}
.raid-c .portrait{width:64px;height:64px}.raid-c small{font-size:12px;opacity:.85}
.raid-kit{display:grid;grid-template-columns:40px 1fr auto 28px auto;gap:6px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--ligne,rgba(0,0,0,.15))}
.raid-kit .ing2-case{width:38px;height:38px}.rk-nom small{display:block;opacity:.75;font-size:12px}.rk-q{text-align:center;font-size:17px}
.raid-gears{display:flex;gap:8px;flex-wrap:wrap}
.raid-g{display:flex;flex-direction:column;align-items:center;gap:2px;width:78px;padding:6px;border-radius:12px;background:var(--card);border:2px solid var(--ligne,rgba(0,0,0,.2));font:inherit;color:inherit;cursor:pointer}
.raid-g .ico{width:34px;height:34px}.raid-g.on{border-color:var(--ok,#4a8a3a);box-shadow:0 0 0 2px var(--ok,#4a8a3a) inset}
.raid-equipe,.raid-vols,.rp-equipe{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.raid-v{display:flex;flex-direction:column;align-items:center;width:72px;font-size:12px;text-align:center}
.raid-v .portrait{width:48px;height:48px}.raid-v.mort{opacity:.6;filter:grayscale(1)}
.raid-v small{opacity:.8;line-height:1.2}
.raid-menace{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.raid-menace .portrait{width:44px;height:44px}
.raid-res{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;margin:6px 0;border:2px solid var(--ok,#4a8a3a);background:var(--card)}
.raid-res.ko{border-color:var(--bad,#a33)}.raid-res b{font-size:16px}
.rp-arene{position:relative;height:clamp(150px,30vh,260px);border-radius:12px;border:2px solid var(--bois);background:#222 center/cover;display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:6px;overflow:hidden}
.rp-z{position:relative;display:flex;flex-direction:column;align-items:center;height:92%;max-width:24%;transition:opacity .4s,filter .4s}
.rp-z img{height:calc(100% - 26px);max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.rp-z small{color:#fff6e6;font-size:11px;font-weight:800;text-shadow:0 1px 2px #000}
.rp-z.mort{opacity:.35;filter:grayscale(1)}
.rp-z .zpv,.raid-v .zpv{display:block;width:90%;height:5px;border-radius:3px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:2px}
.rp-z .zpv b,.raid-v .zpv b{display:block;height:100%;background:#5fbf4a}
.raid-v .zpv{width:56px}
.rp-journal{min-height:64px;max-height:28vh;overflow:auto}
.rp-boutons .btn{flex:1 1 0;padding-left:4px;padding-right:4px}

/* ---------- Opérations du clan : cartes de l'onglet, grande carte des lieux, ligne de Mon clan ---------- */
.ops{display:flex;flex-direction:column;gap:8px}
.op-carte{display:grid;grid-template-columns:40% 1fr;gap:0;padding:0;border:2px solid var(--bois);border-radius:12px;overflow:hidden;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.op-carte .op-img{width:100%;height:100%;min-height:96px;object-fit:cover;display:block}
.op-txt{display:flex;flex-direction:column;gap:3px;padding:7px 9px;min-width:0}
.op-txt b{font-size:15px;line-height:1.15}.op-txt small{font-size:12px;line-height:1.3;opacity:.9}
.op-st{display:inline-block;align-self:flex-start;margin-top:2px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;background:var(--bg);border:1.5px solid var(--line)}
.op-st.ok{border-color:var(--ok,#4a8a3a);color:var(--ok,#3c7a2e)}.op-st.moy{border-color:#c98a2a;color:#9a6512}
.carte-lieu.carte-op{grid-column:1/-1;display:grid;grid-template-columns:44% 1fr;border-color:#c98a2a;box-shadow:0 0 0 2px rgba(201,138,42,.35),0 2px 0 var(--line)}
.carte-lieu.carte-op .cl-img{aspect-ratio:auto;width:100%;height:100%;min-width:0;min-height:104px}
.carte-lieu.carte-op .cl-img > img{width:100%;height:100%;object-fit:cover}
.lien-retour{background:none;border:0;padding:2px 0 6px;font:inherit;font-weight:800;color:var(--accent,#9a6512);cursor:pointer}
.op-ligne{display:flex;flex-direction:column;width:100%;text-align:left;margin:0 0 8px;padding:7px 10px;border-radius:10px;border:2px solid #c98a2a;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.op-ligne small{opacity:.85;font-size:12px}

/* ---------- Discussion du clan ---------- */
.chat-fil{height:clamp(180px,42vh,460px);overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:var(--bg);border:2px solid var(--bois);margin-bottom:6px}
.cm-m{max-width:86%;align-self:flex-start;padding:5px 9px 6px;border-radius:12px 12px 12px 3px;background:var(--card);border:1.5px solid var(--line);box-shadow:0 1px 0 var(--line)}
.cm-m.moi{align-self:flex-end;border-radius:12px 12px 3px 12px;background:#f3e2bd;border-color:#c98a2a}
.cm-m.rapide p{font-weight:800}
.cm-m p{margin:2px 0 0;line-height:1.3;overflow-wrap:anywhere}
.cm-tete{display:flex;align-items:center;gap:4px;font-size:12px;flex-wrap:wrap}
.cm-tete small{opacity:.7}
.cm-a{margin-left:auto;background:none;border:0;padding:0 2px;font-size:13px;cursor:pointer;opacity:.6}
.cm-a + .cm-a{margin-left:0}
.cm-sys{align-self:center;max-width:96%;text-align:center;font-size:11px;line-height:1.25;opacity:.7;padding:1px 8px;border-radius:8px;background:rgba(0,0,0,.04)}
.cm-sys .ico{width:1em;height:1em}
.chat-fil{gap:4px}
.cm-sys small{opacity:.8}
.chat-rapides{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.chat-r{flex:0 0 auto;padding:5px 10px;border-radius:999px;border:1.5px solid var(--bois);background:var(--card);color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.chat-saisie{display:flex;gap:6px;margin-bottom:8px}
.chat-saisie input{flex:1;min-width:0;padding:9px 10px;border-radius:10px;border:2px solid var(--bois);background:var(--bg);color:var(--ink);font:inherit}
.chat-saisie .btn{flex:0 0 auto;min-width:52px}
.chat-ligne{border-color:var(--bois)}
/* Pastille rouge du nombre de messages non lus (menu ☰, Clans, Discussion) */
[data-act="menu"],[data-act="clans"],[data-act="chat"]{position:relative}
.nl-badge{position:absolute;top:2px;right:3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#c62828;color:#fff;font:800 11px/19px Nunito,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none;z-index:2}
@media (prefers-reduced-motion:no-preference){.nl-badge{animation:nlPop .35s ease-out}}
@keyframes nlPop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Messages rapides : un dégradé sur le bord droit montre qu'on peut faire glisser */
.chat-rapides-boite{position:relative}
.chat-rapides-boite::after{content:"";position:absolute;top:0;right:0;bottom:6px;width:34px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--card))}

/* Marges (retour de Fabien 2026-11-11) : un seul cadre pour les fiches du bastion, cases centrées, icône à côté du titre, boutons qui ne se collent pas */
.bast-def{padding:8px 10px}
.bast-def .invfiche{border:0;background:none;padding:0;margin:0 0 6px}
.bast-def .ings2{justify-content:center;margin:4px 0 8px}
.op-ligne{display:block}
.op-ligne b{display:inline}
.op-ligne small{display:block;margin-top:1px}
#sheet .btn[style*="width:100%"] + .row,#sheet .btn[style*="width:100%"] + .btn,#sheet .row + .btn[style*="width:100%"]{margin-top:8px}

/* À pied / En voiture : interrupteur à deux positions */
.trajet{margin:2px 0 8px}
.seg{display:flex;border:2px solid var(--bois);border-radius:12px;overflow:hidden;background:var(--bg)}
.seg-b{flex:1 1 0;min-width:0;padding:8px 6px;border:0;background:none;font:inherit;font-weight:800;color:var(--mut);cursor:pointer;white-space:nowrap}
.seg-b + .seg-b{border-left:2px solid var(--bois)}
.seg-b.on,.seg-b.on:disabled{background:var(--card);color:var(--ink);opacity:1;cursor:default;box-shadow:inset 0 -3px 0 var(--acc)}
.seg-b small{font-weight:700;opacity:.85;font-size:12px}
.trajet-info{display:block;margin:4px 2px 0;color:var(--mut);font-size:12.5px;line-height:1.3}

/* Fiche d'un membre : trait sur trois lignes courtes (retour de Fabien) */
.rt .eqt .m-trait{margin:2px 0 3px;font-size:15px}
.rt .eqt .m-plus,.rt .eqt .m-moins{margin:0 0 2px;font-size:13px;line-height:1.3;font-weight:700}
.rt .eqt .m-plus{color:var(--ok,#3c7a2e)}
.rt .eqt .m-moins{color:var(--bad,#a33)}
.rt .eqt .m-plus .ico,.rt .eqt .m-moins .ico{width:1.05em;height:1.05em}
.m-titre{margin-top:10px}

/* Guide : les étages de l'immeuble */
.g-etage{margin:6px 0 2px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.g-etage b{margin-right:4px}
.g-z .portrait{width:28px;height:28px}

/* Fiche d'un membre : exploits (titres gagnés et prochains) */
.exploits{display:flex;flex-direction:column;gap:4px;margin:2px 0 4px}
.titre-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:4px 8px;border-radius:10px;background:var(--bg);border:1.5px solid #c98a2a}
.titre-m small{color:var(--mut);font-size:12px}
.titre-p{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;font-size:12.5px}
.titre-p .tp-nom{font-weight:700;white-space:nowrap}
.tp-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.tp-bar i{display:block;height:100%;background:#c98a2a}
.titre-p small{color:var(--mut);white-space:nowrap;font-size:11.5px}

/* Tombes des disparus */
.tombes{display:flex;flex-direction:column;gap:6px}
.tombe{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--bg);border:1.5px solid var(--line)}
.tombe .portrait{width:48px;height:48px}
.tombe .cl-info small{display:block;line-height:1.3}

/* Héritage : choix au game over, lettre */
.go-heritage{margin:10px 0;padding:8px;border-radius:12px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,230,190,.35)}
.go-h-titre{margin:0 0 6px;font-weight:800;color:#fff6e6}
.go-h-cases{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.go-h-case{position:relative;width:46px;height:46px;border-radius:10px;border:2px solid rgba(255,230,190,.4);background:rgba(255,246,230,.12);padding:4px;cursor:pointer}
.go-h-case .ico{width:100%;height:100%}
.go-h-case b{position:absolute;right:2px;bottom:0;font-size:11px;color:#fff6e6;text-shadow:0 1px 2px #000}
.go-h-case.on{border-color:#e8b04a;box-shadow:0 0 0 2px #e8b04a;background:rgba(232,176,74,.25)}
.go-heritage small{display:block;margin-top:6px;color:#f3e6cf;font-size:12px}
.lettre{margin:6px 0 8px;padding:10px 12px;border-radius:6px;background:#f3e9cf;color:#3b2a1e;border:1px solid #cdb98f;box-shadow:0 2px 0 rgba(0,0,0,.15);font-family:Georgia,serif;transform:rotate(-.6deg)}
.lettre p{margin:0 0 4px;font-style:italic;line-height:1.4}
.lettre small{display:block;text-align:right;opacity:.8}
@media (max-height:760px){
  .go-heritage{margin:6px 0;padding:5px 6px}
  .go-h-titre{margin:0 0 4px;font-size:13px}
  .go-h-cases{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .go-h-case{flex:0 0 38px;width:38px;height:38px;padding:3px}
  .go-heritage small{display:none}
}

/* Défis du jour et de la semaine */
.defi{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:5px 8px;margin:0 0 5px;border-radius:10px;background:var(--bg);border:1.5px solid var(--line)}
.defi .defi-ico{font-size:20px;text-align:center}.defi .defi-ico .ico{width:24px;height:24px}
.defi-txt b{display:block;font-size:13.5px;margin-bottom:3px}
.defi small{color:var(--mut);font-size:12px;white-space:nowrap}
.defi.fait{border-color:var(--ok,#4a8a3a)}.defi.fait .tp-bar i{background:var(--ok,#4a8a3a)}
.tb-defis .defi{padding:4px 7px}

/* Événement mondial */
.evt{display:flex;flex-direction:column;gap:4px;padding:7px 9px;margin:0 0 6px;border-radius:10px;background:var(--bg);border:1.5px solid var(--line)}
.evt small{color:var(--mut);font-size:12.5px;line-height:1.3}
.evt.actif{border-color:#b33a2a;background:linear-gradient(0deg,var(--bg),rgba(179,58,42,.08))}
.evt .tp-bar{height:8px}.evt.actif .tp-bar i{background:#b33a2a}

/* Météo des saisons : neige (hiver) et pluie (automne), discrètes, sur les images d'extérieur */
.meteo{position:fixed;z-index:1;pointer-events:none;overflow:hidden;display:none}
.meteo.neige,body.meteo-neige .arene::after{background-image:radial-gradient(3.5px 3.5px at 15px 25px,rgba(255,255,255,0.8) 45%,transparent 60%),radial-gradient(4.8px 4.8px at 70px 95px,rgba(255,255,255,0.85) 45%,transparent 60%),radial-gradient(3.1px 3.1px at 120px 40px,rgba(255,255,255,0.7) 45%,transparent 60%),radial-gradient(5.7px 5.7px at 40px 160px,rgba(255,255,255,0.9) 45%,transparent 60%),radial-gradient(4.0px 4.0px at 190px 120px,rgba(255,255,255,0.75) 45%,transparent 60%),radial-gradient(6.6px 6.6px at 250px 260px,rgba(255,255,255,0.85) 45%,transparent 60%),radial-gradient(2.6px 2.6px at 100px 10px,rgba(255,255,255,0.6) 45%,transparent 60%),radial-gradient(4.4px 4.4px at 160px 170px,rgba(255,255,255,0.8) 45%,transparent 60%);background-size:110px 110px,140px 140px,170px 170px,210px 210px,250px 250px,300px 300px,130px 130px,190px 190px}
.meteo.pluie,body.meteo-pluie .arene::after{background-color:rgba(30,45,70,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='97' height='213'%3E%3Cg stroke='rgb%28225,236,255%29' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='12.5' y1='30' x2='11' y2='44'/%3E%3Cline x1='59.5' y1='121' x2='58' y2='135'/%3E%3Cline x1='84.5' y1='190' x2='83' y2='204'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='131' height='271'%3E%3Cg stroke='rgb%28225,236,255%29' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='41.5' y1='60' x2='40' y2='74'/%3E%3Cline x1='102.5' y1='170' x2='101' y2='184'/%3E%3Cline x1='18.5' y1='240' x2='17' y2='254'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='157' height='331'%3E%3Cg stroke='rgb%28225,236,255%29' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='71.5' y1='20' x2='70' y2='34'/%3E%3Cline x1='131.5' y1='150' x2='130' y2='164'/%3E%3Cline x1='26.5' y1='280' x2='25' y2='294'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113' height='239'%3E%3Cg stroke='rgb%28225,236,255%29' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='91.5' y1='80' x2='90' y2='94'/%3E%3Cline x1='34.5' y1='200' x2='33' y2='214'/%3E%3Cline x1='61.5' y1='5' x2='60' y2='19'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='293'%3E%3Cg stroke='rgb%28225,236,255%29' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='121.5' y1='110' x2='120' y2='124'/%3E%3Cline x1='16.5' y1='160' x2='15' y2='174'/%3E%3Cline x1='151.5' y1='260' x2='150' y2='274'/%3E%3C/g%3E%3C/svg%3E");background-size:97px 213px,131px 271px,157px 331px,113px 239px,173px 293px}
body.meteo-neige .arene::after,body.meteo-pluie .arene::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .meteo.neige,body.meteo-neige .arene::after{animation:neige 14s linear infinite}
  .meteo.pluie,body.meteo-pluie .arene::after{animation:pluie .7s linear infinite}
}
@keyframes neige{to{background-position:10px 110px,-14px 140px,18px 170px,-22px 210px,26px 250px,-30px 300px,34px 130px,-38px 190px}}
@keyframes pluie{to{background-position:0 213px,0 271px,0 331px,0 239px,0 293px}}

/* Saison sous le chapitre : sur PC, sur sa propre ligne (sinon elle serre les pastilles du haut) */
body.pc .chapcourt .ch-sep{display:none}
body.pc .chapcourt .ch-saison{display:block;font-size:.85em;opacity:.9}

/* Zombie célèbre : étiquette sur la carte du lieu où il rôde */
.cl-celebre{position:absolute;left:4px;bottom:4px;background:rgba(120,16,14,.88);color:#fff6e6;font-size:11px;font-weight:800;border-radius:8px;padding:1px 6px}
/* Colosse (toit de l'immeuble) et Boucher : plus massifs que les autres */
.zc.sprite.z-boucher .zs img{height:64cqh}
.zc.sprite.z-colosse .zs img{height:72cqh}

/* En-tête : le chapitre et la saison sont deux boutons distincts (chacun ouvre sa fenêtre) */
.chapcourt .ch-btn{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-shadow:inherit;cursor:pointer;text-align:left}
.chapcourt .ch-btn:hover{text-decoration:underline}
/* Fenêtre des saisons */
.saisons{display:flex;flex-direction:column;gap:6px}
.saison{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--bg);border:1.5px solid var(--line)}
.saison.on{border-color:var(--accent,#d98b2b);box-shadow:0 0 0 1px var(--accent,#d98b2b) inset}
.saison .s-ico{font-size:24px;text-align:center}
.saison small{display:block;font-size:12px;opacity:.85}

/* Cartes de la famille : les badges d'état (blessé, épuisé, soif, faim) à droite du prénom, plus sur le portrait */
.mc > div:first-of-type{display:flex;align-items:center}
.mc .etats{margin-left:auto;display:flex;gap:3px;align-items:center;flex:0 0 auto}
.mc .etats .ico,.mc .etats img.ico-img{width:22px;height:22px;background:var(--card);border-radius:50%;box-shadow:0 0 0 1.5px var(--ink);padding:1px}
.mc .etats .zz{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1.5px var(--ink);font-weight:900;font-size:13px;color:#7a5c9e}
@media (max-width:559px){
  body.fond .scene .mc .etats{position:absolute;top:15px;right:3px;flex-direction:column;gap:2px;margin:0}
  body.fond .scene .mc .etats .ico,body.fond .scene .mc .etats img.ico-img,body.fond .scene .mc .etats .zz{width:14px;height:14px;font-size:9px}
}
/* Guide du survivant en tuiles (2026-11-11) : thèmes, tuiles qui ouvrent une fiche, recherche */
.g-cherche{width:100%;box-sizing:border-box;margin:0 0 8px;padding:8px 10px;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px}
.gtheme{margin:0}
.gtheme .gcat{margin:4px 0}
.gtuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:0 0 10px}
.gtuiles.objets{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.gtuiles.lieux{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.gtuile{border:2px solid var(--bois);border-radius:12px;background:var(--bg);padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--ink);box-shadow:0 2px 0 var(--line);min-width:0}
.gtuile:hover{border-color:var(--acc)}
.gtuile small{font-size:11.5px;line-height:1.15;font-weight:800;text-align:center;overflow-wrap:anywhere}
.gtuile .gt-ico{font-size:26px;line-height:1}
.gtuile .gt-ico .ico,.gtuile .gt-ico img.ico-img{width:30px;height:30px}
.gtuiles.objets .gtuile > .ico,.gtuiles.objets .gtuile > img.ico-img{width:36px;height:36px}
.gtuile .gt-img{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;line-height:0}
.gtuile .gt-img img.vign{width:100%;height:100%;object-fit:cover}
.gtuile .gt-img > .ico{width:46px;height:46px;margin:6px auto}
.gtuile .gt-por .portrait{width:56px;height:56px}
.gtuile.celebre{border-color:#8a2b22}
.gtuile.cache,.gtheme.cache,.g-rien.cache{display:none}
.gpuces{display:flex;gap:5px;overflow-x:auto;padding:0 0 6px;margin:0 0 6px;scrollbar-width:thin}
.gpuce{flex:0 0 auto;border:2px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);padding:3px 10px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.gpuce.on{background:var(--acc);color:var(--accink);border-color:var(--ink)}
.gpuces.estompe{opacity:.4}
.gfiche{border:2px solid var(--line);border-radius:12px;background:var(--bg);padding:8px 12px;margin:0 0 8px}
.gfiche h3{margin:0 0 4px;font-size:18px;display:flex;align-items:center;gap:6px}
.gfiche h3 .ico,.gfiche h3 img.ico-img{width:28px;height:28px}
.gfiche p{margin:4px 0 0;font-size:14.5px;line-height:1.45}
.gnav{display:flex;justify-content:space-between;gap:8px;margin:0 0 6px;font-size:13px}
.gimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 0 8px;border:2px solid var(--bois)}
.gzfiche{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:end}
.gzfiche .gz-sprite{height:190px;width:auto;max-width:130px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.4))}
.gzfiche .gt-por .portrait{width:90px;height:90px}
.gzfiche .tuiles{margin:6px 0}
.gtraits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 8px}
@media (max-width:420px){ .gzfiche .gz-sprite{height:150px;max-width:96px} }
.gtuiles.regles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px}
.gtuiles.regles .gtuile{flex-direction:row;justify-content:flex-start;gap:7px;padding:5px 8px;text-align:left}
.gtuiles.regles .gtuile small{text-align:left;font-size:12.5px}
.gtuiles.regles .gt-ico{font-size:22px;flex:0 0 auto}
.gtuiles.regles .gt-ico .ico,.gtuiles.regles .gt-ico img.ico-img{width:24px;height:24px}

/* Soins : le soin conseillé est encadré */
.loc.craft.conseil{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.loc.craft .pill{font-size:10.5px;padding:1px 6px;vertical-align:middle}

/* Discussion du clan façon messagerie (2026-11-11) */
.ch-app{display:flex;flex-direction:column;height:min(780px,calc(100vh - 156px));min-height:250px;margin:-4px -2px 0}
body.pc #modal .ch-app{height:calc(100vh - 96px);max-height:none}
.ch-tete{display:flex;align-items:center;gap:10px;padding:2px 2px 10px;border-bottom:2px solid var(--line)}
.ch-blason{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:2px solid var(--bois);overflow:hidden}
.ch-blason img{width:100%;height:100%;object-fit:contain}
.ch-blason .ico{width:26px;height:26px}
.ch-titre{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.ch-titre b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-titre small{font-size:12px;opacity:.7}
.ch-bouton{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--bois);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.ch-bouton .ico{width:22px;height:22px}
.ch-fil{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:10px 4px 8px;scroll-behavior:smooth}
.ch-jour{display:flex;justify-content:center;margin:8px 0 6px}
.ch-jour span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);background:var(--bg);border:1px solid var(--line);padding:2px 10px;border-radius:999px}
.ch-sys{align-self:center;max-width:90%;text-align:center;font-size:11.5px;line-height:1.3;color:var(--mut);margin:4px 0}
.ch-sys .ico{width:1.1em;height:1.1em;vertical-align:-2px}
.ch-l{display:flex;align-items:flex-end;gap:7px;margin-top:8px;max-width:88%}
.ch-l.suite{margin-top:2px}
.ch-l.moi{align-self:flex-end;flex-direction:row-reverse}
.ch-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff8ec;font-weight:900;font-size:14px;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--line)}
.ch-av.vide{visibility:hidden;box-shadow:none}
.ch-b{position:relative;padding:7px 11px 6px;border-radius:16px 16px 16px 5px;background:var(--card);border:1.5px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.08);min-width:0;cursor:pointer;color:var(--ink)}
.ch-l.suite .ch-b{border-radius:5px 16px 16px 5px}
.ch-l.moi .ch-b{border-radius:16px 16px 5px 16px;background:linear-gradient(180deg,#f6c86a,#eaa83f);border-color:#b97a22;color:#2b1a08}
.ch-l.moi.suite .ch-b{border-radius:16px 5px 5px 16px}
.ch-qui{display:block;font-size:12px;font-weight:900;margin-bottom:1px;color:var(--mut)}
.ch-qui .ico{width:14px;height:14px;vertical-align:-2px}
.ch-txt{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.35}
.ch-b.rapide .ch-txt{font-weight:800}
.ch-txt .ico,.ch-txt img.emo{width:18px;height:18px;vertical-align:-3px}
.ch-h{float:right;margin:5px 0 -2px 10px;font-size:10.5px;opacity:.6;font-weight:700}
.ch-acts{display:none;clear:both;gap:6px;padding-top:6px;margin-top:4px;border-top:1px dashed rgba(0,0,0,.18)}
.ch-b.voir .ch-acts{display:flex}
.ch-act{border:0;background:rgba(0,0,0,.07);border-radius:999px;padding:3px 9px;font:inherit;font-size:12px;font-weight:800;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.ch-act .ico{width:14px;height:14px}
.ch-vide{margin:auto;text-align:center;color:var(--mut);font-size:14px}
.ch-vide .ico{width:56px;height:56px;opacity:.75}
.ch-bas{position:relative;border-top:2px solid var(--line);padding-top:8px}
.ch-toast{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);margin:0;padding:7px 12px;border-radius:12px;background:#3a2a1c;color:#fff6e6;font-size:13px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:2}
.ch-rapides{display:flex;gap:6px;overflow-x:auto;padding:0 2px 8px;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
.ch-rapides::-webkit-scrollbar{display:none}
.ch-r{flex:0 0 auto;padding:6px 11px;border-radius:999px;border:1.5px solid var(--bois);background:var(--bg);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ch-r:hover{border-color:var(--acc)}
.ch-r .ico,.ch-r img.emo{width:16px;height:16px;vertical-align:-3px}
.ch-saisie{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 14px;border-radius:999px;border:2px solid var(--bois);background:var(--bg)}
.ch-saisie:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(234,168,63,.25)}
.ch-saisie input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font:inherit;font-size:15px;padding:6px 0}
.ch-envoi{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(180deg,#f6c86a,#e09a2f);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 0 #9a6512}
.ch-envoi svg{width:20px;height:20px;fill:#2b1a08;margin-left:2px}
.ch-envoi:active{transform:translateY(1px);box-shadow:none}
@media (max-height:440px){
  .ch-tete{padding-bottom:6px;gap:8px}
  .ch-blason,.ch-bouton{width:32px;height:32px}
  .ch-titre small{display:none}
  .ch-titre b{font-size:18px}
  .ch-rapides{display:none}
  .ch-app{height:calc(100vh - 86px);min-height:220px}
}

/* Messages rapides : tirables à la souris (curseur main), petite barre de défilement visible sur PC */
.ch-rapides{cursor:grab;user-select:none}
.ch-rapides.tire{cursor:grabbing}
.ch-rapides.tire .ch-r{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .ch-rapides{scrollbar-width:thin;padding-bottom:6px}
  .ch-rapides::-webkit-scrollbar{display:block;height:6px}
}

/* Bouton « Pièces » à droite de Dormir et fenêtre des vignettes */
.acts .btn.bt-pieces{flex:0 0 auto;padding-left:12px;padding-right:12px;position:relative}

.acts .btn.bt-pieces.alerte::after{content:"";position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:var(--bad);border:2px solid var(--card)}
/* téléphone : 5 boutons de même taille, l’icône au-dessus du mot comme les autres (retour de Fabien : la maison paraissait petite) */
@media (max-width:559px){ .acts .btn.bt-pieces{padding-left:2px;padding-right:2px;align-self:stretch} }
.pz-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin:0 0 10px}
.pz-v{position:relative;display:flex;flex-direction:column;padding:0;border:2px solid var(--bois);border-radius:12px;overflow:hidden;background:var(--bg);cursor:pointer;color:var(--ink);box-shadow:0 2px 0 var(--line)}
.pz-v:hover{border-color:var(--acc)}
.pz-v.ici{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.pz-img{display:block;width:100%;aspect-ratio:16/10;background-size:cover;background-repeat:no-repeat}
.pz-nom{font-size:12px;font-weight:800;padding:4px 5px;text-align:center;line-height:1.15}
.pz-nom small{font-weight:700;opacity:.7}
.pz-pastille{position:absolute;top:6px;right:6px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.acts:has(> .bt-pieces){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-height:440px){ .pz-grille{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} .pz-nom{font-size:11px;padding:3px 4px} }
#piece.compact .zone.invite ~ .zone[data-act="chien"] .etiq{display:none} /* scène minuscule : l’invitation à dormir passe avant l’étiquette de Rex */
#piece.compact .zone[data-act^="o"] .etiq{display:none} /* scène minuscule : pas d’étiquette pour les petits objets (photo, radio, cartes, trophées), ils restent touchables */

/* ---------- Fiche d'un membre façon jeu mobile (2026-11-11) ---------- */
.mf{display:flex;flex-direction:column;gap:10px}
.mf-tete{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
.mf-por{width:96px;height:96px;border-radius:16px;overflow:hidden;border:3px solid var(--bois);box-shadow:0 3px 0 var(--line),inset 0 0 0 2px rgba(255,255,255,.25);background:var(--bg);display:grid;place-items:center;font-size:64px}
.mf-por .portrait{width:100%;height:100%;border-radius:0}
.mf-por .portrait img{width:100%;height:100%;object-fit:cover}
.mf.mort .mf-por{filter:grayscale(1)}
.mf-id{min-width:0;display:flex;flex-direction:column;gap:5px}
.mf-nom{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.8px;font-size:30px;line-height:1;margin:2px 0 0}
.mf-trait{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:2px solid var(--bois);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px;font-weight:800;padding:3px 10px;cursor:pointer}
.mf-trait .ico,.mf-trait img.emo{width:18px;height:18px}
.mf-fl{font-size:10px;opacity:.7;transition:transform .2s}
.mf-trait.ouvert .mf-fl{transform:rotate(180deg)}
.mf-tags{display:flex;flex-wrap:wrap;gap:4px}
.mf-tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--bg);border:1.5px solid var(--line);white-space:nowrap}
.mf-tag .ico,.mf-tag img.emo{width:14px;height:14px;vertical-align:-2px}
.mf-tag.ok{border-color:var(--ok);color:var(--ok)}
.mf-tag.moy{border-color:#c98a2a;color:#9a6512}
.mf-tag.bas{border-color:var(--bad);color:var(--bad)}
.mf-tag.or{border-color:#c9a227;background:linear-gradient(180deg,#fff4c9,#f3d77a);color:#5a4205}
.mf-x{width:36px;height:36px;border-radius:50%;border:2px solid var(--bois);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;font-weight:900;cursor:pointer;display:grid;place-items:center}
.mf-trait-det{border:2px dashed var(--line);border-radius:12px;padding:6px 10px;font-size:13px}
.mf-trait-det p{margin:2px 0}
.mf-trait-det.cache{display:none}
.mf-jauges{display:flex;justify-content:space-around;gap:6px;padding:10px 6px;border-radius:16px;background:var(--bg);border:2px solid var(--line)}
.mj{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.mj{--c:var(--ok)}
.mj.moy{--c:#d98e2b}
.mj.bas{--c:var(--bad)}
.mj-r{width:54px;height:54px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p) * 1%),rgba(0,0,0,.13) 0);display:grid;place-items:center;box-shadow:0 2px 0 var(--line)}
.mj-i{width:42px;height:42px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:20px}
.mj-i .ico,.mj-i img.ico-img,.mj-i img.emo{width:24px;height:24px}
.mj b{font-size:16px;line-height:1.1;color:var(--c)}
.mj small{font-size:11px;font-weight:700;opacity:.75;line-height:1}
.mf-alerte{margin:-4px 0 0;font-size:12px;color:var(--bad);font-weight:700}
.mf-bloc{display:flex;flex-direction:column;gap:6px}
.mf-titre{margin:0;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.mf-titre .ico,.mf-titre img.emo{width:16px;height:16px;vertical-align:-3px}
.mf-medailles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.md{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.md-r{width:50px;height:50px;border-radius:50%;background:conic-gradient(#c9a227 calc(var(--p) * 1%),rgba(0,0,0,.13) 0);display:grid;place-items:center}
.md-i{width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:20px;filter:grayscale(.85);opacity:.7}
.md-i .ico,.md-i img.ico-img,.md-i img.emo{width:24px;height:24px}
.md.gagne .md-r{background:radial-gradient(circle,#fff3b0,#e0b23a);box-shadow:0 0 0 2px #a8841c,0 0 10px rgba(240,190,60,.6)}
.md.gagne .md-i{filter:none;opacity:1;background:linear-gradient(180deg,#fff8dc,#f6dd8a)}
.md b{font-size:11px;line-height:1.1;overflow-wrap:anywhere}
.md small{font-size:10px;opacity:.7;line-height:1.1}
.mf-slots{margin:0}
.mf-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mf-a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;border-radius:16px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.mf-a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.mf-a:disabled{opacity:.5;cursor:default}
.mf-ai{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:22px}
.mf-ai .ico,.mf-ai img.ico-img,.mf-ai img.emo{width:26px;height:26px}
.mf-a b{font-size:15px;line-height:1.1}
.mf-a small{font-size:11px;opacity:.75;line-height:1.15}
.mf-a.partir{background:linear-gradient(180deg,#f6c86a,#e09a2f);color:#2b1a08}
.mf-a.partir.on{background:linear-gradient(180deg,#9fd47a,#5f9a3c);color:#10240a}
@media (max-width:380px){ .mf-por{width:80px;height:80px} .mf-nom{font-size:26px} .mj-r{width:48px;height:48px} .mj-i{width:37px;height:37px} .md-r{width:44px;height:44px} .md-i{width:35px;height:35px} }
@media (max-height:440px){ .mf{gap:6px} .mf-por{width:64px;height:64px} .mf-nom{font-size:22px} .mj-r{width:42px;height:42px} .mj-i{width:32px;height:32px} .mf-jauges{padding:6px} }
/* Fiche du membre sur téléphone : tout tient sans défiler */
@media (max-width:559px), (max-height:760px){
  .mf{gap:7px}
  .mf-alerte{margin:-3px 0 0;font-size:11px}
  .mf-tete{gap:10px}
  .mf-por{width:80px;height:80px;border-radius:14px}
  .mf-nom{font-size:26px}
  .mf-jauges{padding:7px 4px}
  .mj-r{width:46px;height:46px} .mj-i{width:36px;height:36px} .mj-i .ico,.mj-i img.ico-img,.mj-i img.emo{width:20px;height:20px}
  .mj b{font-size:14px}
  .md-r{width:42px;height:42px} .md-i{width:33px;height:33px} .md-i .ico,.md-i img.ico-img,.md-i img.emo{width:20px;height:20px}
  .md b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mf .slots.grands .slot{height:64px;min-height:0;aspect-ratio:auto;padding:4px 2px}
  .mf-slots .slot .ico,.mf-slots .slot img.ico-img{width:30px;height:30px}
  .mf-slots .slot small{font-size:10px}
  .mf-a{padding:7px 6px 6px} .mf-ai{width:32px;height:32px} .mf-ai .ico,.mf-ai img.ico-img,.mf-ai img.emo{width:22px;height:22px}
  .mf-a b{font-size:14px}
}
/* Fiche du membre en paysage bas : deux colonnes (personnage et jauges | exploits, équipement, actions) */
@media (max-height:440px) and (min-width:600px){
  .mf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4px 14px;grid-auto-flow:row dense;align-items:start}
  .mf > .mf-tete,.mf > .mf-trait-det,.mf > .mf-jauges,.mf > .mf-alerte{grid-column:1}
  .mf > .mf-bloc,.mf > .mf-actions{grid-column:2}
  .mf-medailles{gap:4px} .md small{display:none}
  .mf .slots.grands .slot{height:54px}
  .mf-a{flex-direction:row;justify-content:center;gap:6px;padding:6px} .mf-a small{display:none}
}

/* ---------- Soigner, boire, manger façon jeu mobile (2026-11-11) ---------- */
.st-tete{align-items:center}
.st .mf-por{width:72px;height:72px}
.st .mf-nom{font-size:24px}
.st-jauges{display:flex;gap:6px}
.st-jauges .mj-r{width:38px;height:38px} .st-jauges .mj-i{width:30px;height:30px;font-size:15px}
.st-jauges .mj-i .ico,.st-jauges .mj-i img.ico-img,.st-jauges .mj-i img.emo{width:17px;height:17px}
.st-jauges .mj b{font-size:12px} .st-jauges .mj small{display:none}
.st-bonus{font-size:10.5px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--ok);margin-left:4px}
.st-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
.st-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:14px;border:2px solid var(--bois);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--line);min-width:0}
.st-t:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.st-t:disabled{opacity:.45;cursor:default;box-shadow:none;filter:grayscale(.6)}
.st-i{width:44px;height:44px;display:grid;place-items:center;font-size:28px}
.st-i .ico,.st-i img.ico-img{width:40px;height:40px}
.st-t b{font-size:12px;line-height:1.1;text-align:center;overflow-wrap:anywhere}
.st-eff{font-size:12.5px;font-weight:900;color:var(--ok);line-height:1.1;text-align:center}
.st-eff .ico,.st-eff img.emo{width:14px;height:14px;vertical-align:-2px}
.st-t:disabled .st-eff{color:inherit}
.st-t small{font-size:10.5px;opacity:.75;line-height:1.1;text-align:center}
.st-t small .ico,.st-t small img.emo{width:12px;height:12px;vertical-align:-2px}
.st-t.conseil{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 3px 0 var(--line);background:linear-gradient(180deg,#fff3d6,var(--bg))}
.st-t.conseil::before{content:"conseillé";position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--acc);color:var(--accink);font-size:10px;font-weight:900;padding:1px 7px;border-radius:999px;border:1.5px solid var(--ink);white-space:nowrap}
.st-vide{grid-column:1/-1;margin:0;font-size:13px;color:var(--mut)}
.st-note{margin:0;font-size:11.5px;color:var(--mut);line-height:1.35}
.st-note .ico,.st-note img.emo{width:14px;height:14px;vertical-align:-2px}
@media (max-height:440px) and (min-width:600px){ .st-grille{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} .st-i{width:34px;height:34px} .st-i .ico,.st-i img.ico-img{width:30px;height:30px} .st .mf-por{width:56px;height:56px} }

/* ---------- Cartes de la famille, raccord avec la fiche (2026-11-11) ---------- */
.mc .em .portrait{border-radius:12px;box-shadow:0 0 0 2.5px var(--bois),0 2px 0 3px var(--line)}
.mc > div:first-of-type b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:17px}
.mc .mc-st{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);line-height:1.35;margin:2px 0 3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc .mc-st .ico,.mc .mc-st img.emo{width:12px;height:12px;vertical-align:-2px}
.mc .mc-st.ok{border-color:var(--ok);color:var(--ok)}
.mc .mc-st.moy{border-color:#c98a2a;color:#9a6512}
.mc .mc-st.bas{border-color:var(--bad);color:var(--bad)}
.mc .mc-st.mort{opacity:.7}
.mc .bar{background:rgba(0,0,0,.12);box-shadow:inset 0 1px 1px rgba(0,0,0,.15);border-radius:999px}
.mc .bar i{border-radius:999px}
body.fond .scene .mc > small.mc-st{display:inline-block;max-width:100%}
@media (max-width:559px){ .st-i{width:38px;height:38px} .st-i .ico,.st-i img.ico-img{width:34px;height:34px} .st-t{padding:7px 3px 5px} }
@media (max-height:440px) and (min-width:600px){
  .mf.st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;align-items:start}
  .mf.st > .mf-tete{grid-column:1/-1}
  .mf.st > .st-note{grid-column:1/-1;font-size:10.5px}
  .st-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .st-t{padding:5px 2px 4px} .st-t small{display:none}
  .mf-tags{flex-wrap:nowrap;overflow:hidden}
}
@media (max-height:440px) and (min-width:600px){
  .st .mf-por{width:48px;height:48px;border-radius:10px} .st .mf-nom{font-size:20px}
  .st-jauges .mj-r{width:32px;height:32px} .st-jauges .mj-i{width:25px;height:25px}
  .mf.st > .st-note{display:none}
  .st-i{width:28px;height:28px} .st-i .ico,.st-i img.ico-img{width:26px;height:26px}
  .st-t b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .st-eff{font-size:11px;white-space:nowrap}
}
@media (max-height:440px) and (min-width:600px){ .mf.st > .mf-bloc{grid-column:auto} }

/* ---------- Fenêtres des pastilles du haut (2026-11-11) ---------- */
.mf.info .infotete{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:0}
.it-anneau{--c:var(--ok);width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p) * 1%),rgba(0,0,0,.13) 0);display:grid;place-items:center;box-shadow:0 3px 0 var(--line)}
.infotete.moy .it-anneau{--c:#d98e2b}.infotete.ko .it-anneau{--c:var(--bad)}
.it-anneau .it-ico{flex:none;width:60px;height:60px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:30px;box-shadow:none}
.it-anneau .it-ico .ico,.it-anneau .it-ico img.ico-img{width:38px;height:38px}
.it-etat{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:900;padding:1px 9px;border-radius:999px;border:1.5px solid var(--ok);color:var(--ok);background:var(--bg)}
.infotete.moy .it-etat{border-color:#c98a2a;color:#9a6512}.infotete.ko .it-etat{border-color:var(--bad);color:var(--bad)}
.mf.info .tuiles{margin:0}
.mf.info .jmoral{margin:0}
.mf.info .jmoral-leg{margin:-6px 0 0}

/* ---------- Cadre commun des fenêtres (2026-11-11) ---------- */
.sheet{position:relative}
.sheet-x{position:absolute;top:12px;right:12px;z-index:3}
.sheet.avec-x > h2:first-of-type,.sheet.avec-x > .rt:first-of-type h2{padding-right:44px}
.sheet.avec-x .btn-fermer{display:none}
.sheet.avec-x .row:has(> .btn-fermer:only-child){display:none}
.titre-butin{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin:10px 0 5px}
.titre-butin .ico,.titre-butin img.emo{width:16px;height:16px;vertical-align:-3px}
.loc{border-radius:14px;box-shadow:0 3px 0 var(--line)}
.loc:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.tuile{border-radius:14px;box-shadow:0 3px 0 var(--line)}
.tuile b{font-size:19px;font-weight:900}
.mf-trait{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Fenêtres des pastilles du haut en paysage bas : en-tête et tuiles à gauche, explications à droite */
@media (max-height:440px) and (min-width:600px){
  .mf.info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px;align-items:start}
  .mf.info > *{grid-column:1}
  .mf.info > .mf-bloc{grid-column:2;grid-row:1 / span 6}
  .it-anneau{width:56px;height:56px} .it-anneau .it-ico{width:44px;height:44px} .it-anneau .it-ico .ico,.it-anneau .it-ico img.ico-img{width:28px;height:28px}
  .mf.info .it-txt b{font-size:26px}
  .mf.info .lj{font-size:12px}
}

/* ---------- Combat, fin de combat, résultat, panneau PC : raccord avec la fiche (2026-11-11) ---------- */
/* cartes de l'équipe pendant le combat */
.cmc{border-radius:14px;box-shadow:0 3px 0 var(--line)}
.cmp,.cmp .portrait{border-radius:10px;overflow:hidden}
.cmc .cmp,.bilan-m .cmp{box-shadow:0 0 0 2.5px var(--bois)}
.cmc .cmi b,.bilan-m .cmi b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:17px}
.cmc .bar,.bilan-m .bar{height:9px;border-radius:999px;background:rgba(0,0,0,.13);box-shadow:inset 0 1px 1px rgba(0,0,0,.15)}
.cmc .bar i,.bilan-m .bar i{border-radius:999px}
.act{border-color:var(--bois);border-radius:12px;box-shadow:0 2px 0 var(--line);transition:transform .08s}
.act:active{transform:translateY(2px);box-shadow:none}
.act.on{border-color:#a8841c;background:linear-gradient(180deg,#fff1c2,#f2cf6b);box-shadow:0 0 0 1.5px #c9a227,0 2px 0 #a8841c}
.act.on small{color:#4a3505;font-weight:900}
/* fin de combat */
.bilan-m{border-radius:14px;box-shadow:0 3px 0 var(--line)}
.arme-p{display:inline-block;margin-top:3px;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arme-p .ico,.arme-p img.ico-img{width:14px;height:14px;vertical-align:-2px}
.arme-p.ko{border-color:var(--bad);color:var(--bad)}
.fin-suite{border-radius:14px;box-shadow:0 3px 0 var(--line)}
/* panneau de droite (PC) : zombies, équipe, tableau de bord */
#tableauPC .pz{border-radius:14px;box-shadow:0 3px 0 var(--line);align-items:center}
#tableauPC .pz-ico{border-radius:12px;box-shadow:0 0 0 2.5px var(--bois)}
#tableauPC .pz-txt b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:18px}
#tableauPC .pz-txt .zpv{height:9px;border-radius:999px;background:rgba(0,0,0,.13);box-shadow:inset 0 1px 1px rgba(0,0,0,.15);margin:3px 0}
#tableauPC .pz-txt .zpv i{border-radius:999px}
#tableauPC .pz-txt .zpv.vie i{background:var(--ok)}
#tableauPC .pz-txt .pz-fait{display:inline-block;margin:2px 0;font-size:11px;font-weight:900;padding:1px 8px;border-radius:999px;border:1.5px solid var(--bad);background:var(--card)}
#tableauPC .tb-bloc,#tableauPC .tb-nuit,#tableauPC .tb-marche{border-radius:14px;box-shadow:0 3px 0 var(--line)}
#tableauPC .defi{border-radius:12px;box-shadow:0 2px 0 var(--line);border-color:var(--bois)}
#tableauPC .titre-butin{margin-top:12px}
/* résultat de fouille */
.btn-jeu{display:flex;align-items:center;justify-content:center;gap:8px}
.btn-jeu .ico,.btn-jeu img.ico-img{width:22px;height:22px}
.sheet.resultat .res-carte .tuiles,.sheet .tuiles + .titre-butin{margin-top:4px}
.sheet.resultat .res-carte .titre-butin{font-size:12px}
/* Tuiles compactes dans les fenêtres de récit (résultat de fouille, fin de combat) sur téléphone */
@media (max-width:559px), (max-height:440px){
  .sheet:not(.resultat) .tuiles{gap:5px;margin-bottom:6px}
  .sheet:not(.resultat) .tuile{padding:4px 3px}
  .sheet:not(.resultat) .tuile b{font-size:16px}
  .sheet:not(.resultat) .tuile small{font-size:10px}
}

/* ---------- Accueil « Partie en cours » sur PC (2026-11-11) : même grand panneau que l'écran d'histoire ---------- */
@media (min-width:1100px) and (min-height:620px){
  #app:has(> .panneau.accueil-pc){max-width:none}
  .panneau.accueil-pc{grid-template-areas:"tete cote" "recit cote" "bouton cote"}
  .panneau.accueil-pc > .acc-boutons{grid-area:bouton;align-self:end;display:flex;flex-direction:column;gap:10px}
  .acc-carte{border:2px solid var(--bois);border-radius:18px;background:var(--bg);padding:16px 18px;box-shadow:0 4px 0 var(--line)}
  .acc-carte .mf-titre{font-size:13px}
  .acc-ligne{display:flex;align-items:baseline;justify-content:space-between;margin:4px 0 12px}
  .acc-jour{font-family:Bangers,system-ui,sans-serif;font-size:54px;line-height:1;letter-spacing:1px;color:var(--bois)}
  .acc-score{font-size:28px;font-weight:900}
  .acc-score small{font-size:14px;font-weight:700;opacity:.7}
  .acc-score .ico,.acc-score img.emo{width:28px;height:28px;vertical-align:-4px}
  .acc-famille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .acc-m{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
  .acc-por{width:76px;height:76px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px var(--bois),0 3px 0 4px var(--line);display:grid;place-items:center;font-size:50px;background:var(--card)}
  .acc-por .portrait{width:100%;height:100%;border-radius:0}
  .acc-por .portrait img{width:100%;height:100%;object-fit:cover}
  .acc-m b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:20px;margin-top:4px}
  .acc-m small{font-size:12.5px;opacity:.8}
  .acc-m small .ico,.acc-m small img.emo{width:13px;height:13px;vertical-align:-2px}
  .acc-m.mort{opacity:.6}
  .acc-go{font-size:22px;padding:16px 18px;border-radius:16px}
  .acc-sec{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .acc-sec .btn{font-size:16px;padding:12px 10px;border-radius:14px}
  .acc-nouv{color:var(--bad)}
  .acc-note{font-size:12.5px;color:var(--mut);text-align:center}
}
@media (min-width:1100px) and (min-height:620px) and (max-height:780px){
  .acc-jour{font-size:42px} .acc-por{width:60px;height:60px} .acc-carte{padding:12px 14px} .acc-go{padding:12px} .acc-ligne{margin-bottom:8px}
}

/* Écran d'histoire (2026-11-11) : titre de section, première phrase en grand, pastilles du jeu, bouton parlant, cadre en bois sur PC */
.ir-titre{margin:0 0 4px}
.ir-premier{font-size:1.12em;font-weight:700}
.ir-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ir-puces span{font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;border:1.5px solid var(--bois);background:var(--bg);box-shadow:0 2px 0 var(--line);white-space:nowrap}
.ir-puces .ico,.ir-puces img.emo{width:16px;height:16px;vertical-align:-3px}
.ir-go{display:flex;align-items:center;justify-content:center;gap:8px}
.ir-go .ico,.ir-go img.emo{width:22px;height:22px}
@media (min-width:1100px) and (min-height:620px){
  .panneau.intro{border:4px solid var(--bois);border-radius:22px;box-shadow:inset 0 0 0 3px var(--boisClair),inset 0 0 40px rgba(122,78,45,.18),0 18px 50px rgba(0,0,0,.55),0 6px 0 rgba(20,10,4,.5)}
  .panneau.intro .ir-premier{font-size:20px;line-height:1.45}
  .panneau.intro .ir-puces span{font-size:14px;padding:5px 12px}
  .panneau.intro .ir-go{font-size:22px;padding:16px 18px;border-radius:16px}
}
@media (max-width:1099px) and (max-height:760px), (max-height:619px){ .ir-puces,.ir-titre{display:none} .ir-premier{font-size:1em} }

/* ---------- DA partout (2026-11-11) ---------- */
/* onglets de jeu : bois, ombre, l'onglet choisi en ambre qui ressort */
.tab{border:2px solid var(--bois);border-radius:12px;box-shadow:0 3px 0 var(--line);transition:transform .08s;color:var(--ink)}
.tab:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.tab.on{background:linear-gradient(180deg,#f6c86a,#e09a2f);color:#2b1a08;border-color:#9a6512;box-shadow:0 3px 0 #9a6512}
.tab small{font-weight:800}
/* résumé du refuge en tuiles */
.resume.rs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 8px;align-items:stretch}
.rs-t{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 4px;border:2px solid var(--bois);border-radius:12px;background:var(--bg);box-shadow:0 2px 0 var(--line);min-width:0}
.rs-t .ico,.rs-t img.ico-img{width:20px;height:20px}
.rs-t b{font-size:16px;font-weight:900;line-height:1.1}
.rs-t small{font-size:10px;font-weight:700;color:var(--mut);line-height:1.1;text-align:center}
.rs-t.ok b{color:var(--ok)}.rs-t.ko b{color:var(--bad)}
.rs-lien{grid-column:1/-1;justify-self:end;font-size:12px}
/* classement en cartes, podium pour les 3 premiers */
ol.classement{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:6px}
ol.classement li{padding:6px 10px;border:2px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
ol.classement:not(.clans) li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px}
ol.classement li:nth-child(-n+3){border-color:#c9a227;background:linear-gradient(90deg,#fff3c4,var(--bg) 60%)}
ol.classement li:first-child{box-shadow:0 0 0 1.5px #c9a227,0 3px 0 #a8841c}
ol.classement li.moi{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 2px 0 var(--line)}
ol.classement .rang{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card);border:2px solid var(--line);font-weight:900;font-size:13px}
ol.classement li:nth-child(-n+3) .rang{border:0;background:none}
ol.classement .rang .ico,ol.classement .rang img.ico-img{width:30px;height:30px}
ol.classement .pts{font-weight:900;font-size:14px;white-space:nowrap}
ol.classement .pts .ico,ol.classement .pts img.emo{width:15px;height:15px;vertical-align:-2px}
ol.classement li > b{min-width:0;overflow:hidden}
/* tableau de bord PC : « Jour N » en carte */
#tableauPC > h2:first-child{font-size:30px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
#tableauPC .tb-bloc b{font-size:15px}
.resume.rs .rs-t{display:flex;flex-direction:column;align-items:center}
/* ---------- DA : toutes les cartes restantes avec l'ombre de jeu (2026-11-11) ---------- */
.eq,.bilan,.gsec,.succes .sc,.fm,.clan-m,.clan-l,.blasons .bl,.bast-def,.cadre-choix,.raid-tete,.raid-e,.raid-c,.op-st,.tombe,.defi,.evt,.saison,.gfiche,.invtab,.tb-defis .defi{box-shadow:0 3px 0 var(--line);border-radius:14px}
.menugrille .mt{background:var(--bg);box-shadow:0 3px 0 var(--line);border-radius:14px;transition:transform .08s}
.menugrille .mt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.menugrille .mt b .ico,.menugrille .mt b img.emo{width:18px;height:18px;vertical-align:-3px}
/* messages d'alerte en petites cartes */
.sheet p.msg{background:var(--bg);border:1.5px solid var(--line);border-left:4px solid var(--acc);border-radius:12px;padding:7px 10px;line-height:1.35}
.sheet p.msg.g2{border-left-color:var(--ok)}
.sheet p.msg.b2{border-left-color:var(--bad)}
.blasons .bl:active,.clan-l:active{transform:translateY(1px)}
.sheet p.msg.vide{background:none;border:0;padding:0}

/* Mini-jeu du siphonnage : un tuyau, une zone verte, le niveau qui va et vient */
.siph{padding:18px 6px 14px}
.siph-tube{position:relative;height:30px;border-radius:999px;background:linear-gradient(180deg,#3a2a1c,#5a4330);border:3px solid var(--bois);box-shadow:inset 0 3px 6px rgba(0,0,0,.5),0 3px 0 var(--line);overflow:hidden}
.siph-zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#8fd16a,#4f9a34);opacity:.85}
.siph-niv{position:absolute;top:-4px;bottom:-4px;width:10px;margin-left:-5px;border-radius:6px;background:linear-gradient(180deg,#ffd76a,#e09a2f);box-shadow:0 0 10px rgba(255,200,80,.9),0 0 0 2px #2b1a08}

/* ---------- Accueil « Partie en cours » sur téléphone (2026-11-11) ---------- */
.acc-mob h2{margin:0 0 8px}
.acc-mob .acc-carte{border:2px solid var(--bois);border-radius:16px;background:var(--bg);padding:10px 12px;box-shadow:0 3px 0 var(--line);margin-bottom:10px}
.acc-mob .mf-titre{margin:0;font-size:11.5px}
.acc-mob .acc-ligne{display:flex;align-items:baseline;justify-content:space-between;margin:2px 0 8px}
.acc-mob .acc-jour{font-family:Bangers,system-ui,sans-serif;font-size:36px;line-height:1;letter-spacing:1px;color:var(--bois)}
.acc-mob .acc-score{font-size:20px;font-weight:900}
.acc-mob .acc-score small{font-size:12px;font-weight:700;opacity:.7}
.acc-mob .acc-score .ico,.acc-mob .acc-score img.emo{width:20px;height:20px;vertical-align:-3px}
.acc-mob .acc-famille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.acc-mob .acc-m{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;min-width:0}
.acc-mob .acc-por{width:52px;height:52px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2.5px var(--bois),0 2px 0 3px var(--line);display:grid;place-items:center;font-size:34px;background:var(--card)}
.acc-mob .acc-por .portrait{width:100%;height:100%;border-radius:0}
.acc-mob .acc-por .portrait img{width:100%;height:100%;object-fit:cover}
.acc-mob .acc-m b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;font-size:16px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-mob .acc-m small{font-size:11px;opacity:.8;line-height:1.15}
.acc-mob .acc-m small .ico,.acc-mob .acc-m small img.emo{width:12px;height:12px;vertical-align:-2px}
.acc-mob .acc-m.mort{opacity:.6}
.acc-mob .monde-place{margin-bottom:10px}
.acc-mob .acc-go{width:100%;font-size:19px;padding:13px;border-radius:14px;margin-bottom:8px}
.acc-mob .acc-sec{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acc-mob .acc-sec .btn{font-size:14.5px;padding:10px 6px;border-radius:12px}
.acc-mob .acc-nouv{color:var(--bad)}
.acc-mob .acc-note{display:block;font-size:11.5px;color:var(--mut);text-align:center;margin-top:6px}
@media (max-height:700px) and (orientation:portrait){.acc-mob .acc-por{width:42px;height:42px}.acc-mob .acc-jour{font-size:30px}.acc-mob .acc-m small{display:none}.acc-mob .acc-note{display:none}}
@media (orientation:landscape) and (max-height:500px){.acc-mob .acc-por{width:36px;height:36px}.acc-mob .acc-jour{font-size:26px}.acc-mob .acc-m small,.acc-mob .acc-note{display:none}.acc-mob .acc-carte{padding:6px 10px}}
.acc-mob .acc-ligne{margin:0 0 6px}.acc-mob .acc-carte{margin-bottom:8px}.acc-mob .monde-place{margin-bottom:8px}
@media (orientation:landscape) and (max-height:500px){.acc-mob{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}.acc-mob .acc-carte{margin:0}.acc-mob .monde-place{display:none}}
@media (max-height:860px) and (orientation:portrait){.acc-mob .acc-note{display:none}}

/* ---------- Fenêtre des missions (2026-11-11) ---------- */
.mf.mis .msg{margin:0}
.mf.mis .ings2{justify-content:flex-start}
.ing2.rec b{color:var(--ok)}
.mis-ou{margin:2px 0;font-size:12px;font-weight:900;text-transform:uppercase;color:var(--mut);text-align:center}
.mis-go{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px}
.mis-go b{font-size:17px}
.mis-lieu{display:flex;align-items:center;gap:10px;margin:0}
.mis-lieu > .ico,.mis-lieu > img{width:44px;height:44px;flex:none}
.mis-lieu small{display:block;color:var(--mut);font-size:12.5px}
.mis-opts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mis-opts .ings2{margin:0}
@media (max-height:700px){.mf.mis .msg{font-size:14px;line-height:1.35}}
@media (orientation:landscape) and (max-height:500px){
  .mf.mis{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:8px 12px;align-items:start}
  .mf.mis > .infotete,.mf.mis > .msg{grid-column:1}
  .mf.mis > .mf-bloc,.mf.mis > .mis-go{grid-column:2}
}
@media (orientation:landscape) and (max-height:500px){
  .mf.mis .it-anneau{width:54px;height:54px}.mf.mis .it-anneau .it-ico{width:42px;height:42px}.mf.mis .it-anneau .it-ico .ico,.mf.mis .it-anneau .it-ico img.ico-img{width:26px;height:26px}
  .mf.mis .msg{font-size:13px;line-height:1.3;padding:6px 9px}.mf.mis .mis-go small{display:none}.mf.mis .mis-go{padding:7px}.mf.mis .mf-bloc{padding:6px 8px}
}
.acc-titre{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap}
.acc-titre .acc-type{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:800;opacity:.85}
@supports (height:100dvh){.ch-app{height:min(780px,calc(100dvh - 156px))}body.pc #modal .ch-app{height:calc(100dvh - 96px)}}
@media (max-height:440px){@supports (height:100dvh){.ch-app{height:calc(100dvh - 86px)}}}

/* ---------- Bilan du refuge (2026-11-11) ---------- */
.bilan2{display:flex;flex-direction:column;gap:6px}
.bilan2 .bl{display:flex;gap:10px;align-items:center;padding:6px 8px;border:2px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
.bilan2 .bl .em{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:url(images/case.webp) center/100% 100%;font-size:26px}
.bilan2 .bl .em .ico,.bilan2 .bl .em img.ico-img{width:32px;height:32px}
.bilan2 .bl b{font-size:15px}
.bilan2 .bl small{display:block;color:var(--mut);font-size:12px;line-height:1.25}
.bl-niv{display:inline-block;font-size:11px;font-weight:900;padding:0 8px;border-radius:999px;border:1.5px solid var(--bois);background:var(--card);vertical-align:2px;white-space:nowrap}
.bl-note{font-size:12.5px;color:var(--mut);margin:8px 2px}
.bl-note .ico,.bl-note img.emo{width:14px;height:14px;vertical-align:-2px}
.bl-go{width:100%}
@media (max-height:700px){.bilan2{gap:4px}.bilan2 .bl{padding:4px 6px}.bilan2 .bl .em{width:38px;height:38px}.bilan2 .bl .em .ico,.bilan2 .bl .em img.ico-img{width:26px;height:26px}}
@media (orientation:landscape) and (max-height:500px){.bilan2{display:grid;grid-template-columns:1fr 1fr}.bilan2 > .mf-titre,.bilan2 > .sub{grid-column:1/-1}.bilan2 .bl small{font-size:11px}}

/* ---------- Inviter des amis (2026-11-11) ---------- */
.sheet p.msg:empty{display:none}
.inv-hero{display:flex;gap:12px;align-items:center;padding:10px 12px;border:2px solid var(--bois);border-radius:16px;background:var(--bg);box-shadow:0 3px 0 var(--line);margin-bottom:10px}
.inv-ico{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f6c86a,#e09a2f);box-shadow:0 3px 0 #9a6512;font-size:30px}
.inv-ico .ico,.inv-ico img.ico-img{width:34px;height:34px}
.inv-hero b{display:block;font-size:15.5px}
.inv-hero small{display:block;color:var(--mut);font-size:12.5px;line-height:1.3;margin-top:2px}
.inv-row{margin:10px 0}
.inv-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inv-t{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line);color:var(--ink);font:inherit;cursor:pointer}
.inv-t:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.inv-t-ico{font-size:26px;line-height:1}.inv-t-ico .ico,.inv-t-ico img.ico-img{width:30px;height:30px}
.inv-t b{font-size:15px}.inv-t small{font-size:11.5px;color:var(--mut)}
@media (max-height:700px){.inv-hero small{display:none}.inv-hero{padding:8px 10px}.inv-ico{width:44px;height:44px}}
@media (orientation:landscape) and (max-height:500px){.inv-hero small{display:none}.inv-t small{display:none}.inv-t{padding:6px}}
@media (orientation:landscape) and (max-height:500px){.inv-hero{display:none}.inv-row{margin:6px 0}.moncode b{font-size:34px}}

/* ---------- Succès en médailles (2026-11-11) ---------- */
.sc-fiche{display:flex;gap:12px;align-items:center;padding:10px 12px;border:2px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 3px 0 var(--line)}
.sc-fiche.ok{border-color:#c9a227;background:linear-gradient(90deg,#fff3c4,var(--bg) 70%)}
.sc-fiche b{display:block;font-size:16px}.sc-fiche small{display:block;color:var(--mut);font-size:13px}
.sc-etat{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:900;padding:1px 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--card)}
.sc-fiche.ok .sc-etat{border-color:var(--ok);color:var(--ok)}
.sc-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px 6px}
.sc-m{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:2px;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
.sc-m small{font-size:11px;font-weight:700;line-height:1.15;text-align:center;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-m.ok small{color:var(--ink)}
.sc-med{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:var(--card);border:3px solid var(--line);box-shadow:0 3px 0 var(--line)}
.sc-med .ico,.sc-med img.ico-img{width:34px;height:34px}
.sc-med:not(.ok) > .ico,.sc-med:not(.ok) > img.ico-img{filter:grayscale(1);opacity:.35}
.sc-med.ok{border-color:#c9a227;background:radial-gradient(circle at 35% 30%,#fff6d0,#f2cf6b);box-shadow:0 0 0 1.5px #a8841c,0 3px 0 #a8841c}
.sc-med.grand{width:64px;height:64px}.sc-med.grand .ico,.sc-med.grand img.ico-img{width:40px;height:40px}
.sc-lock{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:12px}
.sc-lock .ico,.sc-lock img.ico-img{width:14px!important;height:14px!important;filter:none!important;opacity:1!important}
.sc-m.sel .sc-med{outline:3px solid var(--acc);outline-offset:2px}
@media (max-height:700px){.sc-med{width:46px;height:46px}.sc-med .ico,.sc-med img.ico-img{width:28px;height:28px}.sc-grille{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.mf.succ .bl-note{display:none}}
.sc-grille{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px 4px}
.sc-med{width:50px;height:50px}.sc-med .ico,.sc-med img.ico-img{width:30px;height:30px}
.mf.succ{gap:8px}
@media (max-height:700px){.sc-med{width:42px;height:42px}.sc-med .ico,.sc-med img.ico-img{width:26px;height:26px}.sc-grille{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}.sc-m small{font-size:10px}.mf.succ .it-anneau{width:60px;height:60px}.mf.succ .it-anneau .it-ico{width:48px;height:48px}}
@media (orientation:landscape) and (max-height:500px){.mf.succ .sc-m small{display:none}.sc-grille{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}}
.sc-i{display:grid;place-items:center;line-height:1}
.sc-med:not(.ok) .sc-i{filter:grayscale(1);opacity:.4}
.sc-med:not(.ok) > .ico,.sc-med:not(.ok) > img.ico-img{filter:none;opacity:1}
.sc-med .sc-i .ico,.sc-med .sc-i img.ico-img{width:30px;height:30px}
.sc-med.grand .sc-i .ico,.sc-med.grand .sc-i img.ico-img{width:40px;height:40px}
.sc-grille{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
.mf.succ .it-etat{white-space:nowrap}
@media (max-height:700px){.sc-med .sc-i .ico,.sc-med .sc-i img.ico-img{width:26px;height:26px}}

/* ---------- Défis (2026-11-11) ---------- */
.defi .tp-bar{display:block;height:8px;border-radius:999px;margin-top:4px;background:rgba(0,0,0,.13);box-shadow:inset 0 1px 1px rgba(0,0,0,.15)}
.defi .tp-bar i{border-radius:999px}
.defi{grid-template-columns:40px 1fr auto;padding:7px 10px;margin:0 0 6px;border-width:2px}
.defi .defi-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line)}
.defi .defi-ico .ico,.defi .defi-ico img.ico-img{width:24px;height:24px}
.defi.fait{background:linear-gradient(90deg,#e4f3d9,var(--bg) 70%)}
.defi.fait .defi-ico{border-color:var(--ok)}
.defi small{font-weight:900;font-size:13px}
.df-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.df-tete .titre-butin{margin:10px 0 5px}
.df-temps{font-size:11.5px;font-weight:900;padding:1px 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);white-space:nowrap}
.df-temps .ico,.df-temps img.emo{width:13px;height:13px;vertical-align:-2px}
.df-rec{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 4px}
.df-pts{display:flex;gap:4px}.df-pts i{width:10px;height:10px;border-radius:50%;background:var(--line)}.df-pts i.ok{background:var(--ok)}
.df-colis{font-size:12px;font-weight:900;padding:2px 10px;border-radius:999px;border:1.5px solid #c98a2a;color:#9a6512;background:var(--bg)}
.df-colis.ok{border-color:var(--ok);color:var(--ok)}
.df-colis .ico,.df-colis img.emo{width:14px;height:14px;vertical-align:-3px}
.evt{box-shadow:0 3px 0 var(--line)}

/* ---------- Mon clan (2026-11-11) ---------- */
.mc-carte{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.mc-carte .blason{width:70px;height:70px;flex:none}
.mc-id{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.mc-nom{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:1px;font-size:30px;line-height:1;color:var(--bois);overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.mc-desc{display:flex;align-items:center;gap:8px;margin:8px 0;padding:7px 10px;border-left:4px solid var(--bois);border-radius:10px;background:var(--bg);font-style:italic;font-size:14px}
.mc-desc i{color:var(--mut)}
.mc-edit{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--bois);background:var(--card);box-shadow:0 2px 0 var(--line);display:grid;place-items:center;cursor:pointer;font-style:normal}
.mc-edit .ico,.mc-edit img.emo{width:16px;height:16px}
.mc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.mc-a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.mc-a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.mc-a.chaud{border-color:#c98a2a;background:linear-gradient(180deg,#fff1c2,var(--bg))}
.mc-a-ico{position:relative;font-size:26px;line-height:1}.mc-a-ico .ico,.mc-a-ico img.ico-img{width:30px;height:30px}
.mc-a-ico .nl-badge{position:absolute;top:-6px;right:-12px}
.mc-a b{font-size:15px}.mc-a small{font-size:11.5px;color:var(--mut);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-membres{display:flex;flex-direction:column;gap:6px}
.mc-m{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line);padding:4px 6px 4px 4px}
.mc-m.moi{border-color:var(--acc);box-shadow:0 0 0 1.5px var(--acc),0 2px 0 var(--line)}
.mc-m-b{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:2px;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.mc-m-b .ch-av{flex:none;width:34px;height:34px;font-size:16px}
.mc-m-t{min-width:0;flex:1}.mc-m-t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-m-t > small{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-m-t .ico,.mc-m-t img.emo{width:14px;height:14px;vertical-align:-2px}
.mc-toi{font-size:11px;font-weight:900;padding:0 6px;border-radius:999px;background:var(--acc);color:var(--accink);vertical-align:2px}
.mc-ex{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--bad);background:var(--card);color:var(--bad);font-weight:900;cursor:pointer}
.mc-quitter{display:block;margin:0 auto 4px;color:var(--bad)}
@media (orientation:landscape) and (max-height:500px){.mc-actions{grid-template-columns:repeat(4,1fr)}.mc-a small{display:none}.mc-carte .blason{width:50px;height:50px}.mc-nom{font-size:24px}}
.mc-stats{font-size:12.5px;color:var(--mut)}.mc-stats b{color:var(--ink)}.mc-stats .ico,.mc-stats img.emo{width:14px;height:14px;vertical-align:-2px}

/* ---------- Mes stats (2026-11-11) ---------- */
.st-morts2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.st-mort{display:flex;align-items:center;gap:8px;padding:5px 8px;border:2px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line);min-width:0}
.st-mort-p{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px var(--line);display:grid;place-items:center;font-size:24px;filter:grayscale(1)}
.st-mort-p .portrait{width:100%;height:100%;border-radius:0}.st-mort-p .portrait img{width:100%;height:100%;object-fit:cover}
.st-mort b{display:block;font-size:14px}.st-mort small{display:block;font-size:11px;color:var(--mut);line-height:1.2}
.st-cadre{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:8px 12px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.st-cadre > span:nth-child(2){flex:1;min-width:0}.st-cadre b{display:block;font-size:15px}.st-cadre small{display:block;font-size:12px;color:var(--mut)}

/* ---------- Défenses et camion du bastion (2026-11-11) ---------- */
.bd-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-bottom:10px}
.bd-case{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 6px;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
.bd-ico{position:relative;width:62px;height:62px;display:grid;place-items:center;background:url(images/case.webp) center/100% 100%;font-size:30px}
.bd-ico .ico,.bd-ico img.ico-img{width:40px;height:40px}
.bd-case.sel .bd-ico{background-image:url(images/case-sel.webp)}
.bd-ico .pret{position:absolute;right:-3px;top:-3px;width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;font-style:normal;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
.bd-case b{font-size:12.5px;line-height:1.1;text-align:center}
.bd-niv{font-size:11px;font-weight:900;padding:0 8px;border-radius:999px;border:1.5px solid var(--bois);background:var(--card)}
.bd-case.max .bd-niv{border-color:var(--ok);color:var(--ok)}
.bd-fiche{border:2px solid var(--bois);border-radius:16px;background:var(--bg);box-shadow:0 3px 0 var(--line);padding:10px 12px}
.bd-tete{display:flex;gap:12px;align-items:center}
.bd-ico.grand{flex:none;width:70px;height:70px}.bd-ico.grand .ico,.bd-ico.grand img.ico-img{width:46px;height:46px}
.bd-tete b{display:block;font-size:17px}.bd-tete small{display:block;font-size:12.5px;color:var(--mut);line-height:1.3}
.bd-pips{display:flex;gap:3px;margin:3px 0}.bd-pips i{width:14px;height:6px;border-radius:3px;background:var(--line)}.bd-pips i.on{background:var(--ok)}
.bd-fiche .ings2{justify-content:flex-start}
.bd-go{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px;margin-top:8px}
.bd-go b{font-size:16px}
@media (orientation:landscape) and (max-height:500px){.bd-grille{grid-template-columns:repeat(4,1fr)}.bd-ico{width:48px;height:48px}.bd-ico .ico,.bd-ico img.ico-img{width:30px;height:30px}.bd-ico.grand{width:54px;height:54px}}
.camion-img{display:block;max-width:100%;max-height:min(140px,17vh);width:auto;margin:0 auto 4px;object-fit:contain}
.bd-grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bd-ico{width:56px;height:56px}.bd-ico .ico,.bd-ico img.ico-img{width:36px;height:36px}
@media (max-height:860px){.camion-img + .sub{display:none}}
@media (orientation:landscape) and (max-height:500px){.bd-zone{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;align-items:start}.bd-zone .bd-grille{grid-template-columns:repeat(2,1fr)}.camion-img{display:none}.camion-img + .sub{display:none}}
.bj{display:flex;flex-direction:column;gap:4px}
.bj-l{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.bj-t{font-size:11px;color:var(--mut);white-space:nowrap}
.bj .ch-jour{margin:6px 0 2px}

/* ---------- Opération « L'immeuble » (2026-11-11) ---------- */
.rd-regles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.rd-regles span{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 4px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
.rd-regles b{font-size:18px;font-weight:900}.rd-regles b .ico,.rd-regles b img.emo{width:20px;height:20px;vertical-align:-3px}
.rd-regles small{font-size:11px;color:var(--mut);line-height:1.15}
.rd-etages{position:relative;display:flex;justify-content:space-between;margin:10px 4px 2px}
.rd-etages::before{content:"";position:absolute;left:14px;right:14px;top:13px;height:3px;background:var(--bois);border-radius:2px}
.rd-e{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:20%}
.rd-e i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;background:var(--card);border:2.5px solid var(--bois);box-shadow:0 2px 0 var(--line)}
.rd-e:last-child i{background:linear-gradient(180deg,#f6c86a,#e09a2f);border-color:#9a6512}
.rd-e small{font-size:10.5px;font-weight:800;text-align:center;line-height:1.1;color:var(--mut)}
.rd-places{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:6px}
.rd-p{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;min-width:0}
.rd-por{width:52px;height:52px;border-radius:12px;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--bois),0 3px 0 3px var(--line);background:var(--card);font-size:30px}
.rd-por .portrait{width:100%;height:100%;border-radius:0}.rd-por .portrait img{width:100%;height:100%;object-fit:cover}
.rd-por.vide{box-shadow:none;border:2.5px dashed var(--line);background:none;color:var(--mut);font-weight:900;font-size:24px}
.rd-p.option .rd-por.vide{opacity:.55}
.rd-p.moi .rd-por{box-shadow:0 0 0 2.5px var(--acc),0 3px 0 3px var(--line)}
.rd-p b{font-size:12.5px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-p small{font-size:10.5px;color:var(--mut);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-p .rd-por.vide + small{margin-top:4px}
.rd-arme .ico,.rd-arme img.ico-img,.rd-arme img.emo{width:13px;height:13px;vertical-align:-2px}
.rd-rem{display:flex;align-items:center;gap:10px;padding:6px 8px;border:2px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line);margin-bottom:6px}
.rd-rem.ok{border-color:var(--ok)}
.rd-rem .bd-ico{flex:none;width:48px;height:48px}.rd-rem .bd-ico .ico,.rd-rem .bd-ico img.ico-img{width:32px;height:32px}
.rd-rem-t{flex:1;min-width:0}.rd-rem-t b{display:block;font-size:14px}.rd-rem-t > small{display:block;font-size:11.5px;color:var(--mut)}
.ings2.mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.ings2.mini .ing2{flex-direction:row;gap:3px;align-items:center}
.ings2.mini .ing2-case{width:24px;height:24px}.ings2.mini .ing2-case .ico,.ings2.mini .ing2-case img.ico-img{width:16px;height:16px}.ings2.mini .ing2 b{font-size:11px}
.rd-rem-b{flex:none;width:44px;height:44px;padding:0;font-size:20px}
.rd-chat{display:block;margin:2px auto 0}
.raid-tete .raid-img{height:clamp(90px,14vh,150px)}
.ings2.mini{flex-wrap:nowrap}
.rd-rem{padding:5px 8px}
@media (max-height:860px){.rd-etages + .bl-note{display:none}}
@media (orientation:landscape) and (max-height:500px){.raid-tete .raid-img{height:70px}.rd-regles small{display:none}.rd-por{width:40px;height:40px}}
.rd-rem{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.rd-mat{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:2px}
.rd-m{display:flex;align-items:center;gap:4px;justify-content:center;padding:2px 4px;border-radius:10px;background:var(--card)}
.rd-m .ing2-case{width:28px;height:28px;flex:none}.rd-m .ing2-case .ico,.rd-m .ing2-case img.ico-img{width:18px;height:18px}
.rd-m b{font-size:12px;font-weight:900;padding:0 6px;border-radius:999px;color:#fff;background:var(--bad)}
.rd-m.ok b{background:var(--ok)}
.rd-rem-b:disabled{opacity:.5}

/* ---------- Marché de Marco (2026-11-11) ---------- */
.mk-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mk-pills span{font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;border:1.5px solid var(--bois);background:var(--bg)}
.mk-pills .ico,.mk-pills img.emo{width:14px;height:14px;vertical-align:-3px}
.mk-offres{display:flex;flex-direction:column;gap:8px}
.mk-o{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:6px;padding:8px 10px;border:2px solid var(--bois);border-radius:16px;background:var(--bg);box-shadow:0 3px 0 var(--line)}
.mk-o.fait{opacity:.6}
.mk-cote{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;text-align:center}
.mk-t{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.mk-case{position:relative;width:52px;height:52px;display:grid;place-items:center;background:url(images/case.webp) center/100% 100%;font-size:26px}
.mk-case .ico,.mk-case img.ico-img{width:32px;height:32px}
.mk-case i{position:absolute;right:-6px;bottom:-4px;font-style:normal;font-size:12px;font-weight:900;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--card)}
.mk-cote b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-a{font-size:11px;color:var(--ok);font-weight:800}.mk-a.ko{color:var(--bad)}
.mk-fl{font-size:22px;font-weight:900;color:var(--bois)}
.mk-go{padding:10px 10px;font-size:14px;flex:none;white-space:nowrap}
@media (max-width:400px){.mk-o{grid-template-columns:1fr auto 1fr}.mk-go{grid-column:1/-1}}
.tuiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tuiles.t4 .tuile small{font-size:10.5px;line-height:1.15}

/* ---------- Fiche du refuge en carte (2026-11-11, comme le bastion) ---------- */
.rf-fiche{border:2px solid var(--bois);border-radius:16px;background:var(--bg);box-shadow:0 3px 0 var(--line);padding:10px 12px}
.rf-fiche .invfiche{border:0;background:none;box-shadow:none;padding:0;margin:0}
.rf-fiche .invfiche .em{width:64px;height:64px;flex:none;display:grid;place-items:center;background:url(images/case-sel.webp) center/100% 100%}
.rf-fiche .invfiche .em .ico,.rf-fiche .invfiche .em img.ico-img{width:42px;height:42px}
.rf-fiche .titre-butin{margin:10px 0 4px}
.rf-fiche .ings2{justify-content:flex-start;margin:0 0 8px}
.rf-fiche > .btn,.rf-fiche .btn-travail{margin-bottom:0!important}
.resume.rs{margin-bottom:6px}.rs-lien{margin-top:-2px}

/* Boutons d'action du refuge (2026-11-11) : verbe à gauche, « qui travaille » en pastille à droite, même hauteur que les autres boutons */
.btn.travail{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:10px 12px}
.btn.travail > span{font-size:17px}
.btn.travail .qui{padding:2px 10px 2px 3px;border-radius:999px;background:rgba(0,0,0,.12);opacity:1}
.btn.travail .mini{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:18px}
.btn.travail .mini .portrait{width:100%;height:100%;border-radius:0;box-shadow:none}.btn.travail .mini .portrait img{width:100%;height:100%;object-fit:cover}
.btn.travail .mini img.ico-img{width:22px;height:22px}
.rf-fiche [data-act="build"]{padding:12px;font-size:17px}
.rf-sol{position:relative;display:block;height:9px;border-radius:999px;background:rgba(0,0,0,.13);overflow:hidden;margin:4px 0}
.rf-sol i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--ok)}
.rf-sol i.apres{background:rgba(70,140,60,.35)}
.rf-sol i.moy{background:#d98e2b}.rf-sol i.ko,.rf-sol i.bas{background:var(--bad)}
.rf-sol i.mid{background:#d98e2b}.rf-sol i.lo{background:var(--bad)}

/* ---------- Onglet Voiture (2026-11-11) ---------- */
.vt-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
.vt-tete b{font-size:15px}
.vt-etat{font-size:12px;font-weight:900;padding:2px 10px;border-radius:999px;border:1.5px solid var(--bad);color:var(--bad);background:var(--bg);white-space:nowrap}
.vt-etat.ok{border-color:var(--ok);color:var(--ok)}
.vt-etat .ico,.vt-etat img.emo{width:14px;height:14px;vertical-align:-2px}
.garage{border-radius:16px;box-shadow:0 3px 0 var(--line)}
.vt-pieces{display:flex;justify-content:center;gap:14px;margin:6px 0 2px}
.vt-p{display:flex;flex-direction:column;align-items:center;gap:2px}
.vt-p .ing2-case{position:relative;width:44px;height:44px}
.vt-p .ing2-case .ico,.vt-p .ing2-case img.ico-img{width:28px;height:28px}
.vt-p:not(.ok) .ing2-case > .ico,.vt-p:not(.ok) .ing2-case > img.ico-img{filter:grayscale(1);opacity:.4}
.vt-p .pret{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;font-style:normal;font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
.vt-p small{font-size:11px;font-weight:800;color:var(--mut)}.vt-p.ok small{color:var(--ink)}
.vt-ess{display:flex;align-items:center;gap:10px;margin:10px 0 8px;padding:8px 10px;border:2px solid var(--bois);border-radius:16px;background:var(--bg);box-shadow:0 3px 0 var(--line)}
.vt-ess > .ing2-case{flex:none;width:50px;height:50px}.vt-ess > .ing2-case .ico,.vt-ess > .ing2-case img.ico-img{width:32px;height:32px}
.vt-ess-t{flex:1;min-width:0}
.vt-ess-l{font-size:13px;font-weight:800;color:var(--mut)}.vt-ess-l b{font-size:22px;color:var(--ink)}
.vt-jauge{display:block;height:10px;border-radius:999px;background:rgba(0,0,0,.13);box-shadow:inset 0 1px 1px rgba(0,0,0,.15);overflow:hidden;margin:3px 0}
.vt-jauge i{display:block;height:100%;border-radius:999px;background:var(--ok)}.vt-jauge i.mid{background:#d98e2b}.vt-jauge i.lo{background:var(--bad)}
.vt-ess small{display:block;font-size:11.5px;color:var(--mut);line-height:1.25}
.vt-plein{width:100%;flex-wrap:wrap}
.vt-plein small{font-size:12px;font-weight:700;opacity:.8}
.vt-plein .ico,.vt-plein img.ico-img{width:24px;height:24px}
.garage .pleg{display:none}
body:not(.pc) .sheet.a-onglets{height:88%}
/* Marges (2026-11-11) : bouton d'une fiche du refuge détaché du texte, boutons du bas détachés du récit */
.rf-fiche > .btn,.rf-fiche > .btn.travail{margin-top:10px!important}
.sheet .tuiles.t4{margin-bottom:4px}
.sheet .tuiles + .titre-butin{margin-top:12px}
.sheet .lj + .row,.sheet .puces + .row,.sheet .journal + .row{margin-top:12px}
.sheet .fil + .row,.sheet .fil + .loc{margin-top:12px}
/* Coches des cases (2026-11-11, retour de Fabien : « un check suffit ») : l'icône peinte seule, sans rond vert derrière */
.islot .pret,.bd-ico .pret,.vt-p .pret{background:none;box-shadow:none;border-radius:0}
.islot .pret img.ico-img,.bd-ico .pret img.ico-img,.vt-p .pret img.ico-img{width:20px!important;height:20px!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))!important;opacity:1!important}
.islot .pret img.ico-img{width:17px!important;height:17px!important}

/* ---------- « Qui part fouiller ? » (2026-11-11) ---------- */
.qp-tete{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.qp-n{flex:none;font-size:12px;font-weight:900;padding:2px 10px;border-radius:999px;background:var(--acc);color:var(--accink)}
.qp-tete small{font-size:12px;color:var(--mut);line-height:1.2}
.qprow{border-radius:16px;box-shadow:0 3px 0 var(--line)}
.qprow.choisi{border-color:#c9a227;box-shadow:0 0 0 2px #c9a227,0 3px 0 #a8841c;background:linear-gradient(90deg,#fff3c4,var(--bg) 70%)}
.qprow.hors .qp-por{filter:grayscale(.6);opacity:.75}
.qp-por{position:relative;flex:none;width:52px;height:52px;border-radius:12px;overflow:visible;display:grid;place-items:center;font-size:32px}
.qp-por .portrait{width:52px;height:52px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2.5px var(--bois)}
.qp-por .portrait img{width:100%;height:100%;object-fit:cover}
.qprow.choisi .qp-por .portrait{box-shadow:0 0 0 2.5px #c9a227}
.qp-coche{position:absolute;right:-6px;bottom:-6px;font-style:normal;line-height:1}
.qp-coche img.ico-img{width:20px!important;height:20px!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.qp-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:1}
.qp-t b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:19px;line-height:1}
.qp-st{font-size:10.5px;font-weight:900;padding:0 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);white-space:nowrap}
.qp-st.ok{border-color:var(--ok);color:var(--ok)}.qp-st.moy{border-color:#c98a2a;color:#9a6512}.qp-st.ko{border-color:var(--bad);color:var(--bad)}
.qp-st .ico,.qp-st img.emo{width:12px;height:12px;vertical-align:-2px}
.qp-bar{display:block;width:100%;max-width:120px;height:6px;border-radius:999px;background:rgba(0,0,0,.13);overflow:hidden}
.qp-bar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.qp-bar i.mid{background:#d98e2b}.qp-bar i.lo{background:var(--bad)}
.qp-bar.en i{background:#e0b028}
.qp-noms{display:block;font-size:11px;font-weight:700;opacity:.8}
[data-act="fouille"].btn-jeu{flex-direction:column;gap:0}
/* En-tête (2026-11-11, retour de Fabien) : chapitre et saison en petites pastilles au lieu du texte souligné en pointillés */
.chapcourt{display:flex!important;flex-wrap:wrap;gap:4px;text-decoration:none;overflow:visible;max-width:none!important;margin-top:3px}
.chapcourt .ch-sep{display:none}
.chapcourt .ch-btn{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:999px;border:1.5px solid rgba(255,236,200,.45);background:rgba(30,18,8,.45);color:#fff6e6;font-weight:800;font-size:11px;line-height:1.5;text-shadow:none;white-space:nowrap}
.chapcourt .ch-btn:hover{text-decoration:none;border-color:rgba(255,236,200,.8)}
.chapcourt .ch-btn .ico,.chapcourt .ch-btn img.emo{width:13px;height:13px}
body:not(.fond) .chapcourt .ch-btn{background:var(--bg);color:var(--ink);border-color:var(--bois)}
body.pc .chapcourt .ch-saison{display:inline-flex!important}
body.pc #app .chapcourt .ch-btn{font-size:13px}
/* Cartes de la famille : 2 barres plus épaisses ; faim / soif seulement quand elles sont basses (en rouge) ; les cases restent alignées en bas */
.mc{display:flex;flex-direction:column}
.mc-barres{display:flex;flex-direction:column;gap:3px;margin:4px 0 2px}
.mc-barres .bar{height:9px}
.mc .slots,.mc .porte{margin-top:auto}
.qp-barres{display:flex;flex-direction:column;gap:2px;width:100%;max-width:140px}
.qp-barres .jauge,.qp-barres > *{margin:0}
[data-act="fouille"].btn-jeu{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px}
[data-act="fouille"].btn-jeu .qp-noms{flex-basis:100%;text-align:center}
.row:has(> [data-act="fouille"]){align-items:stretch}

/* ---------- « Où envoyer l'équipe ? » (2026-11-11) ---------- */
.sheet p.msg.lo-alerte{font-size:13px;line-height:1.35;padding:6px 10px;margin:0 0 8px}
.lo-eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;padding:6px 8px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
.lo-m{display:flex;align-items:center;gap:6px}
.lo-por{flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;box-shadow:0 0 0 2px var(--bois);display:grid;place-items:center;font-size:22px}
.lo-por .portrait{width:100%;height:100%;border-radius:0}.lo-por .portrait img{width:100%;height:100%;object-fit:cover}
.lo-m b{display:block;font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;font-size:16px;line-height:1}
.lo-m small{font-size:11px;color:var(--mut);white-space:nowrap}
.lo-m small .ico,.lo-m small img.emo{width:12px;height:12px;vertical-align:-2px}
.lo-pills{display:flex;gap:4px;margin-left:auto}
.lo-pills span{font-size:11.5px;font-weight:900;padding:1px 8px;border-radius:999px;border:1.5px solid var(--bois);background:var(--card);white-space:nowrap}
.lo-pills .ico,.lo-pills img.emo{width:13px;height:13px;vertical-align:-2px}
.cl-infos{align-items:center;padding:3px 6px 0}
.cl-infos > span{font-size:11px;font-weight:900;padding:0 7px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);white-space:nowrap}
.cl-infos .cl-en{border-color:#e0b028}
.cl-infos .dg.ok{border-color:var(--ok)}.cl-infos .dg.moy{border-color:#c98a2a;color:#9a6512}.cl-infos .dg.ko{border-color:var(--bad)}
.cl-infos .ico,.cl-infos img.emo{width:12px;height:12px;vertical-align:-2px}
.cl-conds span{border-radius:999px;padding:1px 5px;line-height:1.2}
.cl-conds .ico,.cl-conds img.emo{width:15px;height:15px;vertical-align:-3px}
.cl-conds .ko{box-shadow:inset 0 0 0 1.5px var(--bad)}.cl-conds .ok{box-shadow:inset 0 0 0 1.5px var(--ok)}.cl-conds .moy{box-shadow:inset 0 0 0 1.5px #c98a2a}
.carte-lieu{border-radius:16px;box-shadow:0 3px 0 var(--line)}
/* Logo du jeu avant « Jour N » aussi sur téléphone (2026-11-11, demande de Fabien) */
body:not(.pc) #app .hd-logo{display:block;width:46px;height:46px;flex:0 0 auto;align-self:center;margin-right:-2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
@media (max-width:370px){body:not(.pc) #app .hd-logo{width:38px;height:38px}}
@media (orientation:landscape) and (max-height:500px){body:not(.pc) #app .hd-logo{width:36px;height:36px}}
/* Menu ☰ : toutes les icônes à la même taille (peintes, dessinées ou emoji) */
.menugrille .mt b img,.menugrille .mt b svg,.menugrille .mt b .ico{width:20px!important;height:20px!important;vertical-align:-4px;object-fit:contain}
@media (orientation:landscape) and (max-height:500px){.menugrille .mt b img,.menugrille .mt b svg,.menugrille .mt b .ico{width:15px!important;height:15px!important;vertical-align:-2px}}
/* Correctif (2026-11-11) : avec le logo, les pastilles du haut étaient écrasées. Sur téléphone, chapitre et saison l'un sous l'autre ; les icônes des pastilles ne rétrécissent plus */
body:not(.pc) .chapcourt .ch-btn{font-size:10.5px;padding:0 7px}
body:not(.pc) .chips .chip img.ico-img,body:not(.pc) .chips .chip svg,body:not(.pc) .chips .chip .ico{flex:none}
@media (orientation:landscape) and (max-height:500px){body:not(.pc) .chapcourt{flex-direction:row}}
.zint img.ico-img,.zint svg,.zn img.ico-img,.zn svg{flex:none;width:14px!important;height:14px!important}
/* Pastilles du haut sur PC (2026-11-11) : l'icône ne rétrécit jamais (elle tombait à 1-8 px) ; le petit nom disparaît quand la place manque */
.chips .chip > img.ico-img,.chips .chip > svg,.chips .chip > .ico{flex:none!important}
body.pc #app .chip > img.ico-img{width:22px;height:22px}
body.pc #app .chip{justify-content:center;min-width:0}
/* En-tête (2026-11-12, retour de Fabien) : sur téléphone, la saison en icône seule à côté du chapitre ; sur PC, retour à l'en-tête d'avant (texte, saison sur sa ligne) */
body:not(.pc) .chapcourt .ch-saison .ch-nom{display:none}
body:not(.pc) .chapcourt .ch-saison{padding:0 6px}
body.pc .chapcourt{display:block!important;margin-top:2px}
body.pc .chapcourt .ch-btn{display:inline;padding:0;border:0;background:none;border-radius:0;color:inherit;font-size:inherit;font-weight:800;line-height:inherit;text-shadow:inherit}
body.pc .chapcourt .ch-saison{display:block!important;font-size:.85em;opacity:.9}
body.pc .chapcourt .ch-btn:hover{text-decoration:underline}
/* PC : le petit nom passe sous le chiffre (à côté, il ne tenait qu'en écrasant l'icône à 2 px) */
body.pc #app .chip:has(.chip-lbl){display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;row-gap:0;align-items:center;justify-content:center;line-height:1}
body.pc #app .chip:has(.chip-lbl) > img.ico-img,body.pc #app .chip:has(.chip-lbl) > svg,body.pc #app .chip:has(.chip-lbl) > .ico{grid-row:1 / span 2;width:22px;height:22px}
body.pc #app .chip .chip-lbl{grid-column:2;font-size:9.5px!important;letter-spacing:.02em;line-height:1.1;display:block!important}
@media (max-width:1400px){ body.pc #app .chip .chip-lbl{display:none!important} body.pc #app .chip:has(.chip-lbl){display:flex!important} }
/* PC : le bouton Menu n'a pas de chiffre, son nom se centre à côté de l'icône (2026-11-12) */
body.pc #app .chip.chipson .chip-lbl{grid-row:1 / span 2;align-self:center}

/* ---------- Menu ☰ raccord avec la DA (2026-11-12) ---------- */
.mn-tete{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:6px 10px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line)}
.mn-tete > div{flex:1;min-width:0}
.mn-tete b{display:block;font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:22px;line-height:1}
.mn-tete > div small{display:block;font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-p{flex:none;display:flex;flex-direction:column;align-items:center;font-weight:900;font-size:15px;line-height:1.05;padding:3px 9px;border-radius:12px;border:1.5px solid var(--bois);background:var(--card)}
.mn-p small{font-size:9.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.mn-p .ico,.mn-p img.emo{width:15px!important;height:15px!important;vertical-align:-2px}
.menugrille .mt{display:flex;align-items:center;gap:8px;padding:6px 8px}
.menugrille .mt.chaud{border-color:#c9a227;box-shadow:0 0 0 2px #c9a227,0 3px 0 #a8841c}
.mt-i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 2px var(--bois);font-size:18px;line-height:1}
.mt-i img,.mt-i svg,.mt-i .ico{width:22px!important;height:22px!important;object-fit:contain;vertical-align:0}
.mt-t{min-width:0;flex:1}
.menugrille .mt b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;font-size:17px;line-height:1.05}
.mn-reglages{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin:0 0 10px}
.mr{font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 5px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line);cursor:pointer;min-width:0}
.mr:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.mr-i{font-size:18px;line-height:1;filter:grayscale(1);opacity:.55}
.mr.on .mr-i{filter:none;opacity:1}
.mr-i img,.mr-i svg,.mr-i .ico{width:22px!important;height:22px!important;object-fit:contain}
.mr small{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mr i{font-style:normal;font-size:10px;font-weight:900;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.12);color:var(--mut)}
.mr.on i{background:var(--ok);color:#fff}
@media (orientation:landscape) and (max-height:500px){
  .mn-tete{padding:4px 8px;margin:0 0 5px} .mn-tete b{font-size:18px}
  .menugrille .mt{padding:4px 6px;gap:6px} .mt-i{width:26px;height:26px} .mt-i img,.mt-i svg,.mt-i .ico{width:16px!important;height:16px!important}
  .menugrille .mt b{font-size:14px} .mn-reglages{margin:0 0 6px} .mr{flex-direction:row;justify-content:center;gap:5px;padding:4px} .mr-i img,.mr-i svg,.mr-i .ico{width:16px!important;height:16px!important}
}
@media (orientation:landscape) and (max-height:500px){ .menugrille .mt{gap:4px;padding:4px 5px} .mt-i{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--bois)} .mt-i img,.mt-i svg,.mt-i .ico{width:14px!important;height:14px!important} .menugrille .mt b{font-size:13px;letter-spacing:.2px} }

/* Portraits dans le récit d'une mission (2026-11-12) */
.sheet p.msg.mis-recit{display:flex;align-items:center;gap:10px}
.mis-pors{flex:none;display:flex}
.mis-pors img{width:58px;height:58px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 2.5px var(--bois),0 2px 0 var(--line);background:#e8dcc4}
.mis-pors img + img{margin-left:-14px;transform:rotate(4deg)}
@media (orientation:landscape) and (max-height:500px){ .mis-pors img{width:44px;height:44px} }
/* Écran du sac sur PC (2026-11-12, retour de Fabien : texte minuscule dans les onglets des maisons, bouton Bonus trop petit) */
@media (min-width:1100px) and (min-height:620px){
  #app:has(> .pk) > .tabs{gap:10px}
  #app:has(> .pk) > .tabs .tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:6px 12px;font-size:17px;font-weight:900;line-height:1.1}
  #app:has(> .pk) > .tabs .tab small{font-size:12.5px;font-weight:700;opacity:.8;margin-left:2px}
  #app:has(> .pk) > .tabs .tab img,#app:has(> .pk) > .tabs .tab svg,#app:has(> .pk) > .tabs .tab .ico{width:26px!important;height:26px!important}
  #app:has(> .pk) > .tabs .tab:disabled{opacity:.7;filter:grayscale(.5)}
  .pk [data-act="adstart"]{min-height:50px;align-self:stretch;font-size:15px;padding:0 16px}
  .pk [data-act="adstart"] .ico,.pk [data-act="adstart"] img.emo{width:20px;height:20px;vertical-align:-4px}
}
/* Écran d'histoire sur PC : 3 pastilles sur une ligne, « Une famille de 4 » seulement sur téléphone (2026-11-12) */
@media (min-width:1100px) and (min-height:620px){ .ir-puces .ir-famille{display:none} }
@media (min-width:1100px) and (max-width:1300px) and (min-height:620px){ .panneau.intro .ir-puces{gap:4px} .panneau.intro .ir-puces span{font-size:12px;padding:3px 7px} }

/* ---------- Fenêtre d'un emplacement d'équipement (2026-11-12) ---------- */
.se-tete{display:flex;align-items:center;gap:10px;margin:0 40px 10px 0}
.se-por{flex:none;width:48px;height:48px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2.5px var(--bois);display:grid;place-items:center;font-size:30px}
.se-por .portrait{width:100%;height:100%;border-radius:0}.se-por .portrait img{width:100%;height:100%;object-fit:cover}
.se-tete small{display:block;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.se-tete b{display:block;font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:24px;line-height:1}
.se-carte{font:inherit;color:var(--ink);text-align:left;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line);margin:0 0 8px}
.se-carte.choix{cursor:pointer}
.se-carte.choix:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.se-case{flex:none;width:52px;height:52px;display:grid;place-items:center;background:url(images/case.webp) center/100% 100% no-repeat;font-size:26px}
.se-case img,.se-case svg,.se-case .ico{width:34px!important;height:34px!important;object-fit:contain}
.se-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.se-t b{font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;font-size:19px;line-height:1}
.se-pills{display:flex;flex-wrap:wrap;gap:3px}
.se-pills span{font-size:11px;font-weight:800;padding:0 7px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);line-height:1.5}
.se-sol{display:flex;align-items:center;gap:6px}
.se-bar{flex:1;max-width:160px;height:7px;border-radius:999px;background:rgba(0,0,0,.13);overflow:hidden}
.se-bar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.se-bar i.mid{background:#d98e2b}.se-bar i.lo{background:var(--bad)}
.se-sol small{font-size:11px;font-weight:700;color:var(--mut);white-space:nowrap}
.se-ranger{flex:none;font:inherit;font-size:13px;font-weight:900;color:var(--ink);padding:7px 10px;border-radius:12px;border:2px solid var(--bois);background:var(--card);box-shadow:0 2px 0 var(--line);cursor:pointer}
.se-go{flex:none;font-size:13px;font-weight:900;padding:6px 12px;border-radius:999px;background:var(--acc);color:var(--accink);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.se-vide{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px dashed var(--line);border-radius:14px;color:var(--mut);font-weight:800;margin:0 0 8px}
.se-vide .se-case{opacity:.5;filter:grayscale(1)}
.se-liste{max-height:46vh;overflow:auto}
@media (orientation:landscape) and (max-height:500px){
  .se{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:start}
  .se > .se-tete{grid-column:1 / -1;margin-bottom:4px} .se-tete b{font-size:20px} .se-por{width:38px;height:38px}
  .se > :nth-child(2){grid-column:1;grid-row:2} .se > :nth-child(3){grid-column:1;grid-row:3}
  .se > :nth-child(4){grid-column:2;grid-row:2} .se > :nth-child(5){grid-column:2;grid-row:3}
  .se-carte{padding:5px 8px;gap:8px;margin-bottom:6px} .se-case{width:40px;height:40px} .se-case img,.se-case svg,.se-case .ico{width:26px!important;height:26px!important}
  .se-t b{font-size:16px} .se-liste{max-height:none}
}
@media (orientation:landscape) and (max-height:500px){ .se-pills{flex-wrap:nowrap;overflow:hidden} .se-pills span:nth-child(n+2){display:none} .se-t{gap:2px} .se-ranger{padding:5px 8px;font-size:12px} .se-go{padding:4px 9px;font-size:12px} }
.se-pills span{white-space:nowrap;font-size:12px}
.se-pills .ico,.se-pills img.emo{width:13px;height:13px;vertical-align:-2px}
/* Cartes de la famille sur PC : un peu d'air entre le portrait et le statut (2026-11-12, le cadre du portrait touchait la pastille) */
body.pc #app .mc .mc-st{margin-top:8px!important}
/* Scènes de folie (2026-11-12) : bandeau du bilan de nuit cadré sur le personnage, portrait halluciné dans la fiche */
.banniere.folie img{object-position:50% 40%}
.mf-alerte.mf-folie{display:flex;align-items:center;gap:8px}
.mf-alerte.mf-folie img{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 2px var(--bad)}

/* ---------- La Légende du mois (2026-11-12) ---------- */
.pcadre.legende-mois{background:linear-gradient(90deg,#ffe9a8,#f7c948,#ffe9a8);background-size:200% 100%;animation:legBrille 3s linear infinite;color:#4a3000;border-color:#b8860b}
@keyframes legBrille{from{background-position:0 0}to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.pcadre.legende-mois{animation:none}}
.couronne-l{font-style:normal;margin-right:3px}
.couronne-l .ico,.couronne-l img,.couronne-l svg{width:14px!important;height:14px!important;vertical-align:-2px}
.lg-carte{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:0 0 10px;border:2px solid #b8860b;border-radius:14px;background:linear-gradient(135deg,#fff3c4,#f7d774);box-shadow:0 3px 0 #a8841c;color:#3a2a00}
.lg-carte.vide{background:var(--bg);border-color:var(--bois);box-shadow:0 3px 0 var(--line);color:var(--ink)}
.lg-carte .lg-ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px #b8860b;font-size:24px}
.lg-carte .lg-ico .ico,.lg-carte .lg-ico img,.lg-carte .lg-ico svg{width:28px!important;height:28px!important}
.lg-carte > span:nth-child(2){flex:1;min-width:0}
.lg-carte small{display:block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.lg-carte b{display:block;font-size:18px;margin:2px 0}
.lg-carte em{display:block;font-style:normal;font-size:12px;font-weight:700}
.lg-fin{flex:none;font-size:11px;font-weight:900;padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.12)}
.classement li.leg{background:linear-gradient(90deg,#fff3c4,transparent 80%)}
.classement.pantheon .pth-mois{display:block;font-size:11px;font-weight:700;color:var(--mut)}
.lg-jauge{margin:8px 0;padding:7px 10px;border:2px solid #b8860b;border-radius:12px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
.lg-jauge.moi{background:linear-gradient(90deg,#fff3c4,var(--bg))}
.lg-j-t{display:block;font-size:12.5px;font-weight:700}
.lg-j-t .ico,.lg-j-t img,.lg-j-t svg{width:15px!important;height:15px!important;vertical-align:-3px}
.lg-j-bar{display:block;height:8px;margin:5px 0 3px;border-radius:999px;background:rgba(0,0,0,.13);overflow:hidden}
.lg-j-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#e0b028,#f7c948)}
.lg-jauge small{font-size:11px;color:var(--mut);font-weight:700}
.go-legende{display:block;margin-top:4px;font-weight:900;color:#f7c948}
.go-legende .ico,.go-legende img,.go-legende svg{width:18px!important;height:18px!important;vertical-align:-3px}
.m-legende{display:flex;align-items:center;gap:8px;margin:6px 0 0;padding:5px 9px;border-radius:12px;background:linear-gradient(90deg,rgba(247,201,72,.25),transparent);border:1.5px solid rgba(247,201,72,.6)}
.m-legende[hidden]{display:none}
.m-legende .ml-ico .ico,.m-legende .ml-ico img,.m-legende .ml-ico svg{width:20px!important;height:20px!important}
.m-legende > span:nth-child(2){flex:1;min-width:0}
.m-legende small{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.m-legende b{display:block;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-legende .ml-pts{flex:none;font-weight:900;font-size:13px}

/* ---------- Raja, le tigre de la Légende (2026-11-12) ---------- */
.tigre-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,#f7c948,#e08a1e);color:#3a2000;border-color:#b8860b;font-weight:900}
.tigre-btn img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #7a4a00}
.tigre-btn:disabled{background:var(--card);color:var(--mut);border-color:var(--line)}
.tigre-btn:disabled img{filter:grayscale(1);opacity:.6}
.tigre-saut{position:fixed;z-index:2000;left:-60vw;top:35vh;width:min(70vw,620px);pointer-events:none;animation:tigreSaut 1.1s cubic-bezier(.3,.1,.3,1) forwards;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
@keyframes tigreSaut{0%{transform:translate(0,0) rotate(-6deg)}45%{transform:translate(85vw,-14vh) rotate(0)}100%{transform:translate(170vw,6vh) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.tigre-saut{animation:none;left:15vw}}
.tg-tete{display:flex;align-items:center;gap:12px;margin:0 40px 10px 0}
.tg-tete > img{flex:none;width:72px;height:72px;border-radius:14px;object-fit:cover;box-shadow:0 0 0 3px #b8860b,0 3px 0 var(--line)}
.tg-tete small{display:block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.tg-tete b{display:block;font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.6px;font-size:30px;line-height:1}
.tg-tete em{display:block;font-style:normal;font-size:12.5px;font-weight:800}
@media (max-width:420px), (orientation:landscape) and (max-height:500px){ .tigre-btn .tg-txt{display:none} .tigre-btn{padding-left:8px;padding-right:8px} }
body.pc .tigre-btn .tg-txt{display:none}
body.pc .tigre-btn{padding-left:10px;padding-right:10px}
/* Bilan du refuge : ce qui n'est pas encore construit, en cartes grisées (2026-11-12) */
.bilan2 .bl.off{opacity:.62;border-style:dashed;box-shadow:none;background:transparent}
.bilan2 .bl.off .em{filter:grayscale(1)}
.bilan2 .bl.off .bl-niv{background:var(--card);color:var(--mut)}
.bilan2 .bl-afaire{margin-top:10px}
.bl-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bl-chip{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:6px 4px;border:2px dashed var(--line);border-radius:12px;opacity:.75;min-width:0}
.bl-chip .em{filter:grayscale(1)}
.bl-chip .em .ico,.bl-chip .em img,.bl-chip .em svg{width:26px!important;height:26px!important}
.bl-chip b{font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bl-chip small{font-size:10.5px;color:var(--mut);font-weight:700;white-space:nowrap}
.bl-chip .bl-cout .ico,.bl-chip .bl-cout img{width:12px!important;height:12px!important;vertical-align:-2px}
@media (orientation:landscape) and (max-height:500px){ .bl-chip{flex-direction:row;gap:5px;padding:4px 6px} .bl-chip .em .ico,.bl-chip .em img,.bl-chip .em svg{width:20px!important;height:20px!important} .bl-chip small:not(.bl-cout){display:none} }

/* ---------- Portrait couronné de la Légende (2026-11-12) ---------- */
@property --lga{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes lgTourne{to{--lga:360deg}}
@keyframes lgRespire{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes lgBalance{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(4deg) translateY(-2px)}}
@keyframes lgScintille{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
/* Cartes de la famille */
.mc.couronnee{border-color:#b8860b!important;box-shadow:0 0 0 2px #f7c948,0 3px 0 #a8841c}
.mc.couronnee .em{position:relative;isolation:isolate}
.mc.couronnee .em::before{content:"";position:absolute;inset:-5px;border-radius:15px;z-index:-1;background:conic-gradient(from var(--lga),#fff6c9,#f7c948,#b8860b,#f7c948,#fff6c9,#b8860b,#f7c948);animation:lgTourne 4s linear infinite}
.mc-couronne{position:absolute;left:50%;top:-17px;width:30px;z-index:2;font-style:normal;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));animation:lgBalance 3s ease-in-out infinite;pointer-events:none}
.mc-couronne svg{display:block;width:100%;height:auto}
/* Médaillon (carte de la Légende au classement) */
.lg-med{position:relative;flex:none;width:var(--t);height:var(--t);margin-top:12px}
.lg-med img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #7a4a00}
.lg-anneau{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from var(--lga),#fff6c9,#f7c948,#b8860b,#f7c948,#fff6c9,#b8860b,#f7c948);animation:lgTourne 4s linear infinite}
.lg-lueur{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(247,201,72,.6),transparent 62%);animation:lgRespire 2.6s ease-in-out infinite}
.lg-cour{position:absolute;left:50%;top:calc(var(--t) * -0.32);width:calc(var(--t) * .5);font-style:normal;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));animation:lgBalance 3s ease-in-out infinite}
.lg-cour svg{display:block;width:100%;height:auto}
.lg-eclat{position:absolute;width:9px;height:9px;background:#fff6c9;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:lgScintille 2.4s ease-in-out infinite}
.lg-eclat.e1{right:-6px;top:6px}.lg-eclat.e2{left:-7px;bottom:10px;animation-delay:1s}
@media (prefers-reduced-motion:reduce){.mc.couronnee .em::before,.mc-couronne,.lg-anneau,.lg-lueur,.lg-cour,.lg-eclat{animation:none}}

/* Pastille de guerre (2026-11-12) */
.pret-guerre{border-color:#b8452a!important;box-shadow:0 0 0 2px rgba(214,69,58,.35),0 3px 0 var(--line)}
.btn.pret-guerre{animation:lueurGuerre 2.4s ease-in-out infinite}
@keyframes lueurGuerre{0%,100%{box-shadow:0 0 0 2px rgba(214,69,58,.25),0 3px 0 var(--line)}50%{box-shadow:0 0 0 4px rgba(214,69,58,.5),0 3px 0 var(--line)}}
@media (prefers-reduced-motion:reduce){.btn.pret-guerre{animation:none}}

/* ---------- Mon profil (2026-11-12) ---------- */
.av-img{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--bois);background:var(--card)}
.av-img img{width:100%;height:100%;object-fit:cover}
.classement .cl-av{width:28px;height:28px;margin-right:2px}
.classement li .ch-av.cl-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-weight:900;font-size:13px;flex:none;margin-right:2px}
.mn-tete.mn-profil{font:inherit;color:var(--ink);text-align:left;width:100%;cursor:pointer}
.mn-tete.mn-profil:active{transform:translateY(2px)}
.mn-av{width:40px!important;height:40px!important}
.ch-av.mn-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:900;font-size:18px;flex:none}
.pf-tete{display:flex;align-items:center;gap:14px;margin:0 40px 10px 0}
.pf-av{position:relative;flex:none;border:0;background:none;padding:0;cursor:pointer}
.pf-grand{width:78px!important;height:78px!important;box-shadow:0 0 0 3px var(--bois),0 3px 0 var(--line)!important}
.ch-av.pf-grand{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-size:34px;font-weight:900}
.pf-av i{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-style:normal;font-size:10.5px;font-weight:900;padding:1px 8px;border-radius:999px;background:var(--acc);color:var(--accink);white-space:nowrap}
.pf-id{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pf-id small{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.pf-id b{font-size:18px}
.pf-mini{padding:4px 10px;font-size:12.5px;min-height:0}
.pf-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.pf-choix{aspect-ratio:1;max-width:100%;border:0;padding:0;border-radius:50%;overflow:hidden;cursor:pointer;box-shadow:0 0 0 2px var(--bois);background:var(--card)}
.pf-choix img{width:100%;height:100%;object-fit:cover}
.pf-choix.on{box-shadow:0 0 0 3px #c9a227,0 0 0 6px rgba(247,201,72,.4)}
.pf-sans{margin-top:10px}
.pf-histo{display:grid;gap:6px}
.pf-h{display:flex;align-items:center;gap:10px;padding:6px 10px;border:2px solid var(--bois);border-radius:12px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
.pf-h-d{flex:none;width:52px;font-weight:900;font-size:13px;color:var(--mut)}
.pf-h-t{flex:1;min-width:0}
.pf-h-t b{display:block;font-variant-numeric:tabular-nums}
.pf-h-t small{font-size:11.5px;color:var(--mut)}
.pf-h-m{flex:none;font-size:11px;font-weight:900;padding:1px 8px;border-radius:999px;border:1.5px solid var(--line)}
.pf-h-m.cl{border-color:#c9a227;color:#9a6512}
.pf-lignes{display:grid;gap:6px;margin:8px 0}
.pf-comptes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pf-compte{font:inherit;font-weight:900;padding:8px 4px;border-radius:12px;border:2px dashed var(--line);background:transparent;color:var(--mut)}
.pf-compte small{display:block;font-size:10.5px;font-weight:700}
/* « Mon cadre » : le cadre de la Légende en tête (2026-11-12) */
.cadre-leg{display:flex;align-items:center;gap:16px;padding:16px 12px 12px;margin:0 0 10px;border:2px solid #b8860b;border-radius:14px;background:linear-gradient(135deg,#fff3c4,#f7d774);box-shadow:0 3px 0 #a8841c;color:#3a2a00}
.cadre-leg:not(.porte){filter:saturate(.75)}
.cadre-leg .cl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cadre-leg small{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.cadre-leg em{font-style:normal;font-size:12.5px;font-weight:800;line-height:1.3}
.pf-regle{display:block;font-size:11px;font-weight:700;color:var(--mut);letter-spacing:0!important;text-transform:none!important}

/* Profil plus compact (2026-11-12, retour de Fabien) */
.pf-onglets .tab{font-size:14px;padding:6px 4px;min-height:0;line-height:1.1}
.pf-onglets .tab small{font-size:10.5px}
.pf-onglets .tab .ico,.pf-onglets .tab img.emo{width:16px!important;height:16px!important;vertical-align:-3px}
.pf-tuiles .tuile b{font-size:18px}
.pf-tuiles .tuile small{font-size:10px;line-height:1.15}
.sheet p.msg.pf-msg{font-size:13.5px;padding:6px 10px;margin:0 0 8px}
@media (max-width:420px){ .pf-grille{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} }

/* ---------- Fenêtre de la guerre raccord avec la DA (2026-11-12) ---------- */
.gu-camp .blason{overflow:visible!important;width:62px;height:66px;padding-bottom:4px}
.gu-camp .blason img{object-fit:contain}
.gu-infos{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.gu-i{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);white-space:nowrap}
.gu-i.fort{border-color:#b8452a;color:#9a3a22}
.gu-i .ico,.gu-i img.emo{width:14px;height:14px;vertical-align:-3px}
.gu-cibles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gu-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 8px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 3px 0 var(--line);min-width:0}
.gu-c.faite{opacity:.7;box-shadow:none;border-style:dashed}
.gu-av{width:42px!important;height:42px!important}
.ch-av.gu-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:900;font-size:18px}
.gu-c-t{min-width:0;max-width:100%}
.gu-c-t b{display:block;font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;font-size:18px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gu-c-t small{font-size:11.5px;color:var(--mut);font-weight:700}
.gu-etat{font-size:11px;font-weight:900;padding:2px 9px;border-radius:999px;border:1.5px solid var(--line);color:var(--mut)}
.gu-etat.ok{border-color:var(--ok);color:var(--ok)}
.gu-etat .ico,.gu-etat img.emo{width:12px;height:12px;vertical-align:-2px}
.btn.gu-go{width:100%;min-height:0;padding:6px 8px;font-size:14px}
@media (orientation:landscape) and (max-height:500px){ .gu-cibles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .gu-c{padding:6px} .gu-av{width:32px!important;height:32px!important} }

/* Classement des clans raccord avec la DA (2026-11-12) */
.cc-pied{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.cc-p{font-size:12px;font-weight:900;padding:2px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg)}
.cc-p.moi{border-color:#c9a227;color:#9a6512}
.cc-ligues{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.cc-l{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border:2px solid var(--bois);border-radius:12px;background:var(--bg);min-width:0}
.cc-l img,.cc-l svg,.cc-l .ico{width:26px!important;height:26px!important;object-fit:contain}
.cc-l b{font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cc-l small{font-size:10px;color:var(--mut);font-weight:700}
/* Les pièces : 4 par ligne sur téléphone (2026-11-12) */
@media (max-width:520px){ .pz-grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .pz-nom{font-size:11.5px;padding:3px 3px;line-height:1.15} .pz-nom small{display:none} }

/* Logo de l’en-tête cliquable : retour à l’accueil (2026-11-12) */
.hd-logo-b{all:unset;display:contents;cursor:pointer}
.hd-logo-b:focus-visible .hd-logo{outline:2px solid var(--accent,#e0a030);outline-offset:2px;border-radius:50%}

/* Pastille d’état des cartes : « Partante », « Fatiguée » tiennent sur téléphone (2026-11-12, retour de Fabien) */
body:not(.pc) .mc .mc-st{padding:1px 4px;letter-spacing:-.1px}
body:not(.pc) .mc .mc-st .ico,body:not(.pc) .mc .mc-st img.emo{width:11px;height:11px;margin-right:-1px}
@media (max-width:380px){ body:not(.pc) .scene .mc small.mc-st,body:not(.pc) .mc .mc-st{font-size:8.8px!important} }

/* Cartes de lieux : « ⚠️ moyen » au lieu de « danger moyen » (coupé sur PC, 2026-11-12) ; en dernier recours la pastille se raccourcit */
.cl-infos > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cl-infos .cl-en{flex:none}
.cl-infos{gap:3px;padding-left:4px;padding-right:4px}
.cl-infos > span{padding:0 5px}
.cl-infos .ico,.cl-infos img.emo{width:11px;height:11px;margin-right:1px}
/* Bilan du refuge : le bouton ne colle plus aux tuiles « Pas encore construit » quand il n’y a pas de phrase dessous (2026-11-12) */
.bl-go{margin-top:12px}
.bl-note + .bl-go{margin-top:2px}

/* Fenêtre du refuge retouchée (2026-11-12) : résumé en une ligne, fiche plus parlante, matériaux et bouton côte à côte */
.rl{display:flex;align-items:center;gap:5px;margin:0 0 8px;flex-wrap:wrap}
.rl-p{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 6px;border:2px solid var(--bois);border-radius:999px;background:var(--bg);box-shadow:0 2px 0 var(--line);font-size:13px}
.rl-p b{font-weight:900}
.rl-p.ok b{color:var(--ok)}.rl-p.ko b{color:var(--bad)}
.rl-p .ico,.rl-p img.ico-img,.rl-p svg{width:18px!important;height:18px!important;flex:none}
.rl-lien{margin-left:auto;font-size:12.5px;white-space:nowrap}
.rf-niv{display:flex;align-items:center;gap:7px;margin:2px 0}
.rf-niv small{font-size:11.5px;font-weight:800;color:var(--mut)}
.rf-niv .bd-pips{margin:0}
.rf-gain{display:block;font-size:13px;margin:1px 0}
.rf-gain b{color:var(--ok)}
.rf-garde{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.rf-garde .ico,.rf-garde img.emo{width:12px;height:12px;vertical-align:-2px}
.rf-action{display:flex;align-items:center;gap:10px}
.rf-action .ings2{flex:none;margin:0}
.rf-action > .btn{flex:1;min-width:0;margin:0}

/* « Où envoyer l’équipe ? » : bouton Soigner sous l’alerte d’un blessé (2026-11-12) */
.lo-soins{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 8px}
.btn.lo-soin{flex:1 1 140px;min-height:0;padding:7px 10px;font-size:14px}
.btn.lo-soin .ico,.btn.lo-soin img.ico-img{width:18px;height:18px;vertical-align:-3px}

/* Défenses et Camion du bastion harmonisés avec le refuge (2026-11-12) : niveau écrit, niveau suivant, matériaux et bouton sur une ligne, camion plus petit */
.bd-tete .rf-niv small{display:inline;font-size:11.5px;font-weight:800}
.bd-tete .rf-gain{font-size:12.5px;line-height:1.3;color:var(--ink)}
.bd-tete .rf-gain b{display:inline;font-size:12.5px;color:var(--ok)}
.bd-action > .bd-go{flex:1;min-width:0;margin:0;padding:7px 8px}
.bd-action > .bd-go b{font-size:15px}
.bd-action > .bd-go small{font-size:11px}
.camion-img{max-height:min(96px,12vh)}
@media (max-height:700px){ .camion-img{display:none} }
/* Matériaux + bouton : le bouton passe dessous quand il manque de place (4 matériaux, colonne étroite) */
.rf-action{flex-wrap:wrap}
.rf-action .ings2{flex:0 1 auto;min-width:0;flex-wrap:wrap}
.rf-action > .btn,.bd-action > .bd-go{flex:1 1 130px}
/* Journal du bastion : assauts détaillés (2026-11-12) */
.bj-clan{display:inline-block;font-size:11px;font-weight:900;padding:0 7px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);color:var(--mut);vertical-align:1px;white-space:nowrap}
.bj-d{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}
.bj-et{color:#d9a21b;letter-spacing:1px;margin-right:6px;white-space:nowrap;font-size:12px}
.bj-et i{font-style:normal;color:var(--line)}

/* Classement du mois en direct (2026-11-12) : pastille « en cours » */
.cl-live{display:block;font-size:10.5px;font-weight:900;color:#2f8a3a;letter-spacing:.2px}
@media (prefers-reduced-motion:no-preference){ .cl-live{animation:clLive 2s ease-in-out infinite} }
@keyframes clLive{50%{opacity:.55}}

/* Classement du mois : pourquoi ma partie n'y est pas (2026-11-12) */
.msg.cl-absent{display:flex;flex-direction:column;gap:8px}
.msg.cl-absent .btn{align-self:flex-start;min-height:0;padding:7px 14px}

/* Carte de la Légende (2026-11-12, bug signalé par Fabien : texte écrasé en colonne, pseudo coupé) : le texte prend la place, la fin de saison passe dessous */
.lg-carte .lg-txt{flex:1 1 150px;min-width:0}
.lg-carte .lg-txt b{white-space:normal}
.lg-carte .lg-txt .pcadre{max-width:100%;overflow:visible;white-space:nowrap}
.lg-carte .lg-fin{flex:0 0 auto;margin-left:auto}
.lg-carte > span.lg-txt{flex:1 1 150px;min-width:0}
.lg-carte > span.lg-fin{flex:1 1 100%;text-align:center;margin:2px 0 0}

/* Carte de la Légende : la course au n°1 du mois en cours (2026-11-12) */
.lg-carte > span.lg-course{flex:1 1 100%;font-size:12.5px;font-weight:700;line-height:1.35;padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.45)}
.lg-carte.vide > span.lg-course{background:var(--card)}
.lg-carte .lg-course b{display:inline;font-size:inherit;margin:0}

/* ---------- Corrections du 2026-11-12 (retours de Fabien, sur téléphone) ---------- */
/* Raja : les icônes dans le texte de l'en-tête restent petites */
.tg-tete > span{min-width:0}
.tg-tete em img,.tg-tete em .ico{width:1.2em!important;height:1.2em!important;vertical-align:-.2em;box-shadow:none!important;border-radius:0!important}
/* Cartes de la famille de la Légende : l'anneau doré ne mange plus le prénom */
.mc.couronnee .em{margin-bottom:7px}
body.fond .scene .mc.couronnee > div:first-of-type{gap:0}
.mc.couronnee > div:first-of-type b{position:relative;z-index:1;color:var(--ink);text-shadow:0 1px 0 var(--card),0 0 3px var(--card)}
/* Fiche d'un clan : l'avatar devant chaque famille */
.clan-membres .clan-m{grid-template-columns:auto minmax(0,1fr) auto}
.clan-membres .clan-m > .cm-av{grid-column:1;grid-row:1 / span 2;align-self:center}
.clan-membres .clan-m .cm-nom,.clan-membres .clan-m > small{grid-column:2}
.clan-membres .clan-m > .mini{grid-column:3}
.cm-av{width:34px!important;height:34px!important}
.ch-av.cm-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:900;font-size:16px}
.mc-m-b .av-img{width:34px;height:34px}
.pm-titre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-right:40px}
.pm-av{width:44px!important;height:44px!important}
.ch-av.pm-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:900;font-size:20px}
/* Classement des clans : les insignes de ligue restent dans leur case, de la marge en bas */
.cc-l .ligue-ins{margin:0!important;height:26px}
.cc-ligues{margin-bottom:12px}
/* Avatar de la Légende du mois : Raja dans un anneau doré qui tourne, lueur et couronne */
.av-img.av-leg{position:relative;overflow:visible;isolation:isolate;box-shadow:0 0 0 2px #7a4a00,0 0 10px 2px rgba(247,201,72,.75)!important;background:#f7c948;animation:avLegLueur 2.6s ease-in-out infinite}
.av-img.av-leg::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;background:conic-gradient(from var(--lga),#fff6c9,#f7c948,#b8860b,#f7c948,#fff6c9,#b8860b,#f7c948);animation:lgTourne 4s linear infinite}
.av-img.av-leg img{border-radius:50%}
.av-leg-cour{position:absolute;left:50%;top:-38%;width:56%;font-style:normal;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));animation:lgBalance 3s ease-in-out infinite;pointer-events:none}
.av-leg-cour svg{display:block;width:100%;height:auto}
@keyframes avLegLueur{0%,100%{box-shadow:0 0 0 2px #7a4a00,0 0 6px 1px rgba(247,201,72,.55)}50%{box-shadow:0 0 0 2px #7a4a00,0 0 14px 4px rgba(247,201,72,.9)}}
.classement li .av-leg,.mc-m-b .av-leg,.clan-m .av-leg,.ch-l .av-leg,.gu-c .av-leg{margin-top:6px}
@media (prefers-reduced-motion:reduce){.av-img.av-leg,.av-img.av-leg::before,.av-leg-cour{animation:none}}

/* Titre peint (2026-11-13) : l'image « SURVIVAL » + le sous-titre écrit sur le panneau en bois */
.titre-peint{position:relative;display:block;width:min(88vw,380px);margin:0 auto;container-type:inline-size;line-height:0;font-size:0}
.titre-peint img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.titre-peint .tp-sous{position:absolute;left:50.2%;top:87%;transform:translate(-50%,-50%);white-space:nowrap;line-height:1;
  font-family:Bangers,system-ui,sans-serif;font-weight:400;letter-spacing:.06em;font-size:5.6cqw;color:#3b230f;text-shadow:0 1px 0 rgba(255,220,170,.55)}
.tetejeu:has(> .titre-peint){display:block;margin-bottom:6px}
.accueil > .titre-peint{width:min(80vw,340px);margin-bottom:8px}
@media (max-height:700px) and (orientation:portrait){ .titre-peint{width:min(70vw,280px)} }
@media (orientation:landscape) and (max-height:500px){ .titre-peint{width:min(40vw,240px)} .accueil > .titre-peint{width:min(36vw,220px)} }
@media (min-width:1100px) and (min-height:620px){ .panneau.intro .tetejeu .titre-peint{width:min(100%,460px);margin:0} }
/* Titre peint plus petit et centré sur PC (2026-11-13, retour de Fabien) */
.titre-peint{width:min(76vw,320px)}
.accueil > .titre-peint{width:min(68vw,270px)}
@media (max-height:700px) and (orientation:portrait){ .titre-peint{width:min(62vw,240px)} .accueil > .titre-peint{width:min(60vw,230px)} }
@media (orientation:landscape) and (max-height:500px){ .titre-peint{width:min(34vw,210px)} .accueil > .titre-peint{width:min(32vw,190px)} }
@media (min-width:1100px) and (min-height:620px){ .panneau.intro .tetejeu .titre-peint{width:min(86%,380px);margin:0 auto} }

/* ---------- Survol à la souris (2026-11-13, retour de Fabien : les boutons manquaient de réaction) ----------
   Seulement avec une souris (pas sur téléphone, où le survol reste « collé » après un toucher).
   Tout ce qui se touche : curseur main + un peu plus lumineux ; les vrais boutons se soulèvent de 2 px avec une ombre plus marquée. */
@media (hover:hover) and (pointer:fine){
  button:not(:disabled), [data-act]{cursor:pointer}
  button:disabled{cursor:not-allowed}
  .btn, .loc, .tab, .menugrille .mt, .mf-a, .inv-t, .carte-lieu, .act, .islot, .bd-case, .mr, .sc-m, .gu-c .btn, .lien, .ch-btn{transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease}
  button:not(:disabled):hover, [data-act]:not(button):hover{filter:brightness(1.08)}
  .btn:not(:disabled):hover, .loc:not(:disabled):hover, .menugrille .mt:hover, .mf-a:not(:disabled):hover, .inv-t:hover,
  .carte-lieu:not(:disabled):hover, .act:not(:disabled):hover, .bd-case:hover, .mr:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--bois), 0 8px 16px rgba(30,15,5,.22)}
  .loc:not(:disabled):hover, .menugrille .mt:hover, .carte-lieu:not(:disabled):hover, .bd-case:hover, .inv-t:hover{border-color:#c98a2a}
  .tab:not(.on):hover{border-color:#c98a2a;transform:translateY(-1px)}
  .islot[data-act]:hover{transform:translateY(-2px) scale(1.04)}
  .sc-m:hover .sc-med{transform:scale(1.06)}
  .lien:hover{text-decoration:underline}
  .btn:not(:disabled):active, .loc:not(:disabled):active, .menugrille .mt:active, .mf-a:active, .carte-lieu:not(:disabled):active, .act:active, .bd-case:active, .mr:active{transform:translateY(1px);box-shadow:0 1px 0 var(--bois)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .btn:hover, .loc:hover, .menugrille .mt:hover, .mf-a:hover, .inv-t:hover, .carte-lieu:hover, .act:hover, .bd-case:hover, .mr:hover, .tab:hover, .islot:hover{transform:none!important}
}
/* Écran du sac : le nombre choisi dans le coin de la case (il dépassait et était coupé par la grille qui défile, 2026-11-14) */
.tile .n{top:3px;right:3px;line-height:1.25}

/* Journal du bastion : fin de guerre (2026-11-14) */
.bj-l.bj-g{border:2px solid var(--bois);border-radius:12px;padding:6px 8px;margin:4px 0;background:var(--card)}
.bj-l.bj-g.g2{border-color:#c9a227;background:linear-gradient(135deg,rgba(247,215,116,.35),var(--card))}
.bj-l.bj-g.b2{border-color:var(--bad)}
.bj-gt{font-size:14px}
.bj-tr{font-weight:900}.bj-tr.plus{color:var(--ok)}.bj-tr.moins{color:var(--bad)}
/* Bouton « Confirmer » de l'exclusion d'un membre (il débordait du rond, 2026-11-14) */
.mc-ex.confirme{width:auto;min-width:30px;padding:0 12px;border-radius:999px;background:var(--bad);color:#fff;font-size:13px;white-space:nowrap}
.bj-tr{white-space:nowrap}
.mc-m .mc-m-b{min-width:0}

/* Historique des guerres (2026-11-14) */
.hg-bilan{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.hg-p{font-size:12px;font-weight:900;padding:2px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg)}
.hg-p.ok{border-color:#c9a227;color:#9a6512}.hg-p.ko{border-color:var(--bad);color:var(--bad)}
.hg-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.hg-c{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:2px solid var(--bois);border-radius:14px;background:var(--bg);box-shadow:0 2px 0 var(--line)}
.hg-c.ok{border-color:#c9a227;background:linear-gradient(135deg,rgba(247,215,116,.3),var(--bg))}
.hg-c.ko{border-color:var(--bad)}
.hg-c .blason{width:38px!important;height:42px!important;flex:none}
.hg-t{flex:1;min-width:0}.hg-t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hg-t small{font-size:12px;color:var(--mut)}
.hg-r{flex:none;text-align:right}.hg-r b{display:block;font-size:13px}.hg-c.ok .hg-r b{color:#9a6512}.hg-c.ko .hg-r b{color:var(--bad)}
.hg-r small{font-size:12px;font-weight:900}.hg-r small.plus{color:var(--ok)}.hg-r small.moins{color:var(--bad)}

/* Pilleur qui s'enfuit (2026-11-14) : il quitte la scène */
.zc.fui{opacity:0;pointer-events:none}
.zc.fui.part{animation:zFuit .9s ease-in forwards}
@keyframes zFuit{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(140%) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.zc.fui.part{animation:none}}

/* Zombies de fin de partie (2026-11-14) : taille sur la scène */
.zc.sprite.z-couveuse .zs img,.zc.sprite.z-gorille .zs img{height:64cqh}
@container (max-height:190px){.zc.sprite.z-couveuse .zs img,.zc.sprite.z-gorille .zs img{height:54cqh}}
.portrait.pnj.sprite-p{background:#2b2420}.portrait.pnj.sprite-p img{object-fit:cover;object-position:50% 0}

/* Écran d'histoire sur téléphone (2026-11-14, retour de Fabien : texte coupé, impossible de faire défiler, pastilles sur 3 lignes)
   Le panneau tient dans l'écran : le récit a son propre ascenseur (fondu en bas tant qu'il reste du texte), la vitrine et le bouton restent visibles.
   Les pastilles tiennent sur une seule ligne qu'on fait glisser. */
@media (max-width:1099px), (max-height:619px){
  .panneau.intro{display:flex;flex-direction:column;max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .panneau.intro > *{flex:none}
  .panneau.intro .intro-recit{flex:1 1 auto;min-height:150px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
  .panneau.intro .intro-recit.fin{-webkit-mask-image:none;mask-image:none}
  .panneau.intro .ir-premier{font-size:1.06em}
  /* Très grande police : tout le panneau défile aussi, le bouton reste collé en bas */
  .panneau.intro > .ir-go{position:sticky;bottom:0;z-index:2;box-shadow:0 -6px 10px color-mix(in srgb,var(--card) 85%,transparent),0 3px 0 rgba(20,10,4,.35)}
  .ir-puces{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;margin-right:-4px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .ir-puces::-webkit-scrollbar{display:none}
  .ir-puces span{flex:none;font-size:12px;padding:3px 9px}
}
/* Case d'équipement vide (2026-11-14, signalé par Fabien) : l'emoji de la case (🗡️ 🔦 🎒) devient une icône peinte,
   qui était réduite à 56 % d'une zone presque vide (minuscule). La zone prend maintenant 56 % de la case et l'icône la remplit. */
.slot .vide{display:inline-grid;place-items:center;line-height:1}
.slot .vide img.emo{width:1.1em;height:1.1em}
.qpeq .slot .vide,.slots.grands .slot .vide{width:56%;height:56%;opacity:.4}
.qpeq .slot .vide .ico,.slots.grands .slot .vide .ico,.qpeq .slot .vide img.emo,.slots.grands .slot .vide img.emo{width:100%;height:100%}
/* Échanges du clan (2026-11-14) : bouton 🤝 dans la barre d'envoi, cartes d'offre dans la discussion, fenêtre « Proposer un échange » */
.ch-saisie:has(.ch-ech-b){padding-left:4px}
.ch-ech-b{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:2px solid var(--bois);background:var(--card);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 0 var(--line);padding:0}
.ch-ech-b .ico,.ch-ech-b img{width:22px;height:22px}
.ch-ech{align-self:stretch;margin:6px 2px;padding:8px 10px 9px;border:2px solid #c9a227;border-radius:14px;background:linear-gradient(160deg,rgba(247,215,116,.22),var(--card));box-shadow:0 2px 0 var(--line)}
.ch-ech.moi{border-color:var(--acc)}
.ch-ech.clos{border-color:var(--line);opacity:.78}
.ce-t{display:flex;align-items:center;gap:6px;font-size:13px}
.ce-t .ico,.ce-t img{width:18px;height:18px;flex:none}
.ce-t b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-t .ch-h{position:static;font-size:11px;color:var(--mut)}
.ce-o{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;margin:6px 0}
.ce-cote{display:flex;flex-direction:column;gap:3px;min-width:0}
.ce-cote > small{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.ce-cases{display:flex;flex-wrap:wrap;gap:4px}
.ce-c{position:relative;display:flex;flex-direction:column;align-items:center;width:46px;padding:3px 2px 2px;border-radius:9px;background:url("images/case.webp") center/100% 100% no-repeat}
.ce-c .ico,.ce-c img{width:26px;height:26px}
.ce-c i{position:absolute;top:-4px;right:-4px;font-style:normal;font-size:10.5px;font-weight:900;background:var(--ink);color:var(--bg);border-radius:999px;padding:0 4px;line-height:15px}
.ce-c small{font-size:9px;line-height:1.1;font-weight:800;max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3a2a1a}
.ce-c.vide{height:44px;justify-content:center;color:var(--mut)}
.ce-fl{font-size:20px;font-weight:900;color:var(--acc)}
.ce-bas{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ce-etat{font-size:12px;font-weight:800;color:var(--mut)}
.ce-etat.ok{color:var(--ok)}.ce-etat.ko{color:var(--bad)}
.ce-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:900;font-size:13.5px;padding:7px 14px;border-radius:999px;border:0;cursor:pointer;color:#2a1a0a;background:linear-gradient(180deg,#f6c86a,#e09a2f);box-shadow:0 2px 0 #9a6512}
.ce-btn.alt{background:var(--bg);border:2px solid var(--line);box-shadow:none;color:var(--ink);padding:5px 12px}
.ce-btn .ico,.ce-btn img{width:18px;height:18px}
.ec-regles{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.ec-regles span{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg)}
.ec-plateau{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center}
.ec-cote{padding:7px 8px;border:2px dashed var(--line);border-radius:14px;background:var(--bg);min-width:0}
.ec-cote.on{border:2px solid var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.ec-cote > b{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.ec-cote > b small{color:var(--mut)}
.ec-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.ec-cases .islot,.ec-vide{aspect-ratio:1/1;width:100%;min-width:0}
.ec-vide{border-radius:10px;border:2px dashed var(--line);opacity:.6}
.ec-fl{font-size:22px;font-weight:900;color:var(--acc)}
.ec-bilan{margin:6px 0 8px;font-size:13px;font-weight:800;text-align:center}
.ec-bilan.ok{color:var(--ok)}.ec-bilan.ko{color:var(--bad)}
.ec-grille{margin-top:6px}
.ec-go{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.ec-go .ico,.ec-go img{width:22px;height:22px}
.ec-note{font-size:12px;text-align:center;margin:6px 0 0}
/* Vitrine de hauteur fixe (2026-11-14, retour de Fabien) : les cartes sont empilées dans la même case de grille,
   seule la carte choisie est visible ; le bloc garde la hauteur de la carte la plus haute, il ne saute plus */
.vt-pile{display:grid}
.vt-pile > .vt{display:flex;grid-area:1/1;visibility:hidden;animation:none}
.vt-pile > .vt.on{visibility:visible;animation:vtEntre .5s ease-out}
@media (prefers-reduced-motion:reduce){.vt-pile > .vt.on{animation:none}}

/* Titre ZOMBRIA (2026-11-14) : sous-titre recalé sur le nouveau panneau suspendu, lueur de lanterne qui respire derrière les lettres
   (Gemini ne savait pas la dessiner sans ajouter une lampe : elle est faite ici) */
.titre-peint{isolation:isolate}
.titre-peint img{position:relative;z-index:1}
.titre-peint .tp-sous{left:49.6%;top:86%;font-size:6.3cqw;z-index:2}
.titre-peint::before{content:"";position:absolute;left:18%;right:18%;top:4%;height:58%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,rgba(255,206,110,.75),rgba(255,150,40,.38) 45%,rgba(255,120,20,0) 72%);filter:blur(10px);animation:lueurTitre 3.6s ease-in-out infinite alternate}
@keyframes lueurTitre{from{opacity:.62;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.titre-peint::before{animation:none}}