/* 502one - styles (extracted from the original single page) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Polices intégrées à la page (Chakra Petch, Figtree, JetBrains Mono, licence SIL OFL) :
   elles s'affichent même là où Google Fonts n'est pas chargé, comme dans l'app iPhone. */
@font-face{font-family:'Chakra Petch';font-weight:500;font-style:normal;src:url(fonts/chakra-petch-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Chakra Petch';font-weight:600;font-style:normal;src:url(fonts/chakra-petch-600.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Chakra Petch';font-weight:700;font-style:normal;src:url(fonts/chakra-petch-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Figtree';font-weight:400;font-style:normal;src:url(fonts/figtree-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Figtree';font-weight:500;font-style:normal;src:url(fonts/figtree-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Figtree';font-weight:600;font-style:normal;src:url(fonts/figtree-600.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Figtree';font-weight:700;font-style:normal;src:url(fonts/figtree-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;src:url(fonts/jetbrains-mono-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-style:normal;src:url(fonts/jetbrains-mono-700.woff2) format('woff2');font-display:swap}
/* Layout : une salle noire éclairée par la couleur du profil ouvert. Vert empereur
   côté Vahko, rouge profond côté caus909, les deux halos côte à côte sur l'accueil. */
:root{
  --bg:#06080A; --panel:#0D1114; --panel2:#12171B; --raise:#1A2126;
  --line:#1C2328; --line2:#2A343B;
  --fg:#E9EFF1; --muted:#A3B1B9; --faint:#7C8B95;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 10px 30px -14px rgba(0,0,0,.85);
  --f-disp:"Chakra Petch", "Trebuchet MS", sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* couleurs de profil */
  --vahko:#04371F;  --vahko-lum:#189A5C;  --vahko-ink:#01170B;
  --caus:#5E0F18;   --caus-lum:#F0555C;   --caus-ink:#260308;

  /* accent neutre tant qu'aucun profil n'est ouvert */
  --accent:#46BBCD; --accent-ink:#04202A; --tint:#2C3A44;

  /* Grain de tramage : sur un fond quasi noir, un dégradé n'a pas assez de valeurs
     disponibles et marche par paliers. Ce bruit très fin casse les bandes. */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");

  /* tiers — repris du tableau */
  --t502a:#F24E4E; --t502b:#FFC215; --t502c:#2ED47A; --t502d:#46BBCD; --t502e:#9B6BE8;
  --tSp:#7E3FBF; --tSpL:#AF74E0;
  --tS:#1A91AF;  --tSL:#46BBCD;
  --tA:#22A85E;  --tAL:#52E58C;
  --tB:#E8A800;  --tBL:#FDE579;
  --tC:#FF8108;  --tCL:#FFB167;
  --tD:#E8503C;  --tDL:#F7968A;
  --tF:#6B7785;  --tFL:#9DABB6;
  /* statuts dev — repris du tableau */
  --stOngoing:#1F9767; --stCompleted:#215771; --stHold:#5A3386; --stEarly:#FFB158; --stAband:#7A2E2E;
  /* cases d'avancement, comme dans l'ancien tableau : Terminé bleu, Pause jaune, À recommencer violet, Arrêté rouge */
  --etT:#3E8FE0; --etP:#E8A800; --etR:#A06CF0; --etA:#E8503C;
  --vn:#914341;
  color-scheme:dark;
}
:root[data-profile="vahko"]{   --accent:var(--vahko-lum); --accent-ink:var(--vahko-ink); --tint:var(--vahko) }
:root[data-profile="caus909"]{ --accent:var(--caus-lum);  --accent-ink:var(--caus-ink);  --tint:var(--caus) }

*{box-sizing:border-box}
body{background-color:var(--bg);background-repeat:repeat,no-repeat;
  background-size:160px 160px,cover;background-attachment:fixed,fixed;
  color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}

/* Des colonnes de couleur sur toute la hauteur : les deux côtés sur l'accueil,
   la couleur du profil en encadrement dans une bibliothèque. Paliers rapprochés
   et interpolation oklab, puis le grain par-dessus. La première déclaration sert
   de repli si le navigateur ignore oklab. */
:root:not([data-profile]) body{
  background-image:var(--noise),linear-gradient(to right,
    color-mix(in srgb, var(--vahko) 82%, transparent) 0%,
    color-mix(in srgb, var(--vahko) 63%, transparent) 4%,
    color-mix(in srgb, var(--vahko) 45%, transparent) 9%,
    color-mix(in srgb, var(--vahko) 29%, transparent) 14%,
    color-mix(in srgb, var(--vahko) 16%, transparent) 19%,
    color-mix(in srgb, var(--vahko) 7%,  transparent) 25%,
    transparent 33%, transparent 67%,
    color-mix(in srgb, var(--caus) 7%,  transparent) 75%,
    color-mix(in srgb, var(--caus) 16%, transparent) 81%,
    color-mix(in srgb, var(--caus) 29%, transparent) 86%,
    color-mix(in srgb, var(--caus) 45%, transparent) 91%,
    color-mix(in srgb, var(--caus) 63%, transparent) 96%,
    color-mix(in srgb, var(--caus) 82%, transparent) 100%);
  background-image:var(--noise),linear-gradient(to right in oklab,
    color-mix(in srgb, var(--vahko) 82%, transparent) 0%,
    color-mix(in srgb, var(--vahko) 63%, transparent) 4%,
    color-mix(in srgb, var(--vahko) 45%, transparent) 9%,
    color-mix(in srgb, var(--vahko) 29%, transparent) 14%,
    color-mix(in srgb, var(--vahko) 16%, transparent) 19%,
    color-mix(in srgb, var(--vahko) 7%,  transparent) 25%,
    transparent 33%, transparent 67%,
    color-mix(in srgb, var(--caus) 7%,  transparent) 75%,
    color-mix(in srgb, var(--caus) 16%, transparent) 81%,
    color-mix(in srgb, var(--caus) 29%, transparent) 86%,
    color-mix(in srgb, var(--caus) 45%, transparent) 91%,
    color-mix(in srgb, var(--caus) 63%, transparent) 96%,
    color-mix(in srgb, var(--caus) 82%, transparent) 100%)}

:root[data-profile] body{
  background-image:var(--noise),linear-gradient(to right,
    color-mix(in srgb, var(--tint) 78%, transparent) 0%,
    color-mix(in srgb, var(--tint) 58%, transparent) 4%,
    color-mix(in srgb, var(--tint) 39%, transparent) 9%,
    color-mix(in srgb, var(--tint) 24%, transparent) 14%,
    color-mix(in srgb, var(--tint) 12%, transparent) 19%,
    color-mix(in srgb, var(--tint) 5%,  transparent) 25%,
    transparent 32%, transparent 68%,
    color-mix(in srgb, var(--tint) 5%,  transparent) 75%,
    color-mix(in srgb, var(--tint) 12%, transparent) 81%,
    color-mix(in srgb, var(--tint) 24%, transparent) 86%,
    color-mix(in srgb, var(--tint) 39%, transparent) 91%,
    color-mix(in srgb, var(--tint) 58%, transparent) 96%,
    color-mix(in srgb, var(--tint) 78%, transparent) 100%);
  background-image:var(--noise),linear-gradient(to right in oklab,
    color-mix(in srgb, var(--tint) 78%, transparent) 0%,
    color-mix(in srgb, var(--tint) 58%, transparent) 4%,
    color-mix(in srgb, var(--tint) 39%, transparent) 9%,
    color-mix(in srgb, var(--tint) 24%, transparent) 14%,
    color-mix(in srgb, var(--tint) 12%, transparent) 19%,
    color-mix(in srgb, var(--tint) 5%,  transparent) 25%,
    transparent 32%, transparent 68%,
    color-mix(in srgb, var(--tint) 5%,  transparent) 75%,
    color-mix(in srgb, var(--tint) 12%, transparent) 81%,
    color-mix(in srgb, var(--tint) 24%, transparent) 86%,
    color-mix(in srgb, var(--tint) 39%, transparent) 91%,
    color-mix(in srgb, var(--tint) 58%, transparent) 96%,
    color-mix(in srgb, var(--tint) 78%, transparent) 100%)}
h1,h2,h3{font-family:var(--f-disp);margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* « Réduire les animations » : suit le réglage de l'appareil, ou le choix fait dans les réglages. */
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important}

/* ---------- barre de commande ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* Au-dessus de la barre, la zone de l'encoche ou de la barre d'état (en plein écran surtout)
   reste transparente : on la couvre du même fond, sinon les cartes y défilent par-dessus. */
.topbar:not(.-bare)::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:var(--bg);pointer-events:none}
.topbar-in{max-width:1500px;margin:0 auto;padding-block:12px;padding-inline:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand h1{font-size:24px;font-weight:700;letter-spacing:.01em;color:var(--fg);line-height:1.1}
/* Le badge de profil et celui du Now playing partagent la même boîte. */
.who,.np{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:5px 12px;font-size:12px;line-height:1.25;white-space:nowrap;min-width:0;
  border:1px solid var(--line);background:var(--panel)}
.np .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);flex:none}
.np .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.np .val{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1 1 auto;min-width:0}
.searchbox{position:relative;flex:1 1 220px;max-width:340px;min-width:0}
.searchbox input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px 9px 33px;color:var(--fg)}
.searchbox input::placeholder{color:var(--faint)}
.searchbox svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:2}
.tabs{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.tabs button{padding:6px 13px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--raise);color:var(--fg)}
.iconbtn{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel);display:grid;place-items:center;color:var(--muted);flex:none}
.iconbtn:hover{color:var(--fg);border-color:var(--line2)}
/* Réinitialisation : aussi discrète que la roue de la page de garde. */
#resetBtn{background:none;border-color:transparent;color:var(--faint)}
#resetBtn:hover{color:var(--tDL);border-color:color-mix(in srgb,var(--tD) 40%,var(--line2))}
.sheet .btn.-danger.-arm1,.sheet .btn.-danger.-arm1:hover{background:color-mix(in srgb,var(--tD) 22%,transparent);border-color:var(--tD)}
.sheet .btn.-danger.-arm2,.sheet .btn.-danger.-arm2:hover{background:var(--tD);color:#fff;border-color:var(--tD)}
.addbtn{background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:9px;padding:9px 15px;white-space:nowrap}

/* ---------- corps ---------- */
.wrap{max-width:1500px;margin:0 auto;padding-inline:16px;padding-block:18px 60px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;min-width:0}
.stat b{display:block;font-family:var(--f-disp);font-size:23px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.stat.-acc b{color:var(--accent)}

.filterbar{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.frow>.flab{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);width:74px;flex:none}
.chip{border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:500;white-space:nowrap}
.chip:hover{color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.chip.-tier[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.fbot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
select.sel{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:6px 9px;font-size:12.5px}
.clearf{font-size:12.5px;color:var(--accent);font-weight:600}
.resn{font-size:12.5px;color:var(--faint);font-family:var(--f-mono)}

/* ---------- badges tier ----------
   La forme est un SVG tracé en remplissage + contour à jointure arrondie, ce qui
   adoucit tous les angles. Le lettrage est posé par-dessus, jamais découpé. */
.tier{--sz:26px;position:relative;display:inline-grid;place-items:center;
  width:var(--sz);height:var(--sz);flex:none;vertical-align:middle;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.tier>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tier>svg>*{fill:var(--bdg);stroke:var(--bdg);stroke-width:11;stroke-linejoin:round}
.tier>i{position:relative;font-style:normal;font-family:var(--f-disp);font-weight:700;
  font-size:calc(var(--sz) * var(--fs,.46));line-height:1;color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 1.5px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.4)}
/* Chakra Petch porte ses capitales un peu haut dans sa boîte : on rogne la boîte
   à la hauteur des capitales pour qu'elles tombent pile au centre (repli : décalage). */
.tier>i{transform:translateY(.05em)}
@supports (text-box:trim-both cap alphabetic){ .tier>i{text-box:trim-both cap alphabetic;transform:none} }
/* L'étoile a son centre visuel un peu sous le milieu du carré. */
.tier.t-sp>i{top:calc(var(--sz) * .025)}
.tier.t-502{--fs:.31}
.tier.t-502>i{letter-spacing:-.01em}
.tier.t-502>svg>*{fill:url(#g502);stroke:url(#g502)}
.tier.t-sp{--bdg:var(--tSp);--fs:.40}
.tier.t-s{--bdg:var(--tS)}
.tier.t-a{--bdg:var(--tA)}
.tier.t-b{--bdg:var(--tB)}
.tier.t-c{--bdg:var(--tC)}
.tier.t-d{--bdg:var(--tD)}
.tier.t-f{--bdg:var(--tF)}
.tier.t-none{border-radius:50%;border:1.5px dashed var(--line2);color:var(--faint);
  font-family:var(--f-disp);font-size:calc(var(--sz)*.44);line-height:1;filter:none}

/* ---------- pastilles ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2.5px 9px;font-size:11px;font-weight:600;white-space:nowrap}
.st-ongoing{background:var(--stOngoing);color:#fff}
.st-completed{background:var(--stCompleted);color:#fff}
.st-onhold{background:var(--stHold);color:#fff}
.st-earlystage{background:var(--stEarly);color:#3B2200}
.st-abandoned{background:var(--stAband);color:#fff}
.st-na{background:var(--raise);color:var(--muted)}
.typetag{background:var(--vn);color:#fff;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;border-radius:4px;padding:2px 6px}
.typetag.-autre{background:var(--raise);color:var(--muted)}

/* ---------- cartes ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.card{cursor:pointer;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 13px 11px 17px;text-align:left;display:flex;flex-direction:column;gap:9px;min-width:0;transition:border-color .14s,transform .14s;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--spine,var(--line2))}
.card:hover{border-color:var(--line2);transform:translateY(-2px)}
.card.-np{border-color:var(--tA)}
.chead{display:flex;gap:9px;align-items:flex-start;min-width:0}
.ctitle{flex:1;min-width:0}
.ctitle h3{font-size:15px;font-weight:700;letter-spacing:-.012em;line-height:1.25;overflow-wrap:anywhere}
.ctitle p{margin:2px 0 0;font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ver{font-family:var(--f-mono);font-size:11px;color:var(--muted);background:var(--panel2);border-radius:5px;padding:2px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfoot{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.f95{display:flex;align-items:center;gap:4px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.f95 b{color:var(--fg);font-weight:700}
.mystate{display:flex;gap:5px}
.ms{position:relative;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;padding:0;
  background:transparent;color:var(--muted);border:1.5px solid var(--line2);transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.ms svg{width:13px;height:13px;display:block}
/* Une couleur par case : Terminé bleu, Pause jaune, À recommencer violet, Arrêté rouge. */
.ms[data-ms="complete"],.tg[data-k="complete"]{--k:var(--etT)}
.ms[data-ms="pause"],.tg[data-k="pause"]{--k:var(--etP)}
.ms[data-ms="recommencer"],.tg[data-k="recommencer"]{--k:var(--etR)}
.ms[data-ms="arrete"],.tg[data-k="arrete"]{--k:var(--etA)}
/* zone de toucher plus large que le carré visible */
.ms::before{content:"";position:absolute;inset:-6px -3px}
.ms:hover{border-color:var(--k);color:var(--fg)}
.ms.-pop{animation:msPop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes msPop{0%{transform:scale(.7)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (pointer:coarse){ .ms{width:28px;height:28px;border-radius:8px} .ms svg{width:14px;height:14px} .mystate{gap:7px} }
.ms.-on{background:color-mix(in srgb,var(--k) 22%,var(--panel2));border-color:var(--k);color:var(--k);box-shadow:0 0 10px -3px var(--k)}
.themes{display:flex;gap:4px;flex-wrap:wrap}
.th{font-size:10.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1.5px 6px}

/* ---------- tableau ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:900px;font-size:13px}
thead th{position:sticky;top:0;background:var(--panel2);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:600;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--fg)}
tbody td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{cursor:pointer}
/* Une ligne sur deux légèrement teintée, pour suivre une ligne d'un bout à l'autre. */
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--raise) 42%,var(--panel))}
/* Survol teinté de la couleur du profil : il se distingue des lignes claires comme des sombres. */
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
/* En-tête collant. Si le tableau tient en largeur, il colle sous la barre du haut en
   suivant la page ; sinon le tableau devient sa propre zone de défilement (comme un
   tableur), où l'en-tête et la colonne des titres restent visibles. */
.tablewrap.-fit{overflow:visible}
.tablewrap.-fit thead th{top:var(--tbh,0px);z-index:3}
.tablewrap.-fit thead th:first-child{border-top-left-radius:11px}
.tablewrap.-fit thead th:last-child{border-top-right-radius:11px}
.tablewrap.-scroll{overflow:auto;max-height:calc(100vh - var(--tbh,60px) - 24px);max-height:calc(100dvh - var(--tbh,60px) - 24px);overscroll-behavior:contain}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}
td.tt{font-weight:600;max-width:230px}
td.dim{color:var(--muted)}

/* ---------- journal ---------- */
.logcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
.logcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.logcard>h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);font-weight:700;min-height:40px}
.logadd{width:28px;height:28px;font-size:15px}
.logrow{display:flex;gap:10px;padding:7px 14px;border-bottom:1px solid var(--line);font-size:12.5px;align-items:baseline}
.logrow:last-child{border-bottom:0}
.logrow time{font-family:var(--f-mono);font-size:11px;color:var(--faint);flex:none;width:76px}
.logrow .g{font-weight:600;flex:1;min-width:0;overflow-wrap:anywhere}
.logrow .v{font-family:var(--f-mono);font-size:11px;color:var(--accent);flex:none}
.logrow.-neuf{box-shadow:inset 2px 0 0 var(--tAL);background:color-mix(in srgb,var(--tAL) 7%,transparent)}
.logrow.-neuf time{color:var(--tAL)}
.logrow .mk{flex:none;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:12px;font-weight:700;line-height:1}
.logrow .mk.-in{background:color-mix(in srgb,var(--tA) 22%,transparent);color:var(--tAL)}
.logrow .mk.-out{background:color-mix(in srgb,var(--tD) 22%,transparent);color:var(--tDL)}
.loglist{max-height:460px;overflow-y:auto}

/* ---------- tiroir ---------- */
.scrim{position:fixed;inset:0;background:rgba(2,7,11,.6);backdrop-filter:blur(2px);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100%);background:var(--panel);border-left:1px solid var(--line);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.dhead{padding:16px 18px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.dhead h2{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.dhead p{margin:3px 0 0;font-size:12.5px;color:var(--faint)}
.dbody{flex:1;overflow-y:auto;padding:16px 18px calc(22px + env(safe-area-inset-bottom,0px))}
.sect{margin-bottom:20px}
.sethd{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 9px;font-weight:700;font-family:var(--f-body)}
.sect>h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 9px;font-weight:700;font-family:var(--f-body)}
.kv{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;font-size:13px;align-items:baseline}
.kv dt{color:var(--faint);font-size:12px}
.kv dd{margin:0;overflow-wrap:anywhere}
.toggles{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.tg{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:500;color:var(--muted);text-align:left}
.tg:hover{border-color:var(--line2)}
.tg[aria-pressed="true"]{background:color-mix(in srgb,var(--k,var(--accent)) 17%,var(--panel2));border-color:var(--k,var(--accent));color:var(--fg)}
.tg .bx{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line2);flex:none;display:grid;place-items:center;font-size:10px;color:transparent}
.tg[aria-pressed="true"] .bx{background:var(--k,var(--accent));border-color:var(--k,var(--accent));color:#06080A}
.tierpick{display:flex;gap:6px;flex-wrap:wrap}
.tierpick button{opacity:.38;transition:opacity .12s,transform .12s;padding:2px}
.tierpick button:hover{opacity:.8}
.tierpick button[aria-pressed="true"]{opacity:1;transform:scale(1.12)}

/* calculateur */
.calc{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px}
.crit{display:grid;grid-template-columns:1fr 42px;gap:4px 10px;align-items:center;margin-bottom:9px}
.crit label{font-size:12.5px;display:flex;align-items:center;gap:6px;min-width:0}
.crit label i{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--faint);background:var(--raise);border-radius:4px;padding:1px 4px;flex:none}
.crit input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent);margin:0}
.crit output{font-family:var(--f-mono);font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.calcfoot{border-top:1px solid var(--line);margin-top:11px;padding-top:11px;display:flex;align-items:center;gap:11px;justify-content:space-between;flex-wrap:wrap}
.score{display:flex;align-items:baseline;gap:5px;font-family:var(--f-disp)}
.score b{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums}
.score>span:not(.tier){font-size:12px;color:var(--faint)}
.affect{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.affect input{accent-color:var(--accent);width:15px;height:15px}

.noterow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.drowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.btn{border:1px solid var(--line2);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--fg);background:var(--panel2)}
.btn:hover{border-color:var(--accent)}
.btn.-pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.-danger{color:var(--tD);border-color:color-mix(in srgb,var(--tD) 45%,var(--line2))}
.btn.-danger:hover{background:color-mix(in srgb,var(--tD) 15%,transparent);border-color:var(--tD)}
.btn.-warn{background:var(--tC);color:#3B2200;border-color:var(--tC)}
.btn.-warn:hover{border-color:var(--tC);filter:brightness(1.07)}

/* ---------- formulaire ---------- */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;overflow-y:auto}
/* .modal ouvre son propre contexte d'empilement : le voile doit y rester sous la feuille. */
.modal>.scrim{z-index:0}
.modal>.sheet{position:relative;z-index:1}
.sheet{background:var(--panel);border:1px solid var(--line2);border-radius:14px;width:min(620px,100%);box-shadow:var(--shadow);max-height:92vh;display:flex;flex-direction:column}
.sheet>header{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet>header h2{font-size:17px;font-weight:700}
.sheet>.body{padding:16px 18px;overflow-y:auto}
.sheet>footer{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.-full{grid-column:1/-1}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:600}
.field input,.field select,.field textarea{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;width:100%}
.field textarea{resize:vertical;min-height:60px}
.hint{font-size:11.5px;color:var(--faint)}
.pagefoot{display:flex;justify-content:flex-end;margin:20px 0 0}
.pagefoot button{font-size:12px;color:var(--faint);border-bottom:1px dashed var(--line2);padding-bottom:2px}
.pagefoot button:hover{color:var(--tDL);border-color:var(--tDL)}
.withbtn{display:flex;gap:6px;align-items:stretch;min-width:0}
.withbtn select{flex:1;min-width:0}
.miniadd{flex:none;width:36px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);
  color:var(--muted);font-size:17px;line-height:1;font-family:var(--f-mono)}
.miniadd:hover{color:var(--accent);border-color:var(--accent)}
.newrow{display:flex;gap:6px;margin-top:6px;min-width:0}
.newrow input{flex:1;min-width:0}
.newrow .btn{flex:none;padding:8px 12px;font-size:12.5px}

/* ---------- états ---------- */
.empty{text-align:center;padding:56px 20px;border:1px dashed var(--line2);border-radius:14px;background:var(--panel)}
.empty h2{font-size:19px;font-weight:700;margin-bottom:7px}
.empty p{color:var(--muted);max-width:44ch;margin:0 auto 16px}
.banner{background:color-mix(in srgb,var(--tC) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--tC) 45%,var(--line));border-radius:10px;padding:10px 13px;font-size:12.5px;color:var(--fg);margin-bottom:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- page de garde ---------- */
.menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,4.5vh,52px);min-height:72vh;text-align:center;padding-block:clamp(10px,3vh,48px)}
.menu-mark h1{font-family:var(--f-disp);font-size:clamp(34px,min(12.5vw,11vh),100px);font-weight:700;letter-spacing:.005em;line-height:.95;
  color:var(--fg);text-shadow:0 2px 40px rgba(0,0,0,.6)}
.menu-mark p{margin:clamp(7px,1.5vh,14px) 0 0;color:var(--faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.26em}
.maj{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 9px;
  margin-top:clamp(12px,2.2vh,22px);max-width:100%;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  background:color-mix(in srgb,var(--panel) 72%,transparent);font-size:12px}
.maj .k{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.maj b{font-weight:700;color:var(--fg);overflow-wrap:anywhere}
.maj .v{font-family:var(--f-mono);font-size:11px;color:var(--fg);background:var(--panel2);border-radius:5px;padding:1px 6px}
.maj time{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.menu-mark .neuf{cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;display:flex;align-items:center;justify-content:center;gap:7px;
  margin:10px auto 0;font-size:12px;color:var(--fg);text-transform:none;letter-spacing:normal}
.menu-mark .neuf:hover{text-decoration-color:var(--tAL)}
.neuf .pt{width:6px;height:6px;border-radius:50%;background:var(--tAL);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tAL) 20%,transparent)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(600px,100%)}
.dcell{display:flex;flex-direction:column;gap:11px;min-width:0}
.doors>.dcell:last-child:nth-child(odd){grid-column:1/-1;width:min(100%,calc(50% - 7px));justify-self:center}
.door-np{margin:0;min-height:17px;font-size:12px;color:var(--faint);display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.door-np b{color:var(--fg);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.door-np .dot{width:6px;height:6px;border-radius:50%;background:var(--dc);flex:none}
.door-np em{font-style:normal;opacity:.65}
.topbar.-bare .iconbtn{background:none;border-color:transparent;color:var(--faint)}
.topbar.-bare .iconbtn:hover{color:var(--fg);border-color:var(--line2)}
.prow{display:flex;gap:7px;align-items:center;margin-bottom:8px;min-width:0}
.prow .pnom,.prow input[type=text],.prow #npNom{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
.prow input[type=color]{flex:none;width:40px;height:38px;padding:2px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;cursor:pointer}
.prow .miniadd{height:38px}
.prow .miniadd[disabled]{opacity:.3;cursor:not-allowed}
.swatches{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 9px}
.sw{width:22px;height:22px;border-radius:50%;background:var(--s);border:1px solid rgba(255,255,255,.22)}
.sw:hover{transform:scale(1.12)}
.door{position:relative;display:grid;place-items:center;min-height:var(--doorh,clamp(112px,17vh,148px));
  background:linear-gradient(168deg,color-mix(in srgb,var(--dcd) 88%,var(--panel)),var(--panel) 82%);
  border:1px solid color-mix(in srgb,var(--dc) 50%,var(--line));border-radius:16px;overflow:hidden;text-decoration:none;
  font-family:var(--f-disp);font-size:clamp(19px,calc(var(--doorh,124px) * .23),32px);font-weight:700;letter-spacing:.01em;color:var(--dc);
  text-shadow:0 0 14px color-mix(in srgb,var(--dc) 48%,transparent), 0 1px 2px rgba(0,0,0,.55);
  box-shadow:0 10px 30px -24px var(--dc), inset 0 1px 0 color-mix(in srgb,var(--dc) 20%,transparent);
  transition:border-color .16s,box-shadow .16s,--dg .2s,top .18s ease-out;top:0}
.door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dc);
  box-shadow:0 0 10px 0 color-mix(in srgb,var(--dc) 70%,transparent), 0 0 26px 2px color-mix(in srgb,var(--dc) 32%,transparent)}
/* Survol des portes : le soulèvement passe par « top » et la lueur par sa couleur, sans
   transform, filtre ni fondu. Ceux-ci font passer le texte dans un rendu plus fin le temps
   du survol, et les textes colorés (un rouge pur surtout) paraissent s'assombrir. */
@property --dg{syntax:"<percentage>";inherits:true;initial-value:10%}
.door::before{content:"";position:absolute;inset:0;background:radial-gradient(118% 104% at 50% 122%,color-mix(in srgb,var(--dc) var(--dg),transparent),transparent 74%)}
.door:hover{--dg:30%;top:-3px;border-color:var(--dc);
  box-shadow:0 18px 44px -22px var(--dc), inset 0 1px 0 color-mix(in srgb,var(--dc) 34%,transparent)}
.door span{position:relative}
.topbar.-bare{background:none;border-bottom:0;backdrop-filter:none;position:static}
.topbar.-bare .brand{display:none}
.topbar.-bare .topbar-in{justify-content:flex-end;padding-block:12px 0}
.who{font-weight:700;color:var(--wc);
  background:color-mix(in srgb,var(--wc) 18%,var(--panel));
  border-color:color-mix(in srgb,var(--wc) 45%,transparent)}

/* Bouton de filtres : n'existe que sur téléphone. */
.mob{display:none}
.brk{display:none}
.fcount{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;padding:0 4px;
  background:var(--accent);color:var(--accent-ink);font:700 10px/17px var(--f-mono);text-align:center}
.fcount:empty{display:none}

/* ---------- adaptation à l'écran ----------
   Quatre mises en page, choisies sur la largeur ET la hauteur, pour que l'orientation
   compte : un téléphone tenu en paysage est large mais très bas, il ne doit pas
   recevoir la mise en page ordinateur.
   - téléphone portrait : étroit (<= 720 px) et assez haut
   - téléphone paysage : bas (<= 500 px), quelle que soit la largeur
   - tablette : jusqu'à 1100 px, filtres repliables
   - ordinateur : le reste, inchangé */

/* Les bords à encoche, en paysage surtout : le contenu reste hors de la découpe. */
.topbar-in,.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.dhead,.dbody{padding-right:max(18px,env(safe-area-inset-right,0px))}

/* Compteurs : six par rangée tant que les onze ne tiennent pas sur une seule. */
.stats{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Les libellés restent sur une ligne : chaque case prend au moins la largeur du sien. */
.stat span{white-space:nowrap}
@media (min-width:1440px){ .stats{grid-template-columns:repeat(11,minmax(max-content,1fr))} }

/* ----- tablette et plus petit : filtres repliés derrière un bouton ----- */
@media (max-width:1100px), (max-height:500px){
  .mob{display:grid;position:relative}
  .mob[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
  .filterbar:not(.-open){display:none}
}

/* ----- tablette : en-tête sur deux lignes nettes ----- */
@media (min-width:721px) and (max-width:1100px) and (min-height:501px){
  .topbar-in{row-gap:6px}
  #backBtn{order:1} .brand{order:2} .np{order:3} .spacer{order:4} #addBtn,#resetBtn,#fsBtn{order:5}
  .brk{display:block;order:6;flex-basis:100%;height:0}
  .searchbox{order:7;flex:1 1 auto;max-width:none}
  .mob{order:8} .tabs{order:9}
}

/* ----- tout téléphone, portrait ou paysage ----- */
@media (max-width:720px), (max-height:500px){
  button,a,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  /* Sous 16 px, iOS zoome sur le champ touché et ne dézoome plus. */
  input,select,textarea{font-size:16px!important}

  /* Compteurs : une seule rangée qui défile. */
  .stats{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:0 16px;
    scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:none;min-width:94px;padding:8px 11px;scroll-snap-align:start}
  .stat b{font-size:19px}
  .stat span{font-size:9.5px;white-space:nowrap}

  /* Filtres : puces en rangées défilantes. */
  .filterbar{padding:10px 0 11px;gap:9px}
  .frow{gap:5px;padding-inline:12px}
  .frow>.flab{width:100%}
  .frow>span:last-child{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    margin-inline:-12px;padding-inline:12px;min-width:0;flex:1 1 100%}
  .frow>span:last-child::-webkit-scrollbar{display:none}
  .chip{padding:6px 12px}
  .fbot{margin-inline:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center}
  .fbot .spacer{display:none}
  .fbot .sel{width:100%;min-width:0}
  #clearF{justify-self:end}

  /* Cartes plus serrées. */
  .grid{gap:9px}
  .card{gap:7px;padding:11px 12px 9px 15px}

  /* Tableau : la colonne des titres reste visible quand on défile de côté. */
  table{min-width:760px;font-size:12.5px}
  thead th,tbody td{padding:7px 9px}
  thead th:first-child,td.tt{position:sticky;left:0;z-index:2;background:var(--panel);
    box-shadow:1px 0 0 var(--line)}
  thead th:first-child{background:var(--panel2);z-index:3}
  td.tt{max-width:150px;min-width:130px}
  tbody td:not(.tt){white-space:nowrap}

  /* Journal : une seule zone de défilement, la page. */
  .loglist{max-height:none}
  .logrow{padding:9px 14px}

  .drowbtns .btn{flex:1 1 auto;padding:11px 14px}
  .tg{padding:10px}
  .tierpick{gap:3px}
  .tierpick button{padding:1px}
}

/* ----- téléphone portrait ----- */
@media (max-width:720px) and (min-height:501px){
  /* En-tête sur deux lignes : retour, profil, now playing, ajout / recherche, filtres.
     Pas de flou ici : il ferait de l'en-tête le repère de la barre d'onglets fixe. */
  /* Barre pleine sur téléphone : rien ne doit transparaître quand les cartes passent dessous. */
  .topbar{backdrop-filter:none;background:var(--bg)}
  .topbar-in{padding-block:10px;gap:8px 8px}
  .topbar:not(.-bare) .brand h1{display:none}
  .topbar:not(.-bare) .spacer{display:none}
  #backBtn{order:1} .brand{order:2} .np{order:3;flex:1 1 0;width:auto;padding:5px 10px}
  .np .lbl{display:none}
  #addBtn{order:4;padding:9px 13px}
  #resetBtn{order:4;width:42px;height:42px}
  /* Sur téléphone, le plein écran rejoint la ligne de la recherche : la première ligne
     garde sa place pour le Now playing. */
  .topbar:not(.-bare) #fsBtn{order:6;width:42px;height:42px}
  .topbar:not(.-bare) .topbar-in:has(#fsBtn:not([hidden])) .searchbox{flex-basis:calc(100% - 100px)}
  .searchbox{order:5;flex:1 1 calc(100% - 50px);max-width:none}
  .mob{order:6;width:42px;height:42px}
  .searchbox input{height:42px}

  /* Onglets en barre fixe au pouce. */
  .tabs{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;
    padding:4px;border-radius:13px;border-color:var(--line2);
    background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);
    box-shadow:0 10px 30px -8px rgba(0,0,0,.9)}
  .tabs button{flex:1;padding:11px 6px;border-radius:9px;font-size:14px}
  .tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
  .wrap{padding-block:12px calc(92px + env(safe-area-inset-bottom,0px))}

  /* Fiche de jeu en plein écran. */
  .drawer{width:100%;border-left:0}
  .dhead{padding-inline:14px}
  .dbody{padding-inline:14px}
  .kv{grid-template-columns:88px 1fr}
  .tierpick{justify-content:space-between}

  /* Fenêtres : feuilles montant du bas, à la hauteur réellement visible. */
  .modal{padding:0;place-items:end stretch}
  .sheet{width:100%!important;border-radius:16px 16px 0 0;border-bottom:0;max-height:92vh;max-height:92dvh}
  .sheet>header{padding:13px 16px}
  .sheet>.body{padding:14px 16px}
  .sheet>footer{padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px))}
  .sheet>footer .btn{flex:1 1 0;padding:12px 14px}
  #formM .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 10px}
}

/* ----- téléphone paysage : la hauteur est rare, tout tient sur une ligne ----- */
@media (max-height:500px){
  .topbar-in{padding-block:7px;gap:7px;flex-wrap:nowrap}
  .topbar:not(.-bare) .brand h1{display:none}
  .topbar:not(.-bare) .spacer{display:none}
  .np{flex:0 1 auto;max-width:26%;padding:5px 10px}
  .np .lbl{display:none}
  .searchbox{flex:1 1 110px;max-width:none}
  .searchbox input{height:38px;padding-block:6px}
  .mob{width:38px;height:38px}
  .iconbtn{width:38px;height:38px}
  .tabs button{padding:6px 10px}
  .addbtn{padding:8px 12px}
  .wrap{padding-block:10px 30px}

  /* Fiche de jeu : panneau latéral compact. */
  .dhead{padding-block:10px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .dhead h2{font-size:17px}
  .sect{margin-bottom:14px}

  /* Fenêtres : centrées, presque toute la hauteur. */
  .modal{padding:6px}
  .sheet{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
  .sheet>header{padding:9px 16px}
  .sheet>.body{padding:12px 16px}
  .sheet>footer{padding:9px 16px}
}
/* Paysage sur un petit téléphone : le bouton d'ajout se réduit à son signe. */
@media (max-height:500px) and (max-width:700px){
  .addbtn{font-size:0;padding:0;width:38px;height:38px;display:grid;place-items:center}
  .addbtn::before{content:"+";font-size:20px;line-height:1}
  .tabs button{padding:6px 8px;font-size:12.5px}
}

@media (hover:none){
  .card:hover,.door:hover{transform:none}
  .door:hover{top:0}
}

/* ---------- halo, holographique, stats ---------- */
/* Halo qui suit le pointeur, dans la couleur du profil. */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.card.-halo::after{opacity:1}
/* Le halo éclaire le fond de la carte, pas son contenu : textes et pastilles passent
   devant, et gardent leur couleur quelle que soit celle du profil. */
.card>*{position:relative;z-index:1}
/* Sans souris, pas de halo ni de contour de survol : le toucher les laisserait collés. */
@media (hover:none){
  .card::after,.bbx::after{display:none}
  .card:not(.-rare):not(.-np):hover{border-color:var(--line)}
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line2))}

/* Badges holographiques : un voile irisé et un reflet qui balaie la forme. */
.tier>svg>.holo{fill:url(#gHolo);stroke:url(#gHolo);mix-blend-mode:screen;opacity:.42}
/* Reflet : une bande claire qui glisse, découpée à la forme du badge par un masque.
   Seul un déplacement est animé, que la carte graphique fait seule : rien n'est
   redessiné à chaque image, même avec beaucoup de badges à l'écran. */
.tier>.shn{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:overlay;
  -webkit-mask:var(--msk) center/100% 100% no-repeat;mask:var(--msk) center/100% 100% no-repeat}
.tier>.shn>b{position:absolute;left:-100%;top:-100%;width:300%;height:300%;
  background:linear-gradient(135deg,transparent 44%,rgba(255,255,255,.95) 50%,transparent 56%);
  animation:shn 5s linear infinite;will-change:transform}
@keyframes shn{0%,100%{transform:translate(-26%,-26%)}50%{transform:translate(26%,26%)}}
.tier.-holo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,255,255,.18))}

/* Carte rare : contour irisé pour le tier 502. */
.card.-rare{border-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(125deg,#F24E4E,#FFC215 22%,#2ED47A 45%,#46BBCD 68%,#9B6BE8) border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 12px 34px -18px #9B6BE8,0 10px 30px -22px #2ED47A}
.card.-rare:hover{border-color:transparent}

/* Stats en bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-auto-flow:dense}
.bbx{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;min-width:0;overflow:hidden}
.bbx.-w2{grid-column:span 2}.bbx.-h2{grid-row:span 2}
.bbx>h3{font-family:var(--f-body);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 12px}
.big{font-family:var(--f-disp);font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.big small{font-size:15px;color:var(--faint);font-weight:600;margin-left:4px}
.sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.ringwrap{display:grid;place-items:center;margin:4px 0 10px;position:relative}
.ringwrap .lab{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ringwrap .lab b{font-family:var(--f-disp);font-size:30px;line-height:1}
.ringwrap .lab span{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.legend{display:grid;gap:6px;font-size:12.5px}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:9px;height:9px;border-radius:3px;flex:none}
.legend b{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--fg)}
.trow{display:grid;grid-template-columns:30px 1fr 30px;gap:10px;align-items:center;margin-bottom:8px}
.trow .bar{height:10px;border-radius:5px;background:var(--panel2);overflow:hidden}
.trow .bar i{display:block;height:100%;border-radius:5px;background:var(--c)}
.trow b{font-family:var(--f-mono);font-size:12px;text-align:right;color:var(--muted)}
.hbar{display:grid;grid-template-columns:96px 1fr 26px;gap:8px;align-items:center;font-size:12.5px;margin-bottom:7px}
.hbar span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .bar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.hbar .bar i{display:block;height:100%;background:var(--accent);border-radius:4px;opacity:.85}
.hbar b{font-family:var(--f-mono);font-size:11.5px;text-align:right;color:var(--muted)}
.cloud{display:flex;flex-wrap:wrap;gap:6px}
.cloud span{border:1px solid var(--line2);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted)}
.cloud span b{font-family:var(--f-mono);font-size:11px;color:var(--accent);margin-left:5px}
.vs{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.vs .pc{font-family:var(--f-disp);font-size:34px;font-weight:700;line-height:1}
.vsbar{flex:1;height:10px;border-radius:5px;overflow:hidden;display:flex;background:var(--panel2)}
.vsbar i{display:block;height:100%}
.drow{display:grid;grid-template-columns:1fr auto auto auto;gap:9px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.drow .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow em{font-style:normal;font-size:11px;color:var(--faint)}
.pick{display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 12px;border-radius:11px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))}
.pick b{display:block;font-size:14px}
.pick span{font-size:11.5px;color:var(--muted)}
.pick .k{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);font-weight:700}
@media (max-width:1100px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} .bbx.-w2{grid-column:auto} .bbx.-h2{grid-row:auto} }

/* ---------- vue groupée par tier, fiche teintée ---------- */
.tgroup{margin-bottom:22px}
.tghead{display:flex;align-items:center;gap:12px;margin:4px 2px 12px}
.tghead h2{font-family:var(--f-disp);font-size:20px;font-weight:700;letter-spacing:.01em}
.tghead .n{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.tghead .ln{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c),transparent);opacity:.7}

.dhead.-tint{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;border-bottom:1px solid var(--line);overflow:hidden}
.dhead.-tint .hero{position:relative;display:flex;align-items:flex-end;gap:16px;padding:22px 18px 18px;
  padding-top:calc(22px + env(safe-area-inset-top,0px));
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--tc) 42%,transparent),transparent 62%),
             linear-gradient(180deg,color-mix(in srgb,var(--tc) 22%,var(--panel)),var(--panel))}
