/* ==========================================================================
   RetroBook — direction artistique   chargée APRÈS les styles d'origine
   Suivi (index.html) et Book (Vue) partagent ce fichier et la même navigation.

   Couleurs : la structure de DofusBook (interface plate et dense) dans les teintes du site RetroZia :
   panneaux violet nuit #251b30 sur fond #1d1526, cadre #140e1b, texte gris lavande. Accents ambre doré
   (boutons, filtres actifs) et violet exact de RetroZia (#d965f8 du logo, #a855f7 du site).
   Menus et titres en Open Sans condensé gras, texte en Lato.
   ========================================================================== */

/* Empilement : barre latérale (96) > voile mobile (95) > barre du haut (94),
   et toutes les fenêtres du Book au-dessus (100 et plus). À 300, la barre
   recouvrait le bord gauche des fenêtres sur les écrans de moins de ~1700 px. */

/* ------------------------------------------------------------------ 1. palette */
:root, html[data-theme="dark"] {
  --bg: #1d1526;             /* fond de page */
  --frame: #140e1b;          /* barre latérale, cadre */
  --surf: #251b30;           /* panneaux */
  --cell: #30243d;           /* cases, champs, lignes */
  --btn: #3d2f4c;            /* boutons, puces */
  --tab: #554468;            /* onglets inactifs */
  --line: rgba(240, 228, 255, .06);
  --line-2: rgba(240, 228, 255, .12);
  --text-c: #d8d2e0;
  --bright: #f5f5f5;
  --muted-c: #9d8cb2;        /* lavande grisée */
  --acc: #e0a43a;            /* accent : ambre doré (or des Dofus) */
  --acc-hi: #ecb655;
  --acc-dk: #b9832a;
  --on-acc: #2a1708;         /* texte sur l'ambre */
  --zia: #d965f8;            /* violet du logo RetroZia (« ZIA ») */
  --zia-dk: #a855f7;         /* violet profond du site RetroZia */
  --violet-c: var(--zia);
  --gold-c: #e8b84a;
  --red-c: #fa5858;
  --blue-c: #5aa9e6;
  --r: 6px;
  --cond: "Open Sans", "Arial Narrow", system-ui, sans-serif;
  --body: "Lato", Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;

  /* variables d'origine du Suivi et du Book, redirigées vers la palette */
  --font-heading: var(--cond);
  --font-body: var(--body);
  --font-display: var(--cond);
  --font-mono: var(--body);
  --tint: 240, 228, 255;
  --shade: 0, 0, 0;
  --panel: 37, 27, 48;
  --on-surface: #f5f5f5;
  --on-accent: #fff;
  --bg-dark: var(--bg);
  --bg-card: var(--surf);
  --bg-card-hover: var(--surf);
  --bg-modal: var(--surf);
  --bg-input: var(--cell);
  --bg-1: var(--surf);
  --bg-3: var(--cell);
  --title-start: #f5f5f5;
  --text-soft: #d8d2e0;
  --border-color: var(--line);
  --purple-main: var(--zia-dk);
  --purple-light: var(--zia);
  --purple-soft: var(--zia);
  --purple-pale: var(--zia);
  --purple-deep: var(--zia-dk);
  --purple-dark: #7e22ce;
  --purple-glow: rgba(217, 101, 248, .25);
  --green-main: var(--zia-dk);
  --green-light: var(--zia);
  --green-deep: #7e22ce;
  --green-glow: rgba(217, 101, 248, .25);
  --gold: var(--gold-c);
  --gold-light: var(--gold-c);
  --gold-glow: rgba(232, 184, 74, .25);
  --boss-red: var(--red-c);
  --red-light: var(--red-c);
  --text-main: var(--text-c);
  --text-muted: var(--muted-c);
  --glass-blur: none;
  --glass-bg: var(--surf);
  --glass-border: 0 solid transparent;
  --border: var(--line);
  --border-soft: var(--line);
  --border-strong: var(--acc);
  --border-glow: rgba(224, 164, 58, .35);
  --accent: var(--acc);
  --accent-hi: var(--acc-hi);
  --accent-deep: var(--acc-dk);
  --accent-soft: rgba(224, 164, 58, .16);
  --accent-glow: rgba(224, 164, 58, .3);
  --green: var(--acc);
  --text: var(--text-c);
  --text-bright: var(--bright);
  --text-accent: var(--zia);
  --shadow-sm: none;
  --shadow-card: none;
  --shadow-hover: none;
  --shadow-purple: none;
  --shadow-green: none;
}
html[data-theme="light"] {
  --bg: #ebe5f1;             /* lavande pâle */
  --frame: #140e1b;
  --surf: #faf7fc;
  --cell: #eee7f5;
  --btn: #e0d5ec;
  --tab: #c8b9da;
  --line: rgba(45, 28, 64, .1);
  --line-2: rgba(45, 28, 64, .18);
  --text-c: #3a2f45;
  --bright: #1f1529;
  --muted-c: #7a6a8e;
  --acc: #c98a1c;
  --acc-hi: #b37a14;
  --zia: #a855f7;
  --zia-dk: #8b3fe0;
  --gold-c: #b8860b;
  color-scheme: light;
  --tint: 45, 28, 64;
  --shade: 45, 28, 64;
  --panel: 250, 247, 252;
  --on-surface: #1f1529;
  --title-start: #1f1529;
  --text-soft: #463a54;
}

/* ------------------------------------------------------------------ 2. base */
html body { background: var(--bg); font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--text-c); -webkit-font-smoothing: antialiased; }
html body::after, html body::before { content: none !important; }
.bg-glow { display: none !important; }
h1, h2, h3 { font-family: var(--cond); font-stretch: 75%; font-weight: 700; letter-spacing: .01em; }
::selection { background: var(--zia-dk); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--btn) transparent; }
:focus-visible { outline: 2px solid var(--zia); outline-offset: 2px; }
html body a:not(.rz-l):not(.rz-brand):not(.retrozia-btn):not(.rz-mlogo):not(.soutien-btn) { color: var(--zia); }
@keyframes rzIn { from { opacity: 0; transform: translateY(6px); } }
.rz-in { animation: rzIn .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 20ms); }

