/* =============================================================================
   ESSAI DE DA (maquette d'Azouille, 29/10/2026) : branche locale essai-da-azouille
   -----------------------------------------------------------------------------
   Mêmes couleurs pastel RetroZia, mêmes fonctionnalités. Ce qui change :
   une police plus ronde et lisible, des arrondis et des ombres douces, un
   menu plus propre, le personnage mis en scène, des cases d'équipement en
   cartes, des boutons homogènes et quelques transitions discrètes.
   Chargée en dernier (Book : src/main.js, Suivi : index.html) : elle ne fait
   que surcharger refonte.css, on la retire d'une ligne si on n'en veut pas.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Inter:wght@500;600;700;800&display=swap");

:root, html[data-theme="dark"], html[data-theme="light"] {
  --body: "Nunito", "Lato", Arial, system-ui, sans-serif;
  --cond: "Nunito", "Open Sans", system-ui, sans-serif;
  --r: 12px;
  --da-r-lg: 18px;
  --da-violet: #8b3fe0;
  --da-violet-hi: #a855f7;
  --da-ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="dark"], :root {
  --da-shadow: 0 10px 28px -16px rgba(0, 0, 0, .75);
  --da-shadow-hover: 0 14px 30px -14px rgba(0, 0, 0, .8);
  --da-card: #2b2037;
  --da-stage: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(168, 85, 247, .26), transparent 70%);
}
html[data-theme="light"] {
  --da-shadow: 0 10px 26px -16px rgba(83, 46, 140, .38);
  --da-shadow-hover: 0 16px 30px -14px rgba(83, 46, 140, .45);
  --da-card: #ffffff;
  --surf: #ffffff;
  --cell: #f3eefa;
  --btn: #ece4f7;
  --da-stage: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(196, 160, 245, .55), rgba(243, 236, 252, .2) 70%);
}

/* ------------------------------------------------------------------ texte */
html body, #app .app { font-family: var(--body); letter-spacing: 0; }
h1, h2, h3, #app .app .page-title, .rz-pagehead h1 { font-stretch: 100% !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
#app .app .panel h2, #app .app .ks-title, #app .app .ps-title, #app .app .rp-title, #app .app .gr-title, #app .app .or-title {
  font-family: var(--body) !important; font-stretch: 100% !important; font-size: 16px !important; font-weight: 800 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

/* ------------------------------------------------------------------ panneaux */
#app .app .panel, html body .stat-card, html body .filter-bar, html body .dofus-stats-card, html body .item-card {
  border-radius: var(--da-r-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--da-shadow) !important;
  transition: box-shadow .25s var(--da-ease), transform .25s var(--da-ease);
}
html[data-theme="light"] #app .app .panel, html[data-theme="light"] body .item-card, html[data-theme="light"] body .stat-card,
html[data-theme="light"] body .filter-bar, html[data-theme="light"] body .dofus-stats-card { background: var(--da-card) !important; }
html body .item-card:hover { transform: translateY(-2px); box-shadow: var(--da-shadow-hover) !important; }