.dhead.-tint.-r502 .hero{background:
  radial-gradient(90% 120% at 0% 0%,rgba(242,78,78,.30),transparent 60%),
  radial-gradient(90% 120% at 50% 0%,rgba(46,212,122,.22),transparent 60%),
  radial-gradient(90% 120% at 100% 0%,rgba(155,107,232,.32),transparent 60%),
  linear-gradient(180deg,#151a1f,var(--panel))}
.dhead.-tint .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tc);opacity:.85}
.dhead.-tint.-r502 .hero::after{background:linear-gradient(90deg,#F24E4E,#FFC215,#2ED47A,#46BBCD,#9B6BE8)}
.dhead.-tint h2{font-size:24px;line-height:1.15}
.dhead.-tint .meta{margin:5px 0 0;font-size:12.5px;color:color-mix(in srgb,var(--fg) 70%,transparent)}
.dhead.-tint .tlab{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tc)}
.dhead.-tint.-r502 .tlab{background:linear-gradient(90deg,#F24E4E,#FFC215,#2ED47A,#46BBCD,#9B6BE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.dhead.-tint .x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(6px)}

/* Fiche teintée plus compacte quand l'écran est bas (téléphone en paysage). */
@media (max-height:500px){
  .dhead.-tint .hero{padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));gap:12px}
  .dhead.-tint .hero .tier{--sz:42px!important}
  .dhead.-tint h2{font-size:19px}
  .dhead.-tint .tlab{margin-bottom:3px}
}
/* ---------- mouvement ---------- */
/* Tri et filtres : les cartes glissent par translation seule (flip), voir plus bas. */
/* Changement d'onglet : simple fondu de la page. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
.topbar{view-transition-name:topbar}
::view-transition-group(topbar){z-index:50}
::view-transition-group(tabsbar){z-index:51}
@media (max-width:720px) and (min-height:501px){ .tabs{view-transition-name:tabsbar} }

/* Tiroir et fenêtres */
@keyframes fadeIn{from{opacity:0}}
@keyframes drawerIn{from{transform:translateX(104%)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes sheetUp{from{transform:translateY(100%)}}
.scrim{animation:fadeIn .22s ease}
.drawer{animation:drawerIn .34s cubic-bezier(.2,.8,.2,1)}
.sheet{animation:sheetIn .24s cubic-bezier(.2,.8,.2,1)}
.scrim.-still,.drawer.-still{animation:none}
@media (max-width:720px) and (min-height:501px){ .sheet{animation:sheetUp .32s cubic-bezier(.2,.8,.2,1)}
  .tablewrap.-scroll{max-height:calc(100dvh - var(--tbh,60px) - 96px - env(safe-area-inset-bottom,0px))} }

/* Bouton « remonter » : téléphone uniquement, après un long défilement. */
.totop{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:44;width:44px;height:44px;border-radius:50%;
  display:none;place-items:center;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line2);color:var(--fg);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.9);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(12px) scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.totop.-on{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:18px;height:18px}
@media (max-width:720px), (max-height:500px){ .totop{display:grid} }
@media (max-width:720px) and (min-height:501px){ .totop{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }

/* Onglet Stats : les blocs arrivent, les barres et l'anneau se remplissent. */
@keyframes bxIn{from{opacity:0;transform:translateY(10px)}}
@keyframes barGrow{from{transform:scaleX(0)}}
@keyframes ringFill{from{stroke-dasharray:0 var(--C)}}
.bento.-anim .bbx{animation:bxIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.bento.-anim .bar i,.bento.-anim .vsbar i:first-child{transform-origin:left;animation:barGrow .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:.15s}
.bento.-anim .ringfill{animation:ringFill 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:.1s}

/* Les cartes hors de l'écran ne sont ni mises en page ni peintes : un tri ou un filtre
   ne recalcule que ce qui se voit. La carte 502 en est exclue, son halo dépasse du cadre. */
/* Les cartes hors de l'écran ne sont dessinées qu'au besoin : l'entrée dans un profil
   reste légère. Une carte qu'un glissement a dû afficher le reste ensuite (voir flip) :
   la faire basculer d'un mode à l'autre pouvait laisser une ancienne image du texte,
   qui ne suivait plus le survol. */
.card{content-visibility:auto;contain-intrinsic-size:auto 270px}
.card.-rare,.card.-shown{content-visibility:visible}

/* Confettis */
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:90}

/* Chargement en silhouettes */
.skel{pointer-events:none}
.sk{background:linear-gradient(90deg,var(--panel2) 0%,var(--raise) 40%,var(--panel2) 80%);background-size:200% 100%;
  animation:shimmer 1.3s linear infinite;border-radius:6px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- page de garde : portes, logo, arrivée, entrée ---------- */
.door{grid-template-rows:auto auto;align-content:center;gap:clamp(4px,1.2vh,10px)}
.dstats{position:relative;display:inline-flex;align-items:center;gap:7px;font-family:var(--f-body);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-shadow:none;color:color-mix(in srgb,var(--fg) 78%,transparent)}
.dstats b{font-family:var(--f-mono);font-weight:700;color:var(--dc);transition:color .16s}
/* Au survol le fond de la porte s'éclaire de sa couleur : les textes colorés s'éclaircissent
   d'autant, sinon une couleur déjà au maximum (un rouge pur) paraît s'assombrir. */
.door>span:first-child{transition:color .16s}
.door:hover>span:first-child{color:color-mix(in srgb,var(--dc) 80%,#fff)}
.door:hover .dstats b{color:color-mix(in srgb,var(--dc) 72%,#fff)}
.dstats i{font-style:normal;opacity:.45}
.door-np .tier{margin-left:2px}

/* Logo : le « 502 » reste blanc, un reflet irisé le balaie de temps en temps. */
.l502{background:linear-gradient(100deg,var(--fg) 0%,var(--fg) 38%,#FFC215 44%,#2ED47A 48%,#46BBCD 52%,#9B6BE8 56%,var(--fg) 62%,var(--fg) 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  /* L'ombre du titre se peindrait par-dessus un texte transparent et le griserait : on la
     retire ici et on la remplace par une ombre portée équivalente, posée derrière. */
  text-shadow:none;filter:drop-shadow(0 2px 20px rgba(0,0,0,.6));
  animation:logoGlint 11s cubic-bezier(.45,0,.25,1) infinite}
@keyframes logoGlint{0%,62%{background-position:100% 0}90%,100%{background-position:0% 0}}

/* Arrivée : le titre, puis les portes, en léger décalé. */
@keyframes menuIn{from{opacity:0;transform:translateY(14px)}}
.menu.-in .menu-mark>*,.menu.-in .dcell{animation:menuIn .6s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i,0) * 80ms - var(--t0,0ms))}

/* Entrée dans un profil : la couleur de la porte s'étend à tout l'écran. */
.wash{position:fixed;z-index:95;pointer-events:none;border-radius:50%;will-change:transform,opacity}
.door.-go{transform:scale(1.035);filter:brightness(1.18);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}

/* ---------- Now playing épinglé, intertitres collants, journal en frise ---------- */
/* 7. Now playing épinglé */
.card.-np{border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 16px 40px -22px var(--accent)}
.npflag{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:-2px}
.npflag i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.npflag i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:npPulse 1.8s ease-out infinite;will-change:transform,opacity}
@keyframes npPulse{0%{transform:scale(1);opacity:.65}100%{transform:scale(3.8);opacity:0}}

/* 8. Intertitres collants en vue par tier */
.tghead{position:sticky;top:var(--tbh,0px);z-index:6;margin:0 -6px 10px;padding:9px 8px;border-radius:0 0 12px 12px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px)}

/* 9. Journal en frise */
.tl{max-width:780px;margin:0 auto}
.tlbar{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.tlbar .spacer{flex:1}
.tlmonth{font-family:var(--f-disp);font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--fg);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.tlmonth span{font-family:var(--f-mono);font-size:11px;font-weight:400;color:var(--faint)}
.tlgrp{position:relative;padding-left:28px}
/* La ligne est tracée morceau par morceau, d'un point au suivant : chaque entrée couvre
   sa hauteur plus la moitié des espaces autour, la première part de son point et la
   dernière s'y arrête. Elle passe ainsi exactement au centre des points, sans dépasser. */
.tli::after{content:"";position:absolute;left:-20px;top:-5px;bottom:-5px;width:2px;background:var(--line2);z-index:0}
.tli:first-child::after{top:50%}
.tli:last-child::after{bottom:50%}
.tli{position:relative;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:8px;min-width:0}
.tli::before{content:"";position:absolute;z-index:1;left:-25px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:var(--k);box-shadow:0 0 0 4px var(--bg),0 0 10px color-mix(in srgb,var(--k) 60%,transparent)}
.tli.-grp{flex-direction:column;align-items:stretch;gap:0;padding:0}
.tli.-grp::before{top:21px}
/* Le fil suit le point du groupe, qui reste en haut même déplié. */
.tli.-grp:first-child::after{top:21px}
.tli.-grp:last-child::after{bottom:calc(100% - 21px)}
.tlrow{display:flex;align-items:center;gap:12px;padding:10px 14px;text-align:left;width:100%;min-width:0;border-radius:11px}
.tlrow:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.tlrow .g{flex:1;min-width:0;font-weight:500;color:var(--muted);white-space:normal}
.tlrow .g b{color:var(--fg);font-weight:600}
.tlrow .g i{font-style:normal;color:var(--faint);font-size:12px;margin-left:4px}
.tlrow .chev{color:var(--faint);font-size:11px;transition:transform .15s}
.tli.-open .tlrow .chev{transform:rotate(180deg)}
.tlsub{list-style:none;margin:0;padding:2px 14px 12px 80px;display:flex;flex-direction:column;gap:7px;animation:tlsubIn .2s ease-out}
@keyframes tlsubIn{from{opacity:0;transform:translateY(-4px)}}
.tlsub li{position:relative;font-size:13px;color:var(--muted);line-height:1.4}
.tlsub li::before{content:"";position:absolute;left:-12px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--k)}
.tlsub li.-neuf{color:var(--fg)}
@media (max-width:720px){
  .tlsub{padding-left:28px}
  /* Comme les autres lignes : date et étiquette en haut, le thème dessous en entier. */
  .tlrow{flex-wrap:wrap;row-gap:5px;padding:10px 12px}
  .tlrow time{width:auto}
  .tlrow .tlt{margin-left:auto}
  .tli .tlrow .g{order:3;flex:1 0 100%;white-space:normal;font-size:13.5px}
}
.tli time{font-family:var(--f-mono);font-size:11px;color:var(--faint);flex:none;width:54px;white-space:nowrap}
.tli .g{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tli .g.-txt{white-space:normal;font-weight:500;color:var(--muted)}
.tli .tag{flex:none;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--k) 18%,transparent);color:color-mix(in srgb,var(--k) 75%,#fff)}
.tli .tag.-v{font-family:var(--f-mono);font-weight:600}
/* Colonnes fixes à droite (tier, étiquette, action) : tout s'aligne d'une ligne à l'autre. */
.tli .tlt{flex:none;width:22px;display:grid;place-items:center}
.tli .tag{width:96px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tli .tla{flex:none;min-width:28px;display:flex;justify-content:center;align-items:center}
.tli .tla .tlx{margin-left:0}
.tli.-neuf{border-color:color-mix(in srgb,var(--tAL) 45%,var(--line));background:color-mix(in srgb,var(--tAL) 6%,var(--panel))}
.tli.-neuf time{color:var(--tAL)}
@media (max-width:720px){
  .tli{flex-wrap:wrap;row-gap:5px;padding:10px 12px}
  .tli time{width:auto}
  .tli .tlt{margin-left:auto}
  .tli .g.-txt{order:3;flex-basis:100%;font-size:13.5px}
}

/* ---------- cartes D et F atténuées ---------- */
.card.-low{filter:grayscale(.55) brightness(.6)}
.card.-low:hover,.card.-low:focus-visible{filter:grayscale(.25) brightness(.85)}
.card{transition:border-color .14s,transform .14s,filter .2s}

/* ---------- journal : supprimer une mise à jour ---------- */
.tlx{flex:none;margin-left:2px;height:26px;min-width:26px;padding:0 7px;border-radius:7px;border:1px solid transparent;
  background:none;color:var(--faint);font-size:15px;line-height:1;display:inline-grid;place-items:center;cursor:pointer;
  transition:color .14s,background .14s,border-color .14s}
.tlx:hover{color:var(--tD);border-color:color-mix(in srgb,var(--tD) 40%,transparent)}
.tlx.-arm{font-size:11.5px;font-weight:700;color:#fff;background:var(--tD);border-color:var(--tD);white-space:nowrap}
@media (hover:hover){ .tli .tlx:not(.-arm){opacity:0} .tli:hover .tlx,.tlx:focus-visible{opacity:1} }

/* ---------- tableau en mode édition ---------- */
.tedbar{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.tedbar .hint{font-size:12px}
.tedbar kbd{font-family:var(--f-mono);font-size:10.5px;padding:1px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;background:var(--panel2);color:var(--fg)}
#tedBtn{display:inline-flex;align-items:center;gap:7px}
#tedBtn svg{width:14px;height:14px}
#tedBtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:767px){ .tedbar{display:none} }
.tablewrap.-edit tbody tr{cursor:default}
.tablewrap.-edit td[data-ed]{cursor:text}
.tablewrap.-edit tbody td[data-ed]:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.tablewrap.-edit td.-ro{color:var(--faint)}
.tablewrap td.-editing{padding:0!important;box-shadow:inset 0 0 0 2px var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--panel))!important}
.ced{display:block;width:100%;min-width:64px;box-sizing:border-box;margin:0;border:0;border-radius:0;outline:none;
  background:transparent;color:var(--fg);font:inherit;padding:8px 11px;color-scheme:dark}
select.ced{cursor:pointer;padding-right:6px}
select.ced option{background:var(--panel2);color:var(--fg)}
td.num .ced{text-align:right;font-family:var(--f-mono)}
td.tt .ced{font-weight:600}
.ced.-tier{text-transform:uppercase;font-family:var(--f-disp);font-weight:700;text-align:center}
.ced.-bad{background:color-mix(in srgb,var(--tD) 22%,transparent);animation:cedNo .3s}
@keyframes cedNo{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.tlet{display:inline-block;min-width:26px;text-align:center;font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--c,var(--faint))}
/* ---------- calendrier à côté des dates ---------- */
.calwrap{position:relative;display:flex;gap:6px;align-items:stretch;min-width:0}
.calwrap>input{flex:1;min-width:0}
.calbtn{flex:none;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.calbtn:hover,.calbtn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
td .calwrap{gap:0}
td .calbtn{width:34px;border-left:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:none}
.calpop{position:fixed;z-index:95;width:292px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.85);animation:calIn .16s cubic-bezier(.2,.8,.2,1)}
@keyframes calIn{from{opacity:0;transform:translateY(-4px)}}
.calpop .ch{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.calpop .ctitre{flex:1;text-align:center;font:700 15px var(--f-disp);text-transform:capitalize;padding:6px 0;border-radius:8px}
.calpop .ctitre:hover{background:var(--panel2)}
.calpop .ctitre i{font-style:normal;color:var(--faint);font-size:11px;margin-left:5px}
.calpop .cnav{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);flex:none}
.calpop .cnav:hover{color:var(--fg);border-color:var(--line2)}
.calpop .cwd,.calpop .cdg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calpop .cwd span{text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:4px 0 6px}
.calpop .cd{height:34px;border-radius:9px;display:grid;place-items:center;font:600 13px var(--f-mono);color:var(--fg);position:relative}
.calpop .cd:hover{background:var(--panel2)}
.calpop .cd.-x{color:var(--line2)}
.calpop .cd.-we{color:var(--muted)}
.calpop .cd.-x.-we{color:var(--line2)}
.calpop .cd.-auj{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent)}
.calpop .cd.-sel{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 14px -4px var(--accent)}
.calpop .cd.-pt::after{content:"";position:absolute;bottom:4px;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background:var(--tSL)}
.calpop .cd.-sel.-pt::after{background:var(--accent-ink)}
.calpop .cd:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.calpop .cyr{display:flex;justify-content:center;gap:14px;align-items:center;margin-bottom:10px;font:700 15px var(--f-disp)}
.calpop .cmg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.calpop .cmg button{padding:12px 0;border-radius:9px;font-size:13px;font-weight:600}
.calpop .cmg button:hover{background:var(--panel2)}
.calpop .cmg button.-sel{background:var(--accent);color:var(--accent-ink)}
.calpop .cmg button.-auj{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent)}
.calpop .cf{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.calpop .cf button{flex:1;padding:7px 0;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line)}
.calpop .cf button:hover{color:var(--fg);border-color:var(--line2)}
.calpop .cf button.-p{color:var(--fg);border-color:var(--line2);background:var(--panel2)}
.calscrim{position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.45)}
.calpop.-sheet{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:18px 18px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:calUp .22s cubic-bezier(.2,.8,.2,1)}
@keyframes calUp{from{transform:translateY(100%)}}
.calpop.-sheet .cd{height:44px;font-size:15px}
.calpop .cgrab{width:38px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 12px}
/* ---------- lot : doublons, updates à continuer, historique, lien F95, compact ---------- */
.dupwarn{margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--tDL);
  background:color-mix(in srgb,var(--tD) 12%,transparent);border:1px solid color-mix(in srgb,var(--tD) 40%,transparent);border-radius:8px;padding:7px 10px}
.dupwarn button{color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.updflag{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tSL);margin-bottom:-2px}
.updflag>span{flex:1;min-width:0}
.updok{flex:none;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tSL);
  border:1px solid color-mix(in srgb,var(--tSL) 45%,transparent);border-radius:999px;padding:2px 9px}
.updok:hover{background:color-mix(in srgb,var(--tSL) 16%,transparent)}
@media (pointer:coarse){ .updok{padding:5px 11px;font-size:11.5px} }
.updbanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:11px 13px;border-radius:11px;font-size:13px;
  background:color-mix(in srgb,var(--tS) 14%,var(--panel2));border:1px solid color-mix(in srgb,var(--tSL) 40%,var(--line))}
.updbanner>span{flex:1 1 220px;color:var(--muted);line-height:1.5}
.updbanner b{color:var(--tSL)}
.updbanner svg{width:14px;height:14px;color:var(--tSL);vertical-align:-2px;margin-right:6px}
.updflag svg{width:12px;height:12px}
.dstats .-upd b{color:var(--tSL)}
.vdd{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.vhd{display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:16px;color:var(--faint);border:1px solid var(--line2);border-radius:999px;padding:0 8px}
.vhd:hover,.vhd[aria-expanded="true"]{color:var(--fg);border-color:var(--accent)}
.vhd i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--accent)}
.tl.-hist .tli time{width:auto;min-width:88px}
.hnote{font-style:normal;font-weight:400;font-size:11px;color:var(--faint);margin-left:4px}
.tl.-hist .tli::before{box-shadow:0 0 0 4px var(--panel),0 0 10px color-mix(in srgb,var(--k) 60%,transparent)}
.tl.-hist .tlgrp{margin-top:4px}
.f95lnk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;color:var(--faint);margin-left:4px}
.f95lnk:hover{color:var(--accent);background:var(--panel2)}
.f95lnk svg{width:13px;height:13px}
@media (pointer:coarse){ .f95lnk{width:26px;height:26px} .f95lnk svg{width:15px;height:15px} }
body.dense .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
body.dense .card{gap:6px;padding:10px 11px 9px 15px;contain-intrinsic-size:auto 118px}
body.dense .card .cmeta,body.dense .card .themes{display:none}
body.dense .card .ctitle h3{font-size:14px}
body.dense .card .cfoot{padding-top:7px}
.hero{isolation:isolate}
.tghost{position:absolute;pointer-events:none}
@media (max-width:540px){ .doors{grid-template-columns:1fr} }