/* en-tête de page */
.rz-pagehead { display: grid; gap: 2px; margin: 0 0 14px; }
.rz-pagehead h1, #app .app .page-title { margin: 0; font: 700 30px/1.15 var(--cond); font-stretch: 75%; color: var(--bright); letter-spacing: .01em; }
.rz-pagehead p:not(.rz-eyebrow) { margin: 2px 0 0; max-width: 80ch; color: var(--muted-c); font-size: 14.5px; }
.rz-eyebrow { margin: 0; font: 700 13px var(--cond); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--zia); }

/* titres de panneau : blancs, condensés gras, comme DofusBook */
#app .app .panel h2, #app .app .ks-title, #app .app .ps-title, #app .app .rp-title, #app .app .gr-title, #app .app .or-title, #app .app .dp-head, #app .app .rp-head,
html body .dofus-stats-title {
  font-family: var(--cond) !important; font-stretch: 75%; font-weight: 700 !important; font-size: 17px !important; letter-spacing: .01em !important; text-transform: none !important; font-variant: normal !important; color: var(--bright) !important;
}

/* =================================================================== 3. NAVIGATION COMMUNE */
:root { --sidebar-w: 232px; }
.rz-side, html body .topbar.rz-side {
  position: fixed; z-index: 96; top: 0; left: 0; bottom: 0; width: 232px; height: auto; margin: 0;
  display: flex; flex-direction: column; gap: 0; padding: 0 0 12px; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap;
  background: var(--frame); border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
/* bandeau vert du logo, comme la barre de DofusBook */
.rz-brand { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 14px; margin: 0 0 6px; background: #140e1b; border-bottom: 3px solid var(--zia-dk); text-decoration: none; }
.rz-brand img { width: 100px !important; height: 44px !important; max-height: none !important; object-fit: cover; object-position: center; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)) !important; }
.rz-brand span { margin-left: 4px; padding: 2px 7px; border-radius: 4px; background: var(--zia-dk); font: 700 17px/1 var(--cond); font-stretch: 75%; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.rz-nav { display: flex; flex-direction: column; gap: 0; flex: 1; overflow: visible; padding: 0 8px; }
.rz-nav .prestige-tabs { display: flex !important; flex-direction: column !important; gap: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; width: auto !important; overflow: visible !important; }
.rz-h { margin: 14px 10px 4px; font: 700 13px var(--cond); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: #9d8cb2; }
.rz-l, .rz-nav .tab-btn.rz-l {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 4px 10px !important; margin: 0;
  border: 0 !important; border-radius: var(--r); background: none !important; box-shadow: none !important;
  color: #d8d2e0 !important; font: 400 15px var(--body) !important; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.rz-l .tab-label { display: inline !important; font: inherit !important; color: inherit !important; }
.rz-ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: #9d8cb2; font-size: 15px; }
.rz-ic img { width: 24px !important; height: 24px !important; object-fit: contain; border-radius: 0 !important; }
.rz-l:hover { color: #fff !important; background: #251b30 !important; }
.rz-l.active, .rz-l.router-link-active, .rz-nav .tab-btn.rz-l.active { color: #fff !important; background: linear-gradient(90deg, rgba(168, 85, 247, .4), rgba(217, 101, 248, .1)) !important; }
.rz-l.active .rz-ic, .rz-l.router-link-active .rz-ic { color: var(--zia); }
.rz-l.active::before, .rz-l.router-link-active::before { content: ""; display: block; position: absolute; left: -8px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--zia); }
.rz-side .topbar-right, .rz-side-foot {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 6px !important; margin: 12px 8px 0 !important; padding: 12px 2px 0 !important;
  border-top: 1px solid rgba(240, 228, 255, .08) !important;
}
.rz-side .topbar-btn, .rz-side .theme-toggle, .rz-side-foot .theme-toggle {
  height: 34px; min-width: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r); border: 0 !important; background: #251b30 !important; color: #d8d2e0 !important; box-shadow: none !important; font: 400 13.5px var(--body);
}
.rz-side .topbar-btn:hover, .rz-side .theme-toggle:hover { background: #3d2f4c !important; color: #fff !important; }
.rz-side .auth-widget { flex: 1 1 100%; }
.rz-side .auth-btn-login, .rz-side-foot .retrozia-btn {
  width: 100%; height: 36px; display: flex !important; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r) !important; padding: 0 10px !important;
  border: 0 !important; background: var(--acc) !important; color: var(--on-acc) !important; box-shadow: none !important; font: 700 15px var(--cond) !important; font-stretch: 75%; text-decoration: none;
}
.rz-side .auth-btn-login:hover, .rz-side-foot .retrozia-btn:hover { background: var(--acc-hi) !important; }
.rz-side-foot .retrozia-btn { flex: 1; }

/* contenu décalé de la barre */
html body .app-container { margin-left: 232px !important; padding: 16px 18px 40px !important; max-width: none; }
#app .app { padding-left: 232px; }
#app .app .app-main { padding-top: 16px; }

/* barre mobile + tiroir */
.rz-mtop, .rz-scrim { display: none; }
@media (max-width: 900px) {
  html body .app-container { margin-left: 0 !important; padding: 12px max(10px, env(safe-area-inset-right)) 50px max(10px, env(safe-area-inset-left)) !important; }
  #app .app { padding-left: 0; }
  .rz-mtop { position: sticky; z-index: 94; top: 0; display: flex; align-items: center; gap: 12px; height: 52px; margin: -12px -10px 12px; padding: 0 10px; background: #140e1b; border-bottom: 3px solid var(--zia-dk); }
  #app .app .rz-mtop { margin: 0; }
  .rz-mlogo img { height: 30px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
  .rz-burger { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r); border: 0; background: var(--acc); color: var(--on-acc); font-size: 16px; }
  .rz-side, html body .topbar.rz-side { transform: translateX(-105%); transition: transform .25s var(--ease); width: min(280px, 84vw); position: fixed !important; }
  html.rz-open .rz-side, html.rz-open body .topbar.rz-side { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .5); }
  html.rz-open .rz-scrim { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .5); }
  html.rz-open { overflow: hidden; }
  html body .topbar.rz-side .topbar-nav { position: static; flex: 1; overflow: visible; }
}

/* =================================================================== 4. COMPOSANTS PARTAGÉS */
html body input[type="text"], html body input[type="search"], html body input[type="number"], html body select, html body textarea, html body .search-box input {
  border-radius: var(--r); border: 1px solid transparent !important; background: var(--cell) !important; color: var(--bright); font-family: var(--body); box-shadow: none !important;
}
html body input::placeholder { color: var(--muted-c); }
html body input:focus, html body select:focus, html body textarea:focus { outline: none; border-color: var(--acc) !important; }
/* puces de filtre = onglets DofusBook : brun, l'actif en vert */
html body .dofus-tag, html body .filter-tag, html body .btn-subfilter, html body .dofus-scope-btn, html body .relique-filter-btn {
  border-radius: var(--r) !important; border: 0 !important; background: var(--tab) !important; color: var(--bright) !important; box-shadow: none !important;
  font: 700 15px var(--cond) !important; font-stretch: 75% !important; transition: background .12s !important;
}
html body .dofus-tag:hover, html body .filter-tag:hover, html body .btn-subfilter:hover, html body .relique-filter-btn:hover { background: var(--tab) !important; }
html body .dofus-tag.active, html body .filter-tag.active, html body .btn-subfilter.active, html body .dofus-scope-btn.active, html body .relique-filter-btn.active { background: var(--acc) !important; color: var(--on-acc) !important; }
html body .btn-card, #app .app .btn { border-radius: var(--r) !important; border: 0 !important; box-shadow: none !important; font: 700 15px var(--cond) !important; font-stretch: 75% !important; transition: background .12s !important; }
html body .btn-card { background: var(--btn); color: var(--bright); }
html body .btn-card:hover { background: var(--acc); color: var(--on-acc); transform: none; }
#app .app .btn { background: var(--acc); color: var(--on-acc); }
#app .app .btn:hover { background: var(--acc-hi); transform: none; }
#app .app .btn.ghost { background: var(--btn); color: var(--bright); }
#app .app .btn.ghost:hover { background: var(--tab); }
#app .app .btn.danger { background: var(--red-c); color: #fff; }

/* =================================================================== 5. SUIVI */
html body .stats-overview { gap: 10px; margin-bottom: 12px; }
html body .stat-card { padding: 12px 14px; gap: 12px; border-radius: var(--r); background: var(--surf); border: 0; box-shadow: none; backdrop-filter: none; }
html body .stat-card::after, html body .stat-card::before { display: none; }
html body .stat-card:hover { transform: none; border: 0; box-shadow: none; }
html body .stat-icon { width: 42px; height: 42px; border-radius: var(--r); border: 0 !important; box-shadow: none !important; background: var(--cell) !important; }
html body .purple-glow { color: var(--acc-hi) !important; }
html body .green-glow { color: var(--blue-c) !important; }
html body .red-glow { color: var(--red-c) !important; }
html body .gold-glow { color: var(--gold-c) !important; }
html body .stat-info .stat-label { color: var(--muted-c); font: 700 13px var(--cond); font-stretch: 75%; letter-spacing: .04em; }
html body .stat-info h3 { font: 900 24px/1.1 var(--body); background: none; -webkit-text-fill-color: currentColor; color: var(--bright); }

html body .filter-bar, html body .dofus-stats-card { padding: 12px 14px; border-radius: var(--r) !important; background: var(--surf) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; }
html body .dofus-stats-card::before { display: none !important; }
html body .dofus-filters, html body .filter-options { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* cartes : panneau brun, icône sur sa case, nom blanc, liseré à la couleur de l'icône */
html body .items-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
html body .item-card { --dc: var(--acc); padding: 12px 14px; border-radius: var(--r); background: var(--surf); border: 0; box-shadow: none; overflow: hidden; transition: background .12s; }
html body .item-card::before { display: block; content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: auto; width: 3px; height: auto; background: var(--dc); opacity: .85; }
html body .item-card:hover { transform: none; background: #433c35; box-shadow: none; border: 0; }
html[data-theme="light"] body .item-card:hover { background: #fff; }
html body .item-header { align-items: center; gap: 12px; margin-bottom: 10px; }
html body .item-slot-frame { width: 64px; height: 64px; border-radius: var(--r); border: 0 !important; box-shadow: none !important; background: var(--cell) !important; }
html body .item-slot-img { padding: 6px; filter: none; }
html body .item-card:hover .item-slot-img { transform: none; }
html body .item-title-box h3 { font: 700 19px/1.2 var(--cond); font-stretch: 75%; color: var(--bright); margin-bottom: 4px; }
html body .badge-type { border-radius: 4px; border: 0; background: var(--cell); color: var(--muted-c); font: 400 12.5px var(--body); padding: 1px 7px; }
html body .crafted-badge { border-radius: 4px; background: var(--zia-dk); color: #fff; }
html body .progress-stats { font-size: 13.5px; color: var(--muted-c); }
html body .progress-percent { color: var(--bright); font-weight: 700; }
html body .progress-bar-container { height: 8px; padding: 0; border-radius: 4px; background: var(--cell); border: 0; }
html body .progress-bar { border-radius: 4px; box-shadow: none !important; }
html body .progress-bar::after { display: none; }
html body .fill-purple, html body .fill-success { background: linear-gradient(90deg, var(--zia-dk), var(--zia)) !important; }
html body .fill-gold { background: var(--gold-c) !important; }
html body .mini-res-tag { border-radius: 4px; border: 0; background: var(--cell); color: var(--text-c); font-weight: 400; }
html body .item-footer { margin-top: 10px; }
html body .item-card.crafted { background: var(--surf); }
html body .item-card.crafted::before { background: var(--zia); opacity: 1; width: 4px; }
html body .item-card.crafted .item-slot-frame { box-shadow: inset 0 0 0 2px var(--zia) !important; }

/* fenêtres, bulles, notifications */
html body .modal { background: rgba(0, 0, 0, .6) !important; backdrop-filter: none !important; }
html body .modal-content { border-radius: 8px !important; background: var(--surf) !important; border: 0 !important; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8) !important; animation: rzIn .2s var(--ease); }
html body .custom-tooltip { border-radius: var(--r) !important; border: 1px solid var(--line-2) !important; background: var(--frame) !important; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8) !important; }
html body .toast { border-radius: var(--r); border: 0; background: var(--zia-dk); color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); }
html body .toast-icon { color: #fff; }
html body .app-footer { border-top: 1px solid var(--line); background: none; }
html body .soutien-btn { border-radius: var(--r) !important; box-shadow: none !important; }

/* =================================================================== 6. BOOK */
#app .app .panel { border-radius: var(--r); background: var(--surf); border: 0; box-shadow: none; backdrop-filter: none; }
#app .app .panel::after { display: none; }
#app .app .field label { font: 700 14px var(--cond); font-stretch: 75%; letter-spacing: .02em; text-transform: none; color: var(--bright); }
#app .app input, #app .app select, #app .app textarea { border-radius: var(--r); border: 1px solid transparent; background: var(--cell); color: var(--bright); font-family: var(--body); box-shadow: none; }
#app .app input:focus, #app .app select:focus { outline: none; border-color: var(--acc); box-shadow: none; }
#app .app .tag { border-radius: 4px; border: 0; background: var(--cell); color: var(--muted-c); font: 400 12.5px var(--body); }
#app .app .icon-btn { border-radius: var(--r); border: 0; background: var(--btn); box-shadow: none; transition: background .12s; }
#app .app .icon-btn:hover { background: var(--tab); transform: none; }
#app .app .hover-tooltip, #app .app .item-tooltip { border-radius: var(--r); border: 1px solid var(--line-2); background: var(--frame); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); }
#app .app .muted { color: var(--muted-c); }
#app .app .app-footer { border-top: 1px solid var(--line); background: none; }

/* builder : cases brunes comme DofusBook */
#app .app .builder-bar { border-radius: var(--r); }
#app .app .bb-class-btn { border-radius: var(--r); border: 0; background: var(--btn); color: var(--bright); box-shadow: none; }
#app .app .bb-teaser { border: 0; border-radius: 4px; background: var(--cell); color: var(--gold-c); }
#app .app .eq-actions-bar { border-radius: var(--r); background: none; border: 0; box-shadow: none; flex-wrap: wrap; justify-content: center; }
#app .app .slot .slot-btn { border-radius: 4px; border: 1px solid transparent; box-shadow: none; background: var(--cell); transition: border-color .12s; }
#app .app .slot .slot-btn:hover { transform: none; border-color: var(--acc); background: var(--cell); }
#app .app .slot.has-rarity .slot-btn { border-color: var(--rar); box-shadow: none; }
#app .app .dofus-zone { border-top: 0; }
#app .app .dofus-extra-note { color: var(--muted-c); }
#app .app .gender-btn.active { background: var(--acc); color: var(--on-acc); }
/* boutons actifs encore violets dans les composants (Parcho, relique prestigieuse…) */
#app .app .rp-btn.active, #app .app .ps-foot-btn.active, #app .app .rp-btn.on, #app .app .ps-foot-btn.on, #app .app button.active:not(.rz-l) { background: var(--acc) !important; border-color: var(--acc) !important; color: var(--on-acc) !important; box-shadow: none !important; }
#app .app .ks-row:hover, #app .app .ps-table tr:hover, #app .app .ss-pct-row:hover { background: rgba(240, 228, 255, .04); }
/* tout visible d'un coup, sans défilement interne
   - écran moyen : personnage | une colonne avec toutes les stats
   - grand écran : caractéristiques (+ relique de guilde) | personnage | dégâts, résistances, reliques */
#app .app .relic-pair { grid-template-columns: minmax(0, 1fr) !important; }
@container (min-width: 1000px) {
  #app .app .builder-3col { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 10px; }
  #app .app .col-center { grid-column: 1; grid-row: 1 / span 2; order: 0; }
  #app .app .col-left, #app .app .col-right { grid-column: 2; }
}
@container (min-width: 1440px) {
  #app .app .builder-3col { grid-template-columns: 350px minmax(0, 1fr) 390px; }
  #app .app .col-left { grid-column: 1; grid-row: 1; }
  #app .app .col-center { grid-column: 2; grid-row: 1; }
  #app .app .col-right { grid-column: 3; grid-row: 1; }
}

/* encyclopédie : filtres à gauche, liste dense à droite */
#app .app .rz-enc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px; align-items: start; }
#app .app .rz-enc .filters { position: sticky; top: 16px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; padding: 14px; margin: 0; }
#app .app .rz-enc .filters .field { width: auto !important; flex: none !important; min-width: 0; }
#app .app .rz-enc .filters .btn { width: 100%; height: 36px; }
#app .app .rz-enc-res { min-width: 0; }
#app .app .result-count { margin: 4px 0 10px; font: 700 17px var(--cond); font-stretch: 75%; color: var(--bright); }
#app .app .enc-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
#app .app .enc-grid li { --dc: var(--acc); position: relative; gap: 12px; padding: 8px 10px 8px 12px; border-radius: var(--r); background: var(--surf); border: 0; box-shadow: none; cursor: pointer; overflow: hidden; transition: background .12s; animation: rzIn .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 10ms); }
#app .app .enc-grid li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc); opacity: .85; }
#app .app .enc-grid li:hover { transform: none; background: #433c35; border: 0; }
html[data-theme="light"] #app .app .enc-grid li:hover { background: #fff; }
#app .app .enc-grid li .icon { flex: none; display: grid; place-items: center; width: 52px !important; height: 52px !important; border-radius: 4px; background: var(--cell); }
#app .app .enc-grid li .icon img { width: 46px; height: 46px; }
#app .app .enc-name { font: 700 15px/1.25 var(--body); color: var(--bright); }
#app .app .enc-grid li .tag:first-child { font-variant-numeric: tabular-nums; color: var(--text-c); }
#app .app .enc-grid li[data-tier="4"] .tag:first-child { color: var(--violet-c); }
#app .app .enc-grid li[data-tier="5"] .tag:first-child { color: var(--gold-c); font-weight: 700; }
#app .app .pager { gap: 10px; }

/* =================================================================== 7. MOBILE */
@media (max-width: 900px) {
  #app .app .rz-enc { grid-template-columns: minmax(0, 1fr); }
  #app .app .rz-enc .filters { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .app .rz-enc .filters .field:has(input[type="search"]) { grid-column: 1 / -1; }
  #app .app .app-main { padding-top: 12px; }
  html body .stats-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body .stat-card { padding: 10px !important; gap: 8px !important; }
  html body .stat-icon { width: 34px !important; height: 34px !important; }
  html body .stat-info h3 { font-size: 1.2rem !important; }
  html body .items-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .rz-in, #app .app .enc-grid li { animation: none !important; } }

/* =================================================================== 8. FOND RETROZIA, EFFETS, CODES COULEUR */
/* fond du site RetroZia, assombri pour garder les panneaux lisibles ; calque fixe (pas de repeinte au défilement) */
html { background: #1b1418; }
html body { background: transparent !important; }
html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 9, 24, .62), rgba(16, 9, 24, .8)), url("fond-retrozia.webp") center / cover no-repeat; }
html[data-theme="light"] { background: #ebe5f1; }
html[data-theme="light"]::before { background: linear-gradient(180deg, rgba(240, 234, 248, .86), rgba(240, 234, 248, .93)), url("fond-retrozia.webp") center / cover no-repeat; }
/* panneaux : léger reflet en haut, ils laissent à peine deviner le fond */
html body .stat-card, html body .filter-bar, html body .dofus-stats-card, html body .item-card, #app .app .panel {
  background: linear-gradient(180deg, rgba(240, 228, 255, .035), transparent 70px), rgba(37, 27, 48, .93) !important;
  box-shadow: 0 1px 0 rgba(240, 228, 255, .05) inset, 0 10px 26px -18px rgba(0, 0, 0, .9) !important;
}
html[data-theme="light"] body .stat-card, html[data-theme="light"] body .filter-bar, html[data-theme="light"] body .dofus-stats-card, html[data-theme="light"] body .item-card, html[data-theme="light"] #app .app .panel {
  background: rgba(250, 247, 252, .95) !important; box-shadow: 0 8px 22px -16px rgba(45, 28, 64, .6) !important;
}
/* titres de panneau : petit repère violet RetroZia */
#app .app .panel h2, #app .app .ks-title, #app .app .ps-title, #app .app .rp-title, #app .app .gr-title, #app .app .or-title, #app .app .dp-head > :first-child, #app .app .rp-head > :first-child {
  position: relative; padding-left: 10px !important;
}
#app .app .panel h2::before, #app .app .ks-title::before, #app .app .ps-title::before, #app .app .rp-title::before, #app .app .gr-title::before, #app .app .or-title::before {
  content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px; border-radius: 2px; background: linear-gradient(var(--zia), var(--zia-dk));
}


/* ------------------------------------------------ codes couleur des statistiques (éléments du jeu) */
:root { --c-terre: #c9934a; --c-feu: #ff7a45; --c-eau: #57b4f2; --c-air: #6fd17a; --c-vita: #ff6b8a; --c-sage: #b48cff; --c-neutre: #b8b0a4; }
/* valeurs de Synthèse et Caractéristiques teintées par leur icône (posé par refonte.js en data-el) */
#app .app [data-el="terre"] { color: var(--c-terre) !important; } #app .app [data-el="feu"] { color: var(--c-feu) !important; }
#app .app [data-el="eau"] { color: var(--c-eau) !important; } #app .app [data-el="air"] { color: var(--c-air) !important; }
#app .app [data-el="vita"] { color: var(--c-vita) !important; } #app .app [data-el="sage"] { color: var(--c-sage) !important; }

/* barre d'actions du builder : boutons plus lisibles, l'actif en ambre */
#app .app .eq-actions-bar .icon-btn { background: linear-gradient(180deg, #46365a, #362a46); box-shadow: 0 1px 0 rgba(240, 228, 255, .08) inset, 0 2px 0 rgba(0, 0, 0, .35); }
#app .app .eq-actions-bar .icon-btn:hover { background: linear-gradient(180deg, #5a4672, #46365a); }

@media (prefers-reduced-motion: reduce) { #app .app .slot .slot-btn::before, #app .app .slot .slot-btn img, #app .app .slot::after { animation: none !important; } }

/* ===================================================== 9. moins de défilement
   - Book : la relique de guilde passe sous le personnage, ses 13 bonus en grille ;
   - Suivi, Reliques : les gros groupes (Stats fixes, Initiative…) prennent toute la largeur, en plusieurs colonnes. */
#app .app .col-center { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#app .app .guild-relic .gr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 4px 16px; }
#app .app .guild-relic .gr-list li { grid-template-columns: minmax(0, 1fr) 20px 42px 20px 30px; gap: 3px; padding: 3px 6px; border-radius: 4px; background: var(--cell); }
#app .app .guild-relic .gr-list li.filled { background: rgba(168, 85, 247, .14); }
#app .app .guild-relic .gr-list li.max { background: rgba(224, 164, 58, .14); }
#app .app .guild-relic .gr-step { width: 20px; height: 20px; }

html body .reliques-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important; grid-auto-flow: row dense; }
html body .relique-group:has(.relique-list > :nth-child(9)) { grid-column: 1 / -1; }
html body .relique-group:has(.relique-list > :nth-child(9)) .relique-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2px 10px; align-items: start; }

