/* ================================================================ simulateur de build & atelier */
/* Styles propres aux pages /simulateur et /atelier, dans un fichier séparé parce qu'elles sont les
   seules à en avoir besoin et qu'elles pèsent à elles deux plus que le reste du site.
   Tout reprend les variables de app.css : ces écrans sont denses en chiffres, donc la hiérarchie
   passe par la taille et la couleur plutôt que par des bordures supplémentaires. */

.sim-label {
    display: block;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Le simulateur est fait de champs vides : leur filet n'est pas decoratif, c'est
   la seule preuve qu'ils existent. D'ou --border-control (3,4:1) et non --line. */
.sim-input,
.sim-select {
    width: 100%;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    background: var(--bg-subtle);
    border: 1px solid var(--border-control);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: .95rem;
}

.sim-input:focus,
.sim-select:focus { outline: none; border-color: var(--gold-500); }

/* Le panneau d'un <select> natif est peint par l'OS, qui ignore la couleur du controle : sans
   ces deux declarations les options heritent du texte creme sur le fond blanc du systeme, donc
   illisibles. Il faut repeindre l'option ELLE-MEME, pas seulement le select. */
.sim-select option,
.sim-select optgroup {
    background: var(--ink-800);
    color: var(--cream);
}

/*
    ⚠ `input.` et non `.` seul. app.css pose « input[type="number"], select… { width: 100% } », de
    specificite 0-1-1 : une largeur ecrite en simple classe (0-1-0) PERD, sans rien signaler. Le
    champ ne prenait sa taille que la ou une grille le contraignait — d'ou des champs corrects dans
    le panier de l'atelier (grille a colonne fixe) et longs de 200 px dans « Reste a obtenir »
    (flex libre), pour la meme classe. `input.` remonte a 0-1-1, et simulator.css est charge apres.
*/
input.sim-input--num { width: 84px; text-align: center; }
.sim-select--tiny { width: auto; padding: 5px 9px; font-size: .85rem; }

.sim-range { width: 100%; accent-color: var(--gold-500); }

.sim-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--text);
    cursor: pointer;
}

.chip--on {
    border-color: var(--gold-500);
    background: rgba(1, 130, 249, .14);
    color: var(--gold-300);
}

.btn--tiny { padding: 6px 12px; font-size: .82rem; }

/* ---------------------------------------------------------------- en-tete du simulateur */

/*
    En-tete compact : deux rangees, aucune colonne a moitie vide. Le padding de .card est reduit
    ici — 28 px tout autour pour une barre de commandes, c'etait le tiers de la hauteur pour du
    vide.
*/
.sim-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

/* Une seule ligne pour tout le reglage du personnage ET les actions. `align-items: flex-end`
   aligne les commandes sur leur BASE : sans ca, le champ de niveau (qui porte une etiquette
   au-dessus) decalerait tous ses voisins vers le haut. */
.simbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
}

.simbar__breed {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--gold-300);
    line-height: 2;
}

.simbar__sex { display: flex; gap: 6px; }

.simbar__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

.simbar__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.simbar__points {
    font-size: .84rem;
    color: var(--muted);
    line-height: 2.4;
    white-space: nowrap;
}

.simbar__points strong { color: var(--cream); font-size: .95rem; }
.simbar__points--over, .simbar__points--over strong { color: var(--bad); }

/* Pousse les actions a droite tant qu'il y a la place, et disparait quand la barre se replie. */
.simbar__gap { flex: 1 1 24px; }

.simbar__name { flex: 0 1 220px; min-width: 140px; }
.simbar__share { white-space: nowrap; margin: 0; line-height: 2.4; }


.sim-portrait {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .3);
}

.sim-sex { display: flex; gap: 8px; }

.sim-budget {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    font-size: .85rem;
    color: var(--muted);
}