/* ---------- comptes : connexion, mon compte, administration ---------- */
.login{gap:clamp(18px,5vh,44px)}
/* Fenêtre de connexion : la même carte que les portes, qui prend la couleur du compte
   dès que l'identifiant est reconnu. */
.lgbox{--lc:var(--line2);--lk:var(--muted);position:relative;display:flex;flex-direction:column;gap:12px;width:min(370px,100%);text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 9%,var(--panel)),var(--panel) 46%);
  border:1px solid color-mix(in srgb,var(--lc) 45%,var(--line));border-radius:16px;padding:20px 20px 16px;overflow:hidden;
  box-shadow:0 22px 50px -24px color-mix(in srgb,var(--lc) 55%,#000),var(--shadow);transition:border-color .5s,box-shadow .5s,background .5s}
.lgbox::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lc);opacity:.85;transition:background .5s}
.lgbox.-ok{--lk:var(--lc)}
.lghead{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.lgav{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 19px/1 var(--f-disp);
  border:1.5px dashed var(--line2);color:var(--faint);background:var(--panel2);transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.lgbox.-ok .lgav{border:0;background:var(--lc);color:var(--li,#000);box-shadow:0 0 0 4px color-mix(in srgb,var(--lc) 22%,transparent),0 0 22px -4px var(--lc)}
.lghead>div{display:flex;flex-direction:column;min-width:0}
.lghead b{font:700 18px/1.2 var(--f-disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgbox.-ok .lghead b{color:var(--lc)}
.lghead span{font-size:12px;color:var(--faint)}
.lgf{display:flex;align-items:center;gap:9px;height:44px;padding:0 6px 0 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--faint);transition:border-color .15s,box-shadow .15s}
.lgf:focus-within{border-color:color-mix(in srgb,var(--lk) 70%,var(--line2));box-shadow:0 0 0 3px color-mix(in srgb,var(--lk) 18%,transparent);color:var(--lk)}
.lgf svg{width:17px;height:17px;flex:none}
.lgf input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--fg);font-size:14px}
.lgf input::placeholder{color:var(--faint)}
.lgeye{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--faint);flex:none}
.lgeye:hover{color:var(--fg);background:var(--raise)}
.lgrem{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);cursor:pointer;margin:2px 0}
.lgbox .sw2:checked{background:var(--lk);border-color:var(--lk)}
.lggo{height:44px;border-radius:10px;font:700 14px var(--f-body);color:var(--fg);background:var(--raise);border:1px solid var(--line2);
  transition:background .4s,color .4s,border-color .4s,filter .15s}
.lgbox.-ok .lggo{background:var(--lc);border-color:var(--lc);color:var(--li,#000)}
.lggo:hover{filter:brightness(1.12)}
.lggo[disabled]{opacity:.6;cursor:progress}
.lghint{margin:2px 0 0;text-align:center;font-size:11.5px;color:var(--faint);line-height:1.45}
.lgerr{margin:0;min-height:0;font-size:12.5px;color:var(--tDL)}
.sonsvol{display:flex;align-items:center;gap:10px;margin:8px 0 0 25px}
.sonsvol input{flex:1;max-width:200px;accent-color:var(--accent)}
.sonsvol output{font:600 11.5px var(--f-mono);color:var(--muted);min-width:38px}
.lgerr:empty{display:none}
.acct{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 10px;border-radius:999px;border:1px solid transparent;
  font-size:12.5px;font-weight:600;color:var(--muted);max-width:180px}
.acct i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct:hover{color:var(--fg);border-color:var(--line2)}
.impbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:9px 12px;border-radius:10px;font-size:12.5px;
  background:color-mix(in srgb,var(--tSp) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--tSpL) 45%,var(--line))}
.impbar b{color:var(--fg)}
.impbar button{margin-left:auto}
.btn.-s{padding:6px 11px;font-size:12px}
.btn[disabled],.sheet .btn[disabled]:hover{opacity:.45;cursor:not-allowed}
.-ro{opacity:.5}
.-ro,.-ro input,.-ro button,.-ro label{cursor:not-allowed}
.tg[disabled],.tierpick button[disabled],.ms[disabled]{cursor:not-allowed}
.tierpick button[disabled]:hover{opacity:.38}
.tierpick button[disabled][aria-pressed="true"]:hover{opacity:1}
.sect.-ro .tg,.sect.-ro .tierpick{opacity:.6}
input[disabled],select[disabled]{cursor:not-allowed;opacity:.6}
.sheet.-admin{width:min(720px,100%)}
.atabs{flex:none;display:flex;gap:4px;padding:10px 18px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.atabs button{padding:8px 12px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.atabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.alist{display:flex;flex-direction:column;gap:8px}
.arow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-width:0}
.adot{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.ainfo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ainfo b{font-size:13.5px}
.ainfo b em{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-left:4px}
.ainfo>span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.aact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gchips{display:inline-flex;gap:5px;flex-wrap:wrap}
.gchip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--raise);border:1px solid var(--line2);color:var(--fg);white-space:nowrap}
.gchip.-star{font-family:var(--f-mono);background:color-mix(in srgb,var(--tB) 18%,var(--panel2));border-color:color-mix(in srgb,var(--tB) 55%,var(--line2));color:var(--tBL)}
.aback{font-size:12.5px;color:var(--muted);padding:0;margin-bottom:10px}
.aback:hover{color:var(--fg)}
.atitle{font-size:17px;margin:0 0 14px}
.atitle .hint{font-family:var(--f-body);font-weight:400}
.gpicks{display:flex;flex-direction:column;gap:6px}
/* Dans un champ de formulaire, les cases à cocher gardent leur taille et leur texte normal. */
.field label.affect,.field label.gpick{font-size:12.5px;text-transform:none;letter-spacing:normal;font-weight:500;color:var(--muted)}
.field input[type=checkbox]{width:15px;height:15px;padding:0;flex:none}
.field .prow .swatches{margin:0}
.gpick{display:flex;align-items:center;gap:9px;font-size:12.5px}
.gpick input,.aclrow input{accent-color:var(--accent);width:15px;height:15px;flex:none}
.aclfam{margin-top:16px}
.aclfam h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 7px}
.aclrow{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:13px}
.aclrow input{margin-top:2px}
.aclrow>span{display:flex;flex-direction:column;gap:1px}
.aclrow b{font-weight:600}
.acchead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.acchead>div{display:flex;flex-direction:column;min-width:0}
.acchead b{font-family:var(--f-disp);font-size:18px}
.acchead>div span{font-size:12px;color:var(--faint)}
.acchead .gchips{margin-left:auto}
.mdpgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:7px}
.mdpgrid input{min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
.lienrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lienrow .hint{flex:1;min-width:180px}
.hint.-ok{color:var(--tAL)}
@media (max-width:720px){
  .mdpgrid{grid-template-columns:1fr}
  .arow{flex-wrap:wrap}
  .aact{width:100%;justify-content:flex-start}
}
.tablewrap.-edit td[data-ro]{opacity:.45;cursor:not-allowed}
/* ---------- administration, version 2 ---------- */
.av{width:var(--s,38px);height:var(--s,38px);border-radius:50%;display:inline-grid;place-items:center;flex:none;
  font:700 calc(var(--s,38px)*.44)/1 var(--f-disp);color:var(--ink,#000);background:var(--c,#888);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c,#888) 24%,transparent)}
.gstar{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:20px;padding:0 9px 1px;border-radius:999px;
  font:700 13px/1 var(--f-mono);color:#1a1200;white-space:nowrap;
  background:linear-gradient(100deg,#F24E4E,#FFC215 30%,#2ED47A 55%,#46BBCD 75%,#9B6BE8);box-shadow:0 0 12px -3px rgba(255,194,21,.6)}
.gtag{display:inline-flex;align-items:center;height:20px;font-size:10.5px;font-weight:700;padding:0 8px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--g) 55%,transparent);background:color-mix(in srgb,var(--g) 16%,transparent);color:color-mix(in srgb,var(--g) 62%,#fff)}
.sheet.-admin{width:min(760px,100%);overflow:hidden}
.sheet.-admin>*{min-width:0}
.ahead{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 20%,var(--panel)),var(--panel) 70%)}
.aqui{display:flex;flex-direction:column;gap:3px;min-width:0}
.aqui h2{font-size:17px}
.aqui>span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.aqui>span b{color:var(--fg);font-weight:600}
.akpi{margin-left:auto;display:flex;gap:18px}
.akpi div{display:flex;flex-direction:column;align-items:flex-end}
.akpi b{font:700 20px/1 var(--f-disp)}
.akpi span{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin-top:3px}
.ahead .iconbtn{margin-left:8px}
.sheet.-admin .atabs{gap:6px;padding:10px 18px;border-bottom:1px solid var(--line)}
.sheet.-admin .atabs button{position:relative;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:0;margin:0;flex:none}
.sheet.-admin .atabs button svg{width:15px;height:15px}
.sheet.-admin .atabs button i{font:700 10px/16px var(--f-mono);font-style:normal;min-width:18px;padding:0 5px;border-radius:9px;background:var(--raise);color:var(--muted);text-align:center}
.sheet.-admin .atabs button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 17%,var(--panel2));color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}
.sheet.-admin .atabs button[aria-selected="true"] i{background:var(--accent);color:var(--accent-ink)}
.adot2{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--tC);box-shadow:0 0 0 3px color-mix(in srgb,var(--tC) 25%,transparent)}
#admFoot[hidden]{display:none}
.asearch{display:flex;gap:8px;margin-bottom:12px}
.asearch input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 11px}
.asearch select{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;max-width:45%}
.agrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acard{position:relative;display:flex;gap:12px;align-items:center;padding:13px 14px 13px 16px;border-radius:12px;text-align:left;cursor:pointer;min-width:0;
  background:linear-gradient(160deg,color-mix(in srgb,var(--cd,var(--panel2)) 70%,var(--panel2)),var(--panel2) 75%);
  border:1px solid color-mix(in srgb,var(--c) 38%,var(--line));transition:border-color .15s}
