/* Entrée de Ville : feuille de style unique.
   Thème « nuit bleue » : bleu profond plutôt que noir, panneaux bleu nuit, accents or et compteurs colorés.
   Les cartes gardent leur propre fond (asphalte) pour ressortir. Un seul thème, quel que soit le réglage du système. */

/* Jetons : couleurs, polices */
:root{
  --paper:#0d1424; --surface:#152038; --inset:#101a2e; --raise:#1b2946;
  --line:#26355a; --line-soft:rgba(160,185,230,.13);
  --ink:#eef2fa; --muted:#a3b1cc; --faint:#8b9abb;
  --gold:#f2c14e; --gold-ink:#1a1406; --gold-soft:rgba(242,193,78,.14);
  /* Une couleur par compteur de l'en-tête */
  --m1:#f2c14e; --m2:#7cc4ff; --m3:#ff9a76; --m4:#7ee0a1; --m5:#c9a7ff;
  --signal:#e0475c; --enamel:#c8102e;
  --route:var(--gold); --route-soft:var(--gold-soft);
  --win:#6cc27a; --lose:#f07a70;
  /* Une couleur par flux : habitants, capitaux, visiteurs */
  --v-hab:#7ee0a1; --v-cap:#f2c14e; --v-vis:#7cc4ff;
  --r0:#9aa59c; --r1:#5dbb63; --r2:#4c8fe0; --r3:#a27be8; --r4:#f08a3c; --r5:#e8c04a;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-fun:"Unbounded","Barlow Condensed",system-ui,sans-serif;
  color-scheme:dark;
}

/* Base */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img,svg{max-width:100%}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.5}
::selection{background:var(--gold);color:var(--gold-ink)}
a{color:var(--gold)}
.wrap{width:100%;max-width:1100px;box-sizing:border-box;margin:0 auto;padding-inline:32px;padding-block:24px 64px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0;color:#f7f7f2}
h2{font-size:32px} h3{font-size:21px}

/* Mise en page : le menu du jeu dans un rail à gauche, la page à droite.
   Sur téléphone (plus bas) : une barre en haut et les onglets en bas de l'écran. */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;z-index:20;height:100vh;box-sizing:border-box;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:14px;padding:20px 16px 16px;background:var(--inset);border-right:1px solid var(--line)}
.sign{display:inline-block;background:#fff;color:#111;border:3px solid var(--enamel);border-radius:7px;padding:2px 12px;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #ddd}
.sign.barre{position:relative;overflow:hidden}
.sign.barre::after{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:3px;background:var(--enamel);transform:rotate(-14deg)}
/* Logo : le panneau d'entrée de ville, des noms de communes du jeu y défilent (app.js : startTicker) */
.brand{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:4px;text-decoration:none}
.sign.tick{position:relative;display:block;box-sizing:border-box;width:204px;height:44px;padding:0;overflow:hidden;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #ddd,0 0 24px -8px rgba(200,16,46,.65);transition:box-shadow .3s}
.brand:hover .sign.tick{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #ddd,0 0 30px -4px rgba(200,16,46,.8)}
.tick .tk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8px;text-align:center;font-weight:800;font-size:23px;line-height:.95;letter-spacing:.01em;white-space:pre-line;transition:transform .75s cubic-bezier(.2,1.3,.35,1)}
.tick .tk.in{transform:translateY(100%);transition:none}
.tick .tk.out{transform:translateY(-110%)}
.brand-name{font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
/* Recherche de l'en-tête : suggestions au fil de la frappe */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gsearch{position:relative;flex:1 1 240px;max-width:380px;min-width:200px}
.gsearch input[type=search]{width:100%;padding:10px 40px 10px 38px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;min-height:44px}
.gsearch input[type=search]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gsearch>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.gs-key{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:0 5px;pointer-events:none}
.gsearch input:focus~.gs-key,.gsearch input:not(:placeholder-shown)~.gs-key{display:none}
.gs-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:max(100%,400px);max-width:calc(100vw - 32px);list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 50px -20px rgba(0,0,0,.85);max-height:70vh;overflow:auto}
.gs-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 10px;border-radius:10px;cursor:pointer}
.gs-list li[aria-selected="true"]{background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(242,193,78,.35)}
.gs-n{min-width:0;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.15;color:#f7f7f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-n small{display:block;font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--muted)}
.gs-old{color:var(--gold)}
.gs-r{text-align:right;font-family:var(--f-mono);font-size:11px;color:var(--muted);line-height:1.4;white-space:nowrap}
.gs-r .own{color:var(--win)}
.gs-list li.gs-all{grid-template-columns:1fr;font-family:var(--f-display);font-weight:600;color:var(--gold);border-top:1px solid var(--line-soft);border-radius:0 0 10px 10px;margin-top:4px}
.gs-list li.gs-none{grid-template-columns:1fr;cursor:default;color:var(--muted);font-size:14px}
/* Recherche, onglets et pseudo dans le rail */
.rail .gsearch{flex:none;max-width:none;min-width:0}
.rail .gsearch input[type=search]{border-radius:12px;background:var(--paper);min-height:42px;padding:8px 34px 8px 36px;font-size:14.5px}
.rail .gsearch>svg{left:13px}
.rail .gs-key{right:10px}
.rail .gs-list{left:0;right:auto;width:400px}
.gs-open{display:none}
nav.tabs{display:flex;flex-direction:column;gap:3px}
nav.tabs button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 14px;border:0;border-radius:12px;background:transparent;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--muted);text-align:left;transition:color .2s,background .2s}
nav.tabs button svg{width:20px;height:20px;flex:none}
nav.tabs button:hover{color:var(--ink);background:rgba(255,255,255,.05)}
nav.tabs button[aria-selected="true"]{background:var(--gold);color:var(--gold-ink);box-shadow:0 8px 20px -10px rgba(242,193,78,.8)}
/* Boosters à ouvrir */
.tab-n{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;box-sizing:border-box;padding:0 6px;border-radius:999px;background:var(--signal);color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:500}
nav.tabs button[aria-selected="true"] .tab-n{background:var(--gold-ink);color:var(--gold)}
/* Pseudo du joueur, en bas du rail */
.mepill{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px;border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--muted);font-family:var(--f-display);font-weight:600;font-size:15px;white-space:nowrap}
.rail .mepill{flex:none;width:100%}
.mepill span{overflow:hidden;text-overflow:ellipsis}
.mepill svg{width:18px;height:18px;flex:none}
.mepill:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.mepill.set{border-style:solid;background:var(--surface);color:var(--ink)}
.mepill.set svg{color:var(--gold)}

