@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;1,400&family=Barlow+Condensed:wght@500;600&display=swap');

/* Thèmes de page par univers, chargés après balec.css (et market.css) sur le générateur et le marché.
   La classe theme-fantasy / theme-40k est posée sur <html> par un script dans le <head>, d'après l'URL.
   Les cartes d'objets ont leur propre feuille (item-cards.css), avec une variante 40k en bas de ce fichier. */

/* ===== barre de navigation de l'en-tête (les deux univers) ===== */
.header-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.header-btn {
    display: inline-block; padding: 4px 12px; font-size: 15px; font-weight: normal; text-decoration: none;
    color: var(--primary); border: 1px solid var(--border); background: var(--card-bg); cursor: pointer;
}
.header-btn:hover { background: var(--item-hover); }

/* ===== bouton du mode de stockage (front/online.js) et propriétaires des données partagées ===== */
.online-bar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.online-switch { display: inline-flex; border: 1px solid var(--border); }
.online-switch button {
    padding: 4px 10px; font: inherit; font-size: 14px; color: var(--primary); background: var(--card-bg); border: 0; cursor: pointer;
}
.online-switch button + button { border-left: 1px solid var(--border); }
/* !important : les boutons des thèmes ont une spécificité supérieure */
.online-switch button.active { background: var(--primary) !important; color: var(--card-bg) !important; font-weight: 600; }
.online-status { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.online-user { font-weight: 600; color: var(--primary); }
.online-error { color: #b0412e; }
.online-link { color: var(--primary); }
.owner-badge { display: inline-block; padding: 0 6px; font-size: 0.75rem; border: 1px dashed var(--border); border-radius: 8px; opacity: .85; white-space: nowrap; }
.read-only { opacity: .75; }
.read-only button:not(.always-on), .read-only .mk-close { pointer-events: none; opacity: .45; }

/* ======================================================================================
   WARHAMMER FANTASY : parchemin, encre brune, Cinzel pour les titres, EB Garamond pour le texte
   ====================================================================================== */
html.theme-fantasy {
    --primary: #2b1d14;
    --secondary: #4a3426;
    --accent: #8e1b1b;
    --background: #ece0c4;
    --border: #8b6b4a;
    --text: #2b1d14;
    --header-bg: #f4e9d2;
    --item-hover: #fbf3e2;
    --card-bg: #f7eedb;
    --border-decoration: #8b6b4a;
    --shadow: 0 2px 6px rgba(44, 24, 16, 0.22);
}
.theme-fantasy body { font-family: 'EB Garamond', Georgia, serif; font-size: 17px; }
/* Cinzel (capitales) réservé aux grands titres ; les libellés restent en EB Garamond, lisible */
.theme-fantasy .header > div:first-of-type,
.theme-fantasy h1, .theme-fantasy h2, .theme-fantasy h3,
.theme-fantasy .category > div > .title, .theme-fantasy .panel-title { font-family: 'Cinzel', serif; }
.theme-fantasy .title { font-size: 1.05em; }
.theme-fantasy .header > div:first-of-type { letter-spacing: .04em; }

/* cadres : double filet comme les cartes, sans arrondis */
.theme-fantasy .header,
.theme-fantasy .category,
.theme-fantasy .gen-options,
.theme-fantasy .mk-panel,
.theme-fantasy .mk .modal {
    border-radius: 0; border: 1px solid var(--border); outline: 3px double var(--border); outline-offset: -7px;
}
.theme-fantasy .category { border-left-width: 1px; }
.theme-fantasy .header { position: relative; }
.theme-fantasy .header::before, .theme-fantasy .header::after { content: '❦'; position: absolute; font-size: 15px; color: var(--border); }
.theme-fantasy .header::before { top: 2px; left: 8px; }
.theme-fantasy .header::after { bottom: 2px; right: 8px; transform: rotate(180deg); }

/* boutons : encre pleine et petites capitales */
.theme-fantasy button:not(.gen-main > button):not(.gen-generate) { border-radius: 0; font-variant: small-caps; }
.theme-fantasy .header-btn { font-family: 'EB Garamond', Georgia, serif; font-variant: small-caps; font-size: 16px; }
.theme-fantasy .checkbox.unchecked:after, .theme-fantasy .checkbox.checked:after { border-radius: 0; }
.theme-fantasy .subtype, .theme-fantasy .tags > div, .theme-fantasy .autocomplete > span { border-radius: 0; background: rgba(255, 252, 244, 0.7); }

/* marché : fonds blancs remplacés par le parchemin clair */
.theme-fantasy .mk-ship, .theme-fantasy .mk-trait-row, .theme-fantasy .mk-facing,
.theme-fantasy .mk-search, .theme-fantasy .mk-field input, .theme-fantasy .mk-field select,
.theme-fantasy .mk-inline input, .theme-fantasy .mk-inline select, .theme-fantasy .mk-place-filters select { background: #fbf6ea; }
.theme-fantasy .mk-ship, .theme-fantasy .mk-btn-small, .theme-fantasy .mk-chip { border-radius: 0; }

/* ======================================================================================
   WARHAMMER 40 000 : métal sombre et laiton de l'Imperium, rouge écarlate, Cinzel gothique + Barlow lisible
   ====================================================================================== */
html.theme-40k {
    --primary: #e4d9bd;
    --secondary: #3a3f3c;
    --accent: #a8201a;
    --background: #121514;
    --border: #9c7c45;
    --text: #ddd5c2;
    --header-bg: #1c201e;
    --item-hover: #2a302d;
    --card-bg: #1a1e1c;
    --border-decoration: #6f5a35;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    --scarce: #5f9a4a;
    --rare: #4a7fb5;
    --exotic: #a34ac0;
    color-scheme: dark;
}
.theme-40k body {
    font-family: 'Barlow', 'Segoe UI', sans-serif; font-size: 16px;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 4px);
}
.theme-40k .header > div:first-of-type,
.theme-40k h1, .theme-40k h2, .theme-40k h3,
.theme-40k .category > div > .title, .theme-40k .panel-title { font-family: 'Cinzel', serif; letter-spacing: .05em; }
.theme-40k a { color: #d9b56a; }

/* cadres : plaque de métal à liseré laiton, coins marqués d'un crâne (symbole commun à tout l'Imperium) */
.theme-40k .header,
.theme-40k .category,
.theme-40k .gen-options {
    border-radius: 0; border: 1px solid var(--border); outline: 1px solid var(--border-decoration); outline-offset: -5px;
}
.theme-40k .category { border-left: 3px solid var(--accent); }
.theme-40k .header { position: relative; }
.theme-40k .header::before, .theme-40k .header::after { content: '☠'; position: absolute; font-size: 15px; color: var(--border); }
.theme-40k .header::before { top: 3px; left: 8px; }
.theme-40k .header::after { bottom: 3px; right: 8px; }

/* surfaces claires de balec.css assombries */
.theme-40k .other-side, .theme-40k .subtype, .theme-40k .tags > div, .theme-40k .autocomplete > span,
.theme-40k .tag-search > input, .theme-40k .gen-options input[type="number"], .theme-40k .header select,
.theme-40k .loot-to-ship, .theme-40k select, .theme-40k input[type="text"] {
    background: #232826; color: var(--text); border-color: var(--border-decoration); border-radius: 0;
}
.theme-40k .gen-options { background: var(--card-bg); }
.theme-40k .gen-method, .theme-40k a[download] { background: rgba(156, 124, 69, 0.12); }
.theme-40k span[data-bind*="addCurio"] { background: #2a2f2c !important; color: var(--primary) !important; border: 1px solid var(--border) !important; }
.theme-40k .sticky-saves > img, .theme-40k .sticky-saves.open-save > div { background-color: #1c201e; border-color: var(--border); color: var(--text); }

/* cases à cocher : laiton sur métal, coche sombre lisible */
.theme-40k .checkbox.unchecked:after,
.theme-40k .gen-options > div[data-bind*="toggle"] .checkbox.unchecked:after { border-color: var(--border); border-radius: 0; }
.theme-40k .checkbox.checked:after,
.theme-40k .gen-options > div[data-bind*="toggle"] .checkbox.checked:after { border-color: var(--border); background: var(--border); color: #121514; border-radius: 0; }

/* boutons : plaque sombre, texte laiton */
.theme-40k button:not(.gen-main > button):not(.gen-generate) { background-color: #2a2f2c; color: #e4d9bd; border-color: var(--border); border-radius: 0; font-family: 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.theme-40k button:not(.gen-main > button):not(.gen-generate):hover { background-color: #363c39; }
.theme-40k .header-btn { font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .04em; }

/* ===== cartes d'objets 40k : plaque de données sombre, liseré laiton, sceau de pureté pour la rareté ===== */
.theme-40k .wh-item {
    --paper: #1b201e; --paper-2: #262c29; --ink: #e2dac6; --ink-soft: #a89c82; --rule: #9c7c45;
    --accent: #8e1b1b; --good: #7cbf8a; --bad: #e07a6e; --magic: #c49ae6;
    --title-font: 'Cinzel', serif; --text-font: 'Barlow', 'Segoe UI', sans-serif;
    --orn: '☠'; --sep: '◆'; --frame: solid;
}
.theme-40k .wh-item .wh-kind, .theme-40k .wh-item .wh-stat b, .theme-40k .wh-item .wh-banner,
.theme-40k .wh-item .wh-seal, .theme-40k .wh-item .wh-actions button {
    font-variant: normal; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-family: 'Barlow Condensed', 'Barlow', sans-serif;
}
.theme-40k .wh-item .wh-tag { background: var(--paper-2); }
.theme-40k .wh-item .wh-glyph { background: var(--glyph, #c9a463); }

/* factions 40k déduites des mots-clés (item-template.js) : fond sombre teinté, liseré, accent du bandeau et ornements */
.theme-40k .wh-item.t40k-heretic { --paper: #201615; --paper-2: #2e1d1b; --rule: #8a3a2a; --accent: #6e0f0f; --glyph: #c4553f; --orn: '✸'; --sep: '✸'; }
.theme-40k .wh-item.t40k-xenos { --paper: #14201c; --paper-2: #1c2e28; --rule: #4f9a7e; --accent: #2b6b55; --glyph: #7fd1ac; --orn: '◈'; --sep: '◈'; --radius: 8px; }
.theme-40k .wh-item.t40k-ordo { --paper: #151414; --paper-2: #221e1e; --rule: #a3242a; --accent: #8e1b1b; --glyph: #d9c9a0; --orn: 'I'; --sep: 'I'; }
.theme-40k .wh-item.t40k-astartes { --paper: #141a24; --paper-2: #1d2635; --rule: #c9a463; --accent: #24427a; --glyph: #d8b66e; --orn: '✦'; --sep: '✦'; }
.theme-40k .wh-item.t40k-ecclesiarchy { --paper: #1f1b17; --paper-2: #2c2620; --rule: #c9a463; --accent: #8e1b1b; --glyph: #e8dcc0; }
.theme-40k .wh-item.t40k-mechanicus { --paper: #201716; --paper-2: #2e201d; --rule: #b4793a; --accent: #9b2a1c; --glyph: #d48a4a; --orn: '⚙'; --sep: '⚙'; }
.theme-40k .wh-item.t40k-militarum { --paper: #1a1d15; --paper-2: #262a1e; --rule: #8a8a52; --accent: #4f5a2a; --glyph: #b9b878; --orn: '★'; --sep: '★'; }
.theme-40k .wh-item.t40k-arbites { --paper: #181b20; --paper-2: #232830; --rule: #8d99a8; --accent: #3a4658; --glyph: #c3ccd6; --orn: '⚖'; --sep: '⚖'; }
.theme-40k .wh-item.t40k-administratum { --paper: #1c1c1a; --paper-2: #2a2a27; --rule: #8f8a7a; --accent: #57534a; --glyph: #cfc8b4; --orn: '§'; --sep: '§'; }
.theme-40k .wh-item.t40k-medicae { --paper: #161d1e; --paper-2: #1f2a2b; --rule: #5fa3a3; --accent: #2a6b6e; --glyph: #e6efed; --orn: '✚'; --sep: '✚'; }
.theme-40k .wh-item.t40k-gang { --paper: #1e1a14; --paper-2: #2c261b; --rule: #c9a227; --accent: #8a4a1c; --glyph: #e0b83a; --orn: '⚠'; --sep: '⚠'; --frame: dashed; }
.theme-40k .wh-item.t40k-psyker { --paper: #1a1622; --paper-2: #262033; --rule: #8a6ac4; --accent: #4e2e8a; --glyph: #c49ae6; --orn: '✧'; --sep: '✧'; }
.theme-40k .wh-item .wh-actions button { background: #2f3532; color: #e4d9bd; border: 1px solid var(--rule); }
.theme-40k .wh-item .wh-seal { clip-path: none; border-radius: 50%; width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; font-size: 9px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }