@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cormorant+SC:wght@600;700&family=Marcellus&display=swap');

/* ===== Cartes d'objets de loot, partagées entre le générateur et le marché (template : item-template.js) ===== */
.wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin: 15px 0; }

/* carte commune : tout passe par les variables du thème ; sans thème, parchemin impérial */
.wh-item {
    --paper: #f4e9d2; --paper-2: #e8d7b4; --ink: #2b1d14; --ink-soft: #5a4636; --rule: #8b6b4a;
    --accent: #8e1b1b; --good: #2f6b4a; --bad: #8e1b1b; --magic: #4b2e6f;
    --title-font: 'Cinzel', serif; --text-font: 'EB Garamond', Georgia, serif;
    --title-case: none; --orn: '❦'; --sep: '✠'; --frame: double; --radius: 0;
    position: relative; box-sizing: border-box; background: var(--paper); color: var(--ink); font-family: var(--text-font);
    border: 1px solid var(--rule); outline: 3px var(--frame) var(--rule); outline-offset: -7px; border-radius: var(--radius);
    padding: 16px 18px 12px; min-height: 215px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.35;
}
.wh-item::before, .wh-item::after { content: var(--orn); position: absolute; font-size: 13px; color: var(--rule); }
.wh-item::before { top: 1px; left: 6px; }
.wh-item::after { bottom: 1px; right: 6px; transform: rotate(180deg); }
.wh-head { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; }
.wh-medal { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--rule); background: var(--paper-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* icône : PNG d'encre sur fond transparent (icons/), utilisé comme masque sur la couleur du thème */
.wh-glyph {
    width: 32px; height: 32px; background: color-mix(in srgb, var(--rule) 60%, var(--ink));
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
.wh-name { font-family: var(--title-font); font-weight: 700; font-size: 17px; line-height: 1.15; text-transform: var(--title-case); }
.wh-num { color: var(--ink-soft); font-weight: 600; }
.wh-kind { font-variant: small-caps; text-transform: capitalize; font-size: 14px; color: var(--ink-soft); }
.wh-seal { border: 0; font-variant: small-caps; text-transform: capitalize; font-size: 12px; color: #fff; padding: 3px 8px 9px; align-self: start; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); background: #6d6a63; }
.wh-seal.scarce { background: #8a5a2b; } .wh-seal.rare { background: #3c5f8a; } .wh-seal.exotic { background: #7a2a6f; }
.wh-rule { border: 0; border-top: 1px solid var(--rule); height: 0; background: none; margin: 2px 0; position: relative; overflow: visible; }
.wh-rule::after { content: var(--sep); position: absolute; left: 50%; top: -10px; transform: translateX(-50%); background: var(--paper); color: var(--rule); font-size: 12px; padding: 0 6px; }
.wh-stats { display: flex; justify-content: space-between; gap: 8px; }
.wh-stat b { font-variant: small-caps; font-weight: normal; color: var(--ink-soft); font-size: 13px; margin-right: 4px; }
.wh-price[title] { cursor: help; border-bottom: 1px dotted var(--ink-soft); }
.wh-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.wh-tag { font-size: 13px; padding: 0 6px; border: 1px solid var(--rule); background: var(--paper-2); border-radius: var(--radius); text-transform: capitalize; }
.wh-tag.quality { border-color: var(--good); color: var(--good); background: transparent; }
.wh-tag.quality::before { content: '✦ '; }
.wh-tag.flaw { border-color: var(--bad); color: var(--bad); background: transparent; }
.wh-tag.flaw::before { content: '✖ '; }
.wh-tag.upgrade { border-color: var(--magic); color: var(--magic); background: transparent; font-style: italic; }
.wh-tag.upgrade::before { content: '† '; }
.wh-tag.spec { background: transparent; font-style: italic; }
.wh-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.wh-banner { font-variant: small-caps; text-transform: capitalize; font-size: 13px; color: #fff; background: var(--accent); padding: 2px 12px 2px 8px; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); }
.wh-source { font-style: italic; font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.wh-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 6px; border-top: 1px dotted var(--rule); }
.wh-actions:empty { display: none; }
.wh-actions button { font-family: var(--text-font); font-variant: small-caps; font-size: 14px; background: var(--ink); color: var(--paper); border: 0; padding: 3px 10px; border-radius: var(--radius); cursor: pointer; }
.wh-actions label { font-size: 14px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
/* contenu IA d'un livre : sous les boutons, sur toute la largeur */
.wh-ai { flex-basis: 100%; font-size: 14px; padding: 6px 8px; background: var(--paper-2); border-left: 2px solid var(--rule); }
.wh-ai:empty { display: none; }
.wh-ai h4 { margin: 0 0 4px; font-family: var(--title-font); font-size: 13px; }

/* objet magique : étincelles après le nom, anneau violet autour du médaillon */
.wh-magic { margin-left: 5px; font-size: 15px; }
.wh-item.is-magic .wh-medal { border-color: var(--magic); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--magic); }

/* ===== thèmes par origine : fonds clairs à peine teintés, l'identité passe par l'accent et les ornements ===== */
.theme-dwarfs {
    --paper: #efe9dd; --paper-2: #e2d9c6; --ink: #241f1a; --ink-soft: #5a5146; --rule: #8c6a2f; --accent: #7a5a24;
    --title-case: uppercase; --orn: '◆'; --sep: '◆'; --frame: solid;
}
.theme-elves {
    --paper: #f5f2ea; --paper-2: #e6ebe9; --ink: #1d2c3a; --ink-soft: #4d6275; --rule: #6e93ad; --accent: #2f5d82;
    --title-font: 'Cormorant SC', serif; --orn: '❧'; --sep: '✧'; --frame: solid; --radius: 8px;
}
.theme-elves .wh-name { font-size: 19px; }
.theme-dark-elves {
    --paper: #f1ebee; --paper-2: #e4d8e0; --ink: #24182e; --ink-soft: #5e4a6e; --rule: #6d4a8e; --accent: #4e2468;
    --orn: '✶'; --sep: '✶'; --frame: solid;
}
.theme-bretonnia {
    --paper: #f3eee2; --paper-2: #e3e3e6; --ink: #1b2346; --ink-soft: #485282; --rule: #2a3b8f; --accent: #b0232a;
}
/* fleur de lys (Bretonnie, Ecclésiarchie 40k) : le caractère ⚜ est illisible à cette taille, dessin SVG en masque */
.theme-bretonnia, .t40k-ecclesiarchy {
    --lys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C9.3 4.5 9.5 9 12 13.5 14.5 9 14.7 4.5 12 1ZM10.5 14C10 10 7 7.5 4.5 8.5 2.5 9.5 2.5 12.5 4.5 13 4.2 11.5 5.5 10.5 7 11.5 8.3 12.4 9 13.5 9 14.5ZM13.5 14C14 10 17 7.5 19.5 8.5 21.5 9.5 21.5 12.5 19.5 13 19.8 11.5 18.5 10.5 17 11.5 15.7 12.4 15 13.5 15 14.5ZM7 14.5H17V16.3H7ZM10.6 16.3C10.6 18.8 9.5 20.8 7.5 22.5 9.5 22.3 11 21.2 12 19.5 13 21.2 14.5 22.3 16.5 22.5 14.5 20.8 13.4 18.8 13.4 16.3Z'/%3E%3C/svg%3E");
}
.theme-bretonnia::before, .theme-bretonnia::after, .theme-bretonnia .wh-rule::after,
.t40k-ecclesiarchy::before, .t40k-ecclesiarchy::after, .t40k-ecclesiarchy .wh-rule::after {
    content: ''; width: 14px; height: 14px; padding: 0; background: var(--rule);
    -webkit-mask: var(--lys) center / contain no-repeat; mask: var(--lys) center / contain no-repeat;
}
.theme-bretonnia::before, .t40k-ecclesiarchy::before { top: 4px; left: 5px; }
.theme-bretonnia::after, .t40k-ecclesiarchy::after { bottom: 4px; right: 5px; }
.theme-bretonnia .wh-rule::after, .t40k-ecclesiarchy .wh-rule::after { top: -7px; }
/* le masque découpe aussi le fond : un cache de la couleur du papier interrompt le filet derrière la fleur */
.theme-bretonnia .wh-rule::before, .t40k-ecclesiarchy .wh-rule::before {
    content: ''; position: absolute; left: 50%; top: -1px; width: 26px; height: 2px; transform: translateX(-50%); background: var(--paper);
}
.theme-southern {
    --paper: #f6ebdb; --paper-2: #ecd9bd; --ink: #3b1f12; --ink-soft: #7a4a2e; --rule: #b4623a; --accent: #a4502a;
    --title-font: 'Cormorant SC', serif; --orn: '✿'; --sep: '❖'; --frame: solid;
}
.theme-southern .wh-name { font-size: 19px; }
.theme-kislev {
    --paper: #f2f1ec; --paper-2: #e0e4e4; --ink: #1a2530; --ink-soft: #536170; --rule: #9b2026; --accent: #9b2026;
    --orn: '❄'; --sep: '❄'; --frame: solid;
}
.theme-norsca {
    --paper: #efe7d6; --paper-2: #e0d3b8; --ink: #221b14; --ink-soft: #5b4b3a; --rule: #7a3b1d; --accent: #6e3418;
    --orn: 'ᛟ'; --sep: 'ᚱ'; --frame: solid;
}
.theme-greenskins {
    --paper: #eee8d4; --paper-2: #dcd6b6; --ink: #1d1a10; --ink-soft: #4a4428; --rule: #4f6b25; --accent: #3d5a1e;
    --orn: '☠'; --sep: '✖'; --frame: dashed;
}
.theme-vampire {
    --paper: #f2ebe8; --paper-2: #e6d6d4; --ink: #2a1214; --ink-soft: #6b3a3e; --rule: #8a1c24; --accent: #6e121a;
    --orn: '†'; --sep: '✝'; --frame: solid;
}
.theme-desert {
    --paper: #f6edd8; --paper-2: #ebdcb7; --ink: #2e2010; --ink-soft: #6b5232; --rule: #1f7f86; --accent: #1a6b71;
    --title-font: 'Marcellus', serif; --orn: '✵'; --sep: '✵';
}