/* équipement plus compact quand la colonne centrale est large : les deux rangées de Dofus côte à côte,
   cases de Dofus et d'extras un peu plus petites, zone du personnage moins haute */
#app .app .col-center { container: rzcenter / inline-size; }
@container rzcenter (min-width: 780px) {
  #app .app .eq-center { min-height: 390px; padding: 6px 0; }
  #app .app .char-portrait img { max-height: 380px; transform: translateY(12px); }
  #app .app .dofus-row { gap: 8px; }
  #app .app .dofus-row .slot, #app .app .extras .slot { width: 60px; height: 60px; }
  /* les icônes sont dessinées en 64 px : on les ramène à la taille de la case */
  #app .app .dofus-row .slot .slot-btn img, #app .app .extras .slot .slot-btn img { width: 50px !important; height: 50px !important; object-fit: contain; }
  #app .app .dofus-row .slot .slot-btn > *, #app .app .extras .slot .slot-btn > * { max-width: 50px; max-height: 50px; }
  #app .app .extras { gap: 12px; margin-top: 10px; padding-top: 10px; }
}
/* Les deux rangées de Dofus côte à côte demandent 2 × (6 × 60 + 5 × 8) + 24 =
   824 px de cases, plus le rembourrage du panneau. À 780 px elles débordaient
   sur le panneau voisin (écran 1920 px à 100 %, remonté sur Discord : il
   fallait dézoomer à 90 %). En dessous du seuil, elles restent l'une sous
   l'autre. */