/* ------------------------------------------------------------------ menu */
.rz-nav { padding: 0 10px; }
.rz-h { margin: 18px 10px 6px; font-family: var(--body); font-stretch: 100%; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; }
.rz-l, .rz-nav .tab-btn.rz-l {
  margin: 1px 0 !important; border-radius: 10px !important; font-family: var(--body) !important; font-weight: 700 !important;
  transition: background .18s var(--da-ease), color .18s, transform .18s var(--da-ease) !important;
}
.rz-l:hover { transform: translateX(2px); }
.rz-l.active, .rz-l.router-link-active, .rz-nav .tab-btn.rz-l.active {
  background: linear-gradient(90deg, var(--da-violet), var(--da-violet-hi)) !important;
  box-shadow: 0 8px 18px -10px rgba(168, 85, 247, .9);
}
.rz-l.active::before, .rz-l.router-link-active::before { display: none !important; }
.rz-l.active .rz-ic, .rz-l.router-link-active .rz-ic { color: #fff; }
.rz-side .topbar-btn, .rz-side .theme-toggle, .rz-side-foot .theme-toggle, .rz-side .auth-btn-login, .rz-side-foot .retrozia-btn, .rz-news-btn {
  border-radius: 10px !important; font-family: var(--body) !important; font-stretch: 100% !important;
}

/* La bascule de thème porte son libellé : seule, la petite lune se lisait mal. */
.rz-side .theme-toggle, .rz-side-foot .theme-toggle {
  flex: 1 1 100% !important; width: auto !important; justify-content: flex-start !important; gap: 8px !important; padding: 0 12px !important; font-size: 13.5px !important;
}

/* ------------------------------------------------------------------ boutons */
#app .app button, html body .btn-card, html body .topbar-btn { font-family: var(--body); }
#app .app .btn, html body .btn-card { border-radius: 999px !important; font-family: var(--body) !important; font-stretch: 100% !important; font-weight: 800 !important; }
#app .app .btn, html body .btn-card, #app .app .icon-btn {
  transition: background .18s, color .18s, transform .18s var(--da-ease), box-shadow .18s !important;
}
#app .app .btn:hover, html body .btn-card:hover { transform: translateY(-1px) !important; }

/* En-tête du builder : pilules claires, « Se connecter » plein. */
#app .app .builder-bar { border-radius: var(--da-r-lg) !important; box-shadow: var(--da-shadow) !important; border: 1px solid var(--line); }
html[data-theme="light"] #app .app .builder-bar { background: #fff !important; }
#app .app .bb-class-btn, #app .app .img-btn, #app .app .publish-btn, #app .app .auth-btn {
  border-radius: 999px !important; border: 1px solid var(--line-2) !important; font-family: var(--body) !important;
  font-weight: 800 !important; font-stretch: 100% !important; transition: transform .18s var(--da-ease), background .18s, box-shadow .18s !important;
}
#app .app .bb-class-btn:hover, #app .app .img-btn:hover, #app .app .publish-btn:hover, #app .app .auth-btn:hover { transform: translateY(-1px); box-shadow: var(--da-shadow); }
#app .app .auth-btn:not(.logged) {
  background: linear-gradient(90deg, var(--da-violet), var(--da-violet-hi)) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(168, 85, 247, .9);
}
#app .app .bb-teaser { border-radius: 999px !important; }

/* Barre d'outils : carrés arrondis, violets, l'actif en clair. */
#app .app .eq-actions-bar { gap: 8px !important; }
#app .app .eq-actions-bar .icon-btn {
  width: 42px; height: 42px; border-radius: 12px !important;
  background: linear-gradient(180deg, #4a3566, #3a2852) !important; color: #fff !important;
  box-shadow: 0 6px 14px -8px rgba(58, 40, 82, .9) !important;
}
#app .app .eq-actions-bar .icon-btn:hover { transform: translateY(-2px) !important; background: linear-gradient(180deg, #5a4078, #46305f) !important; }
#app .app .eq-actions-bar .icon-btn.active {
  background: #fff !important; box-shadow: 0 0 0 2px var(--da-violet-hi), 0 8px 18px -8px rgba(168, 85, 247, .8) !important;
}
#app .app .eq-actions-bar .potions { gap: 8px !important; }

/* ------------------------------------------------------------------ personnage */
#app .app .eq-center {
  border-radius: var(--da-r-lg); overflow: hidden; isolation: isolate;
  background: var(--da-stage);
}
#app .app .eq-center::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22;
  background: url("fond-retrozia.webp") center 40% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 75%);
}
html[data-theme="light"] #app .app .eq-center::before { opacity: .35; }
/* Pas de socle ni de rond sous les pieds (demande du 29/10/2026) : le
   personnage tient seul, détouré. Son ombre au sol est retirée par le filtre
   rz-net d'EquipmentLayout. */