.sim-over { color: #ff8a7a; font-weight: 600; }

.sim-header__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.sim-share { font-size: .82rem; color: var(--muted); margin: 0; }
.sim-share code { color: var(--gold-300); }

.sim-note { font-size: .86rem; margin: 0 0 16px; }

/* ---------------------------------------------------------------- onglets et colonnes */

/*
    Ecran de travail : on remonte tout vers le haut de la fenetre. La section du site prevoit
    l'espace d'un titre et d'un chapeau, que cette page n'a plus.
*/
.sim-page { padding-top: 18px; padding-bottom: 32px; }

.sim-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.sim-tab {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.sim-tab:hover { border-color: var(--line-strong); }
.sim-tab--on { border-color: var(--gold-500); background: var(--accent-soft); color: var(--gold-300); }

.sim-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.sim-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sim-side { position: sticky; top: 88px; }

/*
    La marge interne des cartes du site est pensee pour du texte long. Sur cet ecran, chaque carte
    en perdait 28 px de chaque cote, soit plus que la largeur d'une case d'equipement.
*/
.sim-layout .card,
.sim-header { padding: 14px 16px; }

/* Un ecran de travail ne bouge pas quand on le survole. */
.sim-layout .card:hover,
.sim-header:hover { transform: none; }

.sim-panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sim-panel-head h3 { margin: 0; font-size: 1.05rem; }

/* ---------------------------------------------------------------- fenetre d'equipement */

/* Disposition de la feuille de personnage du jeu : deux colonnes d'emplacements encadrant le
   portrait, trophees en rangee dessous. Le joueur atteint un emplacement par sa position, pas en
   lisant son etiquette. */
/*
    Les cases encadrent le personnage : une colonne a gauche, une a droite, la silhouette au
    milieu. Les colonnes ne prennent que la largeur d'une case — les etaler sur un tiers de la
    carte chacune eloignait les emplacements du personnage qu'ils habillent.
*/
/*
    Trois colonnes SERREES : deux rangees de cases et le personnage entre elles, rien de plus.
    La colonne centrale prenait toute la largeur restante (`1fr`), ce qui etirait le cadre du
    personnage sur la moitie de l'ecran alors que la silhouette, elle, ne fait que 240 px. Une
    largeur fixe la ramene contre ses emplacements — c'est la disposition du jeu.
*/
.paperdoll {
    display: grid;
    grid-template-columns: auto 260px auto;
    gap: 16px;
    align-items: start;
    justify-content: center;
}

.paperdoll__column { display: flex; flex-direction: column; gap: 8px; }

.paperdoll__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 6px;
    border-radius: var(--r);
    background: radial-gradient(circle at 50% 35%, rgba(1, 130, 249, .07), transparent 68%);
}

.paperdoll__portrait {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

.paperdoll__caption { margin: 0; font-size: .84rem; text-align: center; }

/* Les six trophees, centres sous le personnage. */
.paperdoll__trophees {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/*
    La case. Carree, de la taille d'une icone : c'est la seule chose qu'on regarde. Le nom de
    l'objet, son niveau et ses effets vivent dans l'infobulle, le nom de l'EMPLACEMENT vide dans
    la case elle-meme.
*/
.pdslot {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: var(--r-sm);
}

.pdslot--bad { border-color: rgba(255, 138, 122, .5); }

/*
    Le halo de l'objet interdit. Distinct de .pdslot--bad, qui signale n'importe quelle anomalie
    d'un trait de 1 px a 50 % d'opacite : une piece que le serveur REFUSERAIT d'equiper merite d'etre
    vue sans la chercher. C'est le meme halo que sur la fiche d'objet, pour qu'on reconnaisse le
    signal d'un ecran a l'autre.
*/
.pdslot--locked {
    border-color: var(--bad-line);
    background: var(--bad-fill);
    box-shadow: var(--glow-bad);
}

.pdslot--locked .pdslot__icon { border-style: solid; }

.pdslot__icon {
    display: grid;
    place-items: center;
    gap: 1px;
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pdslot__icon:hover {
    border-color: var(--gold-500);
    background: rgba(1, 130, 249, .08);
    transform: translateY(-1px);
}

.pdslot__icon img { width: 52px; height: 52px; object-fit: contain; }
.pdslot__glyph { font-size: 1.8rem; line-height: 1; }

/* Une case vide se distingue au trait, pas a la couleur : en pointille elle se lit comme une
   place a prendre, et le nom de l'emplacement dit laquelle. */
.pdslot--empty .pdslot__icon { border-style: dashed; }
.pdslot__plus { font-size: 1.1rem; color: var(--muted); line-height: 1; }

.pdslot__hint {
    font-size: .6rem;
    line-height: 1.05;
    color: var(--muted);
    text-align: center;
    padding: 0 2px;
    overflow: hidden;
}

/* Le point d'un jet regle a la main. */
.pdslot__tuned {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-400);
}

/* Les actions n'apparaissent qu'au survol : a seize emplacements, seize paires de boutons
   permanentes noient la seule chose qu'on regarde vraiment, l'objet porte. */
.pdslot__actions {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity .16s ease;
    z-index: 2;
}

.pdslot:hover .pdslot__actions,
.pdslot:focus-within .pdslot__actions { opacity: 1; }

.pdslot__act {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .55);
    border: 1px solid var(--line-strong);
    color: var(--cream);
    cursor: pointer;
    font-size: .8rem;
    line-height: 1;
}

.pdslot__act:hover { border-color: var(--gold-500); color: var(--gold-300); }
.pdslot__act--danger:hover { border-color: #ff8a7a; color: #ff8a7a; }

/*
    Le bouton « envoyer a l'atelier », en BAS a droite.

    A l'oppose des deux autres actions, et c'est deliberé : regler et retirer touchent au build,
    celui-ci l'envoie ailleurs. Colles ensemble, on clique « retirer » en visant « fabriquer ».
    Il ne s'affiche que sur une piece qui a VRAIMENT une recette — voir SlotTile.
*/
.pdslot__craft {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .55);
    color: var(--cream);
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s ease, border-color .16s ease, color .16s ease;
    z-index: 2;
}

.pdslot__craft svg { width: 12px; height: 12px; }

/* Meme regle d'apparition que les autres actions : seize cases avec un bouton permanent noient
   la seule chose qu'on regarde, l'objet porte. */
.pdslot:hover .pdslot__craft,
.pdslot:focus-within .pdslot__craft { opacity: 1; }

.pdslot__craft:hover { border-color: var(--green-400); color: var(--green-300); }

/* Le point doré des jets regles vit deja en bas A GAUCHE : les deux ne se croisent pas. */
.pdslot__craft:focus-visible {
    opacity: 1;
    outline: 2px solid var(--gold-500);
    outline-offset: 1px;
}

/* L'anomalie ne s'ecrit plus dans la case — elle n'y tiendrait pas. Elle est portee par la
   bordure rouge et par l'infobulle, et listee en clair dans le panneau des problemes. */

/* ---------------------------------------------------------------- reglage d'un objet */

.tune-list { display: flex; flex-direction: column; gap: 6px; }

.tune {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) 90px 28px;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.tune--exo { border-color: rgba(1, 130, 249, .4); background: rgba(1, 130, 249, .05); }

.tune__label { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: var(--cream); font-size: .9rem; }
.tune__range { font-size: .78rem; }

.tune__tag {
    font-size: .7rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(1, 130, 249, .18);
    color: var(--gold-300);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tune__spacer { display: block; }

.tune-add {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.tune-add .sim-label { margin: 0; }
.tune-add .sim-select { width: auto; min-width: 200px; }

/* ---------------------------------------------------------------- emplacements (grille simple) */

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.slot {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slot--bad { border-color: rgba(255, 138, 122, .5); }

.slot__button {
    display: grid;
    place-items: center;
    width: 100%;
    height: 62px;
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .28);
    border: 1px dashed var(--line);
    cursor: pointer;
    transition: border-color .2s ease;
}

.slot__button:hover { border-color: var(--gold-500); }
.slot__button img { width: 48px; height: 48px; object-fit: contain; }
.slot__plus { font-size: 1.5rem; color: var(--muted); }

.slot__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slot__name { flex: 1; font-size: .84rem; color: var(--cream); min-width: 0; overflow-wrap: anywhere; }
.slot__level { font-size: .76rem; color: var(--muted); }

.slot__remove {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: .82rem;
    padding: 0 2px;
}

.slot__remove:hover { color: #ff8a7a; }
.slot__issue { margin: 0; font-size: .78rem; color: #ff8a7a; }

.sim-sets { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.sim-sets h4 { margin: 0 0 10px; }
.sim-set { margin-bottom: 10px; }
.sim-set__name { margin: 0; font-size: .9rem; color: var(--cream); }
.sim-set__effects { margin: 2px 0 0; font-size: .84rem; color: var(--green-300); }

/* ---------------------------------------------------------------- selecteur d'objet */

.picker-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.picker-filters__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.picker-filters__row .sim-label { display: flex; align-items: center; gap: 8px; margin: 0; }

.picker-effects summary { cursor: pointer; color: var(--gold-400); font-size: .88rem; }

.picker-effects__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.picker-effects__grid .sim-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.picker-count { font-size: .84rem; margin: 0 0 10px; }

.picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.picker-list--compact { max-height: 320px; margin-top: 12px; }

.picker-item {
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.picker-item:hover { background: var(--surface-active); }
.picker-item img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.picker-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker-item__name { color: var(--cream); font-size: .92rem; }
.picker-item__set { color: var(--gold-400); font-size: .8rem; margin-left: 6px; }
.picker-item__effects { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- caracteristiques */

.stat-rows { display: flex; flex-direction: column; gap: 16px; }

.stat-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.stat-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.stat-row__name { font-weight: 600; color: var(--cream); }
.stat-row__total { font-size: 1.25rem; color: var(--gold-300); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-row__controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stat-row__scroll { margin-top: 10px; }
.stat-row__scroll .sim-label { margin-bottom: 4px; }
.stat-row__detail { margin: 8px 0 0; font-size: .8rem; }

/* ---------------------------------------------------------------- sorts et degats */

.dmg-block { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; margin-bottom: 18px; }
.dmg-block h4 { margin: 0 0 4px; }

.dmg-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.dmg-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: .88rem; }
.dmg-line__element { min-width: 62px; font-weight: 600; }
.dmg-line__value { color: var(--cream); }
.dmg-line__crit { font-size: .8rem; }

.dmg-line__tag {
    font-size: .74rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(52, 211, 153, .14);
    color: var(--green-300);
}

/* Neutre, Terre, Feu, Eau, Air. */
.dmg-line--0 .dmg-line__element { color: #d9d2c0; }
.dmg-line--1 .dmg-line__element { color: #c08b4a; }
.dmg-line--2 .dmg-line__element { color: #e2705a; }
.dmg-line--3 .dmg-line__element { color: #6aa9dd; }
.dmg-line--4 .dmg-line__element { color: #9cd06a; }

.dmg-total { margin: 8px 0 0; font-size: .9rem; color: var(--cream); }
.dmg-heal { color: var(--green-300); margin-left: 8px; }

.spell-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 10px;
    /* `stretch` et non `start` : les cartes d'une meme rangee prennent la meme hauteur, donc leurs
       bandeaux de chiffres tombent sur la meme horizontale. En `start`, la grille faisait un
       escalier et il fallait chercher chaque total a une hauteur differente. */
    align-items: stretch;
}

/*
    L'ancre de defilement du recapitulatif de tour. scroll-margin-top evite que la fiche visee
    finisse sous l'en-tete collant ; le halo dit laquelle on vient d'ouvrir, sinon on arrive au
    milieu d'une colonne de fiches identiques sans savoir laquelle regarder.
*/
.spell-anchor { scroll-margin-top: 96px; border-radius: var(--r); }

.spell-anchor--focus {
    outline: 2px solid var(--accent, #0182F9);
    outline-offset: 3px;
}

.spell {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.spell--locked { opacity: .55; }
.spell__icon { width: 42px; height: 42px; object-fit: contain; flex: none; }
.spell__body { flex: 1; min-width: 0; }
.spell__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.spell__name { font-weight: 600; color: var(--cream); }
.spell__meta { margin: 2px 0 0; font-size: .82rem; }
.spell__locked { margin: 6px 0 0; font-size: .84rem; color: var(--gold-400); }

/* ---------------------------------------------------------------- feuille de personnage */

.sheet h3 { margin: 0 0 14px; }

.sheet h4 {
    margin: 18px 0 8px;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.sheet-warn { color: #ff8a7a !important; }

.sheet-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.sheet-stat {
    text-align: center;
    padding: 10px 4px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
}

.sheet-stat--life { grid-column: span 4; }
.sheet-stat__value { display: block; font-size: 1.3rem; font-weight: 600; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.sheet-stat__label { display: block; font-size: .74rem; color: var(--muted); letter-spacing: .06em; }

.sheet-list li span:first-child { color: var(--muted); }
.sheet-list li span:last-child { color: var(--cream); font-weight: 600; }

.sheet-issues { margin: 0; padding-left: 18px; font-size: .84rem; color: #ff8a7a; }
.sheet-issues li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- builds enregistres */

.saved-list { display: flex; flex-direction: column; gap: 8px; }

.saved {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.saved__name { margin: 0; font-weight: 600; color: var(--cream); }
.saved__meta { margin: 2px 0 0; font-size: .82rem; }
.saved__actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- atelier */

.workshop-toggles { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/*
    « A fabriquer » est une liste dense, pas une pile de cartes : des lignes separees par un
    filet, et un survol qui ne change QUE le fond. Une bordure complete par ligne dessinait
    autant de petites boites que d'objets ; ce sont les colonnes qui doivent se lire, pas les
    contours. Les quatre zones sont fixes — icone, nom, quantite, retrait — pour que la colonne
    des quantites tombe au meme endroit d'une ligne a l'autre.
*/
.basket { display: flex; flex-direction: column; }

.basket-line {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 88px 32px;
    gap: 12px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-instant) ease;
}

/* Le nom est devenu un LIEN vers la fiche de l'objet : il garde l'aspect du texte qu'il etait,
   le soulignement n'apparait qu'au survol. Un panier ou seize noms sont soulignes se lit comme
   une page de liens, plus comme une liste de fabrication. */
.basket-line__name,
.shopping-line__name {
    color: var(--cream);
    text-decoration: none;
}

.basket-line__name:hover,
.shopping-line__name:hover {
    color: var(--gold-300);
    text-decoration: underline;
}

.basket-line:last-child { border-bottom: none; }
.basket-line:hover { background: var(--surface-hover); }

.basket-line img { width: 32px; height: 32px; object-fit: contain; }

/* Le nom et son origine, empiles dans la colonne du milieu de la grille. */
.basket-line__ident {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.basket-line__name {
    min-width: 0;
    color: var(--cream);
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* D'ou vient la ligne. En retrait : c'est un repere, pas le sujet de la ligne. */
.basket-line__origine {
    color: var(--gold-400);
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La quantite se lit en colonne d'une ligne a l'autre : chasse fixe, chiffres tabulaires. */
.basket-line .sim-input--num {
    width: 100%;
    padding: 6px 4px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.basket-line__remove {
    width: 32px;
    padding: 0;
    justify-self: end;
}

.basket-line__remove svg { width: 14px; height: 14px; }

.job-requirements { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.job-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    background: var(--bg-subtle);
    color: var(--muted);
}

.job-chip--ok { border-color: rgba(52, 211, 153, .45); color: var(--green-300); background: rgba(52, 211, 153, .1); }
.job-chip--missing { border-color: var(--bad-line); color: var(--bad); background: var(--bad-fill); }

.shopping { display: flex; flex-direction: column; }

.shopping-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-instant) ease;
}

.shopping-line:last-child { border-bottom: none; }
.shopping-line:hover { background: var(--surface-hover); }

.shopping-line img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.shopping-line__body { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.shopping-line__name { color: var(--cream); font-size: .92rem; }
.shopping-line__source { font-size: .78rem; }

/* D'ou viennent les chiffres de l'ecran. Juste au-dessus d'eux, pas deux blocs plus haut. */
.atelier__source { margin: 0 0 10px; }

/*
    L'ETAT d'une ressource : ce que j'ai sur ce qu'il faut, une jauge, et ce qu'il manque encore.

    Il y avait un CHAMP DE SAISIE a cette place. Tout est deja compte en jeu — sur les personnages
    et dans la banque — donc un champ modifiable ne demandait que de re-declarer ce que le serveur
    sait, et une valeur tapee une fois masquait ensuite l'inventaire reel sans jamais se remettre a
    jour. Les trois elements sont dans l'ordre ou on se les demande : combien j'en ai, ou j'en suis,
    combien il m'en faut encore.
*/
.shopping-line__etat {
    display: flex;
    /* `1 1 auto` et une base large : la jauge doit RESTER lisible. Bornee a 15 rem, elle tombait a
       une trentaine de pixels entre les deux nombres, et une jauge qu'on ne lit pas ne sert a rien. */
    flex: 1 1 22rem;
    align-items: center;
    gap: 10px;
    min-width: 18rem;
}

.shopping-line__compte {
    flex: none;
    min-width: 5.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shopping-line__compte strong {
    color: var(--cream);
    font-size: 1rem;
    font-weight: 700;
}

.shopping-line__sur { color: var(--muted); font-size: .82rem; }

/* Meme jauge que celle des regions, en plus fine : c'est la meme question a une autre echelle. */
.shopping-line__jauge {
    flex: 1 1 auto;
    height: 5px;
    min-width: 72px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.shopping-line__jauge-barre {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-accent);
}

.shopping-line__jauge-barre--complete { background: var(--grad-green); }

/* Le seul nombre qui commande une action : il est ecrit en toutes lettres, pas seulement colore. */
.shopping-line__manque {
    flex: none;
    min-width: 7rem;
    color: var(--gold-300);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shopping-line__complet {
    flex: none;
    min-width: 7rem;
    color: var(--green-300);
    font-size: .82rem;
    white-space: nowrap;
}

.shopping-line__actions { display: flex; gap: 8px; align-items: center; }

.craft-tree { display: flex; flex-direction: column; gap: 3px; }

/* L'indentation dit la profondeur dans la recette : c'est la seule information de structure de
   l'arbre, donc elle doit rester lisible meme sur les branches profondes. */
.craft-step { position: relative; }

/*
    Un filet vertical par niveau, tire dans la gouttiere d'indentation et courant sur toute la
    hauteur du sous-arbre. Au-dela de deux niveaux, l'indentation seule ne dit plus a quelle
    recette une ligne appartient : l'oeil doit remonter le filet. Le decalage vaut la moitie du
    pas d'indentation de .craft-step__row, sur --depth pose par le markup.
*/
.craft-step::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--depth, 0) * 22px - 11px);
    width: 1px;
    background: var(--line);
}

/* Une racine n'a pas de parent : rien a relier a sa gauche. */
.craft-tree > .craft-step::before { content: none; }

.craft-step__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
    margin-left: calc(var(--depth, 0) * 22px);
    transition: background var(--dur-instant) ease;
}

.craft-step__row:hover { background: var(--surface-hover); }
.craft-step__row--done { opacity: .5; }
.craft-step__row img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.craft-step__name { flex: 1; min-width: 140px; color: var(--cream); font-size: .9rem; }
.craft-step__qty { font-size: .88rem; font-variant-numeric: tabular-nums; }
.craft-step__job { font-size: .8rem; }

/* ---------------------------------------------------------------- adaptation mobile */

@media (max-width: 1080px) {
    .sim-layout { grid-template-columns: 1fr; }
    .sim-side { position: static; }
    .sim-header { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    /* Le portrait passe en bandeau au-dessus : deux colonnes d'emplacements de 120 px chacune
       ne laissent plus rien de lisible entre elles. */
    .paperdoll { grid-template-columns: 1fr 1fr; }
    .paperdoll__figure { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: center; }
    .paperdoll__portrait { max-width: 110px; }
    .paperdoll__trophees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tune { grid-template-columns: minmax(120px, 1fr) 90px 28px; }
    .tune__range-input { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .slot-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
    .sheet-top { grid-template-columns: repeat(3, 1fr); }
    .sheet-stat--life { grid-column: span 3; }
    /* Le pas d'indentation se resserre : le filet le suit, sinon il tombe sous la ligne. */
    .craft-step__row { margin-left: calc(var(--depth, 0) * 12px); }
    .craft-step::before { left: calc(var(--depth, 0) * 12px - 6px); }
    .paperdoll { grid-template-columns: 1fr; }
}

/* La chaine d'apparence composee du build. Repliee par defaut : elle est la pour etre copiee et
   verifiee, pas pour occuper la place du personnage. */
.paperdoll__look { width: 100%; font-size: .78rem; }
.paperdoll__look summary { cursor: pointer; color: var(--gold-400); }
.paperdoll__look code {
    display: block;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .4);
    color: var(--gold-300);
    overflow-wrap: anywhere;
    user-select: all;
}
.paperdoll__look p { margin: 6px 0 0; font-size: .74rem; }

/* ---------------------------------------------------------------- choix de classe en vignettes */

/*
    Les seize portraits, serres et SANS leur nom : on reconnait sa classe au portrait, et le nom
    ecrit seize fois coutait une ligne de texte par vignette pour une information qu'on lit une
    seule fois. Le nom de la classe retenue s'affiche en clair dans la barre juste dessous, et
    chaque vignette garde le sien en infobulle et pour les lecteurs d'ecran.
*/
.breedpick {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.breedpick__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .28);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.breedpick__item img { width: 34px; height: 34px; object-fit: contain; display: block; }

.breedpick__item:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.breedpick__item--on {
    border-color: var(--gold-500);
    background: rgba(1, 130, 249, .14);
}

/* ---------------------------------------------------------------- carte d'objet dans la recherche */

.itemcard {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.itemcard:hover { border-color: var(--gold-500); background: rgba(1, 130, 249, .07); }
.itemcard--on { border-color: var(--green-500); background: rgba(52, 211, 153, .07); }
.itemcard--locked { opacity: .55; }

.itemcard__icon { width: 44px; height: 44px; object-fit: contain; flex: none; }
.itemcard__body { flex: 1; min-width: 0; }

.itemcard__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.itemcard__name { color: var(--cream); font-weight: 600; font-size: .95rem; }
.itemcard__level { font-size: .8rem; }
.itemcard__set { font-size: .78rem; color: var(--gold-400); }

.itemcard__badge {
    font-size: .68rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(52, 211, 153, .18);
    color: var(--green-300);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Les stats en colonnes : une ligne par effet, toutes lisibles d'un coup, sans troncature. */
.itemcard__stats,
.itemcard__delta {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px 14px;
    font-size: .82rem;
}

.itemcard__stats li { color: var(--green-300); }
.itemcard__stats li.is-malus { color: #ff8a7a; }

/* La comparaison avec l'objet porte : c'est sur elle qu'on tranche, donc elle est separee et
   coloree dans les deux sens plutot que melee aux stats brutes. */
.itemcard__delta {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-weight: 600;
}

.itemcard__delta li.is-up { color: var(--green-400); }
.itemcard__delta li.is-down { color: #ff8a7a; }

/* ---------------------------------------------------------------- barre d'arme */

.weaponbar {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(0, 0, 0, .2);
}

.weaponbar--empty { text-align: center; font-size: .88rem; }

.weaponbar__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.weaponbar__head img { width: 42px; height: 42px; object-fit: contain; }
.weaponbar__name { margin: 0; font-weight: 600; color: var(--cream); }
.weaponbar__base { margin: 2px 0 0; font-size: .82rem; }
.weaponbar__target { margin: 10px 0 0; font-size: .78rem; }

.weaponbar__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.wfig {
    text-align: center;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
}

.wfig--main { border-color: var(--line-strong); background: rgba(1, 130, 249, .07); }
.wfig__value { display: block; font-size: 1.05rem; font-weight: 600; color: var(--cream); font-variant-numeric: tabular-nums; }
.wfig--main .wfig__value { color: var(--gold-300); font-weight: 700; }
.wfig__label { display: block; font-size: .7rem; color: var(--muted); letter-spacing: .05em; }

/* Les degats de glyphe ne se cumulent pas avec le coup direct : poser un glyphe ne blesse
   personne au tour ou on le pose. Couleur et libelle distincts pour que la lecture ne les
   confonde pas avec des degats immediats. */
.dmg-glyph { color: var(--gold-300); margin-left: 8px; }
.dmg-line__tag--glyph { background: rgba(1, 130, 249, .16); color: var(--gold-300); }

/* ---------------------------------------------------------------- monture */

/*
    La monture n'a plus de barre a elle : elle occupe la tuile du familier, comme en jeu. La tuile
    s'allonge alors d'une ligne de niveau et d'une liste de bonus — d'ou la grille propre.
*/
.pdslot--mount .pdslot__icon { border-color: rgba(1, 130, 249, .38); }

/* Familiers / Montures : le meme emplacement accueille les deux. */
.picker-mode {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mountpick__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 6px;
}

.mountpick__bar .sim-input { flex: 1 1 220px; }

.mountpick__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.mountpick__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
}

.mountpick__item--on {
    border-color: var(--gold-500);
    background: rgba(1, 130, 249, .08);
}

.mountpick__ident {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mountpick__name { color: var(--cream); font-size: .92rem; }

.mountpick__badge {
    padding: 1px 7px;
    border: 1px solid var(--gold-500);
    border-radius: 999px;
    color: var(--gold-300);
    font-size: .7rem;
}

.mountpick__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    font-size: .82rem;
    color: var(--green-300);
}

.mountpick__stats li.is-malus { color: var(--bad); }

/* ---------------------------------------------------------------- caracteristiques */

.caracs {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(0, 0, 0, .2);
}

.caracs__head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.caracs__head h3 { margin: 0; }

/* Les points restants sont LA donnee du panneau : c'est ce qu'on regarde entre deux clics. */
.caracs__budget {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(1, 130, 249, .08);
}

.caracs__budget-value { font-size: 1.25rem; font-weight: 700; color: var(--gold-300); }
.caracs__budget-label { font-size: .8rem; color: var(--muted); }
.caracs__budget.is-over { border-color: #ff8a7a; background: rgba(255, 138, 122, .1); }
.caracs__budget.is-over .caracs__budget-value { color: #ff8a7a; }

/*
    Deux colonnes des qu'il y a la place. Les caracteristiques ne sont que SIX : en une seule
    colonne elles laissaient les deux tiers de la largeur vides et repoussaient tout le reste de
    la page vers le bas.
*/
.caracs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 4px 12px;
}

/*
    Disposition : TOTAL | nom | [Base] [Parcho] | max.

    Le total ouvre la ligne parce que c'est ce qu'on vient lire ; les deux champs suivent, de
    largeur identique et alignes en colonne d'une rangee a l'autre. La rangee portait auparavant
    six boutons, plus larges que la colonne du total.
*/
.caracs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3px 16px;
}

.caracs__entete {
    display: none;
}

.caracs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.7rem 3.7rem auto;
    gap: 6px;
    align-items: center;
    padding: 3px 6px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
}

.caracs__ident {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

/* Chasse fixe et largeur minimale : les totaux s'alignent sur une verticale nette. */
.caracs__total {
    min-width: 3.2rem;
    text-align: right;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gold-300);
    font-variant-numeric: tabular-nums;
}

.caracs__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--cream);
    font-size: .88rem;
    line-height: 1.2;
}

.caracs__cost {
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Les deux champs partagent EXACTEMENT la meme largeur : c'est ce qui fait la colonne. */
.caracs__champ {
    width: 100%;
    padding: 3px 4px;
    text-align: center;
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}

.caracs__max {
    padding: 3px 7px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--gold-400);
    font: inherit;
    font-size: .7rem;
    cursor: pointer;
}

.caracs__max:hover { border-color: var(--gold-500); color: var(--gold-300); }

.caracs__note { margin-top: 12px; }

/* La feuille de personnage : valeur puis libelle, deux colonnes. */
.sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 2px 12px;
    margin: 0 0 12px;
}

.sheet-cell {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: .84rem;
}

/*
    ⚠ Largeur FIXE, pas une largeur minimale. Avec `min-width`, une valeur plus large que la reserve
    — « 6420 » a quatre chiffres, « 12 % » avec son unite — pousse son libelle vers la droite, et la
    colonne de libelles se met a onduler d'une ligne a l'autre. C'est exactement ce qui rendait
    « Critiques » decale par rapport a « Puissance » juste au-dessus.
*/
.sheet-cell__value {
    flex: 0 0 3.3rem;
    text-align: right;
    color: var(--cream);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/*
    Un libelle NE SE COUPE PAS. « Dommages Neutre », « Dommages Terre », « Dommages Feu » tronques
    a la meme longueur donnaient cinq lignes « Dommag… » qu'on ne pouvait plus distinguer : couper
    un texte n'est acceptable que si ce qui reste identifie encore la ligne.
*/
.sheet-cell__label {
    color: var(--muted);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Le niveau se saisit, il ne se fait plus glisser : on vise une valeur precise.
   `input.` pour la meme raison que `.sim-input--num` ci-dessus. */
input.sim-input--level { width: 92px; text-align: center; font-size: 1.05rem; font-weight: 600; }

@media (max-width: 860px) {
    .caracs__row { grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem; }
    .caracs__max { display: none; }
}

/* ---------------------------------------------------------------- infobulle d'objet porte */

.pdslot { z-index: 0; }

/*
    L'infobulle vit dans la COUCHE SUPERIEURE du navigateur (attribut `popover`, ouvert par
    wwwroot/js/infobulle.js). C'est la seule facon d'echapper aux trois pieges de la page :
      - `.card` porte `overflow: hidden` : toute infobulle plus haute que la carte etait coupee ;
      - `.card:hover` porte `transform` : l'ancetre devient le bloc conteneur des descendants
        `fixed`, donc meme `position: fixed` restait prisonnier ;
      - `.sim-side` est `sticky`, donc un contexte d'empilement dont aucun z-index ne sort.
    En couche superieure, aucune de ces trois regles ne s'applique : pas de rognage, pas de
    contexte d'empilement, et le bloc conteneur redevient la fenetre.

    Les coordonnees sont posees par le script ; tout le reste est ici.
*/
.pdslot__tip,
.ency__tip {
    position: fixed;
    width: max-content;
    max-width: min(24rem, calc(100vw - 16px));

    /* Le popover a des styles par defaut du navigateur (inset: 0, marge auto, bordure, padding) :
       il faut les neutraliser, sinon l'infobulle atterrit au centre de l'ecran dans un cadre. */
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;

    /* Une fiche trop longue defile en elle-meme plutot que de deborder de l'ecran. */
    overflow-y: auto;
    overscroll-behavior: contain;

    opacity: 0;
    transition: opacity .12s ease;

    /*
        L'infobulle ne capte JAMAIS la souris. Posee a cote de sa tuile elle n'est deja pas sous le
        curseur, mais une infobulle transparente aux evenements ne peut, par construction, bloquer
        aucun clic de ce qu'elle recouvre — c'est la seule garantie
        qui tienne quelle que soit la taille de la fiche.
    */
    pointer-events: none;

    /* Repli pour un navigateur sans couche superieure : le z-index reprend alors son role. */
    z-index: 400;
}

/* `popover` masque l'element tant qu'il n'est pas ouvert ; hors couche superieure, c'est cette
   regle qui le masque. Les deux se cumulent sans se gener. */
.pdslot__tip:not(.is-open),
.ency__tip:not(.is-open) {
    display: none;
}

.pdslot__tip.is-open,
.ency__tip.is-open {
    opacity: 1;
}

/* L'ombre portee remplace le lien visuel que la fleche assurait quand l'infobulle etait collee
   a sa tuile : en couche superieure elle flotte, elle doit se detacher du fond. */
.pdslot__tip .tip,
.ency__tip .tip {
    box-shadow: var(--shadow-2);
}

@media (max-width: 860px) {
    /* Sur mobile il n'y a pas de survol : l'infobulle ne se declencherait qu'au focus et
       masquerait la moitie de la fenetre. Le panneau de reglage joue deja ce role. */
    .pdslot__tip { display: none; }
}


/* ── Conditions dans le panneau de reglage ─────────────────────────────────────────────────── */

.tune-conditions {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
}

.tune-conditions--locked {
    border-color: var(--bad-line);
    background: var(--bad-fill);
}

.tune-conditions__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.tune-conditions__badge {
    padding: 1px 7px;
    border: 1px solid var(--bad-line);
    border-radius: 999px;
    background: var(--bad-fill);
    color: var(--bad);
    font-size: .7rem;
    letter-spacing: normal;
    text-transform: none;
}

.tune-conditions__line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
}

.tune-conditions__line--met { color: var(--text); }
.tune-conditions__line--met span:first-child { color: var(--green-400); }
.tune-conditions__line--unmet { color: var(--bad); }
.tune-conditions__line--undetermined,
.tune-conditions__line--unknown { color: var(--muted); }

/* ---------------------------------------------------------------- fenetre de creation */

/*
    La classe se choisit UNE fois, a la creation, dans une fenetre « Creer un stuff ». Elle
    occupait jusqu'ici une bande pleine largeur en permanence dans l'editeur,
    pour un reglage qu'on ne retouche plus une fois le build commence.
*/
.modale {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 20px;
}

/* Un bouton plutot qu'un div : le voile se ferme aussi au clavier. */
.modale__voile {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, .68);
    cursor: pointer;
}

.modale__boite {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--ink-850, #101012);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.modale__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(1, 130, 249, .08);
}

.modale__tete h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.modale__fermer {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .3);
    color: var(--cream);
    cursor: pointer;
}

.modale__fermer:hover { border-color: var(--bad-line); color: var(--bad); }

.modale__corps {
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modale__label {
    display: block;
    margin: 0 0 4px;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.modale__ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.modale__champ { display: flex; flex-direction: column; }
.modale__champ--large { flex: 1 1 240px; }

.modale__plus {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font: inherit;
    font-size: .88rem;
    color: var(--gold-300);
    background: none;
    border: 0;
    cursor: pointer;
}

.modale__chevron { transition: transform .16s ease; }
.modale__chevron--open { transform: rotate(180deg); }

.modale__options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
}

.modale__pied {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

/* Le portrait de la classe dans la barre : il rouvre la fenetre. */
.simbar__identity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.simbar__identity:hover { border-color: var(--gold-500); }
.simbar__portrait { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.simbar__lvl { font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------------- atelier */

/* Le tableau de bord : ce qu'on vient chercher en ouvrant l'atelier. */
.atelier__bilan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-subtle);
}

.atelier__chiffre { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }

/* Quatre chiffres qui se comparent : chasse tabulaire obligatoire, sinon le « 1 » decale la
   colonne d'un rafraichissement a l'autre et le bilan a l'air de sauter. */
.atelier__chiffre strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
}

.atelier__chiffre span {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
}

.atelier__chiffre--manque strong { color: var(--bad); }
.atelier__chiffre--ok strong { color: var(--green-300); }
.atelier__bascule { margin-left: auto; }

/* Le cout est la seule donnee chiffree restee dans l'en-tete de la carte. */
.atelier__cout { font-variant-numeric: tabular-nums; }

.atelier__zone { margin-bottom: 18px; }

.atelier__zone-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.atelier__zone-tete h4 { margin: 0; font-size: .95rem; color: var(--cream); }

/* La jauge dit d'un coup d'oeil quelle region est presque bouclee. */
.atelier__jauge {
    flex: 1 1 auto;
    height: 6px;
    min-width: 60px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.atelier__jauge-barre {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-accent);
}

/* Une region bouclee passe au vert : c'est un acquis, plus un avancement. */
.atelier__jauge-barre--complete { background: var(--grad-green); }

.atelier__zone-pct { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/*
    Une ressource reunie reste lisible mais s'efface : elle ne doit plus attirer l'oeil. Une
    barre verte a gauche plutot qu'un fond vert — repete sur des dizaines de lignes, un fond
    colore devient le sujet de la page alors qu'il ne dit qu'« affaire classee ».
*/
.shopping-line--ok { opacity: .55; box-shadow: inset 2px 0 0 var(--green-500); }

/* Ce qu'il reste a ramasser dans la region, a cote du pourcentage : « 90 % » sur 5 000 cuirs,
   c'est encore 500 a trouver, et c'est ce nombre-la qui decide ou aller. */
.atelier__zone-reste {
    flex: none;
    color: var(--muted);
    font-size: .76rem;
    white-space: nowrap;
}

/* ------------------------------------------- ce que le plan FABRIQUE en chemin */

/*
    Decomposer un ingredient le faisait DISPARAITRE de la liste : il passait de « a ramasser » a
    « fabrique », et ses propres ingredients allaient se ranger dans d'autres regions, plus bas,
    souvent hors de l'ecran. Le bouton ne faisait donc, visiblement, qu'effacer la ligne sur
    laquelle on venait de cliquer. L'objet reste desormais affiche, dans sa section, et sa recette
    lui est ACCROCHEE dessous par un filet : on voit d'ou sortent les lignes qui viennent
    d'apparaitre.
*/
/* L'aide passe sous le titre plutot que de se comprimer : une phrase serree entre deux
   elements devient illisible bien avant d'etre courte. */
.atelier__zone-aide { flex: 1 1 22rem; font-size: .76rem; }

.craft-group { border-bottom: 1px solid var(--line); }
.craft-group:last-child { border-bottom: none; }

/* La bordure est portee par le groupe : sur la ligne, elle serait passee ENTRE l'objet et sa
   propre recette, c'est-a-dire a l'endroit exact ou il ne faut pas couper. */
.craft-group .shopping-line { border-bottom: none; }

/* Un filet dore, pas un fond : repete sur dix lignes, un aplat deviendrait le sujet de la page
   alors qu'il ne dit que « celui-ci, on le fait soi-meme ». */
.shopping-line--craft { box-shadow: inset 2px 0 0 var(--gold-500); }
.shopping-line__source--craft { color: var(--gold-300); font-size: .78rem; }

.craft-parts {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 10px;
    padding: 0 0 0 26px;
    list-style: none;
}

/* Le filet part sous l'icone de l'objet fabrique et court sur toute la hauteur de sa recette. */
.craft-parts::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 10px;
    left: 25px;
    width: 1px;
    background: var(--line);
}

.craft-parts__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 14px;
    border-radius: var(--r-sm);
}

.craft-parts__item:hover { background: var(--surface-hover); }

/* Le coude qui rattache l'ingredient au filet. Sans lui, les lignes flottent a cote du trait. */
.craft-parts__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--line);
}

.craft-parts__item img { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* Le nom ne s'etire PAS : la quantite doit le suivre immediatement. Etire, il poussait le
   « x 24 » a l'autre bout de la ligne, et l'oeil devait traverser le vide pour relier les deux. */
.craft-parts__name {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--cream);
    font-size: .84rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-parts__name:hover { color: var(--gold-300); text-decoration: underline; }

/* Les deux colonnes de droite ne se coupent JAMAIS : un nombre et son libelle sur deux lignes ne
   se lisent plus comme une quantite. */
.craft-parts__qty {
    flex: none;
    color: var(--cream);
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
    L'etat suit la quantite au lieu d'etre pousse a l'autre bout : « Fer x 24, il manque 11 » se
    lit d'un trait. Repousse a droite, l'oeil devait traverser la ligne pour relier un nombre a
    son objet — et la colonne ne s'alignait de toute facon pas sur celle des lignes du dessus,
    dont la jauge est extensible.
*/
.craft-parts__etat {
    flex: none;
    font-size: .76rem;
    white-space: nowrap;
}

.craft-parts__etat--manque { color: var(--bad); }
.craft-parts__etat--ok { color: var(--green-300); }
.craft-parts__etat--craft { color: var(--gold-300); }

@media (max-width: 640px) {
    /* La recette se resserre avec la liste : le filet et le coude suivent, sinon ils tombent
       sous les lignes qu'ils relient. */
    .craft-parts { padding-left: 16px; }
    .craft-parts::before { left: 15px; }
}

/* ---------------------------------------------------------------- classement des armes */

.armes__filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.armes__liste { display: flex; flex-direction: column; gap: 4px; }

.armes__ligne {
    display: grid;
    grid-template-columns: 2rem auto minmax(0, 1fr) repeat(3, 4.6rem) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .02);
}

.armes__ligne--on { border-color: var(--gold-500); background: rgba(1, 130, 249, .08); }

.armes__rang {
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: .84rem;
}

.armes__icone { width: 40px; height: 40px; object-fit: contain; }

.armes__ident { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.armes__nom { color: var(--cream); font-size: .9rem; }
.armes__meta { font-size: .72rem; }

/* Une condition non satisfaite doit se voir : sinon le classement ment par omission. */
.armes__conditions { font-size: .72rem; color: var(--bad); }

.armes__score { display: flex; flex-direction: column; text-align: right; line-height: 1.15; }
.armes__score strong { color: var(--gold-300); font-variant-numeric: tabular-nums; }
.armes__score span { font-size: .66rem; color: var(--muted); }

/* Les deux colonnes secondaires disparaissent avant que la ligne ne se casse. */
@media (max-width: 1100px) {
    .armes__ligne { grid-template-columns: 2rem auto minmax(0, 1fr) 4.6rem auto; }
    .armes__score--menu { display: none; }
}

/* ---------------------------------------------------------------- arme en cours */

/*
    L'arme AVANT les sorts, et detachee du reste. C'est le coup qu'on tape le plus souvent et le
    seul qui ne coute rien ; elle etait noyee dans un bloc de la meme couleur que la grille des
    sorts, juste sous le recapitulatif de tour.
*/
.arme-active {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--gold-500);
    border-radius: var(--r);
    background: linear-gradient(180deg, rgba(1, 130, 249, .1), rgba(0, 0, 0, .18));
}

.arme-active__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.arme-active__icone { width: 46px; height: 46px; object-fit: contain; flex: none; }
.arme-active__ident { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.arme-active__quoi {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gold-300);
}

.arme-active__nom { font-family: var(--font-display); font-size: 1.05rem; color: var(--cream); }
.arme-active__meta { font-size: .76rem; }

.arme-active__chiffres { display: flex; gap: 18px; margin-left: auto; }
.arme-active__score { display: flex; flex-direction: column; text-align: right; line-height: 1.15; }
.arme-active__score strong { font-size: 1.05rem; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.arme-active__score span { font-size: .68rem; color: var(--muted); }

/* ---------------------------------------------------------------- apercu des builds enregistres */

.saved { display: flex; align-items: center; gap: 12px; }
.saved__body { flex: 1 1 auto; min-width: 0; }

.saved__breed {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .3);
}

/* La rangee de pieces portees : c'est elle qui distingue deux builds du meme nom. */
.saved__stuff { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }

.saved__stuff img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: var(--r-xs);
    background: rgba(0, 0, 0, .28);
}

/* Les PA du tour, fixes : ce sont ceux du build, il n'y a rien a regler. */
.turn__ap-fixe {
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    color: var(--gold-300);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* Les exos PA / PM / PO, sur la case — comme dans le jeu. */
.pdslot__exo {
    position: absolute;
    top: 3px;
    left: 3px;
    padding: 0 3px;
    border-radius: var(--r-xs);
    font-size: .56rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .02em;
    color: #0B0B0C;
}

/* Decalees quand il y en a plusieurs : elles ne peuvent pas se superposer. */
.pdslot__exo--pm { left: 22px; }
.pdslot__exo--po { left: 41px; }

.pdslot__exo--pa { background: #7fd1ff; }
.pdslot__exo--pm { background: #7ce08a; }
.pdslot__exo--po { background: #0182F9; }

/* ---------------------------------------------------------------- eternelle moisson */

/*
    Six cent trente-six ames, trois etats, une seule question : qu'est-ce qui m'attend en reserve.
    Tout ce qui suit ne sert qu'a rendre ces trois etats lisibles a six cents exemplaires.
*/

.moisson__entete { margin-bottom: 16px; }

/* Le nom reel de la quete. Le titre de la page, lui, ne bouge jamais. */
.moisson__quete { margin-bottom: 6px; }
.moisson__chapo { margin: 0; font-size: .9375rem; }

/* Le serveur suivi : la moisson vit dans la base d'un serveur, un nom ne se coupe jamais. */
.moisson__serveurs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.moisson__serveurs-label { font-size: .84rem; color: var(--muted); margin-right: 4px; }
.moisson__serveurs .chip { white-space: nowrap; cursor: pointer; }
.moisson__serveurs .chip:not(.chip--on):hover { color: var(--cream); border-color: var(--line-strong); }

/* Les quatre compteurs reprennent la bande de statistiques du site. */
.moisson__compteurs { margin-bottom: 14px; }
.moisson__compteurs .moisson__compteur--rendu { color: var(--green-300); }
.moisson__compteurs .moisson__compteur--tenu { color: var(--gold-300); }

/* N'avoir rien capture n'est pas une faute : ce chiffre-la ne s'alarme pas. */
.moisson__compteurs .moisson__compteur--manque { color: var(--muted); }

.moisson__jauge {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.moisson__jauge--petite { height: 5px; flex: 1 1 60px; min-width: 50px; }
.moisson__jauge-barre { display: block; height: 100%; border-radius: inherit; background: var(--grad-accent); }
.moisson__pct { margin: 8px 0 0; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.moisson__avis { margin: 14px 0 0; }
.moisson__pas-commencee { margin: 14px 0 0; font-size: .9375rem; }

/*
    Barre de filtres collante : sur six cent trente-six ames on redescend aux filtres apres
    chaque etape depliee. Elle passe au-dessus de la liste, jamais au-dessus de l'en-tete du site.
*/
.moisson__filtres {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(16, 16, 18, .88);
    backdrop-filter: blur(12px) saturate(140%);
}

.moisson__filtres .btn { margin-left: auto; }

/*
    Une etape est une ligne de liste, pas une carte : elle ne se souleve pas, elle ne s'entoure
    pas d'une ombre. Seul le fond de sa ligne de tete change au survol.
*/
.moisson__etape {
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--dur-fast) ease;
}

.moisson__etape--courante {
    border-color: var(--accent-line);
    box-shadow: inset 2px 0 0 var(--accent);
}

.moisson__etape-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: inherit;
    cursor: pointer;
    list-style: none;
    transition: background var(--dur-instant) ease;
}

.moisson__etape-tete::-webkit-details-marker { display: none; }
.moisson__etape-tete:hover { background: var(--surface-hover); }

/* Le filet d'accent de l'etape courante est une ombre interne : la ligne de tete, qui prend
   un fond au survol, la recouvrirait. On la repose donc sur elle. */
.moisson__etape--courante > .moisson__etape-tete { box-shadow: inset 2px 0 0 var(--accent); }

.moisson__etape[open] > .moisson__etape-tete {
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: 1px solid var(--line);
}

.moisson__etape-rang {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
}

.moisson__etape-compte { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.moisson__etape-tenu { color: var(--gold-300); }

.moisson__chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform var(--dur-fast) var(--ease-out);
}

.moisson__etape[open] .moisson__chevron { transform: rotate(180deg); }

.moisson__badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-subtle);
    font-size: .7rem;
    font-weight: 500;
    color: var(--muted);
}

.moisson__badge--ok { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .4); color: var(--green-300); }
.moisson__badge--courante { background: var(--accent-soft); border-color: var(--accent-line); color: var(--gold-300); }

.moisson__autres {
    margin: 12px 16px 14px;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--text);
}

.moisson__autres li { position: relative; padding-left: 18px; }
.moisson__autres li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold-300); }
.moisson__autres + .moisson__ames { margin-top: 0; }

/*
    Les ames en grille dense : elles sont vingt par etape et six cent trente-six au total. En liste
    verticale, la page ferait quinze ecrans de haut et on ne verrait jamais une etape entiere.
*/
.moisson__ames {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 12px;
    margin: 12px 16px 14px;
}

.moisson__ame {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: .8125rem;
}

.moisson__ame-marque { flex: none; width: .9rem; text-align: center; }
.moisson__ame-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rendue : acquis, definitif — le vert du site, celui du gain. */
.moisson__ame--rendue {
    color: var(--green-300);
    background: rgba(52, 211, 153, .08);
    border-color: rgba(52, 211, 153, .18);
}

/* En reserve : c'est CE qui appelle une action, donc c'est ce qui doit sauter aux yeux. */
.moisson__ame--tenue {
    color: var(--gold-300);
    background: var(--accent-soft);
    border-color: var(--accent-line);
    font-weight: 600;
}

/* Absente : il n'y a rien a en faire tant qu'elle n'est pas capturee. Elle reste en retrait. */
.moisson__ame--manquante { color: var(--muted); background: transparent; }

@media (max-width: 640px) {
    .moisson__filtres { gap: 8px 14px; }
    .moisson__filtres .btn { margin-left: 0; }
    .moisson__autres,
    .moisson__ames { margin-inline: 12px; }
}


/* ================================================================ encyclopedie : tableau d'objets

   La vue en TABLEAU de la recherche sans emplacement. Deux cents fiches de trois lignes obligent a
   faire defiler pendant vingt secondes pour comparer deux nombres qu'une colonne met l'un sous
   l'autre : ici on cherche a CLASSER, la fiche complete reste a un survol de distance.
*/

.ency {
    /*
        Le tableau defile dans SA boite, dans les DEUX sens : sans `overflow-x` une colonne de plus
        sur un ecran etroit pousserait tout le gabarit du site en largeur, et sans une hauteur
        BORNEE l'en-tete colle des `th` ne servirait a rien — il n'y a de « colle » que s'il existe
        un conteneur qui defile verticalement. Deux cents lignes sans en-tete visible, ce sont deux
        cents nombres dont on ne sait plus de quelle caracteristique ils parlent.
    */
    overflow: auto;
    max-height: 62vh;
    overscroll-behavior: contain;
}

.ency__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.ency__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .35rem .5rem;
    background: var(--ink-850);
    border-bottom: 1px solid var(--line-strong);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.ency__table td {
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.ency__table tbody tr:hover td { background: rgba(255, 255, 255, .03); }

.ency__th-num,
.ency__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ency__num { color: var(--cream); font-weight: 600; }

/* Un zero n'est pas une valeur, c'est une absence : il ne doit pas peser autant qu'un nombre. */
.ency__num--nil { color: var(--muted); font-weight: 400; }

.ency__th-act { width: 1%; }
.ency__act { text-align: right; white-space: nowrap; }

.ency__name { position: relative; min-width: 14rem; }

.ency__ident {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.ency__icon {
    flex: none;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.ency__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.ency__title {
    color: var(--cream);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ency__set {
    color: var(--gold-400);
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ency__type { color: var(--muted); white-space: nowrap; }

/* Deja porte : la ligne se signale, mais discretement — elle reste un resultat de recherche. */
.ency__row--worn td { background: var(--accent-soft); }
.ency__row--worn .ency__title { color: var(--gold-300); }

/* Hors niveau : lisible, mais en retrait. Le simulateur sert aussi a preparer un stuff qu'on ne
   peut pas encore porter, donc on ne masque rien. */
.ency__row--over .ency__title,
.ency__row--over .ency__num { opacity: .55; }

/*
    ⚠ L'infobulle de ligne partage les regles de `.pdslot__tip` (plus haut), et ce n'est pas une
    economie de style : le script attend un element `position: fixed` dont il ecrit `top` et `left`.
    Ecrite a part, sans position, elle recevait les valeurs par defaut du popover — `inset: 0` et
    marges automatiques — et s'affichait AU CENTRE DE L'ECRAN au lieu de suivre la ligne survolee.
    La regle `:not(.is-open) { display: none }` est du meme lot : c'est elle qui la masque sur un
    navigateur sans couche superieure.
*/

@media (max-width: 720px) {
    /* Le type disparait avant le reste : il se lit deja dans le nom pour l'essentiel, et c'est la
       colonne la plus large. */
    .ency__type,
    .ency__table th:nth-child(3) { display: none; }
}


/* ================================================================ fiche d'objet (/grimoire/objet)

   Deux colonnes : la carte de l'objet a gauche — la MEME que dans le selecteur, donc rien de
   nouveau a apprendre — et tout ce qui ne tient pas dans une infobulle a droite : le prix, la
   recette avec ses ingredients nommes, les monstres, la panoplie entiere.
*/

.itempage__fil {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 12px;
    font-size: .82rem;
}

.itempage {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.itempage__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.itempage__actions { display: flex; gap: 8px; }
.itempage__actions .btn { flex: 1 1 auto; }

.itempage__bloc { padding: 14px 16px; }

.itempage__h {
    margin: 0 0 10px;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1.02rem;
}

.itempage__h3 {
    margin: 12px 0 6px;
    color: var(--gold-300);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.itempage__h3:first-of-type { margin-top: 0; }

.itempage__faits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.itemfait { display: flex; flex-direction: column; gap: 2px; }

.itemfait__val {
    color: var(--cream);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.itemfait--main .itemfait__val { color: var(--gold-300); font-size: 1.3rem; }
.itemfait__val--nil { color: var(--muted); font-weight: 400; }

.itemfait__lab {
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.itempage__note { margin: 12px 0 0; font-size: .82rem; }

.itempage__note--custom {
    padding: .35rem .6rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--gold-300);
}

/* ---- recette ---- */

.itemrecette { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.itemrecette__ligne {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .18rem .3rem;
    border-radius: var(--r-xs);
}

.itemrecette__ligne:hover { background: rgba(255, 255, 255, .03); }

.itemrecette__qte {
    flex: none;
    min-width: 2.4rem;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.itemrecette__icone { flex: none; width: 24px; height: 24px; object-fit: contain; }
.itemrecette__nom { flex: 1 1 auto; min-width: 0; }
.itemrecette__niv { flex: none; font-size: .76rem; }

/* ---- butin ---- */

.itemdrops { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }

.itemdrops__nom {
    padding: .1rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-size: .78rem;
}

/* ---- panoplie ---- */

.itemset { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.itemset__piece {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .18rem .3rem;
    border-radius: var(--r-xs);
}

.itemset__nom { flex: 1 1 auto; min-width: 0; }

/* La piece qu'on regarde : elle ne se lie pas a elle-meme, et se signale dans la liste. */
.itemset__piece--on { background: var(--accent-soft); }
.itemset__piece--on .itemset__nom { color: var(--gold-300); font-weight: 600; }

@media (max-width: 900px) {
    .itempage { grid-template-columns: minmax(0, 1fr); }
}