@container rzcenter (min-width: 900px) {
  #app .app .dofus-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 8px; padding-top: 12px; }
  #app .app .dofus-zone > .dofus-extra-note, #app .app .dofus-zone > .dofus-row:last-child { grid-column: 1 / -1; }
  #app .app .dofus-zone > .dofus-row:last-child { grid-template-columns: repeat(6, 60px); justify-content: center; }
}

/* ===================================================== 10. Bouclier Primordial (Suivi)
   La page garde ses identifiants et ses fonctions (renderer-primo.js) ; seule la présentation change :
   la forge en une chaîne T1 → T5 → fusion, les 4 éléments côte à côte, puis les jetons. */
.rz-pagehead[hidden] { display: none !important; }
html body .rz-primo { padding: 0; margin: 0; }
/* le Suivi force display:block en style inline : on espace les blocs par des marges */
html body .rz-primo > * + * { margin-top: 12px; }
html body .rz-primo.hidden { display: none !important; }
.rzp-panel, .rzp-el {
  border-radius: var(--r); padding: 16px 18px;
  background: linear-gradient(180deg, rgba(var(--tint), .035), transparent 70px), var(--surf);
  box-shadow: 0 1px 0 rgba(var(--tint), .05) inset, 0 10px 26px -18px rgba(0, 0, 0, .9);
}
.rzp-h { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 21px/1.2 var(--cond); font-stretch: 75%; color: var(--bright); }
.rzp-h > i { color: var(--acc); font-size: 17px; }