#app .app .char-display { position: relative; }
/* Quelques feuilles qui dérivent, comme sur la maquette. */
#app .app .eq-center::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6C5 0 14 0 19 6 14 12 5 12 1 6z' fill='%2393c47d'/%3E%3C/svg%3E") 14% 22% / 16px 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6C5 0 14 0 19 6 14 12 5 12 1 6z' fill='%23a3cf8a'/%3E%3C/svg%3E") 86% 34% / 13px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6C5 0 14 0 19 6 14 12 5 12 1 6z' fill='%2382b86c'/%3E%3C/svg%3E") 78% 70% / 15px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6C5 0 14 0 19 6 14 12 5 12 1 6z' fill='%23b2d99c'/%3E%3C/svg%3E") 22% 64% / 11px 7px no-repeat;
  opacity: .8; animation: daFeuilles 9s ease-in-out infinite alternate;
}
@keyframes daFeuilles { to { transform: translate(6px, 10px) rotate(2deg); opacity: .55; } }
#app .app .char-portrait img { filter: url(#rz-net); transition: transform .35s var(--da-ease); }
#app .app .char-portrait:hover { transform: none; }
#app .app .char-portrait:hover img { transform: translateY(21px) scale(1.07); }
#app .app .rot-btn {
  width: 40px; height: 40px; background: var(--da-card) !important; color: var(--text-c) !important; border: 1px solid var(--line-2) !important;
  box-shadow: var(--da-shadow);
}
#app .app .rot-btn:hover { color: var(--da-violet-hi) !important; transform: rotate(-12deg); }
#app .app .gender-toggle { padding: 3px; border-radius: 999px; background: var(--da-card); box-shadow: var(--da-shadow); border: 1px solid var(--line); }
#app .app .gender-btn { border-radius: 999px !important; border: 0 !important; font-weight: 800; }
#app .app .gender-btn.active { background: linear-gradient(90deg, var(--da-violet), var(--da-violet-hi)) !important; color: #fff !important; }
#app .app .char-name { font-family: var(--body); font-weight: 900; font-size: 17px; }
#app .app .char-name em { font-weight: 700; color: var(--muted-c); }

/* ------------------------------------------------------------------ cases d'équipement */
#app .app .eq-col { gap: 10px !important; }
#app .app .slot .slot-btn {
  border-radius: 14px !important; border: 1px solid var(--line) !important;
  background: var(--da-card) !important; box-shadow: var(--da-shadow) !important;
  transition: transform .2s var(--da-ease), box-shadow .2s, border-color .2s !important;
}
#app .app .slot:not(.has-rarity) .slot-btn { background: linear-gradient(180deg, var(--da-card), var(--cell)) !important; }
#app .app .slot .slot-btn:hover { transform: translateY(-2px) !important; border-color: var(--da-violet-hi) !important; box-shadow: var(--da-shadow-hover) !important; }
#app .app .slot .slot-btn img { transition: transform .2s var(--da-ease); }
#app .app .slot .slot-btn:hover img { transform: scale(1.06); }

/* ------------------------------------------------------------------ caractéristiques */
#app .app .ps-row input, #app .app .ps-table input {
  border-radius: 999px !important; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line) !important; background: var(--cell) !important;
}
#app .app .ps-row input:focus { border-color: var(--da-violet-hi) !important; box-shadow: 0 0 0 3px rgba(168, 85, 247, .18) !important; }
#app .app .ps-row .col-total { font-weight: 800; }
#app .app .ps-mini { border-radius: 50% !important; transition: transform .25s var(--da-ease); }
#app .app .ps-mini:hover { transform: rotate(-90deg); }
#app .app .ps-foot-btn, #app .app .rp-btn { border-radius: 10px !important; font-weight: 800 !important; }
#app .app .ps-foot-btn.active, #app .app .ps-foot-btn.on, #app .app .rp-btn.active, #app .app .rp-btn.on {
  background: linear-gradient(90deg, var(--da-violet), var(--da-violet-hi)) !important; border-color: transparent !important; color: #fff !important;
}
#app .app .ks-row:hover, #app .app .ps-table .ps-row:not(.hdr):hover { background: rgba(168, 85, 247, .06); border-radius: 8px; }