.acard:hover{border-color:color-mix(in srgb,var(--c) 75%,var(--line))}
.acard::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--c);box-shadow:0 0 12px var(--c)}
.acard .ainf{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.acard .ainf>b{font:700 15px/1.1 var(--f-disp);color:var(--c);display:flex;align-items:baseline;gap:8px}
.acard .ainf>b em{font:600 9.5px var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-style:normal}
.acard .ainf>small{font-size:11.5px;color:var(--muted)}
.atags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:20px}
.aico{display:inline-flex;gap:6px;align-items:center;height:20px;color:var(--faint);margin-left:2px}
.aico>span{display:inline-grid;place-items:center;width:16px;height:20px}
.aico svg{width:15px;height:15px;display:block}
.aico .-on{color:var(--tAL)}
.avu{display:inline-flex;align-items:center;gap:5px;color:var(--faint)!important}
.avu svg{width:12px;height:12px}
.amore{position:absolute;top:7px;right:7px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.amore svg{width:16px;height:16px}
.amore:hover,.amore:focus-visible{background:var(--raise);color:var(--fg)}
.amenu{position:fixed;z-index:80;min-width:190px;display:flex;flex-direction:column;padding:5px;border-radius:10px;
  background:var(--raise);border:1px solid var(--line2);box-shadow:var(--shadow);cursor:default}
.amenu button{text-align:left;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:500}
.amenu button:hover,.amenu button:focus-visible{background:var(--panel2)}
.amenu button.-danger{color:var(--tDL)}
.amenu .hint{margin:0;padding:0 10px}
.amenu .hint:empty{display:none}
.acard.-new{justify-content:center;border-style:dashed;border-color:var(--line2);background:none;color:var(--muted);font-weight:600;min-height:80px}
.acard.-new::before{display:none}
.acard.-new:hover{color:var(--fg);border-color:var(--accent)}
.acard.-grp{cursor:default}
.acard.-grp[data-gopen]{cursor:pointer}
.acard.-grp .gcol{flex:none;width:120px;display:flex;justify-content:center}
.gbar{display:block;width:100%;max-width:220px;height:4px;border-radius:2px;background:var(--raise);overflow:hidden}
.gbar i{display:block;height:100%;background:var(--c,var(--accent));border-radius:2px}
.amembres{display:flex;align-items:center;gap:4px;min-width:0}
.amembres .av{--s:20px;box-shadow:0 0 0 2px var(--panel2)}
.amembres span{margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avues{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);margin-bottom:12px}
.avues button{padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.avues button[aria-pressed="true"]{background:var(--raise);color:var(--fg)}
.amxwrap{overflow-x:auto;margin:0 -2px}
.amx{width:100%;min-width:0;border-collapse:separate;border-spacing:0;font-size:12.5px}
.amx th,.amx td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.amx th:first-child,.amx td:first-child{text-align:left;white-space:normal;min-width:180px}
.amx thead th{position:sticky;top:-16px;background:var(--panel);z-index:1;font-size:11px;color:var(--faint);font-weight:600;padding-top:4px}
.amx thead th button{padding:0}
.amx .fam td{background:var(--panel2);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:6px 10px}
.mxok{display:inline-block;width:16px;height:16px;border-radius:5px;background:var(--g);box-shadow:0 0 8px -2px var(--g);vertical-align:middle}
.mxno{display:inline-block;width:16px;height:16px;border-radius:5px;border:1px dashed var(--line2);vertical-align:middle}
.atitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.atitle h3{font-size:18px}
.aed{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}
.asec{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--panel2);margin-bottom:10px;display:flex;flex-direction:column;gap:9px}
.asec h5,.aprev h5{margin:0;display:flex;align-items:center;gap:7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.asec h5 svg{width:14px;height:14px}
.asec.-danger{border-color:color-mix(in srgb,var(--tD) 38%,var(--line));background:color-mix(in srgb,var(--tD) 6%,var(--panel2))}
.asec.-danger h5{color:var(--tDL)}
.asec .hint:empty{display:none}
.arow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.afield{display:flex;flex-direction:column;gap:4px;min-width:0}
.afield>span{font-size:11.5px;color:var(--muted)}
.afield input:not([type=color]){width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
.acol{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acol input[type=color]{width:40px;height:34px;padding:2px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;cursor:pointer;flex:none}
.acol .swatches{margin:0}
.abtns{display:flex;gap:8px;flex-wrap:wrap}
.gpuces{display:flex;flex-wrap:wrap;gap:6px}
/* Choisi : le badge tel qu'on le voit partout. Pas choisi : le même, en gris. */
.gpuce{position:relative;display:inline-flex;align-items:center;gap:5px;padding:4px;border-radius:999px;border:1px solid transparent;cursor:pointer;user-select:none}
.gpuce:hover{border-color:var(--line2)}
.gpuce input{position:absolute;opacity:0;pointer-events:none}
.gpuce:not(:has(input:checked)) .gtag,.gpuce:not(:has(input:checked)) .gstar{filter:grayscale(1);opacity:.45;box-shadow:none}
.gpuce:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.gpuce.-lock{cursor:not-allowed}
.gpuce.-lock:hover{border-color:transparent}
.gpuce svg{width:12px;height:12px;color:var(--faint);margin-right:3px}
.aprev{position:sticky;top:0;display:flex;flex-direction:column;gap:10px}
.apdoor{position:relative;display:grid;place-items:center;min-height:118px;border-radius:14px;overflow:hidden;text-align:center;padding:10px;
  background:linear-gradient(168deg,color-mix(in srgb,var(--cd) 88%,var(--panel)),var(--panel) 82%);
  border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:0 10px 30px -20px var(--c);transition:background .2s,border-color .2s}
.apdoor span{display:block;font:700 23px/1.1 var(--f-disp);color:var(--c);text-shadow:0 0 14px color-mix(in srgb,var(--c) 48%,transparent);overflow-wrap:anywhere}
.apdoor small{display:block;margin-top:6px;font-size:12px;font-weight:600;color:color-mix(in srgb,var(--fg) 78%,transparent)}
.apdoor small b{font-family:var(--f-mono);font-weight:700;color:var(--c)}
.apdoor small i{font-style:normal;opacity:.45}
.apdoor::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c);box-shadow:0 0 10px var(--c)}
.apdoor.-off{filter:grayscale(1);opacity:.45;border-style:dashed}
.afam{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.afamh{width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--panel2);text-align:left}
.afamh b{font-size:13px}
.afamh .gbar{width:60px;--c:var(--accent)}
.afamh .cnt{margin-left:auto;font:700 11px var(--f-mono);color:var(--muted)}
.afamh .chev{color:var(--faint);transition:transform .15s}
.afamh[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.afamh[aria-expanded="false"]+.afamb{display:none}
.afamb{padding:2px 14px 6px}
.atg{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);cursor:pointer}
.atg:first-child{border-top:0}
.atg .t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.atg .t b{font-size:13px;font-weight:600}
.atg .t span{font-size:11.5px;color:var(--faint)}
.atg.-lock{cursor:not-allowed}
.atg.-lock .t{opacity:.55}
.sw2{appearance:none;-webkit-appearance:none;width:36px;height:21px;border-radius:11px;background:var(--raise);border:1px solid var(--line2);position:relative;flex:none;margin:0;cursor:inherit;transition:background .15s,border-color .15s}
.sw2::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:left .15s,background .15s}
.sw2:checked{background:var(--accent);border-color:var(--accent)}
.sw2:checked::after{left:17px;background:#fff}
.sw2:disabled{opacity:.35}
.asauv{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;margin-bottom:12px;
  border:1px solid color-mix(in srgb,var(--tA) 40%,var(--line));background:color-mix(in srgb,var(--tA) 8%,var(--panel2))}
.asauv>svg{width:26px;height:26px;color:var(--tAL);flex:none;margin-top:2px}
.asauv>div{display:flex;flex-direction:column;gap:3px}
.asauv .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.asauv b{font:700 19px var(--f-disp)}
.asauv small{font-size:12px;color:var(--muted)}
.asauv .warn{color:var(--tCL)}
.asauv.-vieille{border-color:color-mix(in srgb,var(--tC) 50%,var(--line));background:color-mix(in srgb,var(--tC) 9%,var(--panel2))}
.asauv.-vieille>svg{color:var(--tCL)}
/* bouton du compte sur la page de garde : à gauche, en face des icônes */
.acct{gap:9px;padding:0 13px 0 4px;height:36px;max-width:220px}
.acct .av{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 30%,transparent)}
.acct .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar.-bare #acctBtn{order:-1;margin-right:auto}
.acchead .av{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 24%,transparent),0 6px 18px -8px var(--c)}
@media (max-width:720px){
  .agrid{grid-template-columns:1fr}
  .aed{grid-template-columns:1fr}
  .aprev{position:static;order:-1}
  .aprev .hint{display:none}
  .arow2{grid-template-columns:1fr}
  .akpi{display:none}
  .ahead{padding:12px 16px}
  .sheet.-admin .atabs{padding:8px 12px}
  .sheet.-admin .atabs button{padding:7px 10px}
  .acct .nm{display:inline}
  .acct{width:auto;padding:0 12px 0 4px;justify-content:flex-start}
  .acard.-grp{flex-wrap:wrap}
  .amx th:first-child,.amx td:first-child{min-width:130px}
  .amx th,.amx td{padding:7px 7px}
}


