/* Mise en page du générateur (index.html) : en-tête compact, réglages dans une colonne fixe, résultats à droite.
   Couleurs et polices viennent des variables de balec.css redéfinies par theme.css (fantasy / 40k). */

/* texte secondaire : --secondary sert de couleur de texte en fantasy mais de fond en 40k */
html { --muted-text: var(--secondary); }
html.theme-40k { --muted-text: #a89c82; }

/* ===== en-tête ===== */
.gen-header {
    display: flex; align-items: center; gap: 16px; margin: 16px; padding: 10px 18px; position: relative;
    background: var(--header-bg); border: 1px solid var(--border); outline: 3px double var(--border); outline-offset: -7px;
}
.gen-header > img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.gen-brand { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--primary); }
.gen-brand small { display: block; font-size: 13px; font-weight: normal; font-style: italic; letter-spacing: 0; color: var(--muted-text); }
.theme-fantasy .gen-brand small { font-family: 'EB Garamond', Georgia, serif; }
.gen-header .header-nav { margin-left: auto; }
.theme-fantasy .gen-header::before, .theme-fantasy .gen-header::after,
.theme-40k .gen-header::before, .theme-40k .gen-header::after { position: absolute; font-size: 14px; color: var(--border); }
.theme-fantasy .gen-header::before, .theme-fantasy .gen-header::after { content: '❦'; }
.theme-40k .gen-header::before, .theme-40k .gen-header::after { content: '☠'; }
.gen-header::before { top: 1px; left: 6px; }
.gen-header::after { bottom: 1px; right: 6px; }

/* ===== générations précédentes : panneau collant d'origine (balec.css), ouvert par-dessus la page ===== */
/* page étroite : ligne au-dessus des colonnes ; page large : colonne dédiée à gauche (voir plus bas) */
.sticky-saves { grid-column: 1 / -1; width: fit-content; margin: 0; }
/* ouvert : l'icône garde sa place (invisible) pour que la page ne bouge pas */
.sticky-saves.open-save > img { display: block; visibility: hidden; }
.sticky-saves.open-save > div { position: absolute; top: 0; left: 0; width: 300px; box-sizing: border-box; padding: 8px 10px; box-shadow: var(--shadow); }
.sticky-saves > img, .sticky-saves.open-save > div {
    border: 1px solid var(--border); border-radius: 0; background-color: var(--card-bg); outline: 3px double var(--border); outline-offset: -5px;
}
.theme-40k .sticky-saves > img, .theme-40k .sticky-saves.open-save > div { outline: 1px solid var(--border-decoration); outline-offset: -4px; }
.sticky-saves h3 { font-family: 'Cinzel', serif; font-size: 15px; margin: 4px 24px 6px 4px; }
.close-saves { left: auto; right: 8px; top: 6px; cursor: pointer; font-size: 12px; }
.saves-list { overflow-x: hidden; overflow-y: auto; margin: 6px 4px; }
.saves-list > div { display: flex; align-items: center; gap: 4px; font-size: 14px; padding: 2px 0; border-bottom: 1px dotted var(--border); }
.saves-list > div > div:first-child { flex: 1; }
.saves-list > div > div.right { cursor: pointer; border-color: var(--border); border-radius: 0; display: flex; align-items: center; justify-content: center; }

/* ===== deux colonnes ===== */
.gen-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; max-width: 1500px; margin: 0 auto 60px; padding: 0 16px; align-items: start; }
@media (min-width: 1300px) {
    .gen-layout { grid-template-columns: 76px 300px minmax(0, 1fr); max-width: 1600px; }
    .sticky-saves { grid-column: 1; top: 10px; }
}
@media (max-width: 900px) {
    .gen-layout { grid-template-columns: 1fr; }
}