/* Synthèse (KeyStatsPanel) : les tuiles prennent le fond clair des cartes. */
html[data-theme="light"] #app .app .ks-hero-cell, html[data-theme="light"] #app .app .ks-tile { background: #f6f1fc; }
#app .app .ks-tile:hover { box-shadow: var(--da-shadow); }

/* ------------------------------------------------------------------ champs */
#app .app input, #app .app select, #app .app textarea, html body input[type="text"], html body input[type="search"], html body input[type="number"], html body select {
  border-radius: 10px !important;
}

@media (prefers-reduced-motion: reduce) {
  #app .app .eq-center::after { animation: none !important; }
  .rz-l:hover, #app .app .slot .slot-btn:hover, html body .item-card:hover { transform: none !important; }
}

/* Boutons actifs : le violet de la maquette remplace l'ambre (même sélecteur
   que refonte.css, placé après lui). Les potions gardent leur style clair. */
#app .app button.active:not(.rz-l), #app .app .rp-btn.on, #app .app .ps-foot-btn.on {
  background: linear-gradient(90deg, var(--da-violet), var(--da-violet-hi)) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 6px 14px -8px rgba(168, 85, 247, .9) !important;
}

/* Suivi : mêmes pastilles et même violet que le Book. */
html body .dofus-tag, html body .filter-tag, html body .btn-subfilter, html body .dofus-scope-btn, html body .relique-filter-btn {
  border-radius: 999px !important; font-family: var(--body) !important; font-stretch: 100% !important; font-weight: 800 !important;
  transition: background .18s, color .18s, transform .18s var(--da-ease) !important;
}
html body .dofus-tag:hover, html body .filter-tag:hover, html body .btn-subfilter:hover, html body .relique-filter-btn:hover { transform: translateY(-1px); }
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: linear-gradient(90deg, var(--da-violet), var(--da-violet-hi)) !important; color: #fff !important;
  box-shadow: 0 6px 14px -8px rgba(168, 85, 247, .9) !important;
}
html body .btn-card { border-radius: 999px !important; }

/* ------------------------------------------------------------------ lisibilité en thème clair
   Remarque d'Azouille (29/10/2026) : en clair, les lettres fines de Nunito
   ressortent moins en sombre sur blanc qu'en blanc sur sombre. On épaissit
   d'un cran les chiffres et libellés des colonnes de stats, et on fonce le
   texte et le gris secondaire. */
html[data-theme="light"] { --text-c: #2a2034; --muted-c: #5e4f70; }
html[data-theme="light"] #app .app .col-left, html[data-theme="light"] #app .app .col-right { font-weight: 600; }
html[data-theme="light"] #app .app .col-left strong, html[data-theme="light"] #app .app .col-right strong,
html[data-theme="light"] #app .app .col-left b, html[data-theme="light"] #app .app .col-right b { font-weight: 800; }
html[data-theme="light"] #app .app .col-left .muted, html[data-theme="light"] #app .app .col-right .muted { color: var(--muted-c) !important; }

/* ------------------------------------------------------------------ en-tête du Book
   Audit du 29/10/2026 : sélecteur de classe, Image, Publier et Se connecter
   n'avaient pas la même hauteur. Une seule taille, un seul arrondi. */
#app .app .builder-bar .bb-class-btn, #app .app .builder-bar .img-btn,
#app .app .builder-bar .publish-btn, #app .app .builder-bar .auth-btn {
  height: 40px !important; min-height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  border-radius: 999px !important; font-size: 13.5px !important; font-weight: 800 !important; box-sizing: border-box;
}
#app .app .builder-bar .bb-class-btn { padding-left: 6px !important; }
#app .app .builder-bar .bb-class-ico { width: 28px !important; height: 28px !important; }
#app .app .builder-bar .bb-right { display: flex; align-items: center; gap: 8px !important; }