/* la forge */
.rzp-forge-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.rzp-shield { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(168, 85, 247, .55)); }
.rzp-forge-txt p { margin: 4px 0 0; max-width: 95ch; color: var(--muted-c); font-size: 14px; line-height: 1.5; }
.rzp-forge-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rzp-link, .rzp-ghost { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r); border: 0; font: 700 14px var(--cond); font-stretch: 75%; text-decoration: none; cursor: pointer; }
html body a.rzp-link { background: rgba(168, 85, 247, .16); color: var(--zia); }
html body a.rzp-link:hover { background: rgba(168, 85, 247, .28); }
.rzp-ghost { background: var(--btn); color: var(--text-c); }
.rzp-ghost:hover { background: var(--tab); color: var(--bright); }
.rzp-chain { list-style: none; display: flex; align-items: stretch; gap: 6px; margin: 16px 0 12px; padding: 0 0 2px; overflow-x: auto; }
.rzp-chain > li { flex: 1 1 0; min-width: 118px; display: grid; gap: 1px; align-content: start; padding: 10px 12px; border-radius: var(--r); background: var(--cell); border-top: 3px solid var(--tc, var(--zia-dk)); }
.rzp-chain > li:nth-child(1) { --tc: #8d7aa6; } .rzp-chain > li:nth-child(3) { --tc: #9a6fd0; } .rzp-chain > li:nth-child(5) { --tc: #a855f7; }
.rzp-chain > li:nth-child(7) { --tc: #d965f8; } .rzp-chain > li:nth-child(9) { --tc: #ec9b6a; }
.rzp-chain b { font: 700 20px/1.1 var(--cond); font-stretch: 75%; color: var(--bright); }
.rzp-chain span { color: var(--text-c); font-size: 13.5px; }
.rzp-chain em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--acc); }
.rzp-chain small { color: var(--muted-c); font-size: 12px; }
.rzp-chain > li.rzp-arrow { flex: none; min-width: 0; padding: 0 2px; background: none; border: 0; place-items: center; align-content: center; color: var(--muted-c); font-size: 12px; }
.rzp-chain > li.rzp-final { --tc: var(--acc); background: linear-gradient(160deg, rgba(224, 164, 58, .22), rgba(224, 164, 58, .06)), var(--cell); box-shadow: 0 0 22px -8px rgba(224, 164, 58, .6); }
.rzp-chain > li.rzp-final b { color: var(--acc-hi); }
.rzp-where { margin: 0; color: var(--muted-c); font-size: 13.5px; }
.rzp-where i { color: var(--zia); margin-right: 4px; }
.rzp-where .rzp-box { width: 24px; height: 24px; object-fit: contain; vertical-align: -7px; margin-right: 4px; }
.rzp-prest { height: 22px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--cell); color: var(--text-c); font: 700 11px var(--body); }
.rzp-where strong { color: var(--text-c); }

/* les 4 éléments */
.rzp-elems { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rzp-el { padding: 14px 14px 10px; border-top: 3px solid var(--elc); }
.rzp-el[data-el="air"] { --elc: var(--c-air); } .rzp-el[data-el="feu"] { --elc: var(--c-feu); }
.rzp-el[data-el="eau"] { --elc: var(--c-eau); } .rzp-el[data-el="terre"] { --elc: var(--c-terre); }
.rzp-el-head { display: flex; align-items: center; gap: 10px; }
.rzp-el-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: color-mix(in srgb, var(--elc) 18%, transparent); color: var(--elc); font-size: 16px; }
.rzp-el-name h3 { margin: 0; font: 700 19px/1.1 var(--cond); font-stretch: 75%; color: var(--bright); }
.rzp-el-name span { color: var(--muted-c); font-size: 12.5px; }
.rzp-el-pct { margin-left: auto; font: 900 22px var(--body); color: var(--elc); font-variant-numeric: tabular-nums; }
.rzp-bar { height: 6px; margin: 10px 0 8px; border-radius: 3px; background: var(--cell); overflow: hidden; }
.rzp-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--elc) 55%, transparent), var(--elc)); box-shadow: 0 0 10px var(--elc); transition: width .4s var(--ease); }