/* ===== colonne des réglages ===== */
/* la colonne suit le défilement de la page : pas de barre de défilement interne */
.gen-side {
    box-sizing: border-box;
    background: var(--card-bg); border: 1px solid var(--border); outline: 3px double var(--border); outline-offset: -7px; padding: 14px 16px;
}
.theme-40k .gen-side { outline-style: solid; outline-width: 1px; outline-color: var(--border-decoration); outline-offset: -5px; }
.gen-side h3 {
    font-family: 'Cinzel', serif; font-size: 14px; text-transform: capitalize; margin: 14px 0 6px; padding-bottom: 3px;
    border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline;
}
.gen-side h3:first-child { margin-top: 0; }
.gen-toggle-all { font-family: inherit; font-size: 12px; font-weight: normal; color: var(--muted-text); cursor: pointer; border-bottom: 1px dotted var(--muted-text); }
.gen-group { font-size: 13px; font-variant: small-caps; color: var(--muted-text); margin: 6px 0 3px; cursor: pointer; text-transform: capitalize; }
.gen-group.off { text-decoration: line-through; opacity: .6; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.gen-chip { font-size: 14px; padding: 1px 8px; border: 1px solid var(--border); cursor: pointer; user-select: none; color: var(--primary); }
.gen-chip:hover { background: var(--item-hover); }
.gen-chip.on { background: var(--primary); color: var(--card-bg); }
.theme-40k .gen-chip.on { background: var(--border); color: #121514; }
.gen-chip.gen-scarce.on { background: #8a5a2b; border-color: #8a5a2b; color: #fff; }
.gen-chip.gen-rare.on { background: #3c5f8a; border-color: #3c5f8a; color: #fff; }
.gen-chip.gen-exotic.on { background: #7a2a6f; border-color: #7a2a6f; color: #fff; }

.gen-side .tag-search { margin: 0; }
.gen-side .tag-search input { width: 100%; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--border); font-family: inherit; }
.gen-side .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.gen-side .tags > div { margin: 0; padding: 0 6px; font-size: 13px; cursor: pointer; }

.gen-method-switch { display: flex; border: 1px solid var(--border); margin-bottom: 6px; }
.gen-method-switch span { flex: 1; text-align: center; font-size: 14px; padding: 1px 0; cursor: pointer; }
.gen-method-switch span.on { background: var(--primary); color: var(--card-bg); }
.theme-40k .gen-method-switch span.on { background: var(--border); color: #121514; }
.gen-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 5px 0; font-size: 15px; }
.gen-row input[type=number] { width: 80px; padding: 2px 6px; border: 1px solid var(--border); font-family: inherit; }
.theme-fantasy .gen-row input[type=number], .theme-fantasy .gen-side .tag-search input,
.theme-fantasy .gen-bar select, .theme-fantasy .gen-convert input { background: #fbf6ea; }
.gen-option { cursor: pointer; }
.gen-option .checkbox { margin: 0; }
.gen-row button { width: 100%; }
.gen-muted { font-size: 14px; font-style: italic; color: var(--muted-text); }
.gen-save { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; padding: 2px 0; border-bottom: 1px dotted var(--border); }
.gen-icon { cursor: pointer; margin-left: 4px; }

/* ===== barre d'action et convertisseur ===== */
.gen-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px;
    background: var(--card-bg); border: 1px solid var(--border); outline: 3px double var(--border); outline-offset: -7px;
}
.theme-40k .gen-bar { outline-style: solid; outline-width: 1px; outline-color: var(--border-decoration); outline-offset: -5px; }
.gen-bar button.gen-generate {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 18px; letter-spacing: .06em; font-variant: normal; text-transform: none;
    color: #fff; background: #8e1b1b; border: 0; padding: 10px 26px; border-radius: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.gen-bar button.gen-generate:hover { background: #a82222; }
.gen-stat { font-size: 15px; }
.gen-stat b { font-family: 'Cinzel', serif; }
.gen-stat b[title] { cursor: help; border-bottom: 1px dotted var(--muted-text); }
.gen-spacer { flex: 1; }
.gen-bar select { padding: 3px 6px; border: 1px solid var(--border); font-family: inherit; }
.gen-link { font-size: 14px; color: var(--primary); }
.gen-main-area .loot-sent { margin: -6px 0 12px; }

.gen-convert {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 14px; padding: 6px 16px; font-size: 15px;
    background: var(--card-bg); border: 1px solid var(--border);
}
.gen-convert input { width: 130px; padding: 2px 6px; border: 1px solid var(--border); font-family: inherit; }
.gen-converted { font-weight: 500; }
.gen-coins { margin-left: auto; font-style: italic; color: var(--muted-text); font-size: 14px; }
.gen-empty { padding: 40px 0; text-align: center; font-style: italic; color: var(--muted-text); }
.gen-main-area .wh-grid { margin-top: 0; }

/* ===== mode preset ===== */
.gen-preset { display: grid; gap: 4px; margin: 4px 0 8px; }
.gen-preset select, .gen-preset input[type=text] { max-width: 170px; padding: 2px 6px; border: 1px solid var(--border); font-family: inherit; }
.theme-fantasy .gen-preset select, .theme-fantasy .gen-preset input[type=text] { background: #fbf6ea; }
.gen-preset-quality { margin: 2px 0; }
.gen-chip.gen-common.on { background: #6d6a63; border-color: #6d6a63; color: #fff; }
/* autocomplétion des mots-clés du preset : le champ est dans un label, la liste s'affiche quand le bloc a le focus */
.gen-preset-tags { margin: 0; }
.gen-preset-tags:focus-within .autocomplete { display: inline-block; }
.gen-preset-tags .autocomplete { left: 0; min-width: 0; width: 100%; box-sizing: border-box; padding: 8px; max-height: 260px; overflow-y: auto; }