/* Titre de la page et progression de la collection */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:22px}
.pagehead h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:36px;line-height:1;color:#f7f7f2}
.meter{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.meter>div{display:flex;flex-direction:column;gap:3px;min-width:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:9px 14px}
.meter b{font-family:var(--f-display);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;color:#fff}
.meter>div>span{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.meter .m-own{min-width:200px}
.meter .m-top{display:flex;align-items:baseline;gap:8px}
.meter em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--m2);white-space:nowrap}
.meter .m-bar{display:block;height:4px;margin:3px 0 1px;border-radius:2px;background:var(--line);overflow:hidden}
.meter .m-bar s{display:block;width:0;height:100%;border-radius:2px;background:var(--gold);text-decoration:none;transition:width .6s}
.meter>div:nth-child(1) b{color:var(--m1)}
.meter>div:nth-child(2) b{color:var(--m3)}
.meter>div:nth-child(3) b{color:var(--m4)}
.meter>div:nth-child(4) b{color:var(--m5)}

.v-hab{--vc:var(--v-hab)} .v-cap{--vc:var(--v-cap)} .v-vis{--vc:var(--v-vis)}
/* Porte-monnaie : barre fixée en haut de la page ; les trois ressources, puis ce qu'elles permettent tout de suite */
.main-col{min-width:0}
.wallet{position:sticky;top:0;z-index:12;display:flex;align-items:stretch;gap:10px;padding:12px 32px 10px;background:rgba(13,20,36,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);box-shadow:0 12px 24px -20px rgba(0,0,0,.9)}
.wallet:empty{display:none}
.w-k{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:none}
.w-k b{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.w-k small{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.w-tiles{display:flex;gap:8px;flex:1 1 auto;min-width:0}
.w-res{position:relative;display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;padding:7px 14px 7px 7px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft)}
.w-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:11px;background:color-mix(in srgb,var(--vc) 16%,transparent);color:var(--vc)}
.w-ic svg{width:18px;height:18px}
.w-v{display:flex;flex-direction:column;min-width:0;line-height:1}
.w-v b{font-family:var(--f-display);font-weight:800;font-size:27px;color:var(--vc);font-variant-numeric:tabular-nums}
.w-v small{margin-top:3px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ce que le territoire rapporte chaque jour : une pastille sur le bord de la case */
.w-pd{position:absolute;right:8px;top:-8px;display:flex;align-items:baseline;gap:2px;padding:1px 7px;border-radius:999px;background:var(--paper);border:1px solid color-mix(in srgb,var(--vc) 45%,transparent);font-family:var(--f-display);font-weight:700;font-size:12px;line-height:1.35;color:var(--vc)}
.w-pd small{font-family:var(--f-mono);font-weight:400;font-size:9px;color:var(--faint)}
.w-res.bump{animation:bump 1.3s ease-out}
.w-plus{position:absolute;left:46px;top:-4px;font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--vc);text-shadow:0 2px 8px rgba(0,0,0,.9);pointer-events:none;animation:wplus 1.6s ease-out forwards}
@keyframes wplus{0%{opacity:0;transform:translateY(10px) scale(.7)}18%{opacity:1;transform:translateY(-2px) scale(1.15)}100%{opacity:0;transform:translateY(-26px) scale(1)}}
.w-acts{display:flex;gap:8px;flex:none}
.w-act{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 14px 7px 7px;border-radius:14px;border:1px solid var(--line-soft);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.w-act:hover{transform:translateY(-1px);border-color:rgba(242,193,78,.45)}
.w-aic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:11px;background:rgba(160,185,230,.1);color:var(--muted)}
.w-aic svg{width:19px;height:19px}
.w-aic em{position:absolute;right:-7px;top:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-style:normal;font-family:var(--f-display);font-weight:800;font-size:12px;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--paper)}
.w-at{display:flex;flex-direction:column;gap:2px;min-width:0}
.w-at b{font-family:var(--f-display);font-weight:800;font-size:16px;line-height:1.05;white-space:nowrap}
.w-at small{font-family:var(--f-mono);font-size:10px;color:var(--faint);white-space:nowrap}
.w-prog{display:block;width:100%;min-width:110px;height:4px;margin-top:2px;border-radius:99px;background:rgba(160,185,230,.14);overflow:hidden}
.w-prog s{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b8862a,var(--gold));text-decoration:none}
.w-buy[aria-disabled="true"]{border-style:dashed;cursor:help}
.w-buy[aria-disabled="true"] small{color:var(--lose)}
.w-buy.ok{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,217,122,.2),rgba(242,193,78,.08));box-shadow:0 10px 24px -16px rgba(242,193,78,.9)}
.w-buy.ok .w-aic{background:var(--gold);color:var(--gold-ink)}
.w-buy.ok b{color:var(--gold)}
.w-buy.ok:hover{background:linear-gradient(180deg,rgba(255,217,122,.32),rgba(242,193,78,.16))}
.w-buy.ping{animation:wping 1.1s ease-out 3}
@keyframes wping{0%{box-shadow:0 0 0 0 rgba(242,193,78,.8)}100%{box-shadow:0 0 0 14px rgba(242,193,78,0)}}
.w-evo.ok{border-color:rgba(126,224,161,.6);background:rgba(126,224,161,.09)}
.w-evo.ok .w-aic{background:var(--win);color:#0d1424}
.w-evo.ok .w-aic em{background:#fff}
.w-evo.ok b{color:var(--v-hab)}
.w-act:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rail .mepill{margin-top:auto}
.wallet>*{max-width:100%}
@media (min-width:1640px){.wallet{padding-inline:calc((100% - 1300px) / 2)}}
@media (max-width:1280px){.w-k{display:none}}
@media (max-width:1120px){.w-act .w-at small,.w-prog{display:none}}

/* Téléphone et tablette étroite : la marque, la recherche et le pseudo en haut, les ressources dessous,
   les onglets dans une barre fixée en bas de l'écran (sous le pouce) */
@media (max-width:899px){
  .shell{display:block}
  .wrap{padding-inline:16px;padding-block:16px 96px}
  .rail{position:static;height:auto;overflow:visible;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand . so me" "search search search search";align-items:center;gap:10px;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{grid-area:brand;align-items:flex-start;gap:3px;padding:0}
  .sign.tick{width:152px;height:33px}
  .tick .tk{font-size:17px}
  .brand-name{font-size:8px}
  .rail .gsearch{grid-area:search;display:none}
  .rail.searching .gsearch{display:block}
  .rail .gs-list{width:100%}
  .gs-open{grid-area:so;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
  .gs-open svg{width:19px;height:19px}
  .gs-open[aria-expanded="true"]{color:var(--gold);border-color:var(--gold)}
  .rail .mepill{grid-area:me;width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  .rail .mepill span:not(.av){display:none}
  .rail .mepill .av.sm{width:100%;height:100%;font-size:18px}
  .wallet{padding:10px 16px 8px;gap:6px}
  .w-pd{display:none}
  .w-tiles{gap:6px}
  .w-res{gap:6px;padding:6px 8px 6px 6px;border-radius:12px}
  .w-ic{width:24px;height:24px;border-radius:8px}
  .w-ic svg{width:14px;height:14px}
  .w-v b{font-size:clamp(14px,4.6vw,19px)}
  .w-res{min-width:0;overflow:hidden}
  .w-v small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .w-acts{gap:6px}
  .w-act{min-height:44px;padding:4px 8px 4px 4px;gap:6px;border-radius:12px}
  .w-aic{width:32px;height:32px}
  .w-at small,.w-prog,.w-evo{display:none}
  .w-at b{font-size:14px}
  .w-buy .w-at b{font-size:0}
  .w-buy .w-at b::after{content:"Booster";font-size:14px}
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:35;flex-direction:row;gap:0;padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px));background:var(--inset);border-top:1px solid var(--line);box-shadow:0 -12px 30px -18px rgba(0,0,0,.9)}
  nav.tabs button{flex:1 1 0;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:56px;padding:0;border-radius:10px;font-size:12.5px;text-align:center}
  nav.tabs button svg{width:22px;height:22px}
  nav.tabs button[aria-selected="true"]{background:transparent;color:var(--gold);box-shadow:none}
  nav.tabs button[aria-selected="true"]::before{content:"";position:absolute;top:-4px;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
  .tab-n{position:absolute;top:5px;left:calc(50% + 6px);margin:0;min-width:17px;height:17px;padding:0 4px;font-size:10px}
  nav.tabs button[aria-selected="true"] .tab-n{background:var(--signal);color:#fff}
  .pagehead{margin-bottom:14px}
  .pagehead h1{font-size:28px}
  .meter{flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none}
  .meter>div{flex:none;padding:7px 11px}
  .meter b{font-size:19px}
  .meter .m-own{min-width:170px}
}

/* Boosters */
.stage{display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:12px}
.packrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.pack{width:168px;height:236px;max-width:100%;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:18px;position:relative;overflow:hidden;background:#1d3f86;color:#fff;box-shadow:0 26px 50px -24px rgba(0,0,0,.85);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pack::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
.pack:hover:not(:disabled){transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 30px 50px -22px rgba(0,0,0,.9),0 0 36px -10px var(--gold)}
.pack:disabled{opacity:.35;cursor:default;filter:grayscale(.6)}
.pack .tear{position:absolute;inset:0 0 auto 0;height:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px);border-bottom:1px dashed rgba(255,255,255,.2)}
.pack .inner{position:absolute;inset:12px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px}
.pack .kick{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.pack .sign{font-size:19px}
.pack .count{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#d5dcd7}
.pack .count b{font-size:22px;color:#fff;margin-right:2px}
.pack .odds{display:flex;gap:5px}
.pack .odds i{width:7px;height:7px;transform:rotate(45deg)}
.pack .guar{font-family:var(--f-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c8d4ee;text-align:center;line-height:1.3}
.pack .sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .7s}
.pack:hover:not(:disabled) .sheen{background-position:-20% 0}
.packinfo{text-align:center;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.packinfo strong{color:var(--gold)}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 18px;min-height:40px;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.02em;transition:border-color .2s,background .2s}
.btn:hover:not(:disabled){border-color:rgba(255,255,255,.28)}
.btn.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.btn.primary:hover:not(:disabled){background:#f0cd62}
.btn.signal{background:var(--enamel);color:#fff;border-color:var(--enamel)}
.btn.signal:hover:not(:disabled){background:#dc1838}
.btn:disabled{opacity:.4;cursor:default}
.draw{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* Carte à collectionner, « holo plein cadre » : liseré à la couleur du palier (holographique dès la Ville, arc-en-ciel
   et or pour la Métropole), fond nuit avec halo et rayons, blason en grand, France en filigrane, panneau de verre.
   --rc = couleur du palier, --frame = liseré. Pas de backdrop-filter : il se comporte mal dans les cartes retournées en 3D. */
:root{--c0:var(--r0);--c1:var(--r1);--c2:var(--r2);--c3:var(--r3);--c4:var(--r4);--c5:var(--r5)}
.card{--rc:var(--c0);--frame:linear-gradient(160deg,#e6ebe7,#9aa59c 45%,#4c5650);--rx:0deg;--ry:0deg;--turn:0deg;--lift:0px;position:relative;width:268px;height:375px;flex:none;perspective:1100px;cursor:pointer;text-align:left;font-family:var(--f-body);color:#fff;border-radius:18px;-webkit-tap-highlight-color:transparent}
.card.t1{--frame:linear-gradient(160deg,#c9f5cc,#5dbb63 45%,#2a6e33)}
.card.t2{--frame:linear-gradient(160deg,#cfe3fd,#4c8fe0 45%,#1f4f94)}
.card.t3{--frame:conic-gradient(from 210deg,#a27be8,#f08ad1,#7cd4ff,#a6f0c6,#a27be8)}
.card.t4{--frame:conic-gradient(from 210deg,#f08a3c,#ffd2a8,#f08ad1,#ffe27a,#f08a3c)}
.card.t5{--frame:conic-gradient(from 0deg,#fff1b8,#e8c04a,#f08ad1,#7cd4ff,#a6f0c6,#ffe27a,#fff1b8)}
.card .flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--turn)));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card.down,.card.turned{--turn:180deg}
.card.tilting{--lift:-6px}
.card.tilting .flip{transition:transform .08s linear}
.card.flipping .flip{transition:transform .65s cubic-bezier(.3,.7,.3,1)}
.face,.back{position:absolute;inset:0;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;overflow:hidden;border:3px solid transparent;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rc) 42%,transparent) 0%,transparent 58%) padding-box,linear-gradient(170deg,#161f3d 0%,#070b16 100%) padding-box,var(--frame) border-box;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.85)}
.card.t3 .face,.card.t4 .face,.card.t5 .face,.card.t3 .back,.card.t4 .back,.card.t5 .back{box-shadow:0 26px 50px -22px rgba(0,0,0,.85),0 0 40px -12px var(--rc)}
.back{transform:rotateY(180deg)}
/* Chrome laisse cliquables les blocs positionnés de la face cachée (backface-visibility ne vaut que pour l'affichage) :
   seule la face tournée vers le joueur reçoit les clics, sinon « Développer » ou « Agrandir » tombent sur l'autre face */
.card.down .face,.card.turned .face,.card:not(.down):not(.turned) .back{pointer-events:none}
.card a{color:inherit}

/* Recto : tout est placé sur le plein cadre */
.face .rays{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(255,255,255,.045) 0deg 5deg,transparent 5deg 15deg)}
.face .map.wm{position:absolute;left:50%;top:30%;width:236px;height:225px;transform:translate(-50%,-50%)}
.face .map.wm .fr{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.15);stroke-width:5}
.face .map.wm .me{fill:#fff;stroke:none}
.face .map.wm .inset rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.2)}
.face .halo{position:absolute;left:50%;top:50px;width:124px;height:124px;transform:translateX(-50%);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 0 0 9px rgba(255,255,255,.03),0 0 0 10px rgba(255,255,255,.12)}
.face>.blason{position:absolute;left:50%;top:63px;width:88px;height:96px;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.65)) drop-shadow(0 0 12px color-mix(in srgb,var(--rc) 55%,transparent))}
.blason.vierge path{fill:rgba(255,255,255,.08);stroke:var(--rc);stroke-width:3.5}
.blason.vierge text{fill:#fff;font-family:var(--f-fun);font-weight:800;font-size:40px;text-anchor:middle;dominant-baseline:central}
.face .top{position:absolute;top:9px;left:10px;right:10px;display:flex;align-items:flex-start;gap:6px;z-index:2}
.face .tier{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-family:var(--f-fun);font-weight:700;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.face .dia{display:inline-flex;gap:3px}
.face .dia i{width:5px;height:5px;transform:rotate(45deg);background:var(--rc);box-shadow:0 0 6px var(--rc)}
/* Agrandir : à part, sous le rayonnement, au-dessus de tout (sinon un long palier pousse le chiffre sur le bouton) */
.face .flipb{position:absolute;top:46px;right:9px;z-index:4;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(9,13,27,.7);color:#e6ebf5;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.6);transition:color .2s,border-color .2s,transform .2s}
.face .flipb:hover{color:var(--gold);border-color:var(--gold);transform:scale(1.08)}
.face .flipb svg{width:15px;height:15px}
.card.mini .face .flipb{width:38px;height:38px}
.card.mini .face .flipb svg{width:17px;height:17px}
/* Un clic agrandit la carte (curseur loupe) ; une carte cachée se révèle, une carte agrandie se retourne */
.card{cursor:zoom-in}
.card.down,.zoombox .card{cursor:pointer}
/* Retour au recto, depuis le verso */
.verso .vhl{display:inline-flex;align-items:center;gap:6px}
.verso .vflip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(9,13,27,.7);color:#e6ebf5;cursor:pointer}
.verso .vflip:hover{color:var(--gold);border-color:var(--gold)}
.verso .vflip svg{width:12px;height:12px}
.face .ray{flex:none;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1;cursor:help}
.face .ray small{font-family:var(--f-display);font-weight:800;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--rc) 55%,#fff)}
.face .ray b{font-family:var(--f-fun);font-weight:800;font-size:22px;color:#fff;text-shadow:0 0 16px var(--rc);font-variant-numeric:tabular-nums}
.face .title{position:absolute;top:180px;left:12px;right:12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.face .nm{max-width:100%;font-family:var(--f-fun);font-weight:800;font-size:20px;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75),0 0 22px var(--rc);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.face .nm.m{font-size:16.5px}
.face .nm.l{font-size:13.5px}
.face .nm.xl{font-size:11.5px}
.face .sub{max-width:100%;font-size:11px;font-weight:600;color:#c7d0e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face .glass{position:absolute;left:9px;right:9px;bottom:25px;display:flex;flex-direction:column;gap:7px;padding:9px 11px;border-radius:15px;background:rgba(9,13,27,.74);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.face .sts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.face .st{display:flex;flex-direction:column;gap:3px;min-width:0}
.face .st small{font-family:var(--f-display);font-weight:800;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#b7c3dc;white-space:nowrap}
.face .st small em{font-style:normal;letter-spacing:0;color:var(--gold);margin-left:4px}
.face .st b{font-family:var(--f-fun);font-weight:800;font-size:19px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.face .st i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.face .st s{display:block;height:100%;border-radius:2px;background:var(--rc);box-shadow:0 0 8px var(--rc);text-decoration:none}
.face .row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.face .voc{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-fun);font-weight:700;font-size:10px;color:#9aa6bf;white-space:nowrap;cursor:help}
.face .voc.v-hab,.face .voc.v-cap,.face .voc.v-vis{color:var(--vc)}
.face .voc svg{width:14px;height:14px}
.face .voc .vn{width:12px;height:12px;border-radius:50%;border:1.5px dashed #6a746d}
.face .voc:not([class*="v-"]) b{font-size:8px;letter-spacing:.04em}
.face .ecus{display:flex;align-items:center;gap:3px;min-width:0}
.face .ecus .mk{display:inline-flex;cursor:help}
.face .ecus .ecu{width:20px;height:20px;border-width:1.5px}
.face .ecus .more{font-family:var(--f-mono);font-size:9px;color:#9aa6bf}
.face .pot{display:inline-flex;align-items:center;gap:3px;cursor:help}
.face .pot i{width:4px;height:11px;border-radius:2px;background:rgba(255,255,255,.16)}
.face .pot i.on{background:var(--rc);box-shadow:0 0 5px var(--rc)}
.face .foot{position:absolute;left:13px;right:13px;bottom:8px;display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:8.5px;color:rgba(255,255,255,.55)}
.face .sub .dtitle{font-style:normal;color:var(--gold)}
/* Reflets : la lumière suit la souris ; bandes holographiques dès la Ville, paillettes pour la Métropole */
.face .shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.16),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .3s}
.face .foil{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,0,170,.14) 0px,rgba(0,220,255,.14) 14px,rgba(255,240,0,.14) 28px,rgba(120,255,160,.14) 42px,rgba(255,0,170,.14) 56px);background-size:200% 200%;background-position:var(--px,50%) var(--py,50%);mix-blend-mode:color-dodge;opacity:.5;transition:opacity .3s}
.face .glitter{position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.7) .7px,transparent 1.3px) 0 0/11px 11px,radial-gradient(rgba(255,236,160,.6) .7px,transparent 1.3px) 5px 6px/13px 13px;opacity:.55}
.card.tilting .shine{opacity:1}
.card.tilting .foil{opacity:.95}
.card .badge{position:absolute;top:41px;left:11px;z-index:3;padding:2px 8px;border-radius:999px;background:#ff3d6e;box-shadow:0 0 14px -2px #ff3d6e;font-family:var(--f-fun);font-weight:700;font-size:8px;letter-spacing:.12em;color:#fff;white-space:nowrap}
.card .badge.dup{background:#4a5677;box-shadow:none}
.card .badge.own{background:#2f7d3b;box-shadow:0 0 14px -2px #2f7d3b}

/* Dos commun (booster pas encore retourné) : liseré arc-en-ciel, rayons, panneau d'entrée de ville */
.card.down .back{background:radial-gradient(circle at 50% 45%,#2a1f5c 0%,#070b16 70%) padding-box,conic-gradient(from 0deg,#f08ad1,#7cd4ff,#a6f0c6,#ffe27a,#f08a3c,#a27be8,#f08ad1) border-box}
.back .mystery{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.06) 0deg 4deg,transparent 4deg 12deg)}
.back .mystery::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,0,170,.1) 0px,rgba(0,220,255,.1) 16px,rgba(255,240,0,.1) 32px,rgba(255,0,170,.1) 48px);mix-blend-mode:color-dodge}
.card.down .back .mystery{display:flex}
.mystery .msign{display:flex;flex-direction:column;align-items:center;padding:6px 13px 5px;background:#fff;border:4px solid #c8102e;border-radius:10px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #d9d9d9,0 0 0 12px rgba(255,255,255,.05),0 0 50px -6px #a27be8;transform:rotate(-6deg);font-family:var(--f-display);font-weight:900;font-size:23px;line-height:.95;text-transform:uppercase;color:#121614}
.mystery .mgems{display:flex;gap:7px}
.mystery .mgems i{width:9px;height:9px;transform:rotate(45deg)}
.mystery .mgems i:nth-child(1){background:var(--r0);box-shadow:0 0 8px var(--r0)}
.mystery .mgems i:nth-child(2){background:var(--r1);box-shadow:0 0 8px var(--r1)}
.mystery .mgems i:nth-child(3){background:var(--r2);box-shadow:0 0 8px var(--r2)}
.mystery .mgems i:nth-child(4){background:var(--r3);box-shadow:0 0 8px var(--r3)}
.mystery .mgems i:nth-child(5){background:var(--r4);box-shadow:0 0 8px var(--r4)}
.mystery .mgems i:nth-child(6){background:var(--r5);box-shadow:0 0 8px var(--r5)}
.mystery small{font-family:var(--f-fun);font-weight:600;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* Verso : situer, vocations, influence, écussons */
.back .verso{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:10px 12px 9px;overflow:hidden}
.verso>*{flex:none}
.card.down .back .verso{visibility:hidden}
.verso .vh{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-fun);font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--rc) 55%,#fff)}
.verso .vh span+span{font-family:var(--f-mono);font-weight:400;letter-spacing:0;text-transform:none;font-size:9.5px;color:#9aa6bf}
.verso .where{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:6px 10px}
.verso .where .map{width:84px;height:80px;flex:none}
.verso .where .map .me{fill:#fff;stroke:none}
.verso dl{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.verso dt{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#8592ad}
.verso dd{margin:0 0 3px;font-size:11px;font-weight:600;color:#d5dcea;line-height:1.2}
.verso dd.cn{font-family:var(--f-fun);font-weight:800;font-size:12.5px;text-transform:uppercase;color:#fff}
.verso .vk{font-family:var(--f-display);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b7c3dc}
.verso .vcred{margin:0;font-size:9px;line-height:1.3;color:#8592ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verso .vcred a{color:#c9d3e6}
/* Les écussons prennent la place qui reste et défilent au besoin : le bouton du bas reste toujours visible */
.verso .vlist{list-style:none;margin:0;padding:0 2px 0 0;display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-width:thin}
.vlist li{display:flex;gap:9px;align-items:center}
.vlist .ecu{width:26px;height:26px}
.vlist b{display:block;font-size:12.5px;color:#f4f6fa;line-height:1.15}
.vlist small{font-family:var(--f-mono);font-size:9px;color:#9aa6bf}
.vlist small.r-notable{color:#c3ccd2}
.vlist small.r-rare{color:#e8c04a}
.verso .vnone{margin:0;font-size:11.5px;color:#9aa6bf}
.verso .vfoot{margin-top:auto;flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:7px}
.vloc{border:0;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:4px 12px;font-family:var(--f-fun);font-weight:600;font-size:9.5px;min-height:30px}
.vloc:hover{background:rgba(255,255,255,.16)}
.verso .wiki{font-family:var(--f-mono);font-size:9.5px;color:#9aa6bf}
.verso .vvoc{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.vvoc>span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px 4px;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#9aa6bf;cursor:help}
.vvoc>span.on{box-shadow:inset 0 0 0 1px var(--vc);color:var(--vc);background:color-mix(in srgb,var(--vc) 14%,transparent)}
.vvoc svg{width:14px;height:14px}
.vvoc b{font-family:var(--f-fun);font-weight:800;font-size:11px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.vvoc small{font-family:var(--f-mono);font-size:7px;letter-spacing:.04em;text-transform:uppercase}
.vvoc .vpot b{color:var(--rc)}
.map .fr{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.3);stroke-width:6;stroke-linejoin:round}
.map .me{fill:var(--rc);stroke:#0d1210;stroke-width:10}
.map .pulse{fill:none;stroke:var(--rc);stroke-width:10;transform-box:fill-box;transform-origin:center;animation:edvPulse 1.8s ease-out infinite}
.map .inset rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3);stroke-width:5;stroke-dasharray:14 10}
@keyframes edvPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.card.mini{zoom:.7}

/* Écussons : métal = rareté (pierre, argent, or), couleur du pictogramme = famille */
.ecu{--ec:#5cc48f;width:24px;height:24px;box-sizing:border-box;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;border:2px solid #6a746d;background:#1a201d;color:var(--ec)}
.ecu svg{width:55%;height:55%}
.ecu.r-notable{border-color:#c3ccd2;background:#20272a}
.ecu.r-rare{border-color:#e8c04a;background:#2b2413;box-shadow:0 0 10px rgba(232,192,74,.55)}
.ecu.f-patrimoine{--ec:#ee8e63}
.ecu.f-nom{--ec:#a993fa}
.ecu.f-territoire{--ec:#55b6ea}
.ecu.big{width:52px;height:52px;border-width:3px;margin-right:12px}
.marks{display:inline-flex;align-items:center;gap:3px;margin-left:6px;vertical-align:middle}
.marks .mk{display:inline-flex;cursor:help}
.marks .ecu{width:18px;height:18px;border-width:1.5px}
.marks .ecu.r-rare{box-shadow:0 0 6px rgba(232,192,74,.5)}
.marks .more{font-family:var(--f-mono);font-size:10px;color:var(--muted)}

/* Carte agrandie */
.zoombox{position:fixed;inset:0;z-index:50;background:rgba(6,10,22,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;overflow:auto}
.zoombox .zb-close,.dv .zb-close,.fd-h .zb-close,.shop .zb-close{position:absolute;top:10px;right:14px;min-width:44px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:32px;line-height:1}
.zoombox .zb-close:hover,.dv .zb-close:hover{color:var(--ink);background:var(--surface)}

/* Développement d'une carte : étoiles de niveau, bouton au verso, boîte de devis */
.niv{color:var(--gold);letter-spacing:.06em;font-size:.9em;white-space:nowrap;margin-left:4px}
.verso .vdev{border:1px solid rgba(242,193,78,.5);background:rgba(242,193,78,.1);color:var(--gold);border-radius:999px;padding:2px 9px;font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;line-height:1.2}
.verso .vdev:hover{background:rgba(242,193,78,.22)}
.verso .vdev.ready{background:var(--gold);color:var(--gold-ink);box-shadow:0 0 12px -2px var(--gold)}
.verso .vinf{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;font-size:10.5px;color:#9ba59e}
.verso .vinf b{color:#f4f6f2;font-family:var(--f-display);font-size:13px}
.verso .vinf .ibar{height:5px}
.verso .vinf .vrank{grid-column:1/-1;font-family:var(--f-mono);font-size:9.5px;color:#c9d1cb}
.verso .vinf .vrank:empty{display:none}
.dv-inf{display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:10px;background:var(--inset);border:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.dv-inf b{color:var(--ink)}
.dv-inf.ok{border-color:rgba(242,193,78,.45)}
.dv-inf small{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.devbox{position:fixed;inset:0;z-index:60;background:rgba(6,10,22,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.dv{position:relative;width:min(100%,470px);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.dv h3{font-size:24px;padding-right:40px}
.dv .dv-now{margin:0;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.dv .dv-next{margin:0;font-size:14px;color:#c9d1cb;line-height:1.45}
.dv .dv-next b{color:var(--ink)}
.dv-cost{display:flex;flex-wrap:wrap;gap:8px}
.dv-cost span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:10px;background:var(--inset);border:1px solid var(--line-soft);color:var(--vc)}
.dv-cost span.ko{color:var(--lose);border-color:rgba(240,122,112,.5)}
.dv-cost b{font-family:var(--f-display);font-size:18px;font-variant-numeric:tabular-nums}
.dv-cost small{font-family:var(--f-mono);font-size:10px;color:var(--faint)}
.dv-cost svg{width:16px;height:16px}
/* Les deux conditions d'un développement, cochées ou non : influence (gagnée en concours), puis ressources */
.dv .dv-k{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dv-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dv-check>li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--inset);border:1px solid var(--line-soft);font-size:13.5px;color:var(--muted)}
.dv-check>li>i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%}
.dv-check>li>i svg{width:15px;height:15px}
.dv-check>li.ok{border-color:rgba(108,194,122,.45)}
.dv-check>li.ok>i{background:rgba(108,194,122,.18);color:var(--win)}
.dv-check>li.ko{border-color:rgba(240,122,112,.5);background:rgba(240,122,112,.06)}
.dv-check>li.ko>i{background:rgba(240,122,112,.18);color:var(--lose)}
.dv-check>li>span{display:flex;flex-direction:column;gap:6px;min-width:0}
.dv-check b{color:var(--ink);font-size:14.5px}
.dv-check li.ko>span{color:#f3b2ab}
.dv-check small{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.dv-help{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.45;color:var(--muted)}
p.dv-help{padding:0}
.dv-help.ok{color:var(--win)}
.evo-b small.evo-ok{color:var(--win)}
.evo-how2{margin:0;padding-left:18px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.dv-dup{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer}
.dv-dup input{accent-color:var(--gold);width:16px;height:16px}
.pseudo-form{display:flex;flex-direction:column;gap:10px}
.pseudo-form input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--inset);color:var(--ink);font:inherit;font-family:var(--f-display);font-weight:600;font-size:18px}
.pseudo-form input[type=text]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pseudo-err{margin:0;min-height:1em;font-size:13px;color:var(--lose)}
.pseudo-err:empty{display:none}
.pseudo-help{font-size:12px;color:var(--faint)}
.roster .niv,.slot .niv,.tok .niv{font-size:12px}
.cl-table .niv{font-size:13px;margin:0}
.zoombox .zb-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* Agrandie, la carte se retourne d'un clic : ses boutons ↻ sont inutiles */
.zoombox .flipb,.zoombox .vflip{display:none}
body.zoom-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* Album */
.album{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;margin-top:20px}
@media (max-width:720px){.album{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:10px;min-width:0}
input[type=search]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
input[type=search]::placeholder{color:var(--faint)}
.deplist{list-style:none;margin:0;padding:4px;max-height:560px;overflow:auto;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface)}
@media (max-width:720px){.deplist{max-height:260px}}
.deplist li button{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;width:100%;border:0;border-radius:10px;background:transparent;padding:8px 10px;text-align:left;color:var(--ink)}
.deplist li button:hover{background:rgba(255,255,255,.04)}
.deplist li button[aria-current="true"]{background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(232,192,74,.35)}
.deplist li button[aria-current="true"] .code{color:var(--gold)}
.code{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.deplist .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deplist .pct{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}
.deplist .bar{grid-column:2/4;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.deplist .bar i{display:block;height:100%;background:var(--gold)}
.main{min-width:0}
.sub{color:var(--muted);margin:4px 0 16px}
.grid{display:flex;flex-wrap:wrap;gap:14px}
.empty{border:1px dashed var(--line);border-radius:16px;padding:32px 20px;color:var(--muted);text-align:center;background:var(--inset)}
.empty .sign{font-size:20px;margin-bottom:12px}
.empty .btn{margin-top:14px}

/* Album : la vitrine (vos 5 plus belles cartes en éventail), les raretés trouvées (jauges), les niveaux de
   développement, puis les étagères qui défilent, chacune finie par une carte « à découvrir » */
#alb{display:flex;flex-direction:column;gap:22px}
.vit{position:relative;display:flex;align-items:center;gap:20px;min-height:440px;padding:0 32px;border-radius:24px;overflow:hidden;border:1px solid rgba(232,192,74,.25);
  background:radial-gradient(ellipse 60% 70% at 66% 42%,rgba(232,192,74,.26) 0%,transparent 70%),repeating-conic-gradient(from 0deg at 66% 40%,rgba(255,255,255,.035) 0deg 6deg,transparent 6deg 18deg),linear-gradient(160deg,#1a2547,#0b1222)}
.vit-t{position:relative;z-index:6;flex:0 0 300px;display:flex;flex-direction:column;gap:12px}
.vit-t .kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.vit-t h2{font-size:38px;font-weight:800}
.vit-t p{margin:0;font-size:15px;line-height:1.5;color:#c9d4ea}
.vit-n{display:flex;flex-wrap:wrap;gap:8px}
.vit-n span{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-radius:12px;background:rgba(13,20,36,.6);border:1px solid rgba(160,185,230,.15)}
.vit-n b{font-family:var(--f-fun);font-weight:800;font-size:19px;line-height:1}
.vit-n b.g{color:var(--gold)} .vit-n b.v{color:var(--win)} .vit-n b.b{color:var(--m2)}
.vit-n small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.vit-fan{position:relative;flex:1 1 auto;min-width:0;height:440px}
.vf{position:absolute;left:50%;top:50%;animation:vfin .8s cubic-bezier(.2,1.2,.4,1) backwards}
.vf-1{z-index:5;transform:translate(-50%,-52%)}
.vf-2{z-index:4;transform:translate(calc(-50% - 118px),-46%) rotate(-8deg);animation-delay:.08s}
.vf-3{z-index:4;transform:translate(calc(-50% + 118px),-46%) rotate(8deg);animation-delay:.08s}
.vf-4{z-index:3;transform:translate(calc(-50% - 222px),-40%) rotate(-17deg);animation-delay:.16s}
.vf-5{z-index:3;transform:translate(calc(-50% + 222px),-40%) rotate(17deg);animation-delay:.16s}
.vf-1 .card{zoom:.8}
.vf-2 .card,.vf-3 .card{zoom:.64}
.vf-4 .card,.vf-5 .card{zoom:.52}
@keyframes vfin{from{opacity:0;margin-top:40px}}
.vit-floor{position:absolute;left:50%;bottom:22px;width:560px;height:70px;margin-left:-280px;border-radius:50%;background:radial-gradient(ellipse,rgba(232,192,74,.35),transparent 70%);pointer-events:none}
.alb-stats{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.alb-box{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft)}
.alb-box h3{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ring{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center}
.ring .rg{position:relative;display:block;width:86px;height:86px;max-width:100%}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:rgba(160,185,230,.12);stroke-width:8}
.ring circle.v{stroke:var(--rc);stroke-linecap:round;filter:drop-shadow(0 0 5px var(--rc));animation:ringin 1.1s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes ringin{from{stroke-dasharray:0 400}}
.ring .rg>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rg b{font-family:var(--f-fun);font-weight:800;font-size:17px;line-height:1}
.ring .rg small{font-family:var(--f-mono);font-size:9px;color:var(--faint)}
.ring .rn{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--rc);white-space:nowrap}
.ring>small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.lvs{display:flex;flex-direction:column;gap:9px}
.lv{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:10px}
.lv-s{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--muted)}
.lv .stars{display:inline-flex;gap:2px;color:var(--gold)}
.lv .stars svg{width:15px;height:15px}
.lv-b{display:block;height:10px;border-radius:5px;background:rgba(160,185,230,.1);overflow:hidden}
.lv-b s{display:block;height:100%;min-width:4px;border-radius:5px;background:linear-gradient(90deg,var(--gold),#ffdd94);text-decoration:none;transform-origin:left;animation:imbar .9s cubic-bezier(.2,.8,.2,1) backwards}
.lv>b{font-family:var(--f-fun);font-weight:800;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.lv-r{margin:0;font-size:13px;color:var(--muted)}
.lv-r b{color:var(--gold)}
.linkish{border:0;background:none;padding:0;color:var(--gold);font:inherit;text-decoration:underline;cursor:pointer}
.alb-by{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:6px}
.alb-by h2{font-size:28px}
.alb-by .sh-sp{flex:1}
.alb-by .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.alb-by .seg{flex:none}
.shelves{display:flex;flex-direction:column;gap:26px}
.shelf{--sc:var(--gold);display:flex;flex-direction:column;gap:10px;min-width:0}
.sh-h{display:flex;align-items:center;gap:10px;min-width:0}
.sh-h h3{min-width:0;font-size:22px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-sub{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.sh-sp{flex:1}
.shelf .gems{display:inline-flex;flex:none;gap:3px}
.shelf .gems i{width:8px;height:8px;transform:rotate(45deg);background:var(--sc);box-shadow:0 0 8px var(--sc)}
.sh-ic{display:inline-flex;flex:none;color:var(--sc)}
.sh-ic svg{width:20px;height:20px}
.sh-all{flex:none;border:0;background:none;padding:6px 4px;color:var(--gold);font-family:var(--f-display);font-weight:700;font-size:15px;white-space:nowrap}
.sh-all:hover{text-decoration:underline}
.sh-nav{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.sh-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shelf.open .sh-nav{display:none}
.sh-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px 2px 4px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent)}
.sh-row::-webkit-scrollbar{display:none}
.sh-row>*{flex:none;scroll-snap-align:start}
.sh-row .card{zoom:.52}
.shelf.open .sh-row{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.sh-ledge{display:block;height:12px;margin-top:-6px;border-top:2px solid var(--sc);border-radius:0 0 10px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 22%,transparent),transparent);box-shadow:0 -8px 24px -10px var(--sc)}
.shelf.open .sh-ledge{display:none}
.sh-more{margin:4px 0 0;text-align:center}
/* La carte « à découvrir » au bout d'une étagère */
.ghost{width:139px;height:195px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:10px;border:2px dashed color-mix(in srgb,var(--sc) 50%,transparent);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--sc) 14%,transparent),transparent 60%),#0c1322;text-align:center}
.ghost svg{width:48px;height:56px}
.ghost path{fill:none;stroke:var(--sc);stroke-width:4;stroke-dasharray:7 6;opacity:.75}
.ghost text{font-family:var(--f-fun);font-weight:800;font-size:46px;fill:var(--sc)}
.ghost b{font-family:var(--f-fun);font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.ghost span{font-size:11px;line-height:1.3;color:var(--muted)}
.ghost em{max-width:100%;padding:3px 8px;border-radius:999px;border:1px solid var(--sc);color:var(--sc);font-family:var(--f-fun);font-style:normal;font-weight:700;font-size:8px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:899px){
  .vit{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:20px 16px 0}
  .vit-t{flex:none}
  .vit-t h2{font-size:30px}
  .vit-fan{zoom:.55;height:440px;margin:0 -16px}
  .alb-stats{grid-template-columns:1fr}
  .rings{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .sh-nav{display:none}
  .sh-h{flex-wrap:wrap}
  .sh-row .card{zoom:.46}
  .ghost{width:123px;height:173px}
}
@media (prefers-reduced-motion: reduce){
  .vf,.ring circle.v,.lv-b s{animation:none}
}

/* Évolution : comment une carte monte de niveau (3 étapes), les cartes prêtes, celles qui s'en approchent */
#evo{display:flex;flex-direction:column;gap:26px}
.evo-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.eh{position:relative;display:flex;flex-direction:column;gap:7px;padding:16px 16px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft)}
.eh-n{position:absolute;right:14px;top:8px;font-family:var(--f-fun);font-weight:800;font-size:34px;line-height:1;color:rgba(242,193,78,.18)}
.eh-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--gold-soft);color:var(--gold)}
.eh-ic svg{width:21px;height:21px}
.eh b{font-family:var(--f-display);font-size:19px;color:#f7f7f2}
.eh p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.evo-sec{display:flex;flex-direction:column;gap:12px}
.evo-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.evo-h h2{font-size:26px}
.evo-h .btn svg,.evo-b .btn svg{width:17px;height:17px;margin-right:6px;vertical-align:-3px}
.evo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.evo-it{display:flex;gap:16px;align-items:flex-start;padding:14px;border-radius:16px;border:1px solid rgba(242,193,78,.35);background:linear-gradient(135deg,rgba(242,193,78,.1),transparent 60%),var(--surface);box-shadow:0 18px 36px -24px rgba(242,193,78,.5)}
.evo-c{flex:none}
.evo-c .card{zoom:.5}
.evo-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.evo-b h3{font-size:22px}
.evo-lv{margin:0;font-size:14px;color:var(--muted)}
.evo-lv b{color:var(--gold)}
.evo-fx{margin:0;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.evo-fx b{color:var(--win)}
.evo-cost{display:flex;flex-wrap:wrap;gap:6px}
.ec{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-soft);background:rgba(255,255,255,.05);color:var(--vc)}
.ec svg{width:14px;height:14px}
.ec b{font-family:var(--f-display);font-size:15px}
.ec.ko{color:var(--lose);border-color:rgba(240,122,112,.45)}
.evo-b small{font-size:12.5px;color:var(--muted);line-height:1.4}
.evo-b small.evo-miss{color:var(--lose)}
.evo-b .btn{align-self:flex-start;margin-top:2px}
/* Étoiles d'un niveau : pleines jusqu'au niveau atteint, vides jusqu'au potentiel */
.stars{display:inline-flex;gap:2px;vertical-align:-2px}
.stars i{display:inline-flex;color:rgba(242,193,78,.28)}
.stars i.on{color:var(--gold)}
.stars svg{width:14px;height:14px}
.evo-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:8px}
.evo-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft)}
.er-card .card{zoom:.3}
.er-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.er-b b{font-family:var(--f-display);font-size:17px;color:#f7f7f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-b small{font-size:12px;color:var(--muted)}
.er-bar{display:block;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.er-bar s{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),#ffdd94);text-decoration:none}
@media (max-width:899px){
  .evo-how{grid-template-columns:1fr}
  .evo-it{gap:12px}
  .evo-c .card{zoom:.4}
}
.tiers{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-block:4px 18px}
.tiers span{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.tiers i,.dot{width:9px;height:9px;border-radius:1px;transform:rotate(45deg);display:inline-block;flex:none}
.hint{font-size:13px;color:var(--muted);margin-top:18px}

/* Catalogue (onglet « cards ») : une barre — recherche, Toutes / À trouver / Dans l'album, tri, Filtres, affichage —,
   les filtres actifs en pastilles, les communes à trouver grisées avec un cadenas, le panneau des filtres */
.cat-intro{margin:-10px 0 14px;font-size:14.5px;color:var(--muted)}
.cat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cat-q{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:0}
.cat-q svg{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.cat-q input[type=search]{width:100%;min-height:44px;padding:0 16px 0 42px;border-radius:999px;border:1px solid var(--line);background:var(--inset);color:var(--ink);font:inherit}
.cat-bar .seg{flex:none}
.cat-sort{position:relative;display:flex;align-items:center;flex:none}
.cat-sort svg{position:absolute;left:13px;color:var(--gold);pointer-events:none}
.cat-sort select{appearance:none;min-height:42px;padding:0 34px 0 38px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:15px;
  background:var(--surface) linear-gradient(45deg,transparent 50%,var(--gold) 50%) calc(100% - 18px) 19px/5px 5px no-repeat;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.cat-sort select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cat-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-width:42px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:15px}
.cat-btn:hover{border-color:rgba(255,255,255,.3)}
.cat-btn.cl-dir{padding:0;width:42px;font-size:17px;color:var(--gold)}
.cat-btn b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-family:var(--f-mono);font-size:11px}
.cat-btn[aria-expanded="true"]{border-color:var(--gold)}
.cat-view button{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px}
.cat-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.cat-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 6px 0 12px;border-radius:999px;border:1px solid rgba(242,193,78,.45);background:var(--gold-soft);color:var(--gold);font-family:var(--f-display);font-weight:700;font-size:14px}
.cat-chip i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(242,193,78,.2);font-style:normal;font-size:14px}
.cat-chip:hover i{background:var(--gold);color:var(--gold-ink)}
.cat-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:16px 0 12px;font-family:var(--f-display);font-size:18px;color:var(--ink)}
.cat-count b{font-size:22px}
.cat-count span{font-family:var(--f-body);font-size:13.5px;color:var(--muted)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 14px;justify-items:center}
.cat-grid .card{zoom:.56}
.cat-cell{position:relative}
/* À trouver : la carte grisée, un cadenas et « À trouver » à la couleur de son palier */
.cat-cell.missing .cc-in{filter:grayscale(.8) brightness(.7)}
.cc-lock{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.cc-lock svg{width:40px;height:40px;padding:8px;box-sizing:border-box;border-radius:50%;background:rgba(13,20,36,.85);border:2px solid var(--tc);color:var(--tc);box-shadow:0 0 18px -4px var(--tc)}
.cc-lock b{padding:3px 10px;border-radius:999px;background:var(--tc);color:var(--paper);font-family:var(--f-fun);font-weight:800;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cat-cell.missing:hover .cc-in{filter:grayscale(.3) brightness(.9)}
.cl-table tr.miss td{opacity:.55}
/* Le panneau des filtres : à droite sur ordinateur, depuis le bas sur téléphone */
.cat-scrim{position:fixed;inset:0;z-index:55;background:rgba(5,9,18,.6)}
.cat-drawer{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(420px,100vw);box-sizing:border-box;display:flex;flex-direction:column;background:#121d35;border-left:1px solid var(--line);box-shadow:-30px 0 60px -30px rgba(0,0,0,.9);animation:fdin .28s cubic-bezier(.2,1,.3,1)}
@keyframes fdin{from{transform:translateX(40px);opacity:0}}
.fd-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px}
.fd-h h2{font-size:26px}
.fd-h .zb-close{position:static}
.fd-body{flex:1;min-height:0;overflow-y:auto;padding:4px 20px 16px;display:flex;flex-direction:column;gap:18px}
.fd-body h3{margin:0 0 9px;font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fd-body h3 small{display:block;margin-top:3px;letter-spacing:0;text-transform:none;font-size:11px}
.fd-fam{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fd-fam>b{font-family:var(--f-display);font-size:15px;color:#c9d4ea}
.fd-chips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--inset);color:#c9d4ea;font-family:var(--f-display);font-weight:700;font-size:14.5px}
.fchip small{font-family:var(--f-mono);font-weight:400;font-size:10.5px;color:var(--faint)}
.fchip svg{width:15px;height:15px}
.fchip.v-hab svg,.fchip.v-cap svg,.fchip.v-vis svg{color:var(--vc)}
.fchip .ecu{width:22px;height:22px}
.fchip .gems{display:inline-flex;gap:2px;margin-left:4px}
.fchip .gems i{width:6px;height:6px;transform:rotate(45deg);background:var(--sc)}
.fchip:hover{border-color:rgba(255,255,255,.3)}
.fchip[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:var(--gold-ink)}
.fchip[aria-pressed="true"] small,.fchip[aria-pressed="true"] svg{color:var(--gold-ink)}
.fd-foot{display:flex;gap:10px;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft)}
.fd-foot .btn.primary{flex:1}
@media (max-width:899px){
  .cat-intro{margin-top:-4px}
  .cat-q{flex-basis:100%}
  .cat-bar .seg:not(.cat-view){flex:1 1 100%}
  .cat-bar .seg:not(.cat-view) button{flex:1}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-grid .card{zoom:.6}
  .cat-drawer{top:auto;left:0;width:100%;max-height:82vh;border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;animation-name:fdup}
  @keyframes fdup{from{transform:translateY(60px);opacity:0}}
}
@media (prefers-reduced-motion: reduce){.cat-drawer{animation:none}}
.cl-more{display:flex;justify-content:center;margin-top:18px}
.cl-table-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface)}
.cl-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.cl-table th{position:sticky;top:0;background:var(--surface);text-align:left;font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.cl-table th.on{color:var(--gold)}
.cl-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;white-space:nowrap}
.cl-table tr:hover td{background:rgba(255,255,255,.025)}
.cl-table .num{text-align:right}
.cl-table td small{display:block;font-size:11.5px;color:var(--muted)}
.cl-table .lnk{border:0;background:none;padding:0;color:#f7f7f2;font-family:var(--f-display);font-weight:700;font-size:15.5px;text-align:left}
.cl-table .lnk:hover{color:var(--gold);text-decoration:underline}
.cl-table .tr{white-space:normal;min-width:220px}
.tr-i{display:inline-flex;align-items:center;gap:5px;margin:2px 10px 2px 0;font-size:12.5px;color:#d5dcd7;cursor:help}
.tr-i .ecu{width:20px;height:20px;border-width:1.5px}
.cl-table .own{color:var(--win);font-weight:600}
.cl-table .none{color:var(--faint)}
.cl-table .dot{vertical-align:0}
.cl-table .vocs span{display:inline-flex;align-items:center;gap:3px;margin-right:9px;font-family:var(--f-mono);font-size:12px;color:var(--faint);cursor:help}
.cl-table .vocs span.up{color:var(--vc)}
.cl-table .vocs span.down{color:var(--lose)}
.cl-table .vocs svg{width:13px;height:13px}

/* Concours : l'arène. L'échelle des niveaux à gauche, la scène au centre (la main adverse en haut, l'orbe du flux et
   la jauge de captation au milieu, votre main en bas), le panneau d'aide à droite ; la réserve des cartes en tiroir. */
body.tab-fight .wrap{max-width:1360px}
.arene{display:grid;grid-template-columns:196px minmax(0,1fr) 256px;gap:14px;align-items:stretch;margin-top:16px}
.ar-ladder{display:flex;flex-direction:column;gap:8px}
.ar-lv{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;border:1px solid var(--line-soft);background:var(--inset);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.ar-lv:hover:not(:disabled){border-color:rgba(242,193,78,.4);background:var(--surface)}
.ar-lv[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.ar-lv:disabled{cursor:default;opacity:.7}
.ar-ring{position:relative;display:inline-flex;width:40px;height:40px;flex:none}
.ar-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ar-ring circle{fill:none;stroke:rgba(160,185,230,.16);stroke-width:4}
.ar-ring .arc{stroke:var(--gold);stroke-linecap:round;transition:stroke-dasharray .6s cubic-bezier(.65,0,.35,1)}
.ar-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:15px}
.ar-lvt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-lvt>b{font-family:var(--f-display);font-weight:800;font-size:17px;line-height:1}
.ar-lvt>span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-lvt small{font-family:var(--f-mono);font-size:10px;color:var(--faint);line-height:1.3}
.ar-lvt small b{color:var(--ink);font-weight:500}
.ar-lvt small.lock{display:flex;align-items:flex-start;gap:4px;color:var(--lose);white-space:normal}
.ar-lvt small.lock svg{flex:none;margin-top:1px}
.ar-ladder .t-note{margin-top:auto}
/* La scène */
.ar-scene{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:620px;padding:16px 18px;border-radius:22px;border:1px solid var(--line-soft);overflow:hidden;
  background:radial-gradient(ellipse 55% 45% at 50% 50%,color-mix(in srgb,var(--vc,#7cc4ff) 14%,transparent),transparent 70%),radial-gradient(rgba(160,185,230,.09) 1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(180deg,#0a1020,#0d1530 50%,#0a1020);transition:background .6s}
.ar-scene.won{background:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(242,193,78,.2),transparent 70%),radial-gradient(rgba(160,185,230,.09) 1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(180deg,#0a1020,#0d1530 50%,#0a1020)}
.ar-scene>.loading,.ar-scene .empty{margin:auto}
.ar-top,.ar-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ar-bottom{align-items:flex-end;flex-wrap:wrap}
.ar-who{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:420px}
.ar-who b{font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1.1}
.ar-who span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.ar-who em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:600;color:var(--win)}
.ar-who em svg{width:14px;height:14px;flex:none}
.ar-who.them em{color:var(--v-vis)}
.ar-score{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1}
.ar-score small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ar-score b{font-family:var(--f-display);font-weight:900;font-size:40px;color:var(--v-vis);font-variant-numeric:tabular-nums}
.ar-score.us{align-items:flex-start}
.ar-score.us b{color:var(--gold)}
.ar-hand{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px;padding:22px 0 8px}
.ar-hand.them{align-items:flex-start;padding:6px 0 20px}
/* En préparation : vos cartes choisies et les places libres, les cartes adverses connues */
.ar-hcard{position:relative;width:calc(268px * var(--z,.5));display:flex;flex-direction:column;gap:5px;animation:handin .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes handin{from{opacity:0;transform:translateY(16px) scale(.92)}}
.ar-hcard .card{zoom:var(--z,.5)}
.ar-hand.us .ar-hcard .card{transition:transform .3s}
.ar-hand.us .ar-hcard:hover .card{transform:translateY(-8px)}
.ar-hcap{display:flex;justify-content:center;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--muted)}
.ar-hcap b{color:var(--ink);font-size:15px}
.ar-hrm{position:absolute;right:-6px;top:-8px;z-index:4;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:0;background:#0d1424;box-shadow:0 0 0 2px var(--line);color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.ar-hrm:hover{background:var(--lose);color:#fff;box-shadow:0 0 0 2px var(--lose)}
.ar-hslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:calc(268px * var(--z,.5));height:calc(375px * var(--z,.5) + 26px);box-sizing:border-box;border-radius:calc(18px * var(--z,.5));border:2px dashed rgba(160,185,230,.3);background:rgba(13,20,36,.4);color:var(--muted);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.ar-hslot:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)}
.ar-hslot i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(160,185,230,.12);font-style:normal;font-family:var(--f-display);font-weight:800;font-size:16px}
.ar-hslot span{font-family:var(--f-display);font-weight:700;font-size:14px}
.ar-hcard.mystery{align-items:center}
.ar-mys{display:flex;align-items:center;justify-content:center;width:calc(268px * var(--z,.5));height:calc(375px * var(--z,.5));box-sizing:border-box;border-radius:calc(18px * var(--z,.5));border:1.5px dashed rgba(124,196,255,.7);background:repeating-linear-gradient(45deg,rgba(124,196,255,.1) 0 3px,transparent 3px 7px),#0d1424;color:var(--v-vis);font-family:var(--f-fun);font-weight:800;font-size:calc(80px * var(--z,.5))}
/* L'orbe : ce qu'il reste du flux à capter ; derrière, la jauge, eux depuis la gauche, vous depuis la droite */
.ar-orbrow{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 164px minmax(0,1fr);align-items:center;gap:18px}
.ar-tug{position:absolute;left:0;right:0;top:50%;height:14px;margin-top:-7px;border-radius:99px;background:rgba(160,185,230,.1);box-shadow:inset 0 0 0 1px rgba(160,185,230,.14);overflow:hidden}
.ar-tug i{position:absolute;top:0;bottom:0;width:0;transition:width .6s cubic-bezier(.65,0,.35,1)}
.ar-tug .cbb{left:0;background:linear-gradient(90deg,#3a6ea8,var(--v-vis));border-radius:999px 0 0 999px}
.ar-tug .cba{right:0;background:linear-gradient(90deg,var(--gold),#b8862a);border-radius:0 999px 999px 0}
.ar-orb{position:relative;grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:164px;height:164px;border-radius:50%;color:var(--ink);
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--vc,#7cc4ff) 45%,#101a2e),#0a1120 72%);box-shadow:0 0 0 3px #0a1120,0 0 0 5px var(--vc,#7cc4ff),0 0 60px -10px var(--vc,#7cc4ff),inset 0 0 40px -10px var(--vc,#7cc4ff);animation:orb 3s ease-in-out infinite}
@keyframes orb{50%{box-shadow:0 0 0 3px #0a1120,0 0 0 5px var(--vc,#7cc4ff),0 0 90px -6px var(--vc,#7cc4ff),inset 0 0 50px -8px var(--vc,#7cc4ff)}}
.ar-scene.live .ar-orb{animation-duration:1.2s}
.ar-orbic{color:var(--vc);margin-bottom:2px}
.ar-orbic svg{width:34px;height:34px}
.ar-orb b{font-family:var(--f-display);font-weight:900;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.ar-orb small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vc)}
.ar-pips{display:flex;gap:6px;margin-top:8px}
.ar-pips i{width:8px;height:8px;border-radius:50%;background:rgba(9,14,27,.7);border:1px solid rgba(255,255,255,.3);transition:background .3s,transform .3s}
.ar-pips i.past{background:#eef2fa}
.ar-pips i.cur{background:#fff;transform:scale(1.5);box-shadow:0 0 10px #fff}
.ar-orbt{grid-column:3;display:flex;flex-direction:column;gap:3px;min-width:0;padding-left:6px}
.ar-orbt>b{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.05;color:#f7f7f2}
.ar-line{min-height:18px;font-size:13px;line-height:1.35;color:#c9d4ea}
.ar-line b{color:var(--gold)}
.ar-line .crit{color:var(--gold);font-weight:600}
.leak-chip{align-self:flex-start;margin-top:3px;padding:2px 9px;border-radius:999px;background:rgba(240,122,112,.16);border:1px solid rgba(240,122,112,.5);color:var(--lose);font-family:var(--f-display);font-weight:700;font-size:12.5px;animation:leakin .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes leakin{from{opacity:0;transform:translateY(8px)}}
.ar-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}
.ar-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffd97a,var(--gold));color:var(--gold-ink);font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.02em;cursor:pointer;box-shadow:0 14px 30px -12px rgba(242,193,78,.9),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s}
.ar-cta:hover{transform:translateY(-2px)}
.ar-cta.off{background:var(--raise);color:var(--muted);box-shadow:none}
.ar-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Le panneau de droite : comment ça se joue, traction estimée, prime ; pendant le match, l'ancrage et le fil des tours ; puis le résultat */
.ar-side{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border-radius:20px;background:var(--inset);border:1px solid var(--line-soft)}
.ar-howto{display:flex;flex-direction:column;gap:8px}
.ar-how{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border-radius:14px;background:rgba(13,20,36,.6);border:1px solid rgba(160,185,230,.1)}
.ar-how b{font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:.02em}
.ar-how>span:last-child{font-size:12.5px;line-height:1.4;color:var(--muted)}
.ar-how em{font-style:normal;color:var(--vc);font-weight:600}
.ar-hic{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--vc) 16%,transparent);color:var(--vc)}
.ar-hic svg{width:16px;height:16px}
.ar-est{display:flex;flex-direction:column;gap:5px}
.ar-esth{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ar-esth b{color:var(--gold);letter-spacing:0}
.ar-esth b.them{color:var(--v-vis)}
.ar-estb{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(160,185,230,.1)}
.ar-estb i{display:block;height:100%;transition:width .5s cubic-bezier(.65,0,.35,1)}
.ar-estb .ea{background:linear-gradient(90deg,#b8862a,var(--gold))}
.ar-estb .eb{background:linear-gradient(90deg,var(--v-vis),#3a6ea8)}
.ar-estf{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.ar-prime{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border-radius:14px;background:var(--gold-soft);border:1px solid rgba(242,193,78,.3)}
.ar-prime b{font-family:var(--f-display);font-weight:800;font-size:21px;color:var(--gold)}
.ar-prime span{font-size:12.5px;color:var(--muted)}
.ar-prime small{font-size:11.5px;color:var(--faint)}
.ar-pr{font-style:normal;font-size:12px;line-height:1.35;color:var(--v-hab)}
.ar-pr.off{color:var(--lose)}
.ar-prime.off{background:rgba(160,185,230,.06);border-color:var(--line-soft)}
.ar-prime.off b{color:var(--muted)}
.ar-capped{padding:4px 11px;border-radius:999px;background:rgba(240,122,112,.12);border:1px solid rgba(240,122,112,.45);color:var(--lose);font-family:var(--f-display);font-weight:700;font-size:13.5px}
.ar-anc{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.ar-anc b{color:var(--gold)}
.ar-anc b.them{color:var(--v-vis)}
.ar-side .log{flex:1;max-height:none}
.ar-rs{display:flex;flex-direction:column;align-items:flex-start;gap:8px;animation:rsin .5s cubic-bezier(.2,1,.4,1)}
@keyframes rsin{from{opacity:0;transform:translateY(14px)}}
.ar-rs h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1;color:var(--win)}
.ar-rs.lose h3{color:var(--lose)}
.ar-rs p{margin:0;font-size:13.5px;line-height:1.4;color:var(--muted)}
.ar-rs .loot{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:color-mix(in srgb,var(--vc) 16%,transparent);border:1px solid var(--vc);color:var(--vc);font-family:var(--f-display);font-weight:800;font-size:18px}
.ar-rs .loot svg{width:17px;height:17px}
.ar-ech{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ar-ech b{color:var(--gold)}
.ar-rs .lnk,.dk-team .lnk{padding:0;border:0;background:none;color:var(--gold);font-family:var(--f-display);font-weight:700;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#arena:not(:empty){margin-top:16px}
/* La réserve, en tiroir au bas de l'écran */
.dk-drawer{position:fixed;left:50%;bottom:0;z-index:60;width:min(1180px,100vw);max-height:min(70vh,640px);transform:translate(-50%,100%);display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:20px 20px 0 0;background:var(--inset);border:1px solid rgba(242,193,78,.4);border-bottom:0;box-shadow:0 -24px 60px -20px rgba(0,0,0,.9);transition:transform .32s cubic-bezier(.2,1,.4,1)}
.dk-drawer.open{transform:translate(-50%,0)}
.dk-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.dk-l{display:flex;flex-direction:column;gap:6px;margin-right:auto}
.dk-team{display:flex;align-items:center;gap:5px}
.dk-slot{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:40px;padding:0;border-radius:9px;border:1.5px dashed rgba(160,185,230,.3);background:transparent;color:var(--muted);font:inherit}
.dk-slot i{font-style:normal;font-family:var(--f-display);font-weight:700;font-size:13px}
.dk-slot.on{border:1.5px solid rgba(242,193,78,.6);background:var(--gold-soft);cursor:pointer}
.dk-slot.on .blason{width:28px;height:30px}
.dk-slot.on i{position:absolute;right:-5px;top:-6px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-size:10px}
.dk-slot.on:hover{border-color:var(--lose);background:rgba(240,122,112,.15)}
.dk-tn{margin-left:4px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.dk-fchips{display:flex;gap:4px}
.dk-fch{min-height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--line-soft);background:transparent;color:var(--muted);font-family:var(--f-display);font-weight:700;font-size:14px;cursor:pointer}
.dk-fch[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.dk-fch:disabled{opacity:.45;cursor:default}
.dk-q input{box-sizing:border-box;width:240px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line-soft);background:#0d1424;color:var(--ink);font:inherit;font-size:13.5px}
.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;overflow:auto;padding:2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dk-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.2,1.3,.4,1)}
.dk-tile:hover{background:var(--surface);transform:translateY(-3px)}
.dk-tile.sel{background:var(--gold-soft);border-color:rgba(242,193,78,.55)}
.dk-b{position:relative;display:flex;align-items:center;justify-content:center;width:62px;height:64px;border-radius:10px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 45%,transparent),transparent 65%),#101a2e;box-shadow:inset 0 0 0 1.5px var(--rc)}
.dk-b .blason{width:46px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.dk-n{position:absolute;left:-6px;top:-6px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-family:var(--f-display);font-weight:800;font-size:13px;box-shadow:0 0 0 2px var(--inset)}
.dk-name{max-width:100%;font-family:var(--f-display);font-weight:700;font-size:13px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-meta{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.dk-meta em{font-style:normal;color:var(--ink)}
.dk-aff{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-family:var(--f-mono);font-size:11px;background:rgba(160,185,230,.12);color:#c9d4ea}
.dk-aff.up{background:rgba(126,224,161,.16);color:var(--win)}
.dk-aff.down{background:rgba(240,122,112,.16);color:var(--lose)}
.dk-grid .hint{grid-column:1/-1;margin:8px 4px}
@media (max-width:1000px){
  .arene{grid-template-columns:1fr}
  .ar-ladder{flex-direction:row;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .ar-ladder .t-kick{display:none}
  .ar-lv{flex:none;min-width:200px}
  .ar-ladder .t-note{display:none}
  .ar-scene{min-height:0}
}
@media (max-width:640px){
  .ar-scene{padding:12px}
  .ar-who{max-width:none}
  .ar-who b{font-size:16px}
  .ar-score b{font-size:30px}
  .ar-orbrow{grid-template-columns:1fr;gap:10px;justify-items:center;text-align:center}
  .ar-tug{position:relative;top:auto;margin:0;width:100%;order:3}
  .ar-orb{grid-column:1;width:132px;height:132px}
  .ar-orb b{font-size:34px}
  .ar-orbt{grid-column:1;padding-left:0;align-items:center}
  .ar-bottom{flex-direction:column;align-items:stretch}
  .ar-acts{margin-left:0}
  .ar-cta{flex:1}
  .dk-drawer{width:100vw;max-height:80vh;padding:12px}
  .dk-q{flex:1}
  .dk-q input{width:100%}
  .dk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){.ar-orb,.ar-hcard,.ar-rs,.leak-chip{animation:none}.dk-drawer{transition:none}}

/* Arène : les cartes en lice (réduites par --z selon la taille des équipes) ; sous chacune, sa traction du tour,
   par rapport à la plus forte du concours, et ce qu'elle a attiré. Particules du flux, coups d'éclat, fin de concours. */
.fighter{position:relative;width:calc(268px * var(--z,.5));display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(26px) scale(.92);transition:opacity .45s,transform .55s cubic-bezier(.2,1.2,.4,1)}
.ar-hand.them .fighter{transform:translateY(-26px) scale(.92)}
.fighter.in{opacity:1;transform:none}
.fighter .fc{position:relative;border-radius:calc(18px * var(--z,.5))}
.fighter .fc .card{zoom:var(--z,.5)}
.fcap{min-width:0;container-type:inline-size;background:var(--raise);border:1px solid var(--line-soft);box-shadow:inset 0 2px 0 var(--rc);border-radius:10px;padding:5px 7px 4px}
.fcap .trac{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.fcap .trac i{display:block;height:100%;width:0;background:var(--gold);transition:width .35s}
.fcap .t-v{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:3px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.fcap .t-v b{color:var(--ink)}
.fcap .tl{font-size:inherit}
.fcap .t-got{display:inline-flex;align-items:center;gap:3px;color:var(--vc)}
.fcap .t-got svg{width:11px;height:11px;flex:none}
.fcap .t-got b{color:var(--vc)}
@container (max-width:170px){.fcap .tl{display:none}}
/* Bulle de traction au-dessus de la carte */
.fighter .contrib{position:absolute;left:50%;top:-6px;z-index:6;font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--win);text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.7);pointer-events:none;white-space:nowrap;animation:fpop 1s ease-out forwards}
.fighter .contrib.crit{font-size:21px;color:var(--gold)}
@keyframes fpop{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1;transform:translate(-50%,-4px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-28px) scale(1)}}
@keyframes pop{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-18px)}}
/* Chaque tour, la carte bondit vers la jauge ; un coup d'éclat la fait flamboyer et vaciller */
.ar-hand.us .fighter.hit .fc{animation:lunge-up .5s cubic-bezier(.3,1.5,.5,1)}
.ar-hand.them .fighter.hit .fc{animation:lunge-down .5s cubic-bezier(.3,1.5,.5,1)}
.ar-hand.us .fighter.crit .fc{animation:crit-up .75s cubic-bezier(.3,1.5,.5,1)}
.ar-hand.them .fighter.crit .fc{animation:crit-down .75s cubic-bezier(.3,1.5,.5,1)}
@keyframes lunge-up{40%{transform:translateY(-12px) scale(1.04)}}
@keyframes lunge-down{40%{transform:translateY(12px) scale(1.04)}}
@keyframes crit-up{25%{transform:translateY(-16px) scale(1.09) rotate(-3deg)}45%{transform:translateY(-14px) scale(1.09) rotate(3deg)}65%{transform:translateY(-8px) scale(1.05) rotate(-1.5deg)}}
@keyframes crit-down{25%{transform:translateY(16px) scale(1.09) rotate(3deg)}45%{transform:translateY(14px) scale(1.09) rotate(-3deg)}65%{transform:translateY(8px) scale(1.05) rotate(1.5deg)}}
.fighter.crit .fc::after{content:"";position:absolute;inset:-5px;border-radius:calc(18px * var(--z,.5) + 5px);border:3px solid var(--gold);box-shadow:0 0 26px var(--gold),inset 0 0 18px rgba(242,193,78,.5);animation:eclat .9s ease-out forwards;pointer-events:none;z-index:5}
/* Le flux atteint la carte : elle s'illumine de la couleur de la vocation en jeu */
.fighter.absorb .fc::before{content:"";position:absolute;inset:-3px;border-radius:calc(18px * var(--z,.5) + 3px);box-shadow:0 0 0 2px var(--vc),0 0 24px -2px var(--vc);opacity:0;animation:absorb .8s ease-out;pointer-events:none;z-index:4}
@keyframes absorb{30%{opacity:1}100%{opacity:0}}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px;z-index:5}
.pt{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;display:flex;align-items:center;justify-content:center;color:var(--vc);filter:drop-shadow(0 0 5px var(--vc));transition:transform .75s cubic-bezier(.3,.65,.3,1),opacity .3s ease .5s}
.pt svg{width:100%;height:100%}
.pt.go{opacity:0}
.pt.leak{color:var(--lose);filter:drop-shadow(0 0 5px var(--lose))}
.cf{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:1px;background:hsl(var(--h) 92% 60%);transition:transform 1.1s cubic-bezier(.2,.7,.3,1),opacity .6s ease .6s}
@keyframes eclat{from{opacity:1;transform:scale(.96)}to{opacity:0;transform:scale(1.14)}}
/* Fin du concours : le camp vainqueur bondit et s'illumine, l'autre s'éteint */
.ar-scene.won .ar-hand.us .fighter .fc,.ar-scene.lost .ar-hand.them .fighter .fc{animation:victory .9s cubic-bezier(.3,1.5,.5,1) both}
.ar-scene.won .ar-hand.us .fighter .fc::before,.ar-scene.lost .ar-hand.them .fighter .fc::before{content:"";position:absolute;inset:-3px;border-radius:calc(18px * var(--z,.5) + 3px);box-shadow:0 0 0 2px var(--win),0 0 28px -4px var(--win);opacity:1;animation:none;pointer-events:none;z-index:4}
.ar-scene.lost .ar-hand.them .fighter .fc::before{box-shadow:0 0 0 2px var(--lose),0 0 28px -4px var(--lose)}
.ar-scene.won .ar-hand.them .fighter .fc,.ar-scene.lost .ar-hand.us .fighter .fc{filter:grayscale(.8) brightness(.62);transform:scale(.95);transition:filter .9s,transform .9s}
@keyframes victory{0%{transform:none}35%{transform:translateY(-14px) scale(1.07)}60%{transform:translateY(0) scale(.98)}100%{transform:none}}

/* Bilan d'un concours : résultat, prime, échelon, puis ce que chaque carte a gagné */
/* sans retour à la ligne : sinon la grille des fiches est mesurée sur une seule colonne, puis étirée */
.result.bilan{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px}
.result.bilan>.bl-head{flex-direction:row}
.bl-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;align-items:flex-start}
.bl-t{display:flex;flex-direction:column;gap:4px}
.bl-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.prime{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--gold);background:var(--gold-soft);border:1px solid rgba(242,193,78,.45);border-radius:999px;padding:3px 12px;animation:primepop .6s .3s both}
@keyframes primepop{from{opacity:0;transform:scale(.7)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
.bl-ech{display:flex;flex-direction:column;gap:5px;min-width:190px}
.bl-ech small{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-align:right}
.bl-ech small b{color:var(--ink)}
.ech i.rise.on{animation:rung .7s ease-out}
.ech i.fall{transition:background .6s}
@keyframes rung{0%{transform:scaleY(1)}40%{transform:scaleY(2.4);background:#fff}100%{transform:scaleY(1)}}
.bilan h4{font-family:var(--f-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:2px 0 0}
.gains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));align-content:start;gap:10px}
.gain{position:relative;display:flex;gap:14px;align-items:flex-start;min-width:0;background:var(--raise);border:1px solid var(--line-soft);box-shadow:inset 0 3px 0 var(--rc);border-radius:14px;padding:12px 14px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.gain.in{opacity:1;transform:none}
.g-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
/* La carte elle-même : elle arrive en pivotant, un reflet la balaie, une pastille dit l'influence gagnée,
   et elle brille quand son niveau suivant se débloque */
.g-card{position:relative;flex:none;border-radius:9px;opacity:0;transform:perspective(800px) rotateY(-75deg) scale(.8);transition:opacity .45s,transform .8s cubic-bezier(.2,1.3,.4,1)}
.g-card .card{zoom:.45}
.gain.in .g-card{opacity:1;transform:none}
.g-card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:9px;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 64%) no-repeat;background-size:260% 100%;background-position:150% 0}
.gain.in .g-card::after{animation:gshine 1s .55s ease-out}
@keyframes gshine{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-50% 0}}
.g-plus{position:absolute;left:-10px;top:-10px;z-index:3;display:flex;flex-direction:column;align-items:center;line-height:1;padding:4px 8px 3px;border-radius:10px;background:var(--gold);color:var(--gold-ink);font-family:var(--f-fun);font-weight:800;font-size:14px;box-shadow:0 6px 16px -6px rgba(0,0,0,.8),0 0 16px -4px var(--gold);transform:scale(0) rotate(-12deg);pointer-events:none}
.g-plus small{font-family:var(--f-mono);font-weight:500;font-size:8px;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.gain.in .g-plus{animation:gplus .7s .9s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gplus{0%{transform:scale(0) rotate(-12deg)}60%{transform:scale(1.25) rotate(4deg)}100%{transform:scale(1) rotate(-4deg)}}
.gain.unl .g-card{animation:unlglow 1.4s ease-in-out infinite alternate}
@keyframes unlglow{from{box-shadow:0 0 0 1px rgba(242,193,78,.5),0 0 12px -4px var(--gold)}to{box-shadow:0 0 0 2px var(--gold),0 0 30px -2px var(--gold)}}
@media (max-width:420px){.g-card .card{zoom:.38}.gain{gap:11px;padding:11px 12px}}
.g-id{display:flex;gap:10px;align-items:center;min-width:0}
.g-id .blason{width:34px;height:36px;flex:none;object-fit:contain}
.g-id>div{min-width:0}
.g-id b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.1;color:#f7f7f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-id small{display:block;font-size:11.5px;color:var(--muted)}
.g-got{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;color:var(--vc)}
.g-got svg{width:17px;height:17px}
.g-got span{font-size:14px;color:var(--ink)}
.g-got b{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--vc);font-variant-numeric:tabular-nums}
.g-got small{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);width:100%}
.g-inf{display:flex;flex-direction:column;gap:5px}
.g-l{font-size:13px;color:var(--muted)}
.g-l b{font-family:var(--f-display);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.g-l small{font-size:12px}
.g-l .plus{font-style:normal;font-weight:700;color:var(--gold);margin-left:8px}
.ibar{position:relative;display:block;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.ibar s{position:absolute;left:0;top:0;bottom:0;border-radius:4px;text-decoration:none;background:var(--gold)}
.ibar s.old{background:rgba(242,193,78,.5);z-index:1}
.ibar s.new{transition:width 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px rgba(242,193,78,.6)}
.g-rank{font-size:12.5px;color:var(--ink);font-weight:600}
.g-rank em{font-style:normal;font-weight:700;margin-left:6px}
.g-rank .up{color:var(--win)}
.g-rank .top{color:var(--gold)}
.g-unlock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;background:var(--gold-soft);border:1px solid rgba(242,193,78,.45);font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--gold)}
.g-unlock.fresh{opacity:0;transform:scale(.9)}
.g-unlock.fresh.pop{animation:unlock .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes unlock{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.05);box-shadow:0 0 26px -4px var(--gold)}100%{opacity:1;transform:scale(1)}}
.btn.sm{min-height:30px;padding:3px 12px;font-size:14px}

/* Ressources qui montent, boosters gagnés */
@keyframes bump{0%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 2px var(--vc),0 0 26px -4px var(--vc)}100%{box-shadow:0 0 0 0 transparent}}
nav.tabs button.ping{animation:ping 1.2s ease-out 2}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,193,78,.75)}100%{box-shadow:0 0 0 12px rgba(242,193,78,0)}}
.log{list-style:none;margin:0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--inset);max-height:240px;overflow:auto;font-size:13.5px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:3px;color:#c9d1cb}
.log li.tour b{color:var(--win)}
.log li .r{font-family:var(--f-mono);font-size:11px;color:var(--faint);margin-right:6px}
.log .crit{color:var(--gold);font-weight:600}
.result{border-radius:16px;padding:16px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line)}
.result.win{border-color:var(--win);background:rgba(108,194,122,.08)}
.result.lose{border-color:var(--lose);background:rgba(240,122,112,.07)}
.result>div:first-child{display:flex;flex-direction:column;gap:3px}
.result h3{font-size:28px}
.result.win h3{color:var(--win)}
.result.lose h3{color:var(--lose)}
.result .loot{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--vc)}
.result .loot svg{width:18px;height:18px}

/* Règles */
.rules{margin-top:36px;border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.rules section{min-width:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;padding:16px 18px}
.rules p,.rules li{max-width:62ch;font-size:14px;color:#c9d1cb}
.rules ul{padding-left:18px;margin:6px 0}
.formula{font-family:var(--f-mono);font-size:13px;background:var(--inset);border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px;overflow-x:auto;color:var(--gold);margin-block:8px}
.example{font-size:13.5px;color:var(--muted)}
.rules li>svg{width:15px;height:15px;vertical-align:-3px;margin:0 2px 0 4px;color:var(--gold)}
.example b{color:var(--ink)}

.note{font-size:12.5px;color:var(--faint);margin-top:40px;border-top:1px solid var(--line);padding-top:16px;max-width:70ch}
.reset{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:12.5px;padding:0}
.reset:hover{color:var(--ink)}
.confirm{display:inline-flex;gap:8px;align-items:center;margin-left:8px;flex-wrap:wrap;color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .card .flip,.pack,.fighter,.fcap .trac i,.cb i,.level,.pack .sheen{transition:none}
  .fighter{opacity:1;transform:none}
  .fighter .contrib,.fighter .fc,.fighter .fc::before,.fighter .fc::after{animation:none}
  .g-card{opacity:1;transform:none;transition:none}
  .gain.in .g-card::after,.gain.unl .g-card{animation:none}
  .g-plus,.gain.in .g-plus{transform:none;animation:none}
  .face .shine,.face .foil{transition:none}
  .map .pulse{animation:none;opacity:0}
  .leak-chip,.prime,.ech i.rise.on,.w-res.bump,.w-plus,.w-buy.ping,nav.tabs button.ping{animation:none}
  .gain,.ibar s.new{transition:none}
  .gain{opacity:1;transform:none}
  .g-unlock.fresh,.g-unlock.fresh.pop{opacity:1;transform:none;animation:none}
}

.roster .loc,.opp-list .loc{border:0;background:transparent;color:var(--muted);padding:0 4px;margin-left:2px;font-size:15px;line-height:1;vertical-align:middle;border-radius:4px;cursor:pointer}
.roster .loc:hover,.opp-list .loc:hover{color:var(--gold);background:var(--gold-soft)}

/* Album : par département ou par repère */
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:999px;padding:6px 8px;font-family:var(--f-display);font-weight:600;font-size:15px;white-space:nowrap;color:var(--muted)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.deplist li.fam{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);padding:12px 10px 4px}
.deplist .ecu.ic{width:30px;height:30px}
.trait-intro{display:flex;align-items:flex-start;gap:4px;font-size:14px;max-width:72ch;margin:-8px 0 16px;line-height:1.45;color:#c9d1cb}

/* Règles : légende des repères */
.rules .reperes{grid-column:1/-1}
.rules h4{font-family:var(--f-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:18px 0 8px}
.trait-legend{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 20px}
.trait-legend li{display:grid;grid-template-columns:30px 1fr;gap:1px 10px;align-items:start;font-size:13px;max-width:none}
.trait-legend .ecu{width:30px;height:30px;grid-row:1/3}
.trait-legend b{font-family:var(--f-display);font-size:15px;line-height:1.2;color:#f7f7f2}
.trait-legend b small{display:block;font-family:var(--f-body);font-weight:400;font-size:11.5px;color:var(--muted)}
.trait-legend li>span:last-child{grid-column:2;color:var(--muted);font-size:12.5px;line-height:1.35}

/* Page d'une commune : carte interactive des limitrophes, cartes des limitrophes, plans de contexte */
.cp-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:22px 0 18px}
.cp-top .crumbs{margin:0}
.cp-hero{display:grid;grid-template-columns:268px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.cp-hero{grid-template-columns:1fr;justify-items:center}}
.cp-card{display:flex;flex-direction:column;gap:12px;align-items:center;position:sticky;top:16px}
/* Sur une seule colonne, la carte ne reste pas collée en haut : elle passerait sur la carte des limitrophes */
@media (max-width:760px){.cp-card{position:static}}
.cp-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-align:center}
.cp-tag.own{color:var(--win);border-color:rgba(108,194,122,.5);background:rgba(108,194,122,.08)}
.cp-rank{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--muted);text-align:center;max-width:268px}
.cp-rank b{font-family:var(--f-display);font-size:17px;color:var(--gold)}
/* Classement des détenteurs d'une commune */
.board{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;max-width:760px}
.board li{display:grid;grid-template-columns:52px minmax(0,1fr) 84px 120px 150px;gap:10px;align-items:center;padding:9px 12px;border-radius:11px;font-variant-numeric:tabular-nums}
.board li.gap{margin-top:10px;position:relative}
.board li.gap::before{content:"…";position:absolute;left:24px;top:-14px;color:var(--faint)}
.board li.me{background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
.b-rang{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--muted)}
.board li.p1 .b-rang{color:#f2c14e}
.board li.p2 .b-rang{color:#c3ccd2}
.board li.p3 .b-rang{color:#d9915a}
.b-nom{font-family:var(--f-display);font-weight:700;font-size:17px;color:#f7f7f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-nom em{font-style:normal;font-weight:500;color:var(--faint)}
.b-nom small{font-family:var(--f-mono);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-left:6px}
.b-inf b{font-family:var(--f-display);font-size:18px;color:var(--ink)}
.b-inf small,.b-cc{font-size:11.5px;color:var(--muted)}
.b-niv .niv{margin:0}
@media (max-width:640px){.board li{grid-template-columns:40px minmax(0,1fr) auto;row-gap:2px}.board .b-niv{display:none}.board .b-cc{grid-column:2/-1}}
.lnk-btn{border:0;background:none;padding:0;color:var(--gold);text-decoration:underline;font:inherit;cursor:pointer}
.g-rival{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:2px}
.cp-map{width:100%;min-width:0}
.plan svg.cmap{height:460px}
@media (max-width:760px){.plan svg.cmap{height:340px}}
.cmap [data-code]{cursor:default}
.plan .nb{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.62);transition:fill .15s}
.plan .nb.cown{fill:rgba(85,182,234,.28);stroke:rgba(85,182,234,.9)}
.plan path.nb.hover,.plan path.nb:hover{fill:rgba(232,192,74,.32);stroke:var(--gold);stroke-width:1.8px}
.plan .clbl.hover{fill:var(--gold)}
.cp-sec{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.plans.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.plans.three{grid-template-columns:1fr}}
.peek{position:fixed;z-index:40;pointer-events:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.peek .card{zoom:.85}
.legend i.nbz{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);border-radius:3px}
.legend i.ownz{background:rgba(85,182,234,.28);border:1.5px solid rgba(85,182,234,.9);border-radius:3px}
.crumbs{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px}
.crumbs li{display:flex;flex-direction:column;min-width:0}
.crumbs small{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.crumbs b{font-family:var(--f-display);font-size:22px;line-height:1.1;text-wrap:balance;color:#f7f7f2}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.plans{grid-template-columns:1fr}}
.plan{margin:0;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.plan figcaption{display:flex;flex-direction:column}
.plan figcaption b{font-family:var(--f-display);font-size:16px;line-height:1.15;color:#f7f7f2}
.plan figcaption span{font-size:12px;color:var(--muted);line-height:1.35}
.plan svg{width:100%;height:230px;background:var(--inset);border-radius:10px}
.plan path{vector-effect:non-scaling-stroke;stroke-width:1px;stroke-linejoin:round}
.plan .far{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.16)}
.plan .ghost{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.38)}
.plan path.hl{fill:rgba(232,192,74,.26);stroke:var(--gold);stroke-width:1.8px}
.plan .cm{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.24)}
.plan .cown{fill:rgba(85,182,234,.3);stroke:rgba(85,182,234,.85)}
.plan path.dline{fill:none;stroke:var(--gold);stroke-width:1.6px}
.plan .clbl{font-family:var(--f-body);font-weight:500;fill:#c9d1cb;paint-order:stroke;stroke:var(--inset);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.plan .clbl.own{fill:#8fd0f5}
.plan .clbl.me{font-family:var(--f-display);font-weight:800;fill:#fff;stroke:#3a2f0c}
.plan path.edge{fill:none;stroke:rgba(232,192,74,.7);stroke-width:1.4px;stroke-dasharray:5 3}
.plan circle{vector-effect:non-scaling-stroke;stroke-width:1.5px;stroke:var(--surface)}
.plan .own{fill:#55b6ea}
.plan .pref{fill:#fff}
.plan .me{fill:var(--signal)}
.plan .lbl{font-family:var(--f-display);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;vector-effect:non-scaling-stroke}
.map.big{width:100%;height:210px;--rc:var(--signal)}
.map.big .fr{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.2);stroke-width:3}
.map.big .inset rect{fill:var(--gold-soft);stroke:var(--gold);stroke-width:3}
.legend{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 12px;vertical-align:-1px}
.legend i:first-child{margin-left:0}
.legend i.me{background:var(--signal)}
.legend i.pref{background:#fff}
.legend i.own{background:#55b6ea}
.legend i.zone{background:rgba(232,192,74,.26);border:1.5px solid var(--gold);border-radius:3px}
.legend i.tz{background:color-mix(in srgb,var(--tc) 30%,transparent);border:1.5px solid var(--tc);border-radius:3px}
.legend i.flz{width:18px;height:0;border-radius:0;border-top:2px dotted var(--gold);vertical-align:3px}
/* La commune située sur les plans de contexte : une onde part de son point */
.plan circle.mering{fill:none;stroke:var(--signal);stroke-width:1.5px;transform-box:fill-box;transform-origin:center;animation:mering 2.4s ease-out infinite;pointer-events:none}
@keyframes mering{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.6);opacity:0}}

/* Carte d'influence (page d'une commune) : la commune dorée au centre et ses ondes, les limitrophes teintées selon
   leur palier (--tc), des flux animés vers chacune, les noms en pastilles ; à côté, le classement du voisinage.
   Survol d'une limitrophe, de sa pastille ou de sa ligne : tout s'allume ensemble et sa carte s'affiche. */
.plan figcaption.im-cap{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:12px}
.plan figcaption.im-cap>span:first-child{display:flex;flex-direction:column;font-size:inherit;color:inherit}
.plan figcaption .im-live{flex:none;display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;background:var(--gold-soft);border:1px solid rgba(242,193,78,.4);color:var(--gold);font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.im-live i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:imblink 1.6s ease-in-out infinite}
@keyframes imblink{50%{opacity:.3}}
.im-wrap{display:flex;flex-direction:column;gap:12px}
.plan svg.imap{height:500px}
@media (max-width:760px){.plan svg.imap{height:360px}}
.plan svg.imap{background:radial-gradient(rgba(160,185,230,.1) 1px,transparent 1.5px) 0 0/16px 16px,var(--inset)}
.imap path.nb{fill:color-mix(in srgb,var(--tc) 9%,transparent);stroke:color-mix(in srgb,var(--tc) 62%,transparent);transform-box:fill-box;transform-origin:center;animation:imtile .7s cubic-bezier(.2,1.2,.4,1) backwards;transition:fill .25s,stroke .25s;cursor:pointer}
.imap path.nb.cown{fill:color-mix(in srgb,var(--tc) 28%,transparent);stroke:#8fd0f5;stroke-width:1.6px}
.imap path.nb.hover{fill:color-mix(in srgb,var(--tc) 34%,transparent);stroke:var(--gold);stroke-width:2px}
@keyframes imtile{from{opacity:0;transform:scale(.9)}}
.imap path.flow{vector-effect:none;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 16;opacity:.4;pointer-events:none;animation:imflow 1.1s linear infinite;transition:opacity .25s,stroke-width .25s}
.imap path.flow.own{stroke:#8fd0f5;opacity:.7}
.imap path.flow.hover{opacity:1;stroke-width:5}
@keyframes imflow{to{stroke-dashoffset:-38}}
.imap path.core{fill:url(#im-gold);stroke:var(--gold);stroke-width:2.2px}
.imap .glow path.core{fill:var(--gold);stroke:none;opacity:.55}
.imap .glow{animation:imbreathe 2.6s ease-in-out infinite;pointer-events:none}
@keyframes imbreathe{50%{opacity:.45}}
.imap circle{vector-effect:none}
.imap circle.halo{stroke:none;pointer-events:none}
.imap circle.ring{fill:none;stroke:var(--gold);stroke-width:2.6;transform-box:fill-box;transform-origin:center;animation:imring 3.3s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
@keyframes imring{0%{transform:scale(.35);opacity:.85}100%{transform:scale(4.4);opacity:0}}
.imap circle.ctr{fill:#fff6d8;stroke:var(--gold);stroke-width:3;pointer-events:none}
.imap .chip{cursor:pointer}
.imap .chip rect{fill:rgba(13,20,36,.8);stroke:rgba(160,185,230,.25);stroke-width:1.5;transition:fill .2s,stroke .2s}
.imap .chip circle{fill:var(--tc);stroke:none}
.imap .chip text,.imap .mechip text{font-family:var(--f-display);font-weight:600;fill:var(--ink)}
.imap .chip.own rect{stroke:#8fd0f5}
.imap .chip path.ck{vector-effect:none;fill:none;stroke:#8fd0f5;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.imap .chip.hover rect{fill:rgba(40,32,10,.95);stroke:var(--gold)}
.imap .mechip{pointer-events:none}
.imap .mechip rect{fill:var(--gold);filter:drop-shadow(0 0 10px rgba(242,193,78,.7))}
.imap .mechip text{font-weight:800;fill:var(--gold-ink)}
.imap .mechip text.cap{font-family:var(--f-mono);font-weight:500;font-size:15px;letter-spacing:.14em;fill:var(--gold)}
.nbl{display:flex;flex-direction:column;gap:6px;min-width:0}
.nbl-h{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.nbl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(var(--rows,4),auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px 14px}
@media (max-width:640px){.nbl ol{grid-template-rows:none;grid-auto-flow:row}}
.nbl li{display:grid;grid-template-columns:16px 9px minmax(0,1fr) 34px;align-items:center;gap:8px;padding:6px 9px;border:1px solid transparent;border-radius:10px;font-size:13.5px;transition:background .2s,border-color .2s;animation:imrow .5s var(--d,0s) cubic-bezier(.2,1,.4,1) backwards}
@keyframes imrow{from{opacity:0;transform:translateX(10px)}}
.nbl li[data-code]{cursor:pointer}
.nbl li.hover{background:var(--gold-soft);border-color:rgba(242,193,78,.45)}
.nbl li.me{background:rgba(242,193,78,.07)}
.nbl .nr{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.nbl li>i{width:9px;height:9px;border-radius:50%;background:var(--tc)}
.nbl li.me>i{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.nbl .nn{display:flex;flex-direction:column;gap:4px;min-width:0}
.nbl .nn>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbl .nn small{font-family:var(--f-mono);font-size:10px;margin-left:4px;color:var(--gold)}
.nbl .nn small.own{color:#8fd0f5}
.nbl s{display:block;height:4px;border-radius:2px;background:var(--tc);text-decoration:none;transform-origin:left;animation:imbar .8s var(--d,0s) cubic-bezier(.2,.8,.2,1) backwards}
.nbl li.me s{background:var(--gold)}
@keyframes imbar{from{transform:scaleX(0)}}
.nbl b{font-family:var(--f-display);font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  .imap path.nb,.imap path.flow,.imap .glow,.im-live i,.nbl li,.nbl s{animation:none}
  .imap circle.ring,.plan circle.mering{display:none}
}

/* Ouverture d'un booster : scène plein écran, rayons, paquet qui flotte, tremble et se déchire, cartes qui jaillissent,
   rares qui pulsent face cachée puis éclatent en étincelles */
.packstage{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:28px 16px;overflow-x:hidden;overflow-y:auto;
  background:radial-gradient(ellipse at 50% 44%,rgba(47,74,140,.6),rgba(6,10,22,.96) 70%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:psin .35s ease-out}
@keyframes psin{from{opacity:0}to{opacity:1}}
/* les rayons débordent largement : leur calque les rogne, sinon la scène défilerait */
.ps-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.ps-rays{position:absolute;left:50%;top:46%;width:1200px;height:1200px;margin:-600px 0 0 -600px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(242,193,78,.14) 0deg 7deg,transparent 7deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 60%);mask-image:radial-gradient(circle,#000 10%,transparent 60%);animation:spin 20s linear infinite;transition:opacity .9s}
.packstage.dealt .ps-rays{opacity:.3}
@keyframes spin{to{transform:rotate(360deg)}}
.ps-flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:3;background:radial-gradient(circle at 50% 46%,rgba(255,250,230,.95),rgba(255,236,190,.35) 22%,transparent 58%)}
.ps-flash.on{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.packstage .fx-layer{position:fixed;border-radius:0;z-index:6}
.ps-pack{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2}
.pack.big{width:236px;height:330px;max-width:none;overflow:visible;cursor:default;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -12px rgba(242,193,78,.55)}
.pack.big::before{border-radius:18px}
.pack.big .tear{height:40px;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#3a63b8,#2a4f9e);border-bottom:2px dashed rgba(255,255,255,.55);z-index:2}
.pack.big .sign{font-size:25px}
.pack.big .sheen{border-radius:18px;animation:sheen 2.4s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.ps-pack.float .pack{animation:float 2.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.ps-pack.shake .pack{animation:packshake .52s ease-in-out}
@keyframes packshake{0%,100%{transform:rotate(0)}15%{transform:rotate(-4deg) scale(1.03)}30%{transform:rotate(4deg) scale(1.05)}45%{transform:rotate(-5deg) scale(1.06)}60%{transform:rotate(5deg) scale(1.08)}80%{transform:rotate(-2deg) scale(1.09)}}
.ps-pack.rip .tear{animation:rip .5s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes rip{to{transform:translate(90px,-130px) rotate(32deg);opacity:0}}
.ps-pack.gone{animation:packgone .55s ease-in forwards}
@keyframes packgone{to{transform:translate(-50%,-10%) scale(.6);opacity:0}}
.ps-cards{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;max-width:1080px}
.ps-cards:empty{display:none}
.ps-slot{position:relative;opacity:0}
.ps-slot.deal{animation:deal .7s cubic-bezier(.18,.9,.25,1.05) var(--d) forwards}
@keyframes deal{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.3) rotate(var(--fr))}55%{opacity:1}to{opacity:1;transform:none}}
.ps-slot .card.down{--lift:0px}
.ps-slot .card.down:hover{--lift:-10px}
.ps-slot .card.down.t3 .back,.ps-slot .card.down.t4 .back,.ps-slot .card.down.t5 .back{animation:rarehint 1.3s ease-in-out infinite}
@keyframes rarehint{0%,100%{box-shadow:0 0 0 2px var(--rc),0 0 22px -6px var(--rc)}50%{box-shadow:0 0 0 3px var(--rc),0 0 50px 4px var(--rc)}}
.ps-slot.shown .badge{animation:badgepop .5s cubic-bezier(.2,.8,.2,1.3) both}
@keyframes badgepop{from{transform:scale(0)}to{transform:scale(1)}}
.ps-slot.glow::after{content:"";position:absolute;inset:-8px;border-radius:22px;border:3px solid var(--sc);box-shadow:0 0 30px var(--sc);animation:eclat 1s ease-out forwards;pointer-events:none}
.ps-rare{position:absolute;left:50%;top:-18px;z-index:5;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--rc);text-shadow:0 0 16px var(--rc),0 2px 0 #000;white-space:nowrap;pointer-events:none;animation:rarepop 1.8s ease-out forwards}
@keyframes rarepop{0%{opacity:0;transform:translate(-50%,12px) scale(.6)}18%{opacity:1;transform:translate(-50%,0) scale(1.12)}80%{opacity:1;transform:translate(-50%,-4px) scale(1)}100%{opacity:0;transform:translate(-50%,-16px)}}
.spark{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--sc);box-shadow:0 0 10px var(--sc);transition:transform .95s cubic-bezier(.2,.7,.3,1),opacity .5s ease .5s}
.ps-bar{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:48px;text-align:center}
.ps-bar p{margin:0;color:var(--muted);font-size:14px}
.ps-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--muted);animation:primepop .5s both}
.ps-sum b{color:var(--ink);font-weight:800}

/* Message d'erreur ou d'information */
/* Infobulles : une bulle HTML à la place du « title » du navigateur (app.js : showTip), titre, corps et pied */
.tip{position:fixed;z-index:90;max-width:300px;box-sizing:border-box;padding:10px 13px 11px;border-radius:12px;background:#121d35;border:1px solid rgba(242,193,78,.38);box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.35);color:var(--ink);font-family:var(--f-body);font-size:13px;line-height:1.45;text-align:left;pointer-events:none;opacity:0;transform:translateY(5px) scale(.97);transform-origin:var(--ax,50%) 100%;transition:opacity .14s ease-out,transform .18s cubic-bezier(.2,1.3,.4,1)}
.tip.below{transform:translateY(-5px) scale(.97);transform-origin:var(--ax,50%) 0}
.tip.on{opacity:1;transform:none}
.tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;margin-left:-6px;background:#121d35;border-right:1px solid rgba(242,193,78,.38);border-bottom:1px solid rgba(242,193,78,.38);transform:rotate(45deg)}
.tip.below::after{bottom:auto;top:-6px;transform:rotate(225deg)}
.tip-h{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.tip-h b{min-width:0;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.15;color:#f7f7f2}
.tip-ic{display:inline-flex;flex:none}
.tip-ic .ecu{width:28px;height:28px}
.tip-metal{margin-left:auto;flex:none;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#a8b0a9}
.tip-metal.r-notable{color:#c3ccd2}
.tip-metal.r-rare{color:#e8c04a}
.tip p{margin:0;color:#c9d4ea}
.tip small{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line-soft);font-family:var(--f-mono);font-size:11px;line-height:1.45;color:var(--gold)}
@media (prefers-reduced-motion: reduce){.tip{transition:none}}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);max-width:min(92vw,520px);background:var(--raise);color:var(--ink);border:1px solid rgba(232,192,74,.45);padding:10px 16px;border-radius:12px;font-size:14px;box-shadow:0 16px 40px -14px rgba(0,0,0,.8);z-index:30}
/* Sur téléphone, au-dessus de la barre des onglets */
@media (max-width:899px){.toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
.toast.error{background:var(--enamel);border-color:var(--enamel);color:#fff}
.loading{color:var(--muted);font-size:14px;padding:12px 0}

/* Territoire : la carte de la collection, de la France à la commune (app.js : terrRender).
   Zoom continu (transformation du groupe SVG) ; épingles HTML qui glissent avec la carte ; panneau du niveau à droite. */
.terr{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
.t-stage{position:relative;height:min(74vh,720px);min-height:480px;border-radius:22px;overflow:hidden;border:1px solid var(--line-soft);touch-action:manipulation;
  background:radial-gradient(circle at 28% 36%,rgba(124,196,255,.09),transparent 52%),radial-gradient(circle at 72% 72%,rgba(242,193,78,.06),transparent 46%),radial-gradient(rgba(160,185,230,.1) 1px,transparent 1.6px) 0 0/22px 22px,#0a1120;
  --stkW:44px;--stkH:58px;--cardW:34px;--cardH:46px;--midW:40px;--midH:54px;--bigW:58px;--bigH:80px;--zt:.9s cubic-bezier(.65,0,.35,1)}
.t-stage.dense{--cardW:26px;--cardH:35px}
.t-map{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.t-zoom{transform-origin:0 0;transition:transform var(--zt)}
.t-map path{vector-effect:non-scaling-stroke;transition:fill .4s,stroke .4s,opacity .45s,stroke-width .25s}
.t-map .rg{fill:rgba(160,185,230,.05);stroke:rgba(160,185,230,.34);stroke-width:1;cursor:pointer}
.t-map .hz{fill:rgba(160,185,230,.05)}
.t-map .h1{fill:rgba(242,193,78,.1)}
.t-map .h2{fill:rgba(242,193,78,.17)}
.t-map .h3{fill:rgba(242,193,78,.26)}
.t-map .h4{fill:rgba(242,193,78,.36)}
.t-map .h5{fill:rgba(242,193,78,.5)}
.t-map .rg.hov,.t-map .bd.hov{fill:rgba(255,217,122,.6);stroke:#ffe6a6;stroke-width:2}
.t-map .rg.dim{fill:rgba(160,185,230,.03);stroke:rgba(160,185,230,.14)}
.t-map .rg.dim.hov,.t-map .bd.dim.hov{fill:rgba(160,185,230,.12);stroke:rgba(255,230,166,.7);stroke-width:1.5}
.t-map .rg.act{fill:rgba(160,185,230,.02);stroke:rgba(160,185,230,.2);pointer-events:none}
.t-map .bd{stroke:rgba(255,230,166,.55);stroke-width:1.1;cursor:pointer}
.t-map .bd.off{opacity:0;pointer-events:none}
.t-map .bd.far{fill:none;stroke:rgba(160,185,230,.1);stroke-width:.7;pointer-events:none}
.t-map .bd.dim{fill:rgba(160,185,230,.04);stroke:rgba(160,185,230,.25)}
.t-map .bd.act{fill:rgba(8,13,26,.7);stroke:none;pointer-events:none}
.t-map .cms{transition:opacity .5s .3s}
.t-map .cms.off{opacity:0;pointer-events:none}
.t-map .cm{fill:rgba(160,185,230,.045);stroke:rgba(160,185,230,.18);stroke-width:.6;cursor:pointer}
.t-map .cm.own{stroke-width:1.1}
.t-map .cm.bz0{fill:rgba(85,182,234,.5);stroke:#9fd8f8}
.t-map .cm.bz1{fill:rgba(126,224,161,.5);stroke:#b4f1cb}
.t-map .cm.bz2{fill:rgba(242,193,78,.5);stroke:#ffdd94}
.t-map .cm.bz3{fill:rgba(201,167,255,.5);stroke:#e0cdff}
.t-map .cm.bz4{fill:rgba(255,154,118,.5);stroke:#ffc2aa}
.t-map .cm.bz5{fill:rgba(240,122,112,.5);stroke:#ffb7af}
.t-map .cm.solo{fill:rgba(238,242,250,.28);stroke:#eef2fa}
.t-map .cm.halo{fill:rgba(242,193,78,.08);stroke:var(--gold);stroke-width:1;stroke-dasharray:3 3;animation:t-march 1.3s linear infinite}
@keyframes t-march{to{stroke-dashoffset:-12}}
.t-map .cm.hov{fill:rgba(255,255,255,.22);stroke:#fff;stroke-width:2}
.t-map .cm.own.hov,.t-map .cm.hl{stroke:#fff;stroke-width:2.4}
.t-map .cm.sel{fill:rgba(242,193,78,.72);stroke:#fff3c4;stroke-width:2.6}
.t-map .cm.far{opacity:.3}
.bfocus .t-map .cm.own:not(.hl){opacity:.3}
.t-map .t-dl{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:0;pointer-events:none}
.t-map .t-dl.on{opacity:.85}

/* Épingles : piles (régions, départements), cartes des communes possédées, voisines à trouver */
.t-pins{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.tpin{position:absolute;display:block;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%);transition:left var(--zt),top var(--zt),opacity .25s}
.tpin.off{opacity:0;visibility:hidden;pointer-events:none;transition:left var(--zt),top var(--zt),opacity .25s,visibility 0s .25s}
.tpin .pop{position:relative;display:block;transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.tpin.on .pop{animation:t-pin .55s .55s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes t-pin{0%{opacity:0;transform:translateY(16px) scale(.4)}100%{opacity:1}}
.tpin:hover,.tpin.hov,.tpin:focus-visible{z-index:6}
.tpin:hover .pop,.tpin.hov .pop,.tpin:focus-visible .pop{transform:translateY(-5px) scale(1.12)}
.tpin:focus-visible{outline:none}
.tpin:focus-visible .pop{outline:2px solid var(--gold);outline-offset:4px;border-radius:9px}
.bfocus .tpin.cpin:not(.hl){opacity:.3}
.tpin .lead,.tpin .anch{position:absolute;z-index:-1;pointer-events:none;display:none}
.tpin .lead{left:50%;top:50%;width:var(--ll);height:1.5px;transform-origin:0 50%;transform:rotate(var(--la));background:linear-gradient(90deg,rgba(242,193,78,.2),rgba(242,193,78,.9))}
.tpin .anch{left:calc(50% + var(--dx));top:calc(50% + var(--dy));width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.25)}
.tpin.led .lead,.tpin.led .anch{display:block;animation:t-fade .4s .7s backwards}
@keyframes t-fade{from{opacity:0}}
.tpin .mc{position:relative;display:block;width:var(--cw);height:var(--ch);border-radius:7px;border:2px solid transparent;overflow:hidden;box-shadow:0 10px 18px -8px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.35);transition:width .5s cubic-bezier(.2,1.2,.4,1),height .5s cubic-bezier(.2,1.2,.4,1),box-shadow .3s}
.tpin .mc img{position:absolute;left:13%;top:11%;width:74%;height:66%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.tpin .mc .ini{position:absolute;left:20%;top:14%;width:60%;height:58%;display:flex;align-items:center;justify-content:center;border-radius:3px 3px 50% 50%;background:rgba(255,255,255,.2);font-family:var(--f-fun);font-weight:800;font-size:12px;color:#fff}
.tpin.pbig .mc .ini{font-size:20px}
.tpin .tstars{position:absolute;left:0;right:0;bottom:3px;display:flex;justify-content:center;gap:3px}
.tpin .tstars i{display:block;width:4px;height:4px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 4px rgba(242,193,78,.9)}
.tpin.cpin .mc{--cw:var(--cardW);--ch:var(--cardH)}
.tpin.cpin.named .mc{--cw:var(--midW);--ch:var(--midH)}
.tpin.cpin.pbig .mc{--cw:var(--bigW);--ch:var(--bigH);box-shadow:0 0 0 2px #fff3c4,0 0 34px -4px rgba(242,193,78,.9),0 16px 28px -10px rgba(0,0,0,.9)}
.tpin.cpin.hl .mc{box-shadow:0 0 0 2px #fff,0 10px 18px -8px rgba(0,0,0,.95)}
.tpin .stkc{position:relative;display:block;width:var(--stkW);height:var(--stkH)}
.tpin .bk{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:7px;border:1.5px solid rgba(242,193,78,.5);background:repeating-linear-gradient(45deg,rgba(242,193,78,.13) 0 3px,transparent 3px 7px),linear-gradient(160deg,#1d2a52,#0a1022);box-shadow:0 8px 14px -8px rgba(0,0,0,.9)}
.tpin .b1{transform:rotate(-10deg) translate(-6px,1px)}
.tpin .b2{transform:rotate(9deg) translate(7px,2px)}
.tpin .stkc .mc{--cw:var(--stkW);--ch:var(--stkH);position:absolute;left:0;top:0}
.tpin .cnt,.tpin .qt{position:absolute;right:-10px;top:-9px;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-family:var(--f-display);font-weight:800;font-size:14px;line-height:23px;text-align:center;box-shadow:0 0 0 2px #0a1120}
.tpin .qt{min-width:19px;height:19px;padding:0 4px;right:-8px;top:-7px;font-size:12px;line-height:19px}
.tpin .lbl{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:999px;background:rgba(9,14,27,.88);border:1px solid rgba(160,185,230,.2);font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--ink);pointer-events:none;transition:opacity .2s}
.tpin .lbl em{font-style:normal;color:var(--gold);margin-left:6px}
.tpin.cpin .lbl,.tpin.gpin .lbl{opacity:0}
.tpin.named .lbl,.tpin:hover .lbl,.tpin.hov .lbl,.tpin:focus-visible .lbl{opacity:1}
.nolbl .tpin.spin .lbl{display:none}
.tpin .gc{display:flex;align-items:center;justify-content:center;width:var(--midW);height:var(--midH);border-radius:7px;border:1.5px dashed rgba(242,193,78,.8);background:rgba(13,20,36,.85);color:var(--gold);transition:width .5s,height .5s}
.tpin.pbig .gc{width:var(--bigW);height:var(--bigH);border-width:2px;box-shadow:0 0 30px -6px rgba(242,193,78,.7)}
/* Liseré des petites cartes : la couleur du palier, comme les grandes */
.tf0{background:radial-gradient(circle at 50% 38%,rgba(154,165,156,.55),transparent 62%) padding-box,linear-gradient(170deg,#1b2648,#070b16) padding-box,linear-gradient(160deg,#e6ebe7,#9aa59c 45%,#4c5650) border-box}
.tf1{background:radial-gradient(circle at 50% 38%,rgba(93,187,99,.55),transparent 62%) padding-box,linear-gradient(170deg,#1b2648,#070b16) padding-box,linear-gradient(160deg,#c9f2cc,#5dbb63 45%,#2a6b30) border-box}
.tf2{background:radial-gradient(circle at 50% 38%,rgba(76,143,224,.55),transparent 62%) padding-box,linear-gradient(170deg,#1b2648,#070b16) padding-box,linear-gradient(160deg,#cfe3ff,#4c8fe0 45%,#1f4a85) border-box}
.tf3{background:radial-gradient(circle at 50% 38%,rgba(162,123,232,.55),transparent 62%) padding-box,linear-gradient(170deg,#1b2648,#070b16) padding-box,conic-gradient(from 210deg,#a27be8,#f08ad1,#7cd4ff,#a6f0c6,#a27be8) border-box}
.tf4{background:radial-gradient(circle at 50% 38%,rgba(240,138,60,.55),transparent 62%) padding-box,linear-gradient(170deg,#1b2648,#070b16) padding-box,conic-gradient(from 210deg,#f08a3c,#ffd2a8,#f08ad1,#ffe27a,#f08a3c) border-box}
.tf5{background:radial-gradient(circle at 50% 38%,rgba(232,192,74,.55),transparent 62%) padding-box,linear-gradient(170deg,#1b2648,#070b16) padding-box,conic-gradient(from 0deg,#fff1b8,#e8c04a,#f08ad1,#7cd4ff,#a6f0c6,#ffe27a,#fff1b8) border-box}

/* Sur la carte : fil d'Ariane, légende, aide */
.t-trail{position:absolute;left:14px;top:14px;z-index:9;display:flex;align-items:center;flex-wrap:wrap;gap:3px;max-width:calc(100% - 28px);padding:5px;border-radius:15px;background:rgba(9,14,27,.84);border:1px solid rgba(160,185,230,.16);backdrop-filter:blur(6px)}
.t-up{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:4px;border-radius:11px;border:1px solid rgba(242,193,78,.45);background:rgba(242,193,78,.12);color:var(--gold);cursor:pointer}
.t-up:hover{background:rgba(242,193,78,.22)}
.t-trail .crumb{display:inline-flex;align-items:center;min-height:40px;padding:0 11px;border-radius:11px;border:0;background:transparent;color:var(--muted);font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.02em;cursor:pointer}
.t-trail button.crumb:hover{background:rgba(160,185,230,.1);color:var(--ink)}
.t-trail .crumb.cur{color:var(--gold);background:rgba(242,193,78,.1);cursor:default}
.t-trail .sep{font-style:normal;color:#56658a}
.t-legend{position:absolute;left:14px;bottom:14px;z-index:9;display:flex;flex-direction:column;gap:7px;padding:10px 12px;border-radius:14px;background:rgba(9,14,27,.84);border:1px solid rgba(160,185,230,.14);font-size:12.5px;color:#c9d4ea;pointer-events:none}
.t-legend .lt{max-width:200px;line-height:1.3}
.t-legend .scale{display:block;width:180px;height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(160,185,230,.14),rgba(242,193,78,.14) 12%,rgba(242,193,78,.7))}
.t-legend .lr{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.t-legend .lg{display:flex;align-items:center;gap:8px}
.t-legend .sw{display:inline-block;width:16px;height:11px;border-radius:3px;flex:none}
.t-legend .sw.bzs{background:linear-gradient(90deg,#55b6ea 0 25%,#7ee0a1 25% 50%,#f2c14e 50% 75%,#c9a7ff 75%)}
.t-legend .sw.so{background:rgba(238,242,250,.3);border:1px solid #eef2fa}
.t-legend .sw.sh{background:rgba(242,193,78,.1);border:1.5px dashed var(--gold)}
.t-legend .sw.se{background:rgba(242,193,78,.72);border:1px solid #fff3c4}
.t-hint{position:absolute;right:14px;bottom:14px;z-index:9;padding:7px 12px;border-radius:999px;background:rgba(9,14,27,.75);border:1px solid rgba(160,185,230,.12);font-family:var(--f-mono);font-size:11px;color:var(--muted);pointer-events:none}

/* Panneau du niveau */
.t-panel{position:sticky;top:16px;max-height:max(480px,min(74vh,720px));overflow:auto;padding:20px;border-radius:22px;background:var(--inset);border:1px solid var(--line-soft);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.t-in{display:flex;flex-direction:column;gap:16px}
.t-in.fade{animation:t-rise .45s .15s cubic-bezier(.2,1,.4,1) backwards}
@keyframes t-rise{from{opacity:0;transform:translateY(10px)}}
.t-kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.t-head h2{margin:4px 0 0;font-family:var(--f-display);font-weight:800;font-size:36px;line-height:1;color:var(--ink)}
.t-head p{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.t-hero{display:flex;align-items:center;gap:14px}
.t-ring{position:relative;width:92px;height:92px;flex:none}
.t-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.t-ring circle{fill:none;stroke:rgba(160,185,230,.13);stroke-width:9}
.t-ring .arc{stroke:var(--gold);stroke-linecap:round;transition:stroke-dasharray .9s cubic-bezier(.65,0,.35,1)}
.t-ring>span{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
.t-ring b{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink)}
.t-ring small{max-width:70px;margin-top:3px;font-size:10.5px;line-height:1.15;color:var(--muted)}
.t-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1;min-width:0}
.t-stats>div{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:12px;background:var(--surface);border:1px solid rgba(160,185,230,.1)}
.t-stats b{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1;color:var(--ink)}
.t-stats span{font-size:12px;line-height:1.25;color:var(--muted)}
.t-panel .g{color:var(--v-hab)}
.t-sect{display:flex;flex-direction:column;gap:4px}
.t-sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.t-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 30px 50px 14px;align-items:center;gap:8px;width:100%;min-height:38px;padding:4px 9px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.t-row.dep{grid-template-columns:26px minmax(0,1fr) 40px 30px 50px 14px}
.t-row .cd{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.t-row .nm{font-weight:600;font-size:14.5px;line-height:1.15}
.t-row .bar{display:block;height:5px;border-radius:99px;background:rgba(160,185,230,.12);overflow:hidden}
.t-row .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b8862a,var(--gold))}
.t-row .ct{font-family:var(--f-display);font-weight:700;font-size:16px;text-align:right}
.t-row .pc{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.t-row .chev{display:flex;color:var(--gold);opacity:.35}
.t-row:hover,.t-row.hov{background:rgba(242,193,78,.08);border-color:rgba(242,193,78,.35)}
.t-row:hover .chev,.t-row.hov .chev{opacity:1}
.t-brow{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:11px;align-items:center;width:100%;padding:9px 11px;border-radius:12px;background:var(--surface);border:1px solid transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
button.t-brow:hover,.t-brow.hov{border-color:rgba(255,255,255,.35);background:var(--raise)}
.t-brow.solo{cursor:default}
.t-sect .t-brow+.t-brow,.t-sect .t-lrow+.t-lrow{margin-top:4px}
.bdot{width:12px;height:12px;border-radius:4px}
.bdot.bz0{background:#55b6ea}
.bdot.bz1{background:#7ee0a1}
.bdot.bz2{background:#f2c14e}
.bdot.bz3{background:#c9a7ff}
.bdot.bz4{background:#ff9a76}
.bdot.bz5{background:#f07a70}
.bdot.so{background:rgba(238,242,250,.5)}
.t-brow .bt{display:flex;flex-direction:column;gap:1px;min-width:0}
.t-brow .bt b{font-weight:600;font-size:14px}
.t-brow .bt span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-brow .by{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--v-hab)}
.t-brow .by small{font-family:var(--f-mono);font-weight:400;font-size:10.5px;color:var(--faint)}
.t-lrow{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:12px;border:1px dashed rgba(242,193,78,.5);background:rgba(242,193,78,.06);color:var(--ink);font:inherit;font-size:13.5px;line-height:1.35;text-align:left;cursor:pointer}
button.t-lrow:hover,.t-lrow.hov{background:rgba(242,193,78,.13)}
.t-lrow.static{cursor:default}
.t-lrow .li{display:flex;flex:none;color:var(--gold)}
.t-lrow b{color:var(--gold);font-weight:600}
.t-note{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--faint)}
.t-fan{display:flex;justify-content:center;align-items:flex-end;padding:8px 0 4px}
.t-face{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;width:96px;height:132px;margin:0 -10px;padding:0 6px 9px;border-radius:12px;border:2.5px solid transparent;color:#fff;font:inherit;cursor:pointer;box-shadow:0 14px 26px -14px rgba(0,0,0,.95);transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.t-face:nth-child(1){transform:rotate(-8deg) translateY(10px)}
.t-face:nth-child(2){z-index:2}
.t-face:nth-child(3){transform:rotate(8deg) translateY(10px)}
.t-face:hover,.t-face.hov,.t-face:focus-visible{z-index:3;transform:translateY(-8px) scale(1.05)}
.t-face .mf{position:absolute;left:18%;top:9%;width:64%;height:52%;display:flex;align-items:center;justify-content:center}
.t-face .mf img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.t-face .ini{display:flex;align-items:center;justify-content:center;width:78%;height:90%;border-radius:4px 4px 50% 50%;background:rgba(255,255,255,.2);font-family:var(--f-fun);font-weight:800;font-size:24px;color:#fff}
.t-face b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;font-family:var(--f-fun);font-weight:800;font-size:10.5px;line-height:1.1;text-align:center;text-transform:uppercase;overflow-wrap:anywhere;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.t-face b.l{font-size:8.5px}
.t-face small{font-family:var(--f-mono);font-size:9.5px;color:rgba(255,255,255,.75)}
.t-card{display:flex;justify-content:center}
.t-cin{zoom:.82}
.t-card.missing .t-cin{filter:grayscale(.75) brightness(.8)}
.t-chips{display:flex;flex-wrap:wrap;gap:6px}
.t-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1.5px dashed rgba(242,193,78,.6);background:transparent;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.t-chip.own{border:1.5px solid rgba(85,182,234,.7);background:rgba(85,182,234,.12)}
.t-chip:hover,.t-chip.hov{background:rgba(242,193,78,.14)}
.t-chip .ok{color:var(--v-hab);font-weight:700}
.t-chip .lk{display:flex;color:var(--gold)}
.t-bonus{padding:2px 9px;border-radius:999px;background:rgba(126,224,161,.14);color:var(--v-hab);font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none;white-space:nowrap}
.t-btns{display:flex;flex-wrap:wrap;gap:8px}
.t-btns .btn{flex:1}
.t-row:focus-visible,.t-brow:focus-visible,.t-lrow:focus-visible,.t-chip:focus-visible,.t-face:focus-visible,.t-up:focus-visible,.t-trail .crumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nox .t-zoom,.nox .tpin{transition:none}
@media (max-width:900px){
  .terr{grid-template-columns:1fr}
  .t-stage{height:clamp(320px,88vw,520px);min-height:0;--stkW:30px;--stkH:40px;--cardW:28px;--cardH:38px;--midW:34px;--midH:46px;--bigW:48px;--bigH:66px}
  .t-stage.dense{--cardW:22px;--cardH:30px}
  .t-panel{position:static;max-height:none;overflow:visible}
  .t-hint,.t-legend .lt{display:none}
  .t-legend{padding:8px 10px;font-size:11.5px}
  .t-trail .crumb{min-height:44px;padding:0 8px;font-size:15px}
  .t-up{width:44px;height:44px}
  .tpin .lbl{padding:2px 7px;font-size:12px}
  .tpin .cnt{min-width:19px;height:19px;padding:0 4px;right:-8px;top:-7px;font-size:12px;line-height:19px}
}
@media (max-width:520px){.t-legend{display:none}}
@media (prefers-reduced-motion: reduce){
  .t-zoom,.tpin,.t-map path,.t-map .cms{transition:none}
  .tpin.on .pop,.tpin.led .lead,.tpin.led .anch,.t-in.fade,.t-map .cm.halo{animation:none}
}

/* Porte-monnaie : recharger */
.w-shop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:none;min-width:58px;padding:4px 10px;border-radius:14px;border:1.5px dashed rgba(242,193,78,.6);background:transparent;color:var(--gold);font:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.w-shop span{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1}
.w-shop b{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.02em}
.w-shop:hover{background:var(--gold-soft);border-style:solid;transform:translateY(-1px)}
.w-shop:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Boutique : les recharges du porte-monnaie et les chances de tirage */
.shopbox{align-items:flex-start;padding-block:32px}
.shop{position:relative;width:min(1080px,100%);display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:22px;background:var(--inset);border:1px solid rgba(242,193,78,.35);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);animation:shopin .35s cubic-bezier(.2,1,.4,1)}
@keyframes shopin{from{opacity:0;transform:translateY(18px) scale(.98)}}
.shop .zb-close{position:absolute;right:14px;top:14px}
.sh-head h2{margin:4px 0 6px;font-size:34px}
.sh-head p{margin:0;max-width:70ch;font-size:14.5px;color:var(--muted)}
.sh-soon{display:flex;gap:10px;align-items:baseline;margin:0;padding:10px 14px;border-radius:12px;background:rgba(124,196,255,.08);border:1px dashed rgba(124,196,255,.5);font-size:13.5px;color:#c9d4ea}
.sh-soon b{flex:none;padding:1px 8px;border-radius:999px;background:var(--v-vis);color:#0d1424;font-family:var(--f-display);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.sh-need{margin:0;padding:10px 14px;border-radius:12px;background:var(--gold-soft);border:1px solid rgba(242,193,78,.45);font-size:14px;color:var(--ink)}
.sh-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sh-offer{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 14px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft);text-align:center;transition:transform .2s,border-color .2s,box-shadow .2s}
.sh-offer:hover{transform:translateY(-3px);border-color:rgba(242,193,78,.5)}
.sh-offer.hot{border-color:var(--gold);background:radial-gradient(circle at 50% 0%,rgba(242,193,78,.18),transparent 60%),var(--surface);box-shadow:0 18px 40px -22px rgba(242,193,78,.9)}
.sh-offer.once{border-style:dashed;border-color:rgba(126,224,161,.6)}
.sh-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 11px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-family:var(--f-display);font-weight:800;font-size:12.5px;letter-spacing:.03em;white-space:nowrap}
.sh-offer.once .sh-badge{background:var(--v-hab);color:#0d1424}
.sh-offer h3{margin:0;font-size:19px}
.sh-big{display:flex;align-items:baseline;justify-content:center;gap:6px}
.sh-big b{font-family:var(--f-display);font-weight:900;font-size:48px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.sh-big span{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.05;color:var(--ink)}
.sh-big small{font-family:var(--f-mono);font-weight:400;font-size:9.5px;letter-spacing:.06em;color:var(--faint)}
.sh-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;width:100%}
.sh-res li{display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:8px;background:rgba(13,20,36,.5);color:var(--vc);font-size:12px}
.sh-res svg{width:14px;height:14px;flex:none}
.sh-res b{font-family:var(--f-display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.sh-res small{color:var(--muted)}
.sh-bonus{padding:2px 10px;border-radius:999px;background:rgba(126,224,161,.14);color:var(--v-hab);font-family:var(--f-display);font-weight:700;font-size:13.5px}
.sh-bonus.base{background:rgba(160,185,230,.1);color:var(--muted)}
.sh-pay{width:100%;min-height:46px;margin-top:auto;border:0;border-radius:12px;background:linear-gradient(180deg,#ffd97a,var(--gold));color:var(--gold-ink);font-family:var(--f-display);font-weight:800;font-size:20px;cursor:pointer;box-shadow:0 10px 22px -12px rgba(242,193,78,.9);transition:transform .15s}
.sh-pay:hover:not(:disabled){transform:translateY(-1px)}
.sh-pay:disabled{opacity:.6;cursor:progress}
.sh-pay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sh-per{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.sh-msg{margin:0;padding:10px 14px;border-radius:12px;background:rgba(240,122,112,.1);border:1px solid rgba(240,122,112,.45);font-size:13.5px;color:var(--ink)}
.sh-odds{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft)}
.sh-odds h3{margin:0;font-size:20px}
.sh-odds p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.sh-odds table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.sh-odds th,.sh-odds td{padding:7px 8px;border-top:1px solid var(--line-soft);text-align:right}
.sh-odds thead th{border-top:0;font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sh-odds th[scope="row"],.sh-odds thead th:first-child{text-align:left}
.sh-odds th[scope="row"]{display:flex;align-items:baseline;gap:8px;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--ink)}
.sh-odds th small{font-family:var(--f-body);font-weight:400;font-size:11.5px;color:var(--faint)}
.sh-dot{width:9px;height:9px;flex:none;transform:rotate(45deg);background:var(--rc);align-self:center}
.sh-own{width:30%}
.sh-own span{display:block;font-size:12px;color:var(--muted)}
.sh-own i{display:block;height:5px;margin-top:3px;border-radius:99px;background:rgba(160,185,230,.12);overflow:hidden}
.sh-own s{display:block;height:100%;border-radius:99px;background:var(--rc);text-decoration:none}
.sh-legal{margin:0;font-size:12px;color:var(--faint)}
@media (max-width:899px){
  .w-shop{min-width:40px;padding:4px 4px;border-radius:12px}
  .w-shop b{display:none}
  .shopbox{padding:10px}
  .shop{padding:18px 14px}
  .sh-head h2{font-size:27px}
  .sh-offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sh-big b{font-size:38px}
  .sh-odds{padding:12px}
  .sh-odds th,.sh-odds td{padding:6px 4px;font-size:12.5px}
  .sh-odds th small{display:none}
}
@media (prefers-reduced-motion: reduce){.shop{animation:none}}

/* Le récit du concours : l'histoire à gauche, phrase après phrase ; le score, les tours et les chiffres à droite */
.recit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;margin-bottom:16px;padding:22px;border-radius:22px;border:1px solid var(--line-soft);
  background:radial-gradient(ellipse 70% 60% at 0% 0%,color-mix(in srgb,var(--vc) 10%,transparent),transparent 60%),var(--inset);animation:rsin .5s cubic-bezier(.2,1,.4,1)}
.recit.win{border-color:rgba(108,194,122,.45)}
.recit.lose{border-color:rgba(240,122,112,.4)}
.rc-story h2{margin:6px 0 14px;font-size:32px}
.recit.win .rc-story h2{color:var(--win)}
.recit.lose .rc-story h2{color:var(--lose)}
.rc-story ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:rc}
.rc-story li{position:relative;padding-left:34px;opacity:0;animation:rcline .6s var(--d,0s) cubic-bezier(.2,1,.4,1) forwards}
.rc-story li::before{counter-increment:rc;content:counter(rc);position:absolute;left:0;top:1px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--vc) 18%,transparent);color:var(--vc);font-family:var(--f-display);font-weight:800;font-size:13px}
.rc-story li>b{display:block;font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rc-story li p{margin:3px 0 0;font-size:15px;line-height:1.55;color:#d7deec}
.rc-story li p b{color:#fff;font-weight:600}
@keyframes rcline{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rc-stats{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft)}
.rc-score{display:flex;align-items:flex-end;justify-content:center;gap:14px;line-height:1}
.rc-score span{display:flex;flex-direction:column;align-items:center;gap:3px}
.rc-score small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rc-score b{font-family:var(--f-display);font-weight:900;font-size:56px;color:var(--gold);font-variant-numeric:tabular-nums;animation:rcpop .7s .2s cubic-bezier(.2,1.5,.4,1) backwards}
.rc-score .them b{color:var(--v-vis);animation-delay:.35s}
.rc-score>i{font-style:normal;font-family:var(--f-display);font-size:34px;color:var(--faint);padding-bottom:8px}
@keyframes rcpop{from{opacity:0;transform:scale(.5)}}
.rc-unit{text-align:center;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.rc-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:200px;padding:4px 2px 0}
.rc-r{display:grid;grid-template-rows:18px 1fr 18px 1fr 18px;align-items:end;justify-items:center;min-width:0}
.rc-r b{font-family:var(--f-mono);font-weight:500;font-size:10.5px;color:var(--faint);align-self:center}
.rc-r.w b{color:var(--gold)}
.rc-a,.rc-b{display:block;width:70%;max-width:30px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#ffd97a,#b8862a);height:var(--h);transform-origin:bottom;animation:rcgrow .7s var(--d,0s) cubic-bezier(.2,1.1,.4,1) backwards}
.rc-b{align-self:start;border-radius:2px 2px 6px 6px;background:linear-gradient(180deg,#3a6ea8,var(--v-vis));transform-origin:top}
@keyframes rcgrow{from{transform:scaleY(0)}}
.rc-mk{display:flex;gap:2px;align-items:center;justify-content:center;height:18px}
.rc-mk i{display:inline-flex;width:14px;height:14px;opacity:0;animation:rcpop .5s calc(var(--d,0s) + .5s) cubic-bezier(.2,1.5,.4,1) forwards}
.rc-mk svg,.rc-leg svg{width:100%;height:100%}
.rc-mk .st.a{color:var(--gold)}
.rc-mk .st.b{color:var(--v-vis)}
.rc-mk .dr{color:var(--lose)}
.rc-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:11.5px;color:var(--muted)}
.rc-leg span{display:inline-flex;align-items:center;gap:5px}
.rc-leg i{width:10px;height:10px;border-radius:3px}
.rc-leg i.a{background:var(--gold)}
.rc-leg i.b{background:var(--v-vis)}
.rc-leg svg{width:12px;height:12px;color:var(--faint)}
.rc-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.rc-kpi>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:var(--inset);border:1px solid rgba(160,185,230,.08)}
.rc-kpi dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rc-kpi dd{margin:0;font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.rc-kpi .mvp{grid-column:1 / -1;background:color-mix(in srgb,var(--gold) 10%,var(--inset));border-color:rgba(242,193,78,.35)}
.rc-kpi .mvp dd{color:var(--gold)}
.rc-kpi .mvp small{font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--muted);margin-left:6px}
@media (max-width:900px){.recit{grid-template-columns:1fr;padding:16px}.rc-story h2{font-size:26px}.rc-bars{height:160px}}
@media (prefers-reduced-motion: reduce){.recit,.rc-story li,.rc-score b,.rc-a,.rc-b,.rc-mk i{animation:none;opacity:1}}

/* Booster Prestige : paquet noir et or, à côté des boosters ordinaires */
.prestige{display:flex;align-items:center;gap:22px;width:min(760px,100%);padding:18px 22px;border-radius:22px;border:1px solid rgba(242,193,78,.45);
  background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(242,193,78,.16),transparent 60%),linear-gradient(160deg,#16120a,#0d1424 60%);box-shadow:0 24px 50px -28px rgba(242,193,78,.6)}
.prestige:empty{display:none}
.pr-pack{flex:none}
.pr-pack .pack{width:132px;height:186px;cursor:pointer}
.pr-pack .pack .inner{gap:6px;padding:10px}
.pr-pack .pack .sign{font-size:15px}
.pack.prestige{background:linear-gradient(160deg,#2a2210,#0b0b10 55%,#3a2a0a);border-color:rgba(242,193,78,.7);box-shadow:0 26px 50px -24px rgba(0,0,0,.9),0 0 34px -8px rgba(242,193,78,.7)}
.pack.prestige .tear{background:repeating-linear-gradient(90deg,rgba(242,193,78,.35) 0 6px,transparent 6px 12px);border-bottom-color:rgba(242,193,78,.5)}
.pack.prestige .kick{color:#ffe6a6;text-shadow:0 0 12px rgba(242,193,78,.8)}
.pack.prestige .guar{color:var(--gold)}
.pack.prestige .sheen{background:linear-gradient(115deg,transparent 30%,rgba(255,230,166,.35) 45%,transparent 60%);background-size:250% 100%;animation:prsheen 3.2s ease-in-out infinite}
@keyframes prsheen{0%,40%{background-position:120% 0}70%,100%{background-position:-60% 0}}
.pack.big.prestige .tear{background:linear-gradient(180deg,#5a4614,#2a2210);border-bottom:2px dashed rgba(242,193,78,.7)}
.pack.big.prestige{box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 90px -10px rgba(242,193,78,.85)}
.pr-t{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.pr-t h3{font-size:24px;color:#ffe6a6}
.pr-t p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.pr-cost{display:flex;flex-wrap:wrap;gap:6px}
.pr-cost span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;background:var(--inset);border:1px solid var(--line-soft);color:var(--vc)}
.pr-cost span.ko{border-color:rgba(240,122,112,.5)}
.pr-cost svg{width:15px;height:15px}
.pr-cost b{font-family:var(--f-display);font-size:17px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.prestige{flex-direction:column;text-align:center;padding:16px}.pr-t{align-items:center}.pr-t h3{font-size:20px}}
@media (prefers-reduced-motion: reduce){.pack.prestige .sheen{animation:none}}
/* Tickets de concours : en tête de l'échelle des niveaux */
.ar-tk{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:var(--gold-soft);border:1px solid rgba(242,193,78,.4)}
.ar-tk.empty{background:rgba(240,122,112,.08);border-color:rgba(240,122,112,.45)}
.ar-tk-ic{display:inline-flex;width:30px;height:30px;flex:none;align-items:center;justify-content:center;border-radius:9px;background:var(--gold);color:var(--gold-ink)}
.ar-tk.empty .ar-tk-ic{background:var(--lose);color:#fff}
.ar-tk-ic svg{width:18px;height:18px}
.ar-tk-t{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.ar-tk-t b{font-family:var(--f-display);font-weight:800;font-size:18px}
.ar-tk-t small{font-family:var(--f-mono);font-size:10px;color:var(--muted);white-space:nowrap}
.ar-tk-pips{display:none}
.ar-cta small{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:2px 8px;border-radius:999px;background:rgba(26,20,6,.18);font-family:var(--f-mono);font-weight:500;font-size:11px}
.ar-cta small svg{width:13px;height:13px}
@media (max-width:1000px){.ar-tk{flex:none;min-width:190px}}

/* Les deniers : une seule monnaie, dorée partout (porte-monnaie, coûts, butin, boutique) */
.coin{--vc:var(--gold)}
.w-res.coin{flex:0 1 auto;min-width:230px;padding-right:20px;background:linear-gradient(180deg,rgba(255,217,122,.13),rgba(242,193,78,.04));border-color:rgba(242,193,78,.42)}
.w-res.coin .w-ic{background:var(--gold);color:var(--gold-ink)}
.w-res.coin .w-ic svg{width:22px;height:22px}
.w-res.coin .w-v b{font-size:30px;color:#ffe6a6}
.w-res.coin .w-v small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ec.coin,.dv-cost span.coin,.pr-cost span.coin{color:#ffe6a6;border-color:rgba(242,193,78,.45);background:rgba(242,193,78,.1)}
.ec.coin.ko,.dv-cost span.coin.ko,.pr-cost span.coin.ko{color:var(--lose);border-color:rgba(240,122,112,.5);background:rgba(240,122,112,.08)}
.pr-cost{align-items:center}
.pr-cost small{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.sh-big svg{width:24px;height:24px;align-self:center;color:var(--gold)}
.sh-res li.bst{color:var(--ink)}
.sh-res li.prem{color:#ffe6a6;background:rgba(242,193,78,.12)}
.sh-res li svg{color:currentColor}
.sh-prestige{display:flex;align-items:center;gap:22px;padding:18px 22px;border-radius:18px;border:1px solid rgba(242,193,78,.45);
  background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(242,193,78,.16),transparent 60%),linear-gradient(160deg,#16120a,#0d1424 60%);box-shadow:0 24px 50px -28px rgba(242,193,78,.6)}
.sh-prestige .pr-pack .pack{cursor:pointer}
.sh-pt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.sh-pt h3{margin:0;font-size:22px;color:#ffe6a6}
.sh-pt p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.sh-pbuy{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sh-have{font-size:13.5px;color:var(--muted)}
.sh-have b{color:var(--gold)}
.sh-lack{padding:6px 12px;border-radius:10px;background:rgba(240,122,112,.1);border:1px solid rgba(240,122,112,.45);font-size:13px;color:var(--ink)}
@media (max-width:899px){
  .w-res.coin{min-width:0;flex:1 1 auto;padding-right:10px}
  .w-res.coin .w-v b{font-size:clamp(18px,6vw,24px)}
  .w-res.coin .w-v small{position:static;width:auto;height:auto;clip:auto;font-size:9px}
}
@media (max-width:640px){.sh-prestige{flex-direction:column;text-align:center;padding:16px}.sh-pt{align-items:center}.sh-pbuy{justify-content:center}}

/* ---------- Comptes : bouton du rail, fenêtre « Mon compte » ---------- */
.mepill{position:relative}
.mepill.cta{border-style:solid;border-color:rgba(242,193,78,.55);background:var(--gold-soft);color:var(--gold)}
.mepill.cta svg{color:var(--gold)}
.me-dot{position:absolute;top:7px;left:23px;width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px var(--paper)}
.dv.acc{width:min(100%,500px);gap:12px}
.acc .t-kick{margin-bottom:-6px}
.acc-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.acc-perks li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4;color:var(--muted)}
.acc-perks li b{color:var(--ink)}
.acc-perks svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--gold)}
.acc-invite{margin:0;padding:10px 13px;border-radius:12px;background:rgba(126,224,161,.1);border:1px solid rgba(126,224,161,.45);font-size:14px;line-height:1.4}
.acc-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--inset);border:1px solid var(--line)}
.acc-tabs button{flex:1;min-height:36px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-family:var(--f-display);font-weight:700;font-size:15px}
.acc-tabs button[aria-selected="true"]{background:var(--gold);color:var(--gold-ink)}
.acc-form{display:flex;flex-direction:column;gap:11px}
.acc-form label{display:flex;flex-direction:column;gap:5px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.acc-form label small{font-family:inherit;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--faint)}
.acc-form input,.acc-inline input,.acc-link input{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--inset);color:var(--ink);font:inherit;font-size:16px;letter-spacing:0;text-transform:none}
.acc-form input:focus-visible,.acc-inline input:focus-visible,.acc-link input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.acc-form input.acc-up{text-transform:uppercase;letter-spacing:.12em;font-family:var(--f-mono)}
.acc-pw{position:relative;display:block}
.acc-pw input{padding-right:46px}
.acc-pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--faint)}
.acc-pw button:hover{color:var(--ink)}
.acc-pw svg{width:18px;height:18px}
.acc-form .btn.primary{min-height:46px;font-size:17px}
.acc-err{margin:0;font-size:13.5px;color:var(--lose)}
.acc-err:empty{display:none}
.acc-msg{margin:0;padding:9px 12px;border-radius:10px;background:rgba(126,224,161,.1);border:1px solid rgba(126,224,161,.4);font-size:13.5px;line-height:1.4}
.acc-note{margin:0;padding:9px 12px;border-radius:10px;background:var(--gold-soft);border:1px solid rgba(242,193,78,.4);font-size:13px;line-height:1.4;color:var(--ink);text-transform:none;letter-spacing:0}
.acc-legal{font-size:11.5px;line-height:1.45;color:var(--faint)}
.acc .lnk-btn{align-self:flex-start;font-size:14px}
.acc-mail{margin:-4px 0 0;font-size:13.5px;color:var(--muted);word-break:break-all}
.acc-mail .ok{color:var(--win);font-weight:600}
.acc-mail .ko{color:var(--lose);font-weight:600}
.acc-warn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:11px 13px;border-radius:12px;background:rgba(240,122,112,.08);border:1px solid rgba(240,122,112,.45)}
.acc-warn p{margin:0;font-size:13.5px;line-height:1.45}
.acc-warn em{color:var(--faint)}
.acc-sec{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid var(--line-soft)}
.acc-sec h4{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.acc-sec h4 svg{width:16px;height:16px}
.acc-p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.acc-p b{color:var(--ink)}
.acc-p.dim{color:var(--faint)}
.acc-link{display:flex;gap:6px}
.acc-link input{min-width:0;font-family:var(--f-mono);font-size:12.5px}
.acc-link .btn{flex:none}
.acc-code{font-family:var(--f-mono);font-size:11.5px;color:var(--faint)}
.acc-code b{color:var(--gold);letter-spacing:.14em}
.acc-fil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.acc-fil li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:9px;background:var(--inset);font-size:13.5px}
.acc-fil li span{color:var(--faint)}
.acc-fil li.ok span{color:var(--win)}
.acc-tot{margin:0;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--gold)}
.acc-inline{display:flex;gap:6px}
.acc-row{display:flex;flex-wrap:wrap;gap:8px}
.acc details{border:1px solid var(--line-soft);border-radius:12px;padding:8px 12px}
.acc details>summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--muted)}
.acc details[open]>summary{margin-bottom:10px;color:var(--ink)}
.acc details.acc-danger>summary{color:var(--lose)}
.acc-danger p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.btn.danger{background:var(--lose);border-color:var(--lose);color:#1a0806}

/* ---------- Onglet Joueurs ---------- */
.joueurs{display:flex;flex-direction:column;gap:18px}
.jx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 20px;border-radius:18px;border:1px solid rgba(242,193,78,.45);background:radial-gradient(ellipse 60% 120% at 0% 50%,rgba(242,193,78,.15),transparent 60%),var(--surface)}
.jx-cta>div{flex:1 1 320px;min-width:0}
.jx-cta b{font-family:var(--f-display);font-weight:800;font-size:22px}
.jx-cta p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.jx-cta.warn{border-color:rgba(240,122,112,.5);background:rgba(240,122,112,.07)}
.jx-cta.ok{border-color:rgba(126,224,161,.45);background:radial-gradient(ellipse 60% 120% at 0% 50%,rgba(126,224,161,.12),transparent 60%),var(--surface)}
.jx-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.jx-card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft);min-width:0}
.jx-card h2,.jx-card h3{margin:0;font-size:22px}
.jx-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.jx-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.jx-h .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button[aria-selected="true"]{background:var(--gold);color:var(--gold-ink)}
.jx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.jx-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:11px;font-variant-numeric:tabular-nums}
.jx-list li:nth-child(odd){background:rgba(255,255,255,.025)}
.jx-list li.me{background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
.jx-list li.p1 .b-rang{color:#f2c14e}
.jx-list li.p2 .b-rang{color:#c3ccd2}
.jx-list li.p3 .b-rang{color:#d9915a}
.jx-name{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;padding:0;color:#f7f7f2;font-family:var(--f-display);font-weight:700;font-size:17px;text-align:left;cursor:pointer}
.jx-name:hover{color:var(--gold)}
.jx-list .you{display:none}
.jx-v{text-align:right;white-space:nowrap}
.jx-v b{font-family:var(--f-display);font-weight:800;font-size:18px}
.jx-v small{font-size:11.5px;color:var(--faint)}
.jx-me{margin:0;font-size:14px}
.jx-note{margin:0;font-size:12px;color:var(--faint)}
.dim{color:var(--faint)}
.jx-card p.dim{margin:0;font-size:13.5px;line-height:1.45}
.jx-news,.jx-meets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jx-news li{display:flex;gap:10px;padding:9px 11px;border-radius:12px;background:var(--inset);font-size:13.5px;line-height:1.45}
.jx-news li.fresh{box-shadow:inset 3px 0 0 var(--gold)}
.jx-news li>i{flex:none;display:inline-flex;width:20px;height:20px;color:var(--gold)}
.jx-news li>i svg{width:20px;height:20px}
.jx-news li.k-defense>i,.jx-news li.k-defi>i{color:var(--v-vis)}
.jx-news li.k-parrainage>i{color:var(--win)}
.jx-news small{display:block;margin-top:2px;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.jx-meets li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:8px 11px;border-radius:11px;background:var(--inset);font-size:13.5px}
.jx-meets li b{font-family:var(--f-display);font-weight:800;font-size:15px}
.jx-meets li.w b{color:var(--win)}
.jx-meets li.l b{color:var(--lose)}
.jx-meets li span{min-width:0;color:var(--muted)}
.jx-meets li .sc{font-family:var(--f-display);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.jx-meets small{grid-column:2/-1;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
@media (max-width:980px){.jx-grid{grid-template-columns:1fr}}

/* ---------- Profil d'un joueur ---------- */
.pf-head{display:flex;align-items:center;gap:16px;margin:16px 0 18px}
.pf-head>div{flex:1;min-width:0}
.pf-head h2{margin:2px 0;font-size:38px;line-height:1;overflow-wrap:anywhere}
.pf-head small{font-size:13px;color:var(--faint)}
.pf-av{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;flex:none;border-radius:18px;background:linear-gradient(150deg,#ffd97a,var(--gold) 55%,#b8862a);color:var(--gold-ink);font-family:var(--f-display);font-weight:900;font-size:36px;box-shadow:0 14px 30px -14px rgba(242,193,78,.8)}
.pf-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pf-stats>div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft)}
.pf-stats b{display:flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.pf-stats b small{font-size:15px;color:var(--faint)}
.pf-stats b svg{width:18px;height:18px;color:var(--gold)}
.pf-stats span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pf-sec{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.pf-sec h3{display:flex;align-items:center;gap:8px;margin:0;font-size:24px}
.pf-sec h3 svg{width:22px;height:22px;color:var(--gold)}
.pf-sec h3 small{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.pf-sec .sub{margin:0;font-size:13.5px;color:var(--muted)}
.pf-def{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft)}
.pf-dh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.pf-dh>span{display:flex;align-items:baseline;gap:10px}
.pf-dh b{font-family:var(--f-display);font-weight:800;font-size:20px}
.pf-dh small{font-size:12.5px;color:var(--faint)}
.pf-dh .btn svg{width:17px;height:17px;margin-right:6px;vertical-align:-3px}
.pf-cards{display:flex;flex-wrap:wrap;gap:10px}
.pf-cards .card{zoom:.56}
@media (max-width:900px){.pf-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.pf-head h2{font-size:30px}.pf-cards .card{zoom:.5}}
@media (max-width:420px){.pf-cards .card{zoom:.42}.pf-av{width:52px;height:52px;font-size:28px}.pf-stats b{font-size:22px}}

/* ---------- Arène : défi, adversaire réel ---------- */
.ar-defi{display:flex;align-items:center;gap:10px;margin-bottom:6px;padding:10px 12px;border-radius:14px;background:rgba(124,196,255,.1);border:1px solid rgba(124,196,255,.5)}
.ar-defi>svg{width:22px;height:22px;flex:none;color:var(--v-vis)}
.ar-defi>span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.15}
.ar-defi small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--v-vis)}
.ar-defi b{font-family:var(--f-display);font-weight:800;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-defi em{font-style:normal;font-size:11px;color:var(--faint)}
.ar-defi .lnk-btn{flex:none;font-size:13px}
.ar-pl{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:3px 10px;border-radius:999px;border:1px solid rgba(124,196,255,.55);background:rgba(124,196,255,.1);color:var(--v-vis);font-family:var(--f-display);font-weight:700;font-size:13px;cursor:pointer}
.ar-pl svg{width:14px;height:14px}
.ar-rs .ar-pl{text-decoration:none}
.g-maire{position:absolute;right:-8px;top:-10px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:linear-gradient(150deg,#ffd97a,var(--gold));color:var(--gold-ink);font-family:var(--f-display);font-weight:800;font-size:13px;box-shadow:0 6px 16px -6px rgba(0,0,0,.8),0 0 18px -4px var(--gold)}
.g-maire.keep{background:var(--surface);color:var(--gold);border:1px solid rgba(242,193,78,.6);box-shadow:none}
.g-maire svg{width:13px;height:13px}

/* ---------- Page d'une commune : le maire ---------- */
.maire{display:flex;align-items:flex-start;gap:12px;max-width:760px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);font-size:14px;line-height:1.45}
.maire.me{border-color:rgba(242,193,78,.6);background:radial-gradient(ellipse 60% 120% at 0% 50%,rgba(242,193,78,.16),transparent 60%),var(--surface)}
.maire>i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--gold-soft);color:var(--gold)}
.maire>i svg{width:20px;height:20px}
.maire small{display:block;margin-top:3px;font-size:12.5px;color:var(--faint)}
.b-nom .crown{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--gold)}
.b-nom .crown svg{width:16px;height:16px}
.b-nom .lnk-btn{color:inherit;text-decoration-color:rgba(242,193,78,.5)}

/* Sept onglets dans la barre du bas sur téléphone */
@media (max-width:899px){
  nav.tabs button{font-size:11px;letter-spacing:0}
  nav.tabs button svg{width:21px;height:21px}
}
/* Fenêtre « Mon compte » plus haute que l écran : elle défile depuis son haut au lieu d être coupée */
#comptebox{align-items:flex-start}
#comptebox>.dv{margin:auto 0}

/* Envoyer son lien de parrainage : email, WhatsApp, SMS */
.acc-share{display:flex;flex-wrap:wrap;gap:6px}
.acc-share .btn{display:inline-flex;align-items:center;text-decoration:none}

/* ---------- Fenêtres sur téléphone : rien ne défile derrière, et la scène d'un booster tient dans l'écran ---------- */
.packstage,.zoombox,.devbox,.dk-drawer,.cat-drawer{overscroll-behavior:contain}
@media (max-width:640px){
  .packstage{gap:16px;padding:16px 10px}
  .pack.big{width:176px;height:246px}
  .pack.big .sign{font-size:19px}
  .ps-cards{gap:8px;max-width:100%}
  .ps-slot .card{zoom:.4}
  .ps-rare{font-size:15px;top:-12px}
}

/* ---------- Le match plein écran : la scène couvre l'écran (ordinateur et téléphone) le temps du concours et du récit ---------- */
body.match-open .ar-scene{position:fixed;inset:0;z-index:48;min-height:0;height:100vh;height:100dvh;border-radius:0;border:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:4px;justify-content:space-between;overflow:hidden;animation:psin .3s ease-out}
body.match-open .ar-hand{padding:6px 0;gap:6px}
body.match-open .ar-hand.them{padding:4px 0 6px}
body.match-open .ar-scene>.ar-top,body.match-open .ar-scene>.ar-bottom{flex:none}
@media (max-height:760px),(max-width:640px){
  body.match-open .ar-who span,body.match-open .ar-who em,body.match-open .ar-who .ar-pl{display:none}
  body.match-open .ar-who b{font-size:15px}
  body.match-open .ar-score b{font-size:26px}
  body.match-open .fcap{display:none}
  body.match-open .ar-orbrow{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);gap:10px;justify-items:stretch;text-align:left}
  body.match-open .ar-orb{grid-column:2;width:112px;height:112px}
  body.match-open .ar-orb b{font-size:28px}
  body.match-open .ar-orbt{grid-column:3;align-items:flex-start}
  body.match-open .ar-orbt b{font-size:14px;line-height:1.15}
  body.match-open .ar-orbt .t-kick{font-size:9.5px}
  body.match-open .ar-tug{position:absolute;left:0;right:0;top:50%;margin:0;order:0}
  body.match-open .ar-bottom{flex-direction:row;align-items:flex-end}
  body.match-open .ar-acts .btn{min-height:34px;padding:4px 12px;font-size:14px}
}
@media (max-width:640px){
  body.match-open .ar-scene{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  body.match-open .ar-orbrow{grid-template-columns:96px minmax(0,1fr)}
  body.match-open .ar-orb{grid-column:1;width:96px;height:96px}
  body.match-open .ar-orb b{font-size:24px}
  body.match-open .ar-orbt{grid-column:2}
  body.match-open .ar-orbt .ar-line{font-size:12px}
}
/* L'écran du résultat : le récit, posé sur la scène ; il défile si besoin, la page derrière non */
.ar-over{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;background:rgba(6,10,22,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:psin .45s ease-out}
.ar-over .recit{width:min(1100px,100%);margin-bottom:0;flex:none}
.ar-over-acts{position:sticky;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(1100px,100%);padding:10px;border-radius:14px;background:rgba(6,10,22,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ar-over-acts .btn.primary{min-height:46px;font-size:18px}
@media (max-width:640px){.ar-over{padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}.ar-over .recit{padding:14px}.rc-story h2{font-size:24px}}
@media (prefers-reduced-motion: reduce){body.match-open .ar-scene,.ar-over{animation:none}}

/* ---------- Album : filtre « évoluées », avant → après sur la carte ---------- */
.alb-by .lbl+.seg{margin-right:14px}
.alb-by h2 small{display:block;margin-top:2px;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--faint)}
.sh-cw{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.sh-ba{display:flex;flex-direction:column;gap:2px;width:calc(268px * .52);box-sizing:border-box;padding:6px 8px;border-radius:10px;background:var(--inset);border:1px solid rgba(242,193,78,.4);font-family:var(--f-mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sh-ba span{display:flex;align-items:center;gap:4px}
.sh-ba span:first-child{color:var(--gold);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.sh-ba .stars{display:inline-flex}
.sh-ba .stars svg{width:10px;height:10px;color:var(--gold)}
.sh-ba small{width:26px;font-size:9px;letter-spacing:.08em;color:var(--faint)}
.sh-ba i{font-style:normal;color:var(--faint)}
.sh-ba b{color:var(--win);font-weight:600}
@media (max-width:899px){.sh-ba{width:calc(268px * .46)}}
.shelves .empty{padding:30px 16px}
@media (max-width:899px){.alb-by{flex-wrap:wrap}.alb-by .lbl+.seg{margin-right:0}}

/* ---------- La mairie : campagne municipale sur la page d'une commune ---------- */
.mairie-sec h3{display:flex;align-items:center;gap:8px}
.mairie-sec h3 svg{width:22px;height:22px;color:var(--gold)}
.mr-head{display:flex;align-items:center;gap:14px;max-width:760px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft)}
.mr-head.me{border-color:rgba(242,193,78,.6);background:radial-gradient(ellipse 60% 120% at 0% 50%,rgba(242,193,78,.16),transparent 60%),var(--surface)}
.mr-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mr-head b{font-family:var(--f-display);font-weight:800;font-size:22px}
.mr-head>div>span{font-size:13px;color:var(--muted)}
.mr-crown{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(150deg,#ffd97a,var(--gold) 55%,#b8862a);color:var(--gold-ink);box-shadow:0 12px 26px -12px rgba(242,193,78,.9)}
.mr-crown svg{width:24px;height:24px}
.mr-me{display:flex;flex-direction:column;gap:12px;max-width:760px;padding:16px;border-radius:18px;background:var(--inset);border:1px solid var(--line-soft)}
.mr-me.maire{border-color:rgba(242,193,78,.45)}
.mr-voix{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center}
.mr-voix .t-kick{grid-column:1/-1}
.mr-voix b{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1;color:#ffe6a6;font-variant-numeric:tabular-nums}
.mr-voix b::after{content:" voix";font-size:16px;font-weight:700;color:var(--gold)}
.mr-bar{display:block;height:8px;border-radius:99px;background:rgba(160,185,230,.14);overflow:hidden}
.mr-bar s{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b8862a,var(--gold));text-decoration:none;transition:width .8s cubic-bezier(.2,1,.4,1)}
.mr-voix small{grid-column:1/-1;font-size:13px;line-height:1.4;color:var(--muted)}
.mr-voix small b{font-family:var(--f-display);font-size:14px;color:var(--ink);font-weight:700}
.mr-voix small b::after{content:none}
.mr-chips{display:flex;flex-wrap:wrap;gap:6px}
.mr-chip{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line-soft);min-width:96px}
.mr-chip small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mr-chip b{font-family:var(--f-display);font-weight:800;font-size:17px}
.mr-chip em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.mr-chip.on{border-color:rgba(126,224,161,.5)}
.mr-chip.on em{color:var(--win)}
.mr-chip .niv{color:var(--gold);letter-spacing:.1em}
.mr-acts{display:flex;flex-wrap:wrap;gap:8px}
.mr-acts .btn{display:inline-flex;align-items:center;gap:8px}
.mr-acts .btn svg{width:18px;height:18px}
.mr-acts .btn small{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 8px;border-radius:999px;background:rgba(26,20,6,.18);font-family:var(--f-mono);font-weight:500;font-size:11px}
.mr-acts .btn:not(.primary) small{background:rgba(160,185,230,.12)}
.mr-acts .btn small svg{width:12px;height:12px}
.mr-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.mr-meet{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(126,224,161,.08);border:1px solid rgba(126,224,161,.45);animation:rsin .5s cubic-bezier(.2,1,.4,1)}
.mr-meet.q0{background:rgba(240,122,112,.07);border-color:rgba(240,122,112,.4)}
.mr-meet.q1{background:var(--gold-soft);border-color:rgba(242,193,78,.45)}
.mr-meet>i{flex:none;display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;background:var(--surface);color:var(--gold)}
.mr-meet>i svg{width:17px;height:17px}
.mr-meet b{display:block;font-size:14.5px;line-height:1.4}
.mr-meet span{font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--win)}
.mr-board li{grid-template-columns:52px minmax(0,1fr) minmax(0,1.1fr) 110px auto}
.b-det{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-det .niv{color:var(--gold)}
.b-act{text-align:right}
.mr-rules{max-width:760px;border:1px solid var(--line-soft);border-radius:12px;padding:8px 14px}
.mr-rules summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--muted)}
.mr-rules[open] summary{margin-bottom:8px;color:var(--ink)}
.mr-how{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.mr-how b{color:var(--ink)}
@media (max-width:640px){
  .mr-board li{grid-template-columns:40px minmax(0,1fr) auto;row-gap:2px}
  .mr-board .b-det{grid-column:2/-1}
  .mr-board .b-act{grid-column:2/-1;text-align:left}
  .mr-voix b{font-size:32px}
}

/* ---------- Le débat : trois questions révélées une à une ---------- */
.dv.debat{width:min(100%,560px)}
.dv.debat h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:22px}
.dv.debat h3 small{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.dv.debat h3 i{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.dq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dq{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--inset);border:1px solid var(--line-soft);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.2,1,.4,1)}
.dq.in{opacity:1;transform:none}
.dq-t{display:flex;flex-direction:column}
.dq-t small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dq-t b{font-family:var(--f-display);font-weight:800;font-size:19px}
.dq-bars{display:flex;flex-direction:column;gap:6px}
.dq-side{display:grid;grid-template-columns:120px minmax(0,1fr) 56px;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.dq-side em{font-style:normal;color:var(--gold);font-weight:700}
.dq-side i{display:block;height:10px;border-radius:99px;background:rgba(160,185,230,.12);overflow:hidden}
.dq-side s{display:block;height:100%;width:0;border-radius:99px;text-decoration:none;background:linear-gradient(90deg,#3a6ea8,var(--v-vis));transition:width .9s cubic-bezier(.2,1,.4,1)}
.dq-side.me s{background:linear-gradient(90deg,#b8862a,var(--gold))}
.dq.go .dq-side s{width:var(--w)}
.dq-side b{text-align:right;font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.dq-side.w span{color:var(--ink);font-weight:700}
.dq-punch{margin:0;font-size:13.5px;font-style:italic;color:#ffe6a6}
.dq-res{align-self:flex-end;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity .4s .8s}
.dq.go .dq-res{opacity:1}
.dq-end{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);animation:rsin .5s cubic-bezier(.2,1,.4,1)}
.dq-end>b{font-family:var(--f-display);font-weight:900;font-size:24px}
.dq-end>b.w{color:var(--win)}
.dq-end>b.l{color:var(--lose)}
.dq-end>span{font-size:14px;line-height:1.4;color:var(--muted)}
.dq-end>span b{color:var(--gold)}
@media (prefers-reduced-motion: reduce){.dq{opacity:1;transform:none;transition:none}.dq-side s{transition:none}.dq-res{opacity:1;transition:none}.mr-meet,.dq-end{animation:none}}
@media (max-width:480px){.dq-side{grid-template-columns:86px minmax(0,1fr) 48px}}

/* ---------- Photo de profil ---------- */
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;border-radius:50%;background:linear-gradient(150deg,#ffd97a,var(--gold) 55%,#b8862a);color:var(--gold-ink);font-family:var(--f-display);font-weight:900;line-height:1;box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.xs{width:20px;height:20px;font-size:11px;margin-right:6px;vertical-align:-5px}
.av.sm{width:30px;height:30px;font-size:15px}
.av.lg{width:72px;height:72px;font-size:38px;border-radius:20px;box-shadow:0 14px 30px -14px rgba(242,193,78,.8),0 0 0 2px rgba(255,255,255,.2)}
.mepill .av.sm{width:26px;height:26px;font-size:13px}
.jx-name{display:inline-flex;align-items:center;gap:9px;min-width:0}
.jx-name span:last-child{overflow:hidden;text-overflow:ellipsis}
.pf-head .av.lg{width:84px;height:84px;font-size:44px}
.pf-report{margin-left:auto;font-size:12.5px;color:var(--faint)}
.mr-head .av,.b-nom .av{margin-right:6px}
.dv.debat h3 .av{margin:0 -2px 0 0;align-self:center}
.acc-photo{display:flex;align-items:center;gap:14px}
.acc-photo>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.acc-file{cursor:pointer}
.acc .ko{color:var(--lose)}

/* ---------- Le maire sur la carte : sa photo (ou son initiale) en médaillon, couronne dorée si c'est vous ---------- */
.card .crownb{position:absolute;top:64px;right:12px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,#46506b,#2a3350);color:#fff;font-family:var(--f-display);font-weight:900;font-size:19px;box-shadow:0 0 0 2px rgba(10,16,30,.85),0 0 0 3.5px rgba(160,185,230,.55);pointer-events:none}
.card .crownb img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.card .crownb svg{position:absolute;right:-6px;top:-9px;width:17px;height:17px;padding:2px;box-sizing:border-box;border-radius:50%;background:#7b86a3;color:#10182b;box-shadow:0 0 0 1.5px rgba(10,16,30,.9)}
.card .crownb.me{box-shadow:0 0 0 2px rgba(10,16,30,.85),0 0 0 4px var(--gold),0 0 16px 2px rgba(242,193,78,.8);background:linear-gradient(150deg,#ffe9a8,var(--gold) 55%,#b8862a);color:#2a1d04}
.card .crownb.me svg{background:linear-gradient(150deg,#ffe9a8,var(--gold));color:#2a1d04;width:19px;height:19px;right:-7px;top:-10px}
.card .crownb.bare{width:32px;height:32px}
.card .crownb.bare svg{position:static;width:19px;height:19px;padding:0;background:none;box-shadow:none;color:#2a1d04}
.card.mini .crownb{width:42px;height:42px}

/* ---------- Mes mandats ---------- */
.mandats{display:flex;flex-direction:column;gap:20px}
.md-hero{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:16px 18px;border-radius:18px;background:radial-gradient(ellipse 60% 120% at 0% 50%,rgba(242,193,78,.14),transparent 60%),var(--surface);border:1px solid rgba(242,193,78,.4)}
.md-stats{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 360px}
.md-stats>div{display:flex;flex-direction:column;gap:2px;min-width:104px;padding:9px 14px;border-radius:12px;background:var(--inset);border:1px solid var(--line-soft)}
.md-stats b{font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.md-stats .g b{color:#ffe6a6}
.md-stats .ko b{color:var(--lose)}
.md-stats span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.md-todo{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.md-todo .btn{display:inline-flex;align-items:center;gap:8px}
.md-todo .btn svg{width:18px;height:18px}
.mdt-ok{font-size:13.5px;color:var(--win)}
.mdt-warn{font-size:12px;color:var(--faint)}
.md-sec{display:flex;flex-direction:column;gap:10px}
.md-sec h2{display:flex;align-items:center;gap:8px;margin:0;font-size:26px}
.md-sec h2 svg{width:22px;height:22px;color:var(--gold)}
.md-sec h2 small{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.md-sec .sub{margin:-4px 0 0;font-size:13.5px;color:var(--muted)}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.md{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:inset 0 3px 0 var(--rc)}
.md.thr{border-color:rgba(240,122,112,.55);box-shadow:inset 0 3px 0 var(--lose)}
.md header{display:flex;align-items:center;gap:10px}
.md header>div{display:flex;flex-direction:column;min-width:0;flex:1}
.md header b{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md header small{font-size:12px;color:var(--faint)}
.md-crown{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--gold-soft);color:var(--gold)}
.md-crown svg{width:18px;height:18px}
.md-tag{padding:2px 9px;border-radius:999px;background:rgba(240,122,112,.15);border:1px solid rgba(240,122,112,.6);color:var(--lose);font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.md-v{display:flex;align-items:baseline;gap:6px}
.md-v b{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:1;color:#ffe6a6;font-variant-numeric:tabular-nums}
.md-v span{font-family:var(--f-mono);font-size:11px;color:var(--gold)}
.md-r{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.md-r b{color:var(--ink);font-family:var(--f-display);font-size:14px}
.md-bar{display:block;height:6px;border-radius:99px;background:rgba(240,122,112,.35);overflow:hidden}
.md-bar s{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b8862a,var(--gold));text-decoration:none}
.md.camp .md-bar{background:rgba(160,185,230,.16)}
.md-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.md-a .btn svg{width:15px;height:15px;margin-right:5px;vertical-align:-3px}

/* Huit onglets dans la barre du bas sur téléphone */
@media (max-width:899px){
  nav.tabs button .lg{display:none}
  nav.tabs button{font-size:10px}
  nav.tabs button svg{width:20px;height:20px}
}
nav.tabs button em.lg{font-style:normal}

@media (max-width:899px){nav.tabs #tab-mandats span::first-letter{text-transform:uppercase}}

/* Console d'administration : lien dans le menu (ordinateur ; sur téléphone, il est dans « Mon compte ») */
.adminlink{display:block;margin-top:8px;padding:6px 10px;border:1px solid rgba(242,193,78,.45);border-radius:10px;color:var(--gold);background:var(--gold-soft);font-family:var(--f-display);font-weight:600;font-size:14px;text-align:center;text-decoration:none}
.adminlink:hover{background:rgba(242,193,78,.24)}
.adminlink[hidden]{display:none}
@media (max-width:899px){.adminlink{display:none}}
/* Annonce de l'équipe en haut du jeu (console d'administration) */
.annonce{display:flex;align-items:center;gap:12px;margin:12px 32px 0;padding:10px 12px 10px 16px;border-radius:12px;border:1px solid rgba(124,196,255,.45);background:rgba(124,196,255,.12);color:var(--ink);font-weight:600}
.annonce[hidden]{display:none}
.annonce p{margin:0;flex:1;min-width:0}
.annonce.fete{background:linear-gradient(90deg,rgba(242,193,78,.18),rgba(201,167,255,.16));border-color:rgba(242,193,78,.5)}
.annonce.alerte{background:rgba(224,71,92,.14);border-color:rgba(224,71,92,.55)}
.annonce .an-close{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.annonce .an-close:hover{color:var(--ink);background:rgba(255,255,255,.08)}
@media (max-width:899px){.annonce{margin:10px 16px 0}}