/* tableaux (éléments et jetons) : lignes générées par renderer-primo.js */
.rzp-table-wrap { overflow-x: auto; }
.rzp-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; color: var(--text-c); }
.rzp-table th { padding: 2px 4px; text-align: center; font: 700 12px var(--cond); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-c); white-space: nowrap; }
.rzp-table td { padding: 5px 6px; text-align: center; background: var(--cell); white-space: nowrap; }
.rzp-table td:first-child { border-radius: var(--r) 0 0 var(--r); }
.rzp-table td:last-child { border-radius: 0 var(--r) var(--r) 0; }
.rzp-table tr:hover td { background: color-mix(in srgb, var(--cell) 80%, var(--zia-dk)); }
html body .rz-primo .tier-pill { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 4px; border: 0; background: var(--btn); font: 700 14px var(--cond); font-stretch: 75%; color: var(--bright) !important; }
html body .rz-primo .primo-qty-ctrl { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
html body .rz-primo .primo-qty-ctrl button { width: 24px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: var(--btn); color: var(--text-c); font-weight: 700; cursor: pointer; }
html body .rz-primo .primo-qty-ctrl button:hover { background: var(--acc); color: var(--on-acc); }
html body .rz-primo .primo-qty-ctrl input, html body .rz-primo .rzp-table th input { width: 44px; height: 26px; padding: 0 2px; border-radius: 4px; border: 1px solid var(--line-2) !important; background: var(--surf) !important; color: var(--bright); font: 700 13.5px var(--body); text-align: center; -moz-appearance: textfield; }
html body .rz-primo .primo-qty-ctrl input:focus, .rzp-table th input:focus { outline: 0; border-color: var(--acc); }
html body .rz-primo input::-webkit-outer-spin-button, .rz-primo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rzp-jt .primo-qty-ctrl input { width: 70px !important; }
html body .rz-primo .casse-restant-val { font: 900 15px var(--body); color: var(--red-c) !important; background: none !important; }
html body .rz-primo .casse-restant-val.zero { color: var(--muted-c) !important; font-weight: 700; }
html body .rz-primo .casse-restant-val.zero::after { content: " ✓"; color: var(--zia); }
html body .rz-primo .jeton-name-pill { color: var(--text-c) !important; background: none; border: 0; padding: 0; }
html body .rz-primo .stat-highlight { color: var(--bright); font-weight: 700; }
html body .rz-primo .stat-missing { background: none !important; color: var(--red-c) !important; font-weight: 900; }
html body .rz-primo .stat-missing.zero { color: var(--muted-c) !important; font-weight: 700; }
html body .rz-primo .stat-dj { font-weight: 900; font-size: 15px; background: none !important; }
html body .rz-primo .sub-run { color: var(--muted-c); font-size: 11.5px; }
html body .rz-primo .rzp-table td.col-active { background: color-mix(in srgb, var(--cell) 82%, var(--acc)); }

/* jetons */
.rzp-j-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rzp-j-head p { margin: 4px 0 0; color: var(--muted-c); font-size: 13.5px; }
.rzp-beta { padding: 2px 8px; border-radius: 999px; background: rgba(224, 164, 58, .16); color: var(--acc); font: 700 11.5px var(--cond); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; }
html body .rzp-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r); background: var(--cell); }
html body .rzp-seg .btn-subfilter { height: 30px; padding: 0 12px; }
.rzp-table th input { width: 40px; height: 22px; margin-left: 4px; font-size: 12px; }

/* icônes du jeu : boucliers élémentaires, jetons de palier, pelle d'Enutrof */
.rzp-el-ic { background: none; }
.rzp-el-ic img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--elc) 55%, transparent)); }
.rzp-chain > li { position: relative; }
.rzp-tok { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.rzp-final .rzp-tok { width: 40px; height: 40px; top: 6px; filter: drop-shadow(0 0 10px rgba(224, 164, 58, .7)); }
.rzp-h > img { width: 26px; height: 26px; object-fit: contain; }
html body .rzp-seg .btn-subfilter img { width: 18px; height: 18px; object-fit: contain; }
html body .rz-primo .jeton-name-pill { display: inline-flex; align-items: center; gap: 8px; }
html body .rz-primo .jeton-name-pill img { width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 760px) {
  .rzp-forge-top { grid-template-columns: 48px minmax(0, 1fr); }
  .rzp-shield { width: 48px; height: 48px; }
  .rzp-forge-act { grid-column: 1 / -1; justify-content: flex-start; }
  .rzp-elems { grid-template-columns: minmax(0, 1fr); }
  .rzp-panel, .rzp-el { padding: 12px; }
}

/* ===================================================== 11. Intro animée (refonte/intro.js)
   Anneau de lumière, Dofus en orbite avec la lueur de leur rareté, spirale, éclat, logo et pastille « BOOK ». */
html.intro-on { overflow: hidden; }
.rz-intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: #07050b; }
.rz-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(126, 34, 206, .3), transparent 60%), linear-gradient(rgba(7, 5, 11, .82), rgba(7, 5, 11, .9)), url("fond-retrozia.webp") center / cover no-repeat; animation: inZoom 5s ease-out both; }
@keyframes inZoom { from { transform: scale(1.08); } to { transform: none; } }
.rz-intro canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.rz-intro .in-stage { position: relative; z-index: 2; display: grid; justify-items: center; padding: 0 16px; text-align: center; pointer-events: none; }

.rz-intro .in-egg { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); opacity: 0; will-change: transform, opacity; --go: .3; }
.rz-intro .in-egg.r-r { --go: .5; } .rz-intro .in-egg.r-e { --go: .7; } .rz-intro .in-egg.r-l { --go: .9; } .rz-intro .in-egg.r-m { --go: 1; }
.rz-intro .in-egg img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 calc(var(--sz) * .06 * var(--go)) var(--rc)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.rz-intro .in-egg .g { position: absolute; inset: -45%; border-radius: 50%; opacity: var(--go);
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 75%, transparent) 0%, color-mix(in srgb, var(--rc) 25%, transparent) 36%, transparent 64%); }
.rz-intro .in-egg.r-e .g, .rz-intro .in-egg.r-l .g { animation: inGlow 1.4s ease-in-out infinite alternate; }
.rz-intro .in-egg.r-m .g { inset: -70%; animation: inGlow 1s ease-in-out infinite alternate, inHue 3s linear infinite; }
@keyframes inGlow { from { transform: scale(.8); } to { transform: scale(1.12); } }
@keyframes inHue { to { filter: hue-rotate(360deg); } }
.rz-intro .in-egg .sh { position: absolute; inset: 0; display: none; pointer-events: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) no-repeat; background-size: 280% 100%; mix-blend-mode: overlay; animation: inSheen 1.8s ease-in-out infinite; }
.rz-intro .in-egg.r-l .sh, .rz-intro .in-egg.r-m .sh { display: block; }
@keyframes inSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