/* ------------------------------------------------------------------ petits chiffres
   Audit du 29/10/2026 et remarque d'Azouille : en petit, les chiffres ronds de
   Nunito se lisent mal. Les valeurs des colonnes de stats passent en Inter,
   chiffres à chasse fixe pour qu'ils s'alignent en colonne. Les gros chiffres
   de la Synthèse gardent Nunito. */
:root { --da-num: "Inter", "Nunito", system-ui, sans-serif; }
#app .app :is(.col-left, .col-right) :is(strong, b, td, input, .col-total, .col-base, .col-item, .col-parcho, .col-cost, .pct, .fix, .num):not(:is(.ks-hero, .ks-tiles) *),
#app .app .ks-mini strong {
  font-family: var(--da-num) !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
#app .app :is(.col-left, .col-right) :is(strong, b, td.num):not(:is(.ks-hero, .ks-tiles) *) { font-weight: 700 !important; }

/* ------------------------------------------------------------------ autres pages du Book
   Audit du 29/10/2026 : Sorts, Comparer et Communauté n'avaient reçu que la
   base de la refonte. Même en-tête que l'Encyclopédie, mêmes panneaux, même
   scène violette que l'Équipement. */
#app .app .rz-pagehead { margin: 4px 0 16px !important; }
#app .app .rz-pagehead .page-title { margin: 0 !important; font-size: 30px !important; }

/* Comparer : la page occupe toute la largeur, chaque groupe devient un panneau. */
#app .app .cmp { max-width: none !important; padding: 0 0 40px !important; }
#app .app .cmp .pickers {
  padding: 14px 16px; border-radius: var(--da-r-lg); background: var(--da-card);
  box-shadow: var(--da-shadow); border: 1px solid var(--line);
}
#app .app .cmp .picker select {
  height: 40px; border-radius: 999px !important; padding: 0 14px !important;
  background: var(--cell) !important; border: 1px solid var(--line) !important; font-weight: 700;
}
#app .app .cmp .picker .badge { width: 28px; height: 28px; border-radius: 50% !important; display: inline-grid; place-items: center; font-weight: 900; }
#app .app .cmp .tables { column-gap: 14px !important; }
#app .app .cmp .grp {
  padding: 12px 14px 8px; border-radius: var(--da-r-lg); background: var(--da-card);
  box-shadow: var(--da-shadow); border: 1px solid var(--line); break-inside: avoid; margin-bottom: 14px;
}
#app .app .cmp .grp-title { font: 800 15px var(--body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--bright) !important; margin: 0 0 6px !important; }
#app .app .cmp-table td { border-top-color: var(--line) !important; padding: 5px 6px !important; }
#app .app .cmp-table td.num { font-family: var(--da-num); font-variant-numeric: tabular-nums; font-weight: 700; }
#app .app .cmp-table tbody tr:hover td { background: var(--cell); }
#app .app .cmp-table td.d.up { color: #2f9e5a !important; font-weight: 800; }
#app .app .cmp-table td.d.down { color: #d6454f !important; font-weight: 800; }

/* Communauté : l'aperçu reprend la scène de l'Équipement, cases en cartes. */
#app .app .cm-preview { background: var(--da-stage), var(--cell) !important; border-radius: 14px !important; }
#app .app .cm-slot {
  border-radius: 9px !important; background: var(--da-card) !important; border: 1px solid var(--line) !important;
  box-shadow: 0 3px 8px -5px rgba(60, 20, 110, .45);
}
#app .app .cm-card, #app .app .cm-grid > * { transition: transform .2s var(--da-ease), box-shadow .2s !important; }
#app .app .cm-card:hover { transform: translateY(-3px); box-shadow: var(--da-shadow-hover) !important; }

/* Sorts : le panneau de recherche et les cartes de sorts suivent les mêmes arrondis. */
#app .app .filters:not(.rz-enc *) :is(select, input:not([type=checkbox])) { border-radius: 999px !important; height: 40px; padding: 0 14px !important; }