/* ---------- fond animé ---------- */
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#bgfx canvas{position:absolute;inset:0;width:100%;height:100%}
#bgfx .grain{position:absolute;inset:0;background-image:var(--noise);background-size:160px 160px}
#bgfx .pts i{position:absolute;left:0;top:0;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);opacity:0;will-change:transform,opacity}
/* ---------- annuler : message en bas de l'écran ---------- */
.toast{position:fixed;left:50%;width:max-content;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 24px));padding:10px 10px 10px 16px;border-radius:12px;
  background:var(--raise);border:1px solid var(--line2);box-shadow:0 14px 40px -10px rgba(0,0,0,.9);font-size:13px;color:var(--muted);
  transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.toast.-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast b{color:var(--fg);font-weight:600}
.toast>span{min-width:0;line-height:1.45}
.toast button{flex:none;font-weight:700;font-size:13px;color:var(--accent);padding:6px 10px;border-radius:8px}
.toast button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
@media (max-width:720px) and (min-height:501px){ .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }

/* ---------- carte : pulsation quand on coche ---------- */
.card.-pulse{animation:cpulse .65s ease-out}
@keyframes cpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pk) 65%,transparent),inset 0 0 0 1px var(--pk)}
  100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--pk) 0%,transparent),inset 0 0 0 1px transparent}}