.rz-intro .in-flash { position: absolute; z-index: 1; width: min(560px, 90vw); aspect-ratio: 1; margin: calc(min(560px, 90vw) / -2) 0 0 calc(min(560px, 90vw) / -2); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(240, 171, 252, .75) 14%, rgba(168, 85, 247, .35) 34%, transparent 66%); }
.rz-intro.burst .in-flash { animation: inFlash .8s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes inFlash { 0% { opacity: 0; transform: scale(.15); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.rz-intro .in-logo { position: relative; width: min(640px, 84vw); opacity: 0; will-change: transform; }
.rz-intro .in-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.rz-intro.burst .in-logo { animation: inReveal .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes inReveal {
  0% { opacity: 0; transform: scale(.55); filter: brightness(4) blur(8px); }
  35% { opacity: 1; filter: brightness(1.7) blur(0); }
  62% { transform: scale(1.04); }
  100% { opacity: 1; transform: none; filter: none; }
}
.rz-intro .in-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url("logo-intro.webp") center / contain no-repeat; mask: url("logo-intro.webp") center / contain no-repeat;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 130% 0; mix-blend-mode: overlay; }
.rz-intro.burst .in-shine { animation: inSheen 1.1s ease-in-out .55s forwards; }
.rz-intro .in-logo.shown { animation: none !important; opacity: 1; transform: none; transition: transform .7s cubic-bezier(.65, 0, .25, 1), opacity .3s ease; }

/* la pastille « BOOK » se pose comme un tampon, puis le slogan monte */
.rz-intro .in-tag { display: grid; justify-items: center; gap: 10px; }
.rz-intro .in-tag b { padding: 4px 16px 4px calc(16px + .42em); border-radius: 6px; background: linear-gradient(135deg, #7e22ce, #a855f7 55%, #d965f8); box-shadow: 0 0 28px rgba(217, 101, 248, .55), 0 0 0 1px rgba(255, 255, 255, .25) inset;
  font: 700 clamp(20px, 3vw, 30px) / 1.1 var(--cond); font-stretch: 75%; letter-spacing: .42em; color: #fff; opacity: 0; }
.rz-intro .in-tag span { font: 400 clamp(13px, 1.6vw, 16px) var(--body); letter-spacing: .02em; color: #c9bddb; opacity: 0; }
.rz-intro.burst .in-tag b { animation: inStamp .6s cubic-bezier(.3, 1.6, .5, 1) .5s forwards; }
.rz-intro.burst .in-tag span { animation: inRise .7s cubic-bezier(.2, .8, .2, 1) .75s forwards; }
@keyframes inStamp { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); filter: blur(4px); } 60% { opacity: 1; filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes inRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rz-intro .in-skip { position: absolute; z-index: 4; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); padding: 7px 14px; border-radius: 99px;
  border: 1px solid rgba(240, 228, 255, .16); background: rgba(0, 0, 0, .4); color: #9d8cb2; font: 600 12.5px var(--body); cursor: pointer; opacity: 0; animation: inFade .4s ease .6s forwards; }
.rz-intro .in-skip:hover { color: #fff; border-color: #a855f7; }
@keyframes inFade { to { opacity: 1; } }

/* sortie : les Dofus s'envolent, le fond se retire, le logo se pose sur celui du site */
.rz-intro.out { background: transparent; transition: background .5s ease .3s; }
.rz-intro.out::before { opacity: 0; transition: opacity .5s ease .3s; }
.rz-intro.out .in-tag, .rz-intro.out .in-skip { opacity: 0; transition: opacity .25s ease; }
.rz-intro.out canvas { opacity: 0; transition: opacity .5s ease .1s; }
.rz-intro.land .in-logo { opacity: 0; }
.rz-intro.out-fast { opacity: 0; transition: opacity .35s ease; }
.rz-brand img, .rz-mlogo img { transition: opacity .35s ease; }
html.intro-on:not(.intro-land) .rz-brand img, html.intro-on:not(.intro-land) .rz-mlogo img { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rz-intro { display: none; } }

/* Tableaux des éléments resserrés (29/10/2026) : la colonne Besoin passe sous
   « À trouver » et les compteurs rapetissent, pour que tout tienne dans la
   carte sans défilement horizontal. */
.rzp-et { table-layout: fixed; }
.rzp-et th:first-child, .rzp-et td:first-child { width: 44px; }
.rzp-et th:last-child, .rzp-et td:last-child { width: 70px; }
.rzp-et th:last-child { white-space: normal; line-height: 1.05; }
.rzp-et td { padding: 5px 2px; }
html body .rz-primo .rzp-et .primo-qty-ctrl { gap: 2px; }
html body .rz-primo .rzp-et .primo-qty-ctrl button { width: 22px; height: 26px; }
html body .rz-primo .rzp-et .primo-qty-ctrl input { width: 34px; padding: 0; }
.rzp-et .rzp-reste { line-height: 1.05; }
.rzp-et .rzp-reste small { display: block; font: 600 10.5px var(--body); color: var(--muted-c); }
.rz-primo .rzp-table-wrap:has(.rzp-et) { overflow-x: visible; }

/* Réglage des jetons par donjon, à côté des modes de farm. */
.rzp-jpd { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font: 700 13px var(--body); color: var(--muted-c); white-space: nowrap; }
html body .rz-primo .rzp-jpd input { width: 52px; height: 32px; border-radius: 999px; border: 1px solid var(--line-2) !important; background: var(--cell) !important; color: var(--bright); font: 800 14px var(--body); text-align: center; -moz-appearance: textfield; }
.rzp-j-head { flex-wrap: wrap; row-gap: 10px; }

/* Écrans étroits : la chaîne de forge passe sur plusieurs lignes et le
   tableau des jetons devient une carte par palier, sans défilement. */
@media (max-width: 1180px) {
  .rzp-chain { flex-wrap: wrap; overflow: visible; }
  .rzp-chain > li { flex: 1 1 150px; }
  .rzp-chain > li.rzp-arrow { display: none; }
  .rzp-jt thead { display: none; }
  .rzp-jt, .rzp-jt tbody { display: block; }
  .rzp-jt tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--cell); }
  html body .rz-primo .rzp-jt td { display: block; padding: 0; background: none !important; border-radius: 0; text-align: left; white-space: normal; }
  .rzp-jt td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 10.5px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-c); }
  .rzp-jt td[data-label="Palier"] { display: none !important; }
  .rzp-jt td[data-label="Jeton"] { grid-column: 1 / -1; }
  .rzp-jt td[data-label="Jeton"]::before { display: none; }
  .rzp-jt td.col-active { border-radius: 8px !important; padding: 4px 8px !important; }
}