/* ---------- écrans vides ---------- */
.empty.-ill{border-style:solid;border-color:var(--line)}
.empty .ill{width:150px;height:116px;display:block;margin:0 auto 10px}
.empty .ebtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- journal : mois collé en haut, icône par type ---------- */
.tl:not(.-hist) .tlmonth{position:sticky;top:var(--tbh,0px);z-index:5;background:color-mix(in srgb,var(--panel) 96%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);margin:14px 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px}
.tli .tico{position:absolute;z-index:2;left:-31px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--k) 22%,var(--bg));border:1.5px solid var(--k);color:var(--k);box-shadow:0 0 0 3px var(--bg)}
.tli .tico svg{width:13px;height:13px}
.tli.-grp>.tico{top:21px}
.tl:not(.-hist) .tli::before{display:none}

/* ---------- fiche : onglets Fiche / Carnet / Scripts ---------- */
.ftabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--line);flex:none}
.ftabs button{padding:10px 12px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.ftabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.ftabs button i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--faint);margin-left:5px}
/* radar des notes */
.radar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.radar svg{width:270px;height:230px;flex:none;overflow:visible}
.radar .lg{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.radar .lg span{display:flex;align-items:center;gap:7px}
.radar .lg i{width:14px;height:3px;border-radius:2px;background:var(--c)}
.radar .lg i.-d{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px)}
/* carnet */
.cn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cn-grid .field.-full{grid-column:1/-1}
.cn-in{display:flex;gap:6px}
.cn-in input{flex:1;min-width:0}
.cn-list{display:flex;flex-direction:column}
.cn-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.cn-row:first-child{border-top:0}
.cn-row>span:not(.chipx){flex:1;min-width:0;overflow-wrap:anywhere}
.cn-row .x{flex:none;width:26px;height:26px;border-radius:7px;color:var(--faint)}
.cn-row .x:hover{color:var(--tDL);background:color-mix(in srgb,var(--tD) 14%,transparent)}
.cn-add{display:flex;gap:6px;margin-top:8px}
.cn-add input{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 9px;min-width:0}
.cn-add input.-s{width:76px;flex:none}
.cn-add input:not(.-s){flex:1}
.cn-notes{width:100%;min-height:90px;resize:vertical;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;line-height:1.55;font-size:13px}
.cn-etat{font-size:11.5px;color:var(--faint);margin-top:5px;min-height:15px}
.chipx{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--line2);color:var(--muted);white-space:nowrap;flex:none}
.chipx.-ok{color:#7be3a6;border-color:rgba(46,212,122,.45);background:rgba(46,212,122,.1)}
.chipx.-ko{color:#f7968a;border-color:rgba(232,80,60,.45);background:rgba(232,80,60,.1)}
.chipx.-q{color:#fde579;border-color:rgba(232,168,0,.45);background:rgba(232,168,0,.1)}
.chipx.-m{font-family:var(--f-mono);font-weight:500}
/* scripts */
.sc-files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sc-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.sc-file button.n{flex:1;min-width:0;text-align:left;font:12.5px var(--f-mono);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-file span{font-size:11.5px;color:var(--faint);white-space:nowrap}
.sc-file .x{width:26px;height:26px;border-radius:7px;color:var(--faint);flex:none}
.sc-file .x:hover{color:var(--tDL)}
.sheet.-code{width:min(1180px,100%);height:min(92vh,900px);max-height:none}
.sheet.-code>.body{flex:1;display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;padding:14px 18px;overflow:hidden;min-height:0}
.sheet.-code header .sinp{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;width:min(240px,40vw)}
.sc-side{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0}
.sc-side h5{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:10px 0 4px}
.sc-side h5:first-child{margin-top:0}
.sc-side button{text-align:left;padding:6px 9px;border-radius:7px;font:12px var(--f-mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.sc-side button:hover{background:var(--panel2);color:var(--fg)}
.sc-side button.-on{background:var(--panel2);color:var(--fg)}
.code{font:12.5px/1.65 var(--f-mono);background:#080B0D;border:1px solid var(--line);border-radius:12px;overflow:auto;min-height:0;padding:6px 0}
.code .ln{display:flex;gap:14px;padding:0 14px;white-space:pre;min-width:max-content}
.code .ln i{font-style:normal;color:#3C4850;width:44px;text-align:right;flex:none;user-select:none}
.code .ln.-hl{background:rgba(232,168,0,.1);box-shadow:inset 3px 0 0 #E8A800}
.code .ln.-cur{background:rgba(232,168,0,.24)}
.code .ln.-go{background:rgba(70,187,205,.16);box-shadow:inset 3px 0 0 var(--tSL)}
.code .k{color:#c792ea}.code .s{color:#c3e88d}.code .c{color:#6A7983;font-style:italic}.code .n{color:#82aaff}.code .v{color:#f78c6c}
.sc-big{font-size:12px;color:var(--faint);padding:10px 14px}
/* walkthrough */
.sheet.-wt{width:min(980px,100%);height:min(92vh,900px);max-height:none}
.sheet.-wt>.body{flex:1;overflow-y:auto;min-height:0}
.wt-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.wt-bar input,.wt-bar select{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;min-width:0}
.wt-bar input[type=search]{flex:1 1 200px}
.wt-bar label input{width:15px;height:15px;padding:0;accent-color:var(--accent)}
.wt-bar label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.wt-f{font:700 12px var(--f-mono);color:var(--faint);margin:18px 0 8px;letter-spacing:.04em}
.wt-m{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:10px 12px;margin-bottom:10px}
.wt-m .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.wt-m .h b{font:600 12.5px var(--f-mono);color:var(--tSL)}
.wt-m .h span{font-size:11.5px;color:var(--faint)}
.wt-m .h button{font-size:11.5px;color:var(--accent);margin-left:auto}
.wt-m .q{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:6px}
.wt-c{display:flex;flex-direction:column;gap:5px;padding:7px 0;border-top:1px solid var(--line)}
.wt-c:first-of-type{border-top:0}
.wt-c .t{font-weight:600;font-size:13.5px}
.wt-c .e{display:flex;gap:5px;flex-wrap:wrap}
.wt-c .e .chipx{font-family:var(--f-mono);font-weight:500;font-size:11px}
.wt-c .e .chipx.-mute{opacity:.75}
.wt-c .cond{font-size:11.5px;color:#fde579}
.wt-vide{color:var(--faint);font-size:13px;padding:30px 0;text-align:center}

/* ---------- tier list ---------- */
.tlbox{max-width:1300px;margin:0 auto}
.tlhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.tlhead h2{font-size:20px}
.tlhead .hint{margin-left:auto}
.tlrow2{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:8px;background:var(--panel);transition:border-color .12s,background .12s}
.tlrow2 .lab{width:84px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 20%,var(--panel2));border-right:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.tlrow2 .lab .nn{font:700 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);text-align:center}
.tlrow2 .its{display:flex;flex-wrap:wrap;gap:8px;padding:8px;flex:1;align-content:flex-start;min-height:78px;min-width:0}
.tlrow2.-over{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--panel))}
.tlrow2 .its>.hint{align-self:center;padding:0 8px}
.tlt2{width:122px;border-radius:9px;overflow:hidden;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative}
.tlt2.-drag{cursor:grab}
.tlt2 .cv{height:46px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 55%,#0b0f12),color-mix(in srgb,var(--c) 18%,#06080A));position:relative}
.tlt2 .cv::after{content:attr(data-i);position:absolute;right:7px;bottom:3px;font:700 20px var(--f-disp);color:rgba(255,255,255,.18)}
.tlt2 b{display:block;font-size:11.5px;font-weight:600;padding:5px 7px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlt2 small{display:block;font-size:10.5px;color:var(--faint);padding:0 7px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlt2:hover{border-color:var(--c)}
.tlt2.-ghost{position:fixed;z-index:95;pointer-events:none;transform:rotate(-3deg) scale(1.06);box-shadow:0 16px 34px -8px rgba(0,0,0,.85);border-color:var(--accent);margin:0}
.tlt2.-src{opacity:.3}
@media (max-width:720px){
  .tlrow2 .lab{width:58px}
  .tlrow2 .lab .tier{transform:scale(.8)}
  .tlt2{width:104px}
  .tlhead .hint{margin-left:0;flex-basis:100%}
}


/* tier 502 : l'arc-en-ciel du badge, pas une seule couleur */
.tlrow2.-r502{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(125deg,#F24E4E,#FFC215 22%,#2ED47A 45%,#46BBCD 68%,#9B6BE8) border-box}
.tlrow2.-r502 .lab{background:linear-gradient(160deg,rgba(242,78,78,.22),rgba(255,194,21,.18) 25%,rgba(46,212,122,.18) 50%,rgba(70,187,205,.18) 75%,rgba(155,107,232,.24));border-right:1px solid rgba(255,255,255,.08)}
.tlrow2.-r502.-over{background:linear-gradient(color-mix(in srgb,#FFC215 6%,var(--panel)),color-mix(in srgb,#FFC215 6%,var(--panel))) padding-box,linear-gradient(125deg,#F24E4E,#FFC215 22%,#2ED47A 45%,#46BBCD 68%,#9B6BE8) border-box}
.tlt2.-r502 .cv{background:linear-gradient(125deg,rgba(242,78,78,.55),rgba(255,194,21,.45) 25%,rgba(46,212,122,.42) 50%,rgba(70,187,205,.45) 75%,rgba(155,107,232,.55)),#0b0f12}
.tlt2.-r502:hover{border-color:#FFC215}
.tghead.-r502 .ln{background:linear-gradient(90deg,#F24E4E,#FFC215,#2ED47A,#46BBCD,#9B6BE8,transparent)}
/* ---------- duel (page Stats) ---------- */
.duel{margin-top:22px}
.duel>h3{font:700 13px var(--f-body);text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.dbox h4{font:700 11.5px var(--f-body);text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 8px}
.duel-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px}
.duel-top .w{display:flex;align-items:center;gap:12px;min-width:0}
.duel-top .w.-r{justify-content:flex-end;text-align:right}
.duel-top .w b{display:block;font:700 20px var(--f-disp);color:var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-top .pc{text-align:center}
.duel-top .pc b{font:700 42px/1 var(--f-disp)}
.duel-top .pc span{display:block;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;margin-top:5px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.drow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);min-width:0}
.dbox h4+.drow{border-top:0}
.drow>b{flex:1;min-width:0;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.drow>b:hover{color:var(--accent)}
.drow .vs{font-size:11px;color:var(--faint);line-height:1}
.gap{font:700 11px var(--f-mono);padding:2px 7px;border-radius:6px;background:rgba(232,80,60,.15);color:#f7968a;white-space:nowrap}
.duel .hint{font-size:12.5px}
@media (max-width:720px){
  .dgrid{grid-template-columns:1fr}
  .duel-top{grid-template-columns:1fr 1fr;padding:16px}
  .duel-top .pc{grid-column:1/-1;order:-1}
  .duel-top .w .av{--s:40px!important}
}

/* ---------- à découvrir ---------- */
#decTop{position:relative}
#decTop .fcount{background:var(--tSL);color:#04202A}
@media (min-width:721px) and (max-width:1100px) and (min-height:501px){ #decTop{order:5} }
@media (max-width:720px) and (min-height:501px){
  .topbar:not(.-bare) #decTop{order:6;width:42px;height:42px}
  .topbar:not(.-bare) .topbar-in:has(#fsBtn:not([hidden])):has(#decTop:not([hidden])) .searchbox{flex-basis:calc(100% - 150px)}
}
.sheet.-dec{width:min(1020px,100%);max-height:92vh}
.dec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dec{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:13px 14px;min-width:0}
.dec.-ko{opacity:.55}
.dec .t{display:flex;align-items:baseline;gap:8px;min-width:0}
.dec .t b{font:700 16px var(--f-disp);min-width:0;overflow-wrap:anywhere}
.dec .t a{font-size:12px;color:var(--accent);margin-left:auto;flex:none}
.dec .m{font-size:12px;color:var(--faint)}
.dec .bd{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dec .bd .tier{flex:none}
.dec p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.dec .act{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line2)}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--fg)}
@media (max-width:720px){ .dec-grid{grid-template-columns:1fr} }

/* ---------- présence ---------- */
.pres{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));
  background:color-mix(in srgb,var(--c) 12%,var(--panel));font-size:12px;font-weight:600;white-space:nowrap;flex:none}
.pres .av{--s:22px}
.pres i{width:7px;height:7px;border-radius:50%;background:#2ED47A;box-shadow:0 0 0 3px rgba(46,212,122,.25);flex:none}
.presbox{display:flex;gap:6px;align-items:center}
.presbox:empty{display:none}
.card .watch{position:absolute;top:12px;right:54px;z-index:5;display:flex}
.card .watch .av{--s:22px;box-shadow:0 0 0 2px var(--panel),0 0 12px var(--c)}
.card .watch .av+.av{margin-left:-6px}
.drawer .watchf{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:6px}
.drawer .watchf .av{--s:20px}
.pres span.nm{display:none}
.pres{padding:0 6px 0 4px}
@media (min-width:1500px){ .pres span.nm{display:inline} .pres{padding:0 10px 